Create a login system with Flex and PHP

Introduction:

In this tutorial you will learn how to create a login system with Adobe Flex and PHP. It"s quite basic, but you should have a general knowledge of both Flex and PHP to begin with.

What we"re going to be using:

Adobe Flex
-View States
-Transitions
-Web Requests
PHP
-Login the User
Coffee
-This tutorial is long!

Alright lets get started! 

Part 1 - Creating the GUI

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 and you should have something that looks like this:

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:

That"s it for Part 1!

Part 2 - Programming the GUI 

Okay so we"re done with the easy part, here comes the tricky part. If you"re not too familiar with programming in Flex then you might have to read a few lines over 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="http://www.vipercreations.com/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 <mx:HTTPService> 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 <username> to <user_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.

Not too hard, right?

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. 

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

Explanation:
This isn"t as bad as it looks . After we tell Flex that we"re writing some code (typing in <mx:Script>), we create our custom function called checkLogin();. 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. Once we write the PHP script, all this will become clear, I promise!

If the result of the request was successful, the the script returned "yes", then we change the current state to "Logged In". View States is a really nice feature of Flex. Think of them as different pages, 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!

That pretty much sums up Part 2, we"ll be adding a bit more to this later on in Part 4. Now we must create the PHP script.

Part 3 - The PHP Backend 

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.

[php]<?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);

?>[/php]

Explanation:

Again, if you have some background in PHP this should be extremely basic stuff. I"ve commented most of the code so you should be able to understand it. 

After connecting to the MySQL database, we query the db to see if the given details(username and password) are valid ones. If so, we output it as XML (<loginsuccess>yes or no depending on whether or not the operation was successful) and Flex then reads it.  

Earlier in this tutorial we wrote the following: 

if(login_user.lastResult.loginsuccess == "yes")

{

currentState = "Logged In";

} 

lastResult.loginsuccess refers to the <loginsuccess> we outputted from PHP. So if instead of outputting <loginsuccess>, you decided to output <userLogin>, then you would change lastResult.loginsuccess to lastResult.userLogin. Make sense now?

Now that we cleared that bit up, on to the last part, creating the Logged In View State and throwing in some neat effects!

Part 4 - View States and Special Effects

Almost done, hang in there!

This part is quite easy, lots of drag + dropping, and VERY little coding

In the upper right hand corner of Flex, you should see a box that says States, and it should have one state(<Base 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.

Now all you have to do is throw some labels in there and whatnot, and you"re done!

You now have a fully functional login system using Adobe Flex and PHP!

If you want, you can throw in some cool resize effects. Edit the following code.

Find:  

<mx:Panel ...

Add This:

<mx:Panel resizeEffect="Resize" ...

Now you should have a cool resizing effect if your login was successful!

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

View LIVE Example! (Login with user:test,pass:test)

Download: Login System.zip (539 KB)

Thanks!

For more Flex tutorials visit Viper Creations!