64x64 icon dark hosting
Get a Tuts+ subscription for just $45! Deploy New Relic now to claim.
Advertisement

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

by

This tutorial will demonstrate how to create simple but professional Flash login system using three different programming languages; AS3, PHP and MYSQL. Advanced sections like application logic, PHP and MYSQL integration with Flash will be our main talking points. Let's get stuck in!


Final Result Preview

Let's take a look at the final result, simply click the demo button at the top of this tutorial.

Try logging in with the username admin and password password, or username test1 and password password1. You'll see a simple piece of text corresponding to that user.

In this Part we'll get the actual login working, then in Part 2 we'll let users register through a SWF.


Step 1: Get MAMP or Another Local Server

If you do not have web server that supports mysql databases and php, then download MAMP (for Mac), WAMP (for Windows), or another local server.

MAMP is an open source local server that allows you to run php and create and store data in mysql databases from your local hard drive. MAMP automatically creates a server when you download it therefore I recommend using it over other local servers.

You can alternatively use your web server if it supports mysql and php.

Install phpMyAdmin on the server, we will use it later.


Step 2: Imports

Here are the things you will need in order to create the end product.

  • A text or html editor (for example notepad or Dreamweaver).
  • Flash CS3+

Now we have everything we need it is time to set up our document class.


Step 3: AS3 Document Class Setup

Create a brand spanking new .as file and an AS3 .fla file. Save the .as file as main.as in a new folder called actions.

Save the fla file in the root folder of our application. Now in our .fla file enter the main class name (and classpath) in the properties panel, as stated below:


Step 4: Creating the Base Class Code

Open your main.as file and add the following code:

This will be your document class. Press ctrl+enter to run the SWF.

If you get a message in the output you have successfully connected both documents and can move on.


Step 5: Creating our Database Connection - Part 1

To create a connection to our database we need to use php. First you need to create a database on your server. Call it admin. You can create a database using phpMyAdmin on your server. The image below is first page you see when opening phpMyAdmin. This is the only time we will be using phpMyAdmin; we will be creating the table using php.


Step 6: Creating our Database Connection - Part 2

We need one file that will connect to our database. Create a new folder called php. Create a new document with the php extension and call it connect.php

Follow the code comments to see what's going on.

Then you need to upload your files to the testing server. If you are using MAMP copy your folder to the htdocs folder in the mamp application folder.

If there is a successful connection there will be a success message as below and you'll have connected to your database.

Note: It is important to delete echo 'success'; from your PHP afterwards.

Note: The directory will not be the same as in the image. Ignore the "source" path. For example http://localhost:8888/loginsystem/php/connect.php


Step 7: Creating the Interface in Flash

First Create Two Text Boxes - Input Text - to allow the user to enter their name and password.

Then position them vertically. Give the top textbox the instance name of "username" and the bottom one "password". Label the two any way you want.

Then draw a square and insert another text box writing in it "submit". Convert these to a movie clip with an instance name of "submit_button".

Distribute all different objects to layers (Modify > Timeline > Distribute to Layers).

Your interface should look something like this:


Step 8: Button Submission

Next we will create our submit button event handler, checkLogin(), to be run when the user clicks "submit".

First we need to import flash.events.*; in our code. This way we can use Flash events. Follow the code comments.

If the output displays "submission success" when you click the button, our button event has been created successfully.


Step 9: Field Validation

Now we are going to check whether our fields have data. Replace the current checkLogin function with the code below. It's thoroghly commented for your convenience.


Step 10: Creating the Database Table

Data is stored in tables in databases. Therefore we will need to create a table and we'll use php to do so. Create a new php document in the php folder and call it whatever you want (it won't matter, this is just temporary to create the table, we won't need to keep running it). Then fill it with the code below.

After this, upload all your files to your server. Then enter the file path into the browser, if the table was created it will display a success message. If not, then please check your configuration. Note: Make sure you delete this file from the server after the success message is displayed.

Then go to phpMyAdmin or an alternative to check whether your table has been added. If it has been added this is what you will see below...


Step 11: Adding the First User

Now we have our table created let's go ahead and add a user.

Create a new php document and call it whatever you like, then place it in the php folder.

We have now added a user so therefore our table will look like this:

We should be all set to start creating our application logic, which will power the backend of our SWF.


Step 12: Sending a Request to PHP

There a few variables we need to process in order to get our database data.

Here is the completed processLogin() function, to go in our main.as file (it will be called when the user clicks the button). We need to import Flash's net classes here. So, add this at the top: import flash.net.*;


Step 13: PHP Vars Explained

The first line:

will be explained later when we create the main php control file.

The next two lines:

retrieve what the user inputted into the two text fields and convert them into php variables.


Step 14: Result Textfield

Create a dynamic text box and give it an instance name of "result_text".

Place it under the login form and submit button. This will display information retrieved from the server.


Step 15: Main PHP Control File

This is the file that will communicate with php and return a value to flash. Create a new php file called "controlpanel.php" and place it in the \php\ folder.


Step 16: Show The Result - Part 1

Let's go back to our process login function and add this:

When the form has finished this listener calls the showResult() function. We will look at that now.


Step 17: Show The Result - Part 2

Here is the function. It displays the value we printed in the "controlpanel.php" file.

The SWF is getting the text that we print in the php and displaying it in the result_text textfield.


Step 18: A Successful Login Example

If you have created a successful login, this is what you will see:

Now we are going to add an additional user to test whether our system works for multiple users.


Step 19: Adding our Additional User

Open the "adduser.php" file in our php folder that we created earlier.

Simply change the VALUES in the mysql query.

$sql = "INSERT INTO users (username, password, user_bio) VALUES ('test1', 'password1', 'This is the additional users bio')";

Then run the script on the server by simply entering the file path in a web browser.


Step 20: Test Our Additional User

Success! We have a successful flash login system that supports multiple users. Here is the result when we login the additional user.


Step 21: The Whole ActionScript Code with Comments


Conclusion

Well that concludes Part 1 of our Flash login system tutorial. In Part 2 we will be creating a registry form that will add users without the user entering it in the backend. Thanks for reading this tutorial. Enjoy it :)

Advertisement