Create a login system using PHP and Action Script 3.0

In this tutorial you will learn how to create a login system with Adobe Flex and PHP. It’s quite basic but really, you have to know how to use Adobe Flex and familiar with the codes also and one more thing, try and get a soda maybe a coffee or water and if you dont have any..hmmmm, cos its kinda of long.

Lets Get Started

Lets start out by creating a new project. You can name yours whatever you wish, I named mine “Login System”.

Now that we have created a new project, let’s start by adding some simple panels to hold our content.

Drag a Panel onto the canvas and under Flex Properties, give it a title, say “Login System”. Now scroll down, Flex Properties->Layout, set the following contraints:

Now we have a panel setup! The next step is adding some labels and text input boxes, and a button.

Drag and drop a few labels and text input boxes. Now lets go back and edit their properties. You can change the text of the labels to Username and Password, no need to assign them labels for now. However, you do need to assign the text input boxes id’s. Name the first text box “username” and the second one “password”.

Almost done with the sign in form, just one more step, the submit button! Drag a button onto the canvas and change the text and ID to “Submit”.

Now you should have a fully complete form that looks like this:

Okay so we”re done with the easy part, here comes the other part. If you’re not too familiar with programming in Flex then you might have to read few tutorials on it but if you have some experience you should be set. I’ll try to make it as descriptive as possible.

Let’s start by creating a simple web request that will send the form data to the PHP file

<mx:HTTPService

id="login_user"

result="checkLogin(event)" //This is the function that will be called after a result comes

method="POST"

url="localhost/www/flex/login.php"

useProxy="false">

<mx:request xmlns="">

<username>{username.text}</username>

<password>{password.text}</password>

</mx:request>

</mx:HTTPService>

Explanation:

Creating a web request is rather simple in Flex. All you have to do is call the command and throw in the right parameters and you’re set!

Some of the more important parameters are the id, method, and obviously, the url. The id is the unique name given to the service and is used to call the service later in the script. The method is the way the service communicates with the PHP script. You can use either the GET or POST method, but I choose POST. Lastly, setting useProxy to true or false specifies whether to use the Flex proxy service or not.

After we setup the service, we setup the request. This tells the service what to send to the script. If you changed the name, you would have to change it in your PHP script too. {username.text} simply means that the value of $_POST[“username”] will be the value of the text in the username field of the GUI(what the user has entered). Same goes for the password. (hope you are getting this…)

The next thing to do is tell the submit button what to do when it is pressed. Under the submit buttons properties (Flex Properties->On click:), type in the following: login_user.send();

This tells it to send an http request to the login script.

Once the service has finished executing, a function named “checkLogin” will be called.
here is the code :

<mx:Script>

<![CDATA[

private function checkLogin(evt:ResultEvent):void

{
  if(evt.result.loginsuccess == "yes")

  {

  currentState = "Logged In";

  }

  if(evt.result.loginsuccess == "no")

  {

    mx.controls.Alert.show("Invalid username/password");

  }    

}

]]>

</mx:Script>

I hope you are familiar with action script 3.0. If not then you have to read through that also. In fact, you need to know that before getting to write basic functions like this.

All this function does is check if the login was successful or not! To see the result of the request, we use “login_user.lastRequest”. You cannot pass a variable directly from PHP to Flex so you must output it as XML and then parse it through Flex. confused???, Once we write the PHP script, all this will become clear, I promise!

If the result of the request was successful, then the script returned “yes”, then we change the current state to “Logged In”. View States is a really nice feature of Flex. You can think of them as different pages on dreamweaver, but all in one application. We’ll create the Logged In View State right after the PHP script, so you don’t get too confused.

However, if the result was “no”, Flex pops up an alert box (just like a JavaScript alert) saying that the username/password entered was wrong. And that’s it for the function!
Now we create the PHP script:
The PHP script is a simple script that queries the database with the details provided to see if the user is real or not, and the outputs the result in XML.

Let me clear this out, XML is a language flex or flash understands as well as other programming languages, we can call it an output converter from flex to other languages. XML was designed to transport and store data.
hope you are enjoying this

The PHP code

<?php

    define( "DATABASE_SERVER", "localhost" );

    define( "DATABASE_USERNAME", "user" );

    define( "DATABASE_PASSWORD", "pass" );

    define( "DATABASE_NAME", "flex" );

    //connect to the database

    $mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD) or die(mysql_error());

    //select the database

    mysql_select_db( DATABASE_NAME );

    //asign the data passed from Flex to variables

    $username = mysql_real_escape_string($_POST["username"]);

    $password = mysql_real_escape_string($_POST["password"]);

    //Query the database to see if the given username/password combination is valid.

    $query = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";

    $result = mysql_fetch_array(mysql_query($query));

    //start outputting the XML

    $output = "<loginsuccess>";

    //if the query returned true, the output <loginsuccess>yes</loginsuccess> else output         <loginsuccess>no</loginsuccess>

    if(!$result)

    {

    $output .= "no";

    }else{

    $output .= "yes";

    }

    $output .= "</loginsuccess>";

    //output all the XML

    print ($output);

?>

Am sure this so simple and straight forward.

The last stage its the View States and Special Effects.

This is quite easy. In the upper right hand corner of Flex, you should see a box that says States, and it should have one state((start)) in it. Right click somewhere in that box and click “New State…”:
Now that you have created a new state, set the panel width and height to 95% and the title to “Members Section” or whatever you want. Now delete all the stuff inside the panel (the labels, text inputs etc.) so you have a clean panel.

That’s the end of it. Hope you enjoyed this tutorial, and please feel free to ask any questions in the discussions segment or just leave a comment!

Resources

Download Source

Leave a Reply

Your email address will not be published. Required fields are marked *