This series will cover some of the great things with flash, php and mySQL

In this tutorial we will create a user account login screen, and also a user creation screen. Using a mixture of PHP and mySQl.

preview:

this is what we’ll be making (sorry for the terrible graphics lol)

you can create an account, then you can log in with it


Step 1: Setting up PHP

Before you start creating the login screen you have to be able to run PHP, skip to step 2, if you already have a way of running a PHP file

PHP is a server side language that can’t just be run on its own like HTML, however you can install a set of tools that let you run it from your own computer (XAMPP), or if you have a server it’s very likely PHP is already set up.

Step 2: Creating the flash document

Start by creating three frames, give frame one a frame label of ‘login’, frame two a label of ‘createAccount’ and frame three a label of ‘loggedIn’.

In frame one (login) and frame two (createAccount) create two input text fields, give one an instance name of ‘username’ and the other an instance of ‘password’.

Just below these text fields add a new text field and make its behaviour multiline, this text field will show any errors with the login process. Give the one on frame one an instance of ‘loginStatus’ and the one on frame two an instance of ‘accountStatus’.

Make sure the text field ‘password’ has a behaviour of password.

On frame three add one last text field and make it’s variable name ‘welcomeText’

Now create a ‘create account’ button, ‘login’ button and a ‘back’ button, you can change the graphics to whatever you want and also give them any library name you want. however the instance names should be:

put the buttons in each frame as shown:

Now to add the code :)

Create a new layer called actions, and on frame one insert this (change line 49 to where you will put your PHP files):

stop();
//helps prevent mysql injection
username.restrict = "A-Za-z0-9";
password.restrict = "A-Za-z0-9";
//declaring the object you will send to the PHP script
sendingVars = new LoadVars();
recievingVars = new LoadVars();
//the create account release function
createAccountBtn.onRelease = function() {
	//goes to frame two
	gotoAndStop("createAccount");
};
//when the recievingVars get sent back
//this is where you can collect the variables
recievingVars.onLoad = function(success) {
	if (success) {
		//the var loginStatus sent from the PHP script
		Status = recievingVars.loginStatus;
		//checking what the loginStatus was
		switch (Status) {
			case "success" :
			    user = username.text;
			    welcomeText = "welcome "+user+" you are now logged in";
				gotoAndStop('loggedIn');
				break;
			case 'username' :
				loginStatus.text = 'there is no such username';
				break;
			case 'password' :
				loginStatus.text = 'you have entered the wrong password';
				break;
		}
	} else {
		//if nothing was sent back, the text variable
		//loginStatus will get this text
		loginStatus.text = "Server offline, sorry";
	}
};
loginBtn.onRelease = function(){
	//checking if anthing has been written in the text fields
	if(username.text == ""||password.text == ""){
		loginStatus.text = "you have not put any text in one of the text fields";
	} else {
	//add the username variables to 'sendingVars'
	sendingVars.username = username.text;
	sendingVars.password = password.text;
	//sending the object to the login script
	sendingVars.sendAndLoad('http://yourURL/login.php',recievingVars,"POST");
	//add a loading message
	loginStatus.text = 'loading';
	}
}

on frame 2 insert this (change line 43 to where you will put your PHP files):

stop();
//helps prevent mysql injection
username.restrict = "A-Za-z0-9";
password.restrict = "A-Za-z0-9";
//declaring the object you will send to the PHP script
sendingVars = new LoadVars();
recievingVars = new LoadVars();
//back button release function
backBtn.onRelease = function() {
	//goes to frame one
	gotoAndStop("login");
};
//when the recievingVars get sent back
//this is where you can collect the variables
recievingVars.onLoad = function(success) {
	if (success) {
		//the var accountStatus sent from the PHP script
		Status = recievingVars.accountStatus;
		switch (Status) {
			case "success" :
				gotoAndStop('login');
				break;
			case 'username' :
				accountStatus.text = 'that username has already been taken, sorry';
				break;
		}
	} else {
		//if nothing was sent back, the text variable
		//accountStatus will get this text
		accountStatus.text = "Server offline, sorry";
	}
};
createAccountBtn.onRelease = function(){
	//checking if anthing has been written in the text fields
	if(username.text == ""||password.text == ""){
		accountStatus.text = "you have not put any text in one of the text fields";
	} else {
	//add the username variables to 'sendingVars'
	sendingVars.username = username.text;
	sendingVars.password = password.text;
	//sending the object to the new account script
	sendingVars.sendAndLoad('http://yourURL/newAccount.php',recievingVars,"POST");
	//add a loading message
	accountStatus.text = 'loading';
	}
}

add one last small piece of code to frame three:

backBtn.onRelease = function() {
	//goes to frame one
	gotoAndStop("login");
};

And thats the Flash Part set up, YAY!, although you can change the layout of the login screen to whatever you want and mess around graphics until you have it customized to your style.

Step 3: setting up the mySQL database and tables

using phpmyadmin or whatever program you use to edit mySQL databases, Create a new database and call it whatever you want(but remember the name), and create a new table called ‘users’ it should have three fields ‘id, username, password’.
Here is the table structure:

now we are ready for the PHP section!

Step 4: PHP files

create a new file called login.php using notepad or even better an editor that supports syntax highlighting. link
(enter your database details on line 3 and line 5)

<?php
//enter your mySQL info
$database = 'your_database';
//enter mySQL user info
$DBinfo = mysql_connect('localhost', 'your_username', 'your_password');
 
 
//checks for correct user and password
if(!$DBinfo){
die('could not connect to mySQL because:' . mysql_error());
}
//selects your database
$db_selected = mysql_select_db($database, $DBinfo);
//checks if database selected is correct
if (!$db_selected) {
    die ('cannot connect to database because: ' . mysql_error());
}
//getting variables sent from flash
$user = $_POST['username'];
//adding md5 protection to compare with the version in the database
$pass = md5($_POST['password']);
//checking for username
$userQuery = mysql_query("SELECT id FROM users WHERE username = '$user'");
if(mysql_num_rows($userQuery) == 0){
//if there is no username
print("&loginStatus=username&");
exit;
}
//checking if password  is correct
$passQuery = mysql_query("SELECT * FROM users WHERE username = '$user' AND password = '$pass'");
if(mysql_num_rows($passQuery) == 0){
//if password is wrong
print("&loginStatus=password&");
exit;
}
//success message
print("&loginStatus=success&");
?>

Now create a file called newAccount.php and add this code to it (again, enter your database details on line 3 and line 5):

<?php
//enter your mySQL info
$database = 'your_database';
//enter mySQL user info
$DBinfo = mysql_connect('localhost', 'your_username', 'your_password');
 
//checks for correct user and password
if(!$DBinfo){
die('could not connect to mySQL because:' . mysql_error());
}
//selects your database
$db_selected = mysql_select_db($database, $DBinfo);
//checks if database selected is correct
if (!$db_selected) {
    die ('cannot connect to database because: ' . mysql_error());
}
//getting variables sent from flash
$user = $_POST['username'];
//adding md5 protection to compare with the version in the database
$pass = md5($_POST['password']);
//checking if username already exists
$userQuery = mysql_query("SELECT id FROM users WHERE username = '$user'");
if(mysql_num_rows($userQuery) != 0){
//if username exists
print("&accountStatus=username&");
exit;
}
//inserting into user the user and pass
mysql_query("INSERT INTO users (username,password) VALUES ('$user','$pass')");
print("&accountStatus=success&");
?>

Now upload the PHP files to your server or put in htdocs of your localhost and test, everything should work :)

if you can’t get it to work here are the source files

I will be converting this to as3 very soon…

Luke