PART I – Creation of the database, connection to the database, creation of items in the database

In this tutorial I will create a simple application to show you how to connect to a database in Flex 4 using the Data/Services functionality and PHP. FinallyI will also show you how to export data into an xls file.

In this tutorial I will be using XAMPP to locally test the application

Let’s start creating a new project; afterwards I’m configuring it to work with XAMPP:So right-click on the project->Proprieties->Flex Server->set the Web Root, Root URL and Output folder.

Now let’s create our database manually in PHPMyAdmin (type http://localhost/phpmyadmin/ in your browser if you are using XAMPP).

Write its name in “Create new database” and select the collation you prefer (for me: teocomi_user, utf8_general_ci)  and click “Create”. Now let’s create a table inside the database, for instance user_registerd, with 4 fields. Fill it in like in the picture below, remembering to mark ID as A_I (so that the ID value will be Automaticcaly Incremented) and Save.

You will get something like this (TIP: if now you click on “Create PHP Code” some code will be generated so that you can create an install.php file for instance):

Okay, now we have our Database and our table! We just miss the registering part… So back in Flex we now create a Form with which users will register. The easiest thing will be something like this:

<mx:Form defaultButton="{submitBtn}">
		<mx:FormHeading label="Registration form"/>
		<mx:FormItem label="Name:">
			<s:TextInput id="userName"/>
		</mx:FormItem>
		<mx:FormItem label="Surname:">
			<s:TextInput id="userSurname"/>
		</mx:FormItem>
		<mx:FormItem label="Email:">
			<s:TextInput id="userEmail"/>
		</mx:FormItem>
		<mx:FormItem>
			<s:Button label="Submit" id="submitBtn" click="submitBtn_clickHandler(event)"/>
		</mx:FormItem>
	</mx:Form>

If you test the application, obviously, nothing will happen. It is time to create our Service! In the bottom panel in Flex click Data/Services->Connect to Data/Service->PHP; now insted of writing our PHP class let’s have Flex create it for us ;). So click on “click here to generate a sample”-> fill in the required information ->Connect to Database-> select your table->OK->OK->Finish and we are done!

Well done, now we just miss the part in which we send the data to the Service and it is stored in the Database. From the Design View in flex drag the createUser_registered service (from Data/Services panel) over the Submit button, back in the Source view edit the the auto-created code as shown:

import mx.controls.Alert;
import valueObjects.User_registerd;
 
protected function submitBtn_clickHandler(event:MouseEvent):void
{
	var newUser:User_registerd = new User_registerd;
	newUser.name=userName.text;
	newUser.surname=userSurname.text;
	newUser.email=userEmail.text;
	createUser_registerdResult.token = userregisterdService.createUser_registerd(newUser);
}

If you test the application filling Name, Surname, Email and clicking Submit a new user will be added to the database! To check this go to PHPMyAdmin->your database->your table, and you’ll see the list.

In the next part of the tutorial we will populate a DataGrid with the data stored in the Database.