First of all I'm assuming that to read this tutorial you have some basic familiarity with mysql (that is you know it's a database, you know what phpmyadmin is or have used some sort of db management studio, you have access to one) and that you have a webserver installed locally or somewhere on the net.
We will create a database table that will contain our member information.
We will use server-side script to talk to the database, in this case php since it is more commonly available in linux systems
We will use AJAX plugin to access the server-side script in the form of a GET request.
First to create the table, you will need to run this on a mysql management studio like phpmyadmin.
CREATE TABLE `mydatabase`.`members` (
`id` int( 11 ) NOT NULL AUTO_INCREMENT ,
`username` varchar( 30 ) NOT NULL ,
`email` varchar( 50 ) NOT NULL ,
`password` varchar( 128 ) NOT NULL ,
PRIMARY KEY ( `id` ) ,
UNIQUE KEY `username` ( `username` )
) ENGINE = MYISAM DEFAULT CHARSET = utf8;
Now we have the table that stores our member information. Please note that I'm not using encryption to keep things simple or sanitizing sql apart from removing the extra ' I've intentionally added. It is highly recommended to encrypt the password if you are going to use this in production environment.
Now lets add some login information.
INSERT INTO `members`(`username`, `email`, `password`) VALUES ('myuser','email@example.com','mypassword')
To access the database we will be using an intermediate php script that we will call with the AJAX plugin so as to protect our database.
Upload the following script and save it as login.php on your web server.
$username = $_GET['fname'];
$password = $_GET['fpass'];
// Check connection
echo "Failed to connect to MySQL: " . mysqli_connect_error();
$qz = "SELECT id FROM members where username='".$username."' and password='".$password."'" ;
$qz = str_replace("\'","",$qz);
$result = mysqli_query($con,$qz);
while($row = mysqli_fetch_array($result))
On the third line you will see the connection information
mysql is ussually localhost in most web servers
Do change as necessary to be able to connect to your database.
If you have issues accessing your web server from other sites add on first row header('Access-Control-Allow-Origin: *');
so the first line would change to
<?php header('Access-Control-Allow-Origin: *');
Now let's go to Construct 2
We will need to add to our project
three global variables
Now we will need to add to our Layout two "Text Box" plugins
let's call them Username and Password for easier reference.
Also let's add a "button" to use for the authentication event.
Let's name this button Login.
Now to access our php script we will use the "AJAX" plugin so add this to your project.
To make the user have to fill in something before clicking Login we will set the Login button to start as disabled (Do this using the attributes section, after clicking on "Login" to your left).
First thing to do is to use the text boxes to fill our global variables.
Add an event for each of the Text Boxes on text changed
event Username On text Changed
action System Set Username to Username.Text
To accomplish a simple check on the user filling the two variables, we can add an event checking if any of them are equal to nothing.
So add an event in the form of
System Username = ""
System Password = ""
Set Login Disabled
Now the user is unable to click the Login button unless the two variables have something in there.
Now add an else event to enable the Login button (use right click to accomplish that)
action Set Login Enabled
Now we need to add the AJAX request to get the login authenticated. We will use the Login button to accomplish that. So add now an event for the Lgin button.
event Login On clicked
action AJAX Request Tag "Login" URL "http://mydomain.com/login.php?fname='"&Username&"'&fpass='"&Password&"'"
Change the path according to where you uploaded the php script.
Now we need to get the login info back
So add an event in the form of
AJAX on "Login" Completed
System Set UserID to AJAX.Lastdata
Now we need to have a trigger running once for each chane to check if we got a valid reply and cleanup our layout
System Trigger Once
and we now have the UserID back and made sure the user has been authenticated against our database.
Your event sheet should look something like this