How do I make a button go to a url?

Post reply
0 favourites
  • 15 posts
From the Asset Store
Game Button Sound
$10 USD
J-BoB Game Button Sound Pack comes with 300 high-quality sound effects
jbobsound's avatar
jbobsound

  • Hi guys, I am still a newb with Construct, but I've put together a math game which you can see here: play.mathfactsmatter.com

    It is supposed to let the user submit their score to a high score chart that I have built using PHP, MySQL, and WordPress.

    I have the game generate a series of variables that it puts in the URL. The special page I made then takes it and stores it in the database and presents a form to collect their information, but the problem is that the browser seems to be blocking the URL without giving any sort of warnings or anything.

    What happens is you go through, play the game, then click the button to submit your score. It is supposed to go to a special form I have made outside of Construct 3 but on the same subdomain.

    What I'm finding it does in Chrome on both mobile and desktop is that it doesn't go to the URL and instead it just reloads the page or restarts the game losing the score information.

    I did a bunch of searching and found someone saying somewhere in the forum to create a form button and set the opacity to 0 over where they are supposed to click.

    I tested it on my phone in the DuckDuckGo browser and it worked fine but in Chrome it doesn't work. I haven't tested all the browsers yet, but Chrome is the most important one to work since it's the most widely used one.

    I have tried attaching different events to it individually and in an OR block. I've tried just having a click event on the button. So far no luck.

    Here's what I currently have it set to.

    Is there a way to get this thing to work?

  • Might want to check out the Ajax plug

    construct.net/en/make-games/manuals/construct-3/plugin-reference/ajax

    Be aware that cors is a major issue, but shouldn't as difficult if you are within the same domain.

  • Hi Newt, thanks for the suggestion. I was hoping not to have to use AJAX because I'm not super familiar with it and it would involve rewriting a lot of code that I already have done and I really don't have time for that.

    I really just want to pass the variables through the URL because that's what it's set up to do right now. I know it can work and it has before, but not reliably for some reason.

    I did a test yesterday and it started working though I don't know what I did. I have to test it a lot more to see if it's still doing it.

  • If I understand you correctly - newt is correct - use an AJAX call. Here is an example that I used to do basically the same thing.

    Your receiving php page must GET or POST the values being sent and then INSERT in the proper fields that you have set up in your MySQL db. If this is not clear enough, I will follow up with code from my php receiving file so that it is a bit more clear.

  • Oooooh... That helps a lot! I'll try that! Thank you!! This has been driving me crazy for what feels like forever!

  • Hmm.. well I tried it but it doesn't seem to do what I want it to do.

    Here's what I added to my game..

    I set the sprite button to do the AJAX call but it doesn't seem to do anything when I click on it. At least it's not refreshing the page, but it's also not even sending the data to the URL.

    I probably did it wrong.. sorry I'm a newb at this, especially at AJAX.

    But let me clarify.. I don't want to just send data to a URL, I actually want the user to go to the URL to fill out a form. I encode the data before sending it in the URL, then I have the page on the receiving end decode it and process it. I created several protections to prevent cheating and duplicates.. anyway...

    The page I need it to go to is not just any page, it's a special form, it just happens to capture and save the user's score data that it gets via the URL.

    Here's the page I'm trying to send the user to: play.mathfactsmatter.com/save_score.php

    As soon as it loads it saves the score data to the database by pulling the data from the URL, decoding it, sanitizing it, and storing it under a long unique reference number.

    Then it displays the form to get the user's name, etc. When they hit submit, then it adds the user's info to their record in the database.

    From there it redirects them to another page on the primary domain where it looks up their teacher and sends an email to them.

    So one of the crucial parts of this is getting the user from the game to that page.

    To get it to work, I had read on another forum post that I can use a form button with the opacity set to 0 and that the user has to click on it for the URL to open.

    So I did that and I did have it working at some point, but it was refreshing the page when the enter key was pressed (even though I didn't have any events attached to that) and the URL wasn't loading every single time.

    I ended up changing some things trying to fix it and now it won't work at all and I don't know why.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • I will try to do a sample based on your form page (including php files) and zip up for you - but it will be later tomorrow if thats okay?

  • Oh ok, that would help a lot. I really appreciate it! Thank you!

  • OK This is a working version:

    1) Created simple form with text input objects

    2) Created events that pass variable in a php URL using the Ajax object

    I included screenshots of the:

    - Form

    - Event sheet

    - Php code

    - MySQL table structure

    I tested and all works.

    I kept it simple. You will have to populate the variables based on your form and their final score.

    Form:

    Events:

    PHP:

    MySQL Table:

    Cheers!

  • Ajax is your only real option for working with PHP. The Browser go to url is designed to open web pages, not pass query strings with Get or Post.

    Go to URL

    "Navigate to a given URL. Note this uses the same window/tab as is showing the HTML5 game, so this action will end the game. The Target can be used to select which frame to redirect, which is only useful if the game is displayed within a frame (e.g. an iframe embed), and the frame has permission to redirect the parent "

    Here's the basic PHP CORS header that I use. It attempts to get a HTTP_ORIGIN from several possible sources. It then compares that origin to two URI's I have plugged in and accepts incoming AJAX requests from them (the host website and the preview editor). I modify this to whatever use I need and then 'include' it in any PHP files I'm making for the current project.

    A lot of people will simply put in:

    header("Access-Control-Allow-Origin: *");

    which allows anyone and everyone to access the php file. Since this is for a game and people will find ways to cheat/hack, this solution keeps that under control while allowing it to be expandable to more than one requester.

    The Allow-Methods describe what the AJAX requester can or cannot do. In my example, they can GET. You can find other options here:

    developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods

    Another thing it does is creates a small txt file in the same directory with the URI of the last request that came in. That way, you can test it from different sources and see what the origin is. 

    error_reporting(-1); // reports all errors
ini_set("display_errors", "1"); // shows all errors
ini_set("log_errors", 1);
ini_set("error_log", "php-error.log");

$http_origin = NULL;
if (array_key_exists('HTTP_ORIGIN', $_SERVER)) {
 $http_origin = $_SERVER['HTTP_ORIGIN'];
} else if (array_key_exists('HTTP_REFERER', $_SERVER)) {
 $http_origin = $_SERVER['HTTP_REFERER'];
} else {
 $http_origin = $_SERVER['REMOTE_ADDR'];
}

$myfile = fopen("origin.txt", "w") or die("Unable to open file!");
$txt = $http_origin;
fwrite($myfile, $txt);
fclose($myfile);

//No origin found, die gracefully
if (!isset($http_origin)) {
 die();
}

if ($http_origin == "https://preview.construct.net" || $http_origin == "https://www.mywebsite.com") {
 header("Access-Control-Allow-Origin: $http_origin");
 header('Access-Control-Allow-Methods: "GET"');
}

    One of the handiest things you can do when working with AJAX is to run in debug mode and keep watch on the Ajax.lastdata. That will show you the last information sent back by the website you're making requests to.

    Ajax and CORS is designed to limit who has access to the PHP file. If you're going to be transferring data via GET or POST, and then stuffing it into MySQL, which is very susceptible to injection and cross site scripting, you really want to know and limit who's accessing that PHP file.

    A quote to live by:

    "Writing software is easy. Making it idiot proof is nearly impossible."

  • OK This is a working version:

    Suggestion. Either use real_escape_string before doing a query

    php.net/manual/en/mysqli.real-escape-string.php

    or use the PHP prepare:

    php.net/manual/en/mysqli.prepare.php

    I realize this was just a basic example but it's a good habit to present even when demonstrating the basics.

  • Oh... I see what you're trying to do. You're trying to pass POST parameters to a URL AND open that page in the browser so that you can add the scores and player info.

    I don't even know if that's possible. You may be able to do that by opening the page in an IFrame inside the game but I've never attempted to pass a query that way.

    My initial thoughts would be to incorporate the save_score.php form into the Construct project and then pass the data from that form to a php that adds the data to the MySQL database via Ajax and either returns a success or failure.

  • My initial thoughts would be to incorporate the save_score.php form into the Construct project and then pass the data from that form to a php that adds the data to the MySQL database via Ajax and either returns a success or failure.

    I agree (see above example)

  • Thank you nettemple and Fengist! I greatly appreciate your help in trying to solve this problem. And many thanks for the code samples and examples as that helps a lot!

    I'm working on trying to create the form inside Construct and posting the data to the database via AJAX, as that does indeed seem the only way to do it.

    Thank you again!!

  • Thank you nettemple and Fengist! I greatly appreciate your help in trying to solve this problem. And many thanks for the code samples and examples as that helps a lot!

    I'm working on trying to create the form inside Construct and posting the data to the database via AJAX, as that does indeed seem the only way to do it.

    Thank you again!!

    Glad to help.

    For the record, there is another way this could be done but you seem to be short on time.

    There is a plugin called HTMLElement that allows HTML pages to be brought into Construct, displayed and information exchanged between the HTML and Construct. Incorporating the form is still going to be your quickest and easiest solution as HTMLElement is not terribly intuitive to learn, would require reworking a lot of the HTML on the form to include special codes, reworking the CSS and loading that into Construct and some new PHP scripts.

    If you plan on doing much more work like this, it may be worth your time to learn that plugin as the power it extends to Construct to display HTML is pretty powerful.

    BTW, great looking site and game.

Post reply
  • 15 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)