Building database driven applications using Flash, PHP and MySQL.

Tutorial 1

MySQL - 1995-2007 MySQL AB. All rights reserved PHP - Copyright 2001-2007 The PHP Group All rights reserved. Macromedia Flash - Copyright 2007 Adobe Systems Incorporated. All rights reserved.

Building database driven applications using Flash, PHP and MySQL.

I have published this basic tutorial to hopefully be of assistance in speeding up the learning development time of building on line applications. When I first started out to develop web based applications in flash I found it difficult as it was not straight forward. Sending and receiving data into flash from a MySql database using php as an intermediately file. Updating and Populating data grids from a database and populating a form from the rows on the data grid. This document is the first of several I intend to publish to share the information on fast efficient web based database applications development in flash. What you need. First of all you will need to have access to a web server with PHP and MySQL. You will need to have a copy of Flash installed on your computer (I am using Flash 8). You will need a method of creating a database table. You can use phpMyAdmin which is a commonly available database management program written with PHP.

Available to download free from http://www.phpmyadmin.net/

Another Database program I use is Navicat

Navicvat is not free however there is a free 30 day trial available to download which is available from http://www.navicat.com/

To get started Create a simple database. If you have access to phpMyAdmin on the server you are using or if you have installed it on your own server, log into phpMyAdmin. The screen should look similar to the image below.

Create a New Database.

With the New Database now created you can proceed to create the tables.

Press GO

Press the save button and the image below shows the result

Now you have successfully created the database with the customer table. Database script to create the database and data used in this tutorial. CREATE TABLE `Customer_table` ( `cust_id_num` int(8) NOT NULL auto_increment, `cust_title` varchar(5) NOT NULL, `cust_firstName` varchar(20) NOT NULL, `cust_lastName` varchar(30) NOT NULL, `cust_address` text NOT NULL, `cust_city` varchar(30) NOT NULL, `cust_areacode` varchar(5) NOT NULL, `cust_telephone` varchar(14) NOT NULL, `cust_notes` text NOT NULL,

`cust_date` date NOT NULL, `cust_dob` date NOT NULL, PRIMARY KEY (`cust_id_num`) ); INSERT INTO `Customer_table` VALUES (1, 'Mr', 'David', 'Smith', '37 Developers Way ', 'New Town', '97804', '(008) 5656 555', 'David has been developing a new customer system. for PHP and Flash', '0000-00-00', '0000-00-00'); INSERT INTO `Customer_table` VALUES (2, 'Mrs', 'Jane', 'Smith', '73 Grovestone Road', 'Levinsworth', '56790', '(00) 0000 0000', 'Jane has two dogs both are friendly and there is no risk of being attcked.', '0000-00-00', '0000-00-00'); Writing a PHP script to connect to the database that will be used to populate a flash form. We need to create a flash form with 10 fields on it. Then we will point the flash form to the php script we have written and just like magic it will pass the information to the flash form. The PHP script to read the database. Firstly the host.ini file needs to be created. <?php $host = "localhost"; $user = "user"; $pass = "password"; $db="MyNewDatabase"; ?> Next the script Cust_datagrid.php to populate the Datagrid on our flash form <?php /*This section points to the file that contains the database connection info by keeping it in a separate file if you need to move the program to another server or database you only need to make the change in one file rather than making the changes in several places.*/ include "host.ini"; mysql_connect($host,$user,$pass); mysql_select_db($db); //This is the SQL querty - just a simple select query. $x="SELECT `Customer_table`.`cust_id_num`, `Customer_table`.`cust_title`,

`Customer_table`.`cust_firstName`, `Customer_table`.`cust_lastName`, `Customer_table`.`cust_address`, `Customer_table`.`cust_city`, `Customer_table`.`cust_areacode`, `Customer_table`.`cust_telephone`, `Customer_table`.`cust_notes`, `Customer_table`.`cust_date`, `Customer_table`.`cust_dob` FROM `Customer_table` ORDER BY `Customer_table`.`cust_lastName` ASC"; //PHP reads the mysql data into an array $xx = mysql_query("$x")or die("problem!" . mysql_error()); list($cust_id_num,$cust_title,$cust_firstName,$cust_lastName,$cust_address,$cust_city, $cust_areacode,$cust_telephone,$cust_notes,$cust_date,$cust_dob) = mysql_fetch_row($xx); /* The PHP code below formats the database results into an array readable by the Flash datagrid.*/ $i = 0; $n = 0; $results = mysql_query("$x"); $n= mysql_num_rows ($results); while ($row = mysql_fetch_array ($results)) { while (list ($key, $val) = each ($row)) { $r_string .= '&' . $key . $i . '=' . stripslashes($val); } $i++; } echo "&i=" . $i; echo "&n=" . $n; $r_string .='&'; echo"&$r_string"; ?>

Now the system will populate the datagrid with the rows of data in the database we created. File name is Cust_form_data.php <?php include "host.ini"; mysql_connect($host,$user,$pass); mysql_select_db($db); $r="SELECT `Customer_table`.`cust_id_num`, `Customer_table`.`cust_title`, `Customer_table`.`cust_firstName`, `Customer_table`.`cust_lastName`, `Customer_table`.`cust_address`, `Customer_table`.`cust_city`, `Customer_table`.`cust_areacode`, `Customer_table`.`cust_telephone`, `Customer_table`.`cust_notes`, `Customer_table`.`cust_date`, `Customer_table`.`cust_dob` FROM `Customer_table` WHERE `Customer_table`.`cust_id_num` = '$cust_id_num' ORDER BY `Customer_table`.`cust_lastName` ASC"; $rr = mysql_query("$r")or die("problem!" . mysql_error()); list($cust_id_num,$cust_title,$cust_firstName,$cust_lastName,$cust_address,$cust_city, $cust_areacode,$cust_telephone,$cust_notes,$cust_date,$cust_dob) = mysql_fetch_row($rr); echo echo echo echo echo echo echo echo echo echo echo ?> "&cust_id_num=" . $cust_id_num; "&cust_title=" . $cust_title; "&cust_firstName=" . $cust_firstName; "&cust_lastName=" . $cust_lastName; "&cust_address=" . $cust_address; "&cust_city=" . $cust_city; "&cust_areacode=" . $cust_areacode; "&cust_telephone=" . $cust_telephone; "&cust_notes=" . $cust_notes; "&cust_date=" . $cust_date; "&cust_dob=" . $cust_dob;

10

The Flash form First of all open flash and from the file menu choose New and then Flash Document or if this screen is visible click on Flash Document.

11

Once you have the new file open you should go to Window and choose components like in the example below.

12

A component list will appear where you will be able to choose the components you need to build the form.

Click and drag components from this list to the stage.

13

Now the DataGrid is on the stage. Next right click on the DataGrid and choose free transform and you can now drag it out in size

14

We now need to give the DataGrid an instance name.

The image above shows the DataGrid that has been resized with a blank instance name. Enter a name in the instance Name box like example below shows below.

15

Now we have given the DataGrid an instance Name. The image below shows the form after the components have been dragged on to the stage and placed in position. I have put the text and the components on the same layer. Each of these components will need to have an instance name like the DataGrid.

16

Now we have to create a new layer to hold the actionscript

Click here to make another layer and name it Action.

Now click on window and choose Actions or press F9 The Action script window will open.

17

In this action script frame we will first of all define the path to our php files and then proceed to read in the data to the data grid and then populate the form with the selected row of data.. /*This defines the location of the files we are going to use in this program. */ _global.mypath = "http://server/customerSystem/" //This defines the datagrid columns import mx.controls.DataGrid; import mx.controls.gridclasses.DataGridColumn; var column = new DataGridColumn("j1"); column.headerText = "Title"; column.width = 50; Cust_list.addColumn(column); var column = new DataGridColumn("j2"); column.headerText = "First Name";

18

column.width = 150; Cust_list.addColumn(column); var column = new DataGridColumn("j3"); column.headerText = "Last Name"; column.width = 150; Cust_list.addColumn(column); var column = new DataGridColumn("j4"); column.headerText = "City"; column.width = 100; Cust_list.addColumn(column); Cust_list.addEventListener("headerRelease", headerListener); Cust_list.dataProvider = r_string; Cust_list.scrollToTop(); Cust_list.dataProvider = r_string; // This reads the data from the PHP script and populates the datagrid. var sendData = new LoadVars(); var r_string = new LoadVars(); r_string.onLoad = getResponse; sendData.addr = propDgrid.selectedItem.j2 job_id_num=custDgrid.selectedItem.cust_id; mypath89 =_global.mypath + "Cust_datagrid.php"; sendData.sendAndLoad(mypath89, r_string, "post"); function getResponse(result){ if (result == true) { var r_string = new Array(); for (var i:Number=0; i < this.n; i++) { r_string.push( { cust_id_num:this["cust_id_num"+i], j1:this["cust_title"+i], j2:this["cust_firstName"+i], j3:this["cust_lastName"+i], j4:this["cust_city"+i] })}; } Cust_list.dataProvider = r_string; }

19

//Populate the form //==============Show Customer Details========================= custf=function(){ var sendData = new LoadVars(); var recData = new LoadVars(); recData.onLoad = getResponse1; sendData.cust_id_num = Cust_list.selectedItem.cust_id_num; mypath81 =_global.mypath + "Cust_form_data.php"; sendData.sendAndLoad(mypath81, recData, "post"); } function getResponse1(result){ if (result == true) { cust_title.text = this['cust_title']; cust_firstName.text= this['cust_firstName']; cust_lastName.text= this['cust_lastName']; cust_address.text= this['cust_address']; cust_city.text= this['cust_city']; cust_areacode.text= this['cust_areacode']; cust_telephone.text= this['cust_telephone']; cust_notes.text= this['cust_notes']; } } Cust_list.addEventListener("cellPress",custf); /*I have not shown all fields in the database on the form but if you wanted to show more of the fields you would just add then to the list above.*/

20

21

The final result Create the SWF file by pressing [Ctrl] + [Enter]

Click on either of the rows of data in the data grid and the row will change in the form body. In the next tutorial I will populate the combo box from a data base table and additionally put add, edit and save functions on this form.

22

Written by Maurice Price PHP-MySQL-Flash Development Workshops The files used in this tutorial are available for download from Tutorial 1 Download Zip Files You can contact Maurice at maurice@interactivewebconcepts.com.

23