« Eclipse to browser quicker with Automator
Flash on the Beach 2007 :-D »

Flex, PHP and XML - a tutorial

Published by admin January 18th, 2007 in Flash Platform, Tutorials

I've wanted to have a play with Flex for a while, I see the Framework and components as an easier way to build RIA's without some of the hassle of writing complex components.

The problem I've had previously when attempting to build anything was hooking up the data/back end. And it's true there is a distinct lack of tutorials online explaining how to tie Flex into a few simple PHP calls, there's plenty of AMF PHP and .net stuff.


Here's what we're going to make.

The example below uses motorbikes as a data type, I happen to be looking at buying one at the moment. So my first task was to setup my database, you can do this with the following SQL or use an app like <a href="http://www.navicat.com/" >NaviCat</a>

PLAIN TEXT
SQL:
  1. CREATE TABLE  `data` (
  2. `id` INT NOT NULL AUTO_INCREMENT ,
  3. `year` VARCHAR( 4 ) NOT NULL ,
  4. `make` VARCHAR( 30 ) NOT NULL ,
  5. `model` VARCHAR( 30 ) NOT NULL ,
  6. PRIMARY KEY (  `id` )
  7. );

..then we can get the data flowing with some PHP. This first php file I wrote was to add bikes to my database, it has 3 main chunks, the top section is some basic HTML, the middle section does all our logic and handles our form submission. The last chunk is some more HTML laying out a simple form so we can add our data.

PLAIN TEXT
HTML:
  3. <title>Add An Article</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <style type="text/css">
  6. <!--
  7. .box { font-family: Arial, Helvetica, sans-serif; font-size: 12px; border: 1px solid #000000;}
  8. -->
  9. </style>
  10. </head>

PLAIN TEXT
PHP:
  1. <?php
  2. if(isset($_POST['save']))
  3.     {
  4.         $year = $_POST['year'];
  5.         $make = $_POST['make'];
  6.         $model = $_POST['model'];
  7.         if ( ! get_magic_quotes_gpc ( ) ) {
  8.             $year = addslashes ( $year ) ;
  9.             $make = addslashes ( $make ) ;
  10.             $model = addslashes ( $model ) ;
  11.         }
  12.     include 'library/config.php';
  13.     //config.php contains:
  14.     //$dbhost = 'localhost:3306';
  15.     //$dbuser = 'root';
  16.     //$dbpass = 'root';
  17.     //$dbname = 'bike';
  18.    
  19.     include 'library/opendb.php';
  20.     //opendb.php contains:
  21.     //$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');
  22.     //mysql_select_db($dbname);
  23.  
  24.     $query = "INSERT INTO data (year, make , model) VALUES ('$year', '$make' , '$model')";
  25.     mysql_query($query) or die('Error ,query failed');
  26.    
  27.     $result = mysql_query("select * from data", $conn) or die('Error, query failed');
  28.    
  29.     $xml_output = "<?xml version=\"1.0\"?>\n";
  30.     $xml_output .= "<bikes>\n";
  31.     for ( $x = 0 ; $x <mysql_num_rows ( $result ) ; $x ++ ) {
  32.         $row = mysql_fetch_assoc($result);
  33.         $xml_output .= "\t <bike&gt>" ;
  34.         $xml_output .= "\t\t <year>" . $row['year'] . "</year>\n";
  35.         $xml_output .= "\t\t <make>" . $row['make'] . "</make>\n";
  36.         $xml_output .= "\t\t <model>" . $row['model'] . "</model>\n";
  37.         $xml_output .= "\t </bike>\n";
  38.     }   
  39.     $xml_output .= "</bikes>";
  40.     include 'library/closedb.php';
  41.  
  42.     echo $xml_output;
  43.     }
  44. ?>

...so what the hells going on in there? Well, we check that we have some post data from the form. Assign that data to some variables for use later. Connect to our database. Query our database, inserting the data we collected from the POST. Grab all the information from our table. Then we start building a bit of XML, we have a for loop going through each row of the table, writing XML tags to $xml_output. Once that's finished looping we close off the XML. I've left the echo in there just to show that it's working ;-)

PLAIN TEXT
HTML:
  1. <form  method="post">
  2.     <table width="700" border="0" cellpadding="2" cellspacing="1" class="box" align="center">
  3.         <tr>
  4.             <td width="100">Year</td>
  5.             <td><input name="year" type="text" class="box" id="year" maxlength="4"></td>
  6.         </tr>
  7.         <tr>
  8.             <td width="100">Make</td>
  9.             <td><input name="make" type="text" class="box" id="make" value="" size="30"></td>
  10.         </tr>
  11.         <tr>
  12.             <td width="100">Model</td>
  13.             <td><input name="model" type="text" class="box" id="model" value="" size="30"></td>
  14.         </tr>
  15.         <tr>
  16.             <td width="100">&nbsp;</td>
  17.             <td>&nbsp;</td>
  18.         </tr>
  19.         <tr>
  20.             <td colspan="2" align="center"><input name="save" type="submit" class="box" id="save" value="Add Bike"></td>
  21.         </tr>
  22.     </table>
  23. </form>
  24. </body>
  25. </html>

Ok the HTML should be fairly straight forward, important thing to note is the name and id are set to the same ref at the top of the PHP.

So assuming you've got a web server running mySQL and php5 the above script should work. The next page is going to show a stripped down version of the php and how to call it from Flex.

Pages: 1 2

Socialise this post, find out more about the Socializer plugin for WordPress.

6 Responses to “Flex, PHP and XML - a tutorial”  

Feed for this Entry Trackback Address
  1. 1 paddy Jan 27th, 2007 at 4:47 pm

    cheers Jolyon, I have an idea for my first flex app and I’m sure this tut will give me a good head start. The app will be an internal video sharing system for my fellow employees. We’re all going to pool our videos/DVDs so we can borrow each others! I’ll let you know how well it works…

    best paddy ;)

  2. 2 Richard Leggett Jan 29th, 2007 at 10:07 am

    Nice one Jolyon, a couple more of these and get this on MXNA!! It’s been a while since we saw comprehensive walkthrough tuts like this, a few years since these have been popular and god knows thats how I learned it, so congrats.

  3. 3 Matthew Ryan Feb 26th, 2007 at 1:27 am

    This is a great post and Flex-PHP example. Simple yet perfect as an example to build up from.

    Best regards,

    Matthew
    Brisbane, Australia

  4. 4 bintar Mar 12th, 2007 at 8:13 am

    hi there,
    this seems a great example. But when i tried it, i got error message like :
    ReferenceError: Error #1065: Variable _bikeData is not defined.
    at global/flash.utils::getDefinitionByName()
    at mx.utils::DescribeTypeCache$/describeType()
    at mx.utils::ObjectUtil$/getClassInfo()
    at mx.controls::DataGrid/::generateCols()
    …

    can somebody help me about this ?
    thanks

  5. 5 Jolyon Mar 12th, 2007 at 8:55 am

    Hi Bintar,

    I’m sorry to hear you’re having trouble.

    If you zip up the whole project and post it on a webserver somewhere I’ll take a look at your code, just post the link up as another comment.

    I’ll try and get back to you as soon as possible.

    Jolyon

  6. 6 Martin May 7th, 2007 at 3:30 pm

    Finally found a tut I can understand and is complete :)!

    Thanks!!

Leave a Reply


Search