Simple Login using a MySQL database

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','myemail@domain.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.

    <?php
    $username = $_GET['fname'];
    $password = $_GET['fpass'];
    $con=mysqli_connect("mysql","database_user","database_password","mydatabase");
    // Check connection
    if (mysqli_connect_errno())
      {
      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))
      {
      echo $row['id'];
      }
    mysqli_close($con);
    ?>

On the third line you will see the connection information

    [i]$con=mysqli_connect("mysql","database_user","database_password","mydatabase");[/i]

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

Username (text)

Password (text)

UserID (number)

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

ie

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 = ""

or

System Password = ""

action

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)

event else

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

event

AJAX on "Login" Completed

action

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

event

System UserID>0

System Trigger Once

action

Login Destroy

Password Destroy

Username Destroy

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

  • 1 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • Hi! Where in my webserver should i upload the php file? public_hmtl? cgi-bin?