Create a Flash Login System Using PHP and MySQL – Part 2

In Part 1 we created the front end login system for users to enter their details. In this tutorial we will create a registry form that will allow users to register. This will then add their details to the database, after which they will be able to login.

Step 1: Setup Document Class

Firstly, let’s setup our document class and Flash file. Open a new Flash file, then call it register.fla. Next, create an actionscript file and call it register.as

Then type register in the class text field in the Properties panel.

Step 2: Setup Code Structure

Now we have connected our document to our code, we need to create our class in the as file.

package {

	import flash.display.*;

	public class register extends MovieClip {
	
		public function register ():void {
		
			trace("success");
		
		}
	
	}

}

Step 3: Create The Registry Form Interface

Draw a 460x300px filled rectangle and choose what background color you like. Create the title – Register With Us – and a text field – Register.

Your interface should look like this:

Step 4: Setup The Form Fields

Create three input text fields with the instance names of username_text, password_text and userbio_text.

Step 5: Create The Register Button

Click the text field with “Register” that you created in Step 3 and convert it to a movie clip. Give it an instance name of register_button.

By now your interface should look like this:

Step 6: Create The Result Text

Create a new dynamic textfield next to the register and give it an instance name of result_text. We have completed all the objects we need. Our finished interface should look like this.

Step 7: Get Assets From Part 1

To save you time I will not cover the connection in this Part as you can learn that in Part 1. Get the connect.php from the php folder in Part 1. I have also included it in the Part 2 Source zip download.

That’s all we need from Part 1. Now let’s create the actionscript code.

Step 8: Create Object Settings – Register Button

First we need to give the register button a rollover cursor. We do this by using the buttonMode property.

register_button.buttonMode = true;

That is all we need to do to format our register button.

Step 9: Setting up The Register Button

We now need our register button to run a function that validates the input of a user. We can do this by adding an event listener and triggering the function when the user presses the button.

/*
when register button is pressed then the checkForm function runs.
*/

register_button.addEventListener(MouseEvent.MOUSE_DOWN, checkForm);

Step 10: Validate the Form

Before the user can submit the form they have to fill in all the fields. Remember to import the flash.events.* classes into your AS file. Follow the comments…

public function checkForm (e:MouseEvent):void {

	/*
	If all of the fields have more than one character sendForm() inits. 
	If not then the result_text will tell them to fill them all in.
	*/

	if (username_text.text != "" && password_text.text != "" && userbio_text.text != "") {
			
		sendForm();
			
   	} else {
			
		result_text.text = "PLEASE FILL IN ALL FIELDS";
			
	}
		
}

Step 10: Set up the URLVariables Class

Remember to import the flash.net.* classes into your AS file. The URLVariables class is used to store data in that you would send off to a external source at a later date.

We need to create a variable to hold this data in:

var phpVars:URLVariables = new URLVariables();

We use instance variables to store data:

phpVars.username = username_text.text;
phpVars.password = password_text.text;
phpVars.userbio = userbio_text.text;

Step 11: Set up the URLRequest Class

Next we need to make a URL request to get the location of our php file. This URLRequest is also what we pass our php variables through. When we load this request the php variables are sent to the php file.

var urlRequest:URLRequest = new URLRequest("php/register.php");

/*
the POST method is used here so we can use php's $_POST function in order to receive our php variables.
*/

urlRequest.method = URLRequestMethod.POST;

/*
this attaches our php variables to the url request
*/

urlRequest.data = phpVars;	

Step 12: Set up the URLLoader Class

The URLLoader Class allows you send & receive data from external sources. In this case we will be sending our URLVariables data to the php file via our URLRequest. Follow the comments…

/*
we use the URLLoader class to send the request URLVariables to the php file
*/
			
var urlLoader:URLLoader = new URLLoader();
urlLoader.dataFormat = URLLoaderDataFormat.VARIABLES;
			
/*
runs the function once the php file has spoken to Flash
*/
			
urlLoader.addEventListener(Event.COMPLETE, showResult);

/*
we send the request to the php file
*/
			
urlLoader.load(urlRequest);

Step 13: Create the showResult() Function

In the sendForm() function we added a listener to run the showResult() function when the php file had been executed. Now let’s create it…

/*
function to show result
*/
		
public function showResult (e:Event):void {

	// e.target.data is referring to the php file's output. We define result_message in the php file later on.
		
	result_text.text = "" + e.target.data.result_message;
		
}

Step 14: Create the PHP File

Create a new php file, name it register.php and save it in a new folder called php.

Step 15: Flash to PHP Communication

In order to continue we need to be sure whether our php and Flash files are talking to each other. Open your text editor of choice and open the register.php you just created. Again, follow the comments…

<?php 

/*
use connect.php to connect out database
*/

include_once("connect.php");

/*
create the test POST VAR - $_POST['username'] is used to phpVars.username from the phpVars variable we set.
*/

$username = $_POST['username'];

/*
print the output - This is sent back to flash. As you can see result_message has now been defined.
*/

print "result_message=$username";

?>

Now upload the files to your server for testing and check it out. If the resultant text is now the same as the username you have successful communication between Flash and php. Now delete the contents of register.php.

Step 16: Include Connection File

Now we have successful connection we can connect to our database from Part 1. We do this by including our connect.php file we made in Part 1.

<?php 

include "connect.php";

?>

Step 17: Create POST Vars

We need to create POST vars to receive the php vars we sent and defined as POST variables.

/*
create POST vars to receive data from flash
*/

$username = $_POST['username'];
$password = $_POST['password'];
$userbio = $_POST['userbio'];
<?php 

/*
connect to database
*/

include "connect.php";

/*
create POST vars to receive data from flash
*/

$username = $_POST['username'];
$password = $_POST['password'];
$userbio = $_POST['userbio'];

?>

Step 18: Create the SQL Statement

Let’s now create the SQL statement that will add our values and store them in a new record in the database. Follow the comments..

/*
INSERT INTO users - This means we want to insert a record into the users table.

(username, password, user_bio) - We then specify the fields we want to add our data to.

VALUES ('$username', '$password', '$userbio') - We then specify which data we want in each field.

*/

$sql = "INSERT INTO users (username, password, user_bio) VALUES ('$username', '$password', '$userbio')";

Step 19: Back to Flash

/*
Next we send off the query to communicate with the database. To send the result_message back to flash we use the exit function. 
*/

mysql_query($sql) or exit("result_message=Error");

exit("result_message=Success");	

Step 20: Completed PHP Script

<?php 

/*
use connect.php to connect out database
*/

include_once("connect.php");

/*
create POST vars to receive data from flash
*/

$username = $_POST['username'];
$password = $_POST['password'];
$userbio = $_POST['userbio'];

/*
create the mysql query
*/

$sql = "INSERT INTO users (username, password, user_bio) VALUES ('$username', '$password', '$userbio')";

mysql_query($sql) or exit("result_message=Error");

exit("result_message=Success");				  

?>

Step 21: Completed ActionScript File

package {
	
	import flash.display.*; 
	import flash.events.*;
	import flash.net.*;
	
	public class register extends MovieClip {
	
		public function register ():void {
			
			/*
			First we need to give the register button a rollover cursor. We do this by using the buttonMode property.
			*/
		
			register_button.buttonMode = true;
			
			/*
			give the register button a mouse event
			*/
			
			register_button.addEventListener(MouseEvent.MOUSE_DOWN, checkForm);
			
			/*
			set all the fields to no characters
			*/
			
			username_text.text = "";
			password_text.text = "";
			userbio_text.text = "";
		
		}
		
		/*
		validate the user's input
		*/
		
		public function checkForm (e:MouseEvent):void {
		
			if (username_text.text != "" && password_text.text != "" && userbio_text.text != "") {
			
				sendForm();
			
			} else {
			
				result_text.text = "PLEASE FILL IN ALL FIELDS";
			
			}
		
		}
		
		/*
		function we use to send the form
		*/
		
		public function sendForm ():void {
			
			/*
			we use the URLVariables class to store our php variables 
			*/
			
			var phpVars:URLVariables = new URLVariables();
			
			phpVars.username = username_text.text;
			phpVars.password = password_text.text;
			phpVars.userbio = userbio_text.text;
	
			/*
			we use the URLRequest method to get the address of our php file and attach the php vars.
			*/
			
			var urlRequest:URLRequest = new URLRequest("php/register.php");
			
			/*
			the POST method is used here so we can use php's $_POST function in order to recieve our php variables.
			*/
			
			urlRequest.method = URLRequestMethod.POST;
			
			/*
			this attaches our php variables to the url request
			*/
			
			urlRequest.data = phpVars;		
			
			/*
			we use the URLLoader class to send the request URLVariables to the php file
			*/
			
			var urlLoader:URLLoader = new URLLoader();
			urlLoader.dataFormat = URLLoaderDataFormat.VARIABLES;
			
			/*
			runs the function once the php file has spoken to flash
			*/
			
			urlLoader.addEventListener(Event.COMPLETE, showResult);

			/*
			we send the request to the php file
			*/
			
			urlLoader.load(urlRequest);
			
		}
		
		/*
		function to show result
		*/
		
		public function showResult (e:Event):void {
		
			result_text.text = "" + e.target.data.result_message;
		
		}
	
	}

}

Conclusion

Now you can go to the demo, register, then go to the login page and try it out. Thanks for reading this two-part series!