Building Your First PHP-Based Web Application

In this tutorial, you are going to create a Flex and PHP web application that retrieves, displays, and modifies database records (see figure 1). A Flex and PHP application does not connect directly to a remote database, but instead, you connect it to a data service written in PHP. You will build the front-end Flex application, the database and a PHP class, which is the server-side code used to manipulate database records. Then you will run a PHPUnit Test to run and test the methods in your PHP Service to ensure they work properly. And finally, you will run the application.

Figure 1: The completed application

In this module, you are going to build a Flex and PHP project (a Flex/PHP application) that retrieves data from the PHP database and displays it. Employee data will be displayed on one "page" in the application and Department data on another.

Prerequisites

Install Flash Builder 4.5 for PHP - For more information see the Flash Builder 4.5 for PHP Installation Guide.
Zend Server 5.x or above, or a compatible PHP web application server.
You will need a PHP application server to debug your application. Go to http://www.zend.com/en/downloads/ to downlaod Zend Server 5.x, the Zend PHP application server. For more information see the Zend Server Installation Guide.
The Zend Server Installer includes optional components that can be downloaded as a part of the installation process.
The two components you will need for this tutorial are:

MySQL
phpMyAdmin

Note:

Make sure to save the username and password for your Zend Server. If you installed the optional components MySQL and phpMyAdmin, the credentials are by default “root” as the username with no password.

Download the Building_A_PHP_App.zip file and put the files somewhere accessible. These are all the resources you will need to complete this tutorial.

Step 1: Create a MySQL Databse Using phpMyAdmin

phpMyAdmin is a component that comes bundled with Zend Server in order to handle the administration of your MySQL databases. For more information see Working with phpMyAdmin to Manage MySQL in the Zend Server online documentation. Creating a database in MySQL is necessary in order to debug your Flex/PHP application. The PHP code in your project will use the database to access the information when needed, as defined by the code.

You will need the test_db.sql file located in the Database folder of the Building_A_PHP_App.zip file.
Open your Zend Server UI by entering “http://localhost:10081” into a browser, and enter your username and password.
If this is your first time opening Zend Server see Getting Started with Zend Server.
Go to Monitor | Dashboard and in the Tasks area click Open phpMyAdmin.

Figure 2: Open phpMyAdmin via Zend Server's Dashboard tab

phpMyAdmin opens in a new browser.
Enter the username “root” and leave the password empty (as defined when setting up your phpMyAdmin during Zend Server installation) and click Go.

Figure 3: Import tab in phpMyAdmin GUI

Go to the Import tab, browse to the test_db.sql file and click Go.

Figure 4: Import tab

The database has been created, and is already located on your machine.

To see the tables located in your database, select the database from the left menu of the phpMyAdmin UI and go to the Structure tab.

Step 2: Create a New Flex and PHP Project

In Flash Builder 4.5 for PHP, use the New Flex Mobile and PHP Project wizard to create a PHP project named PHPMobileService and a Flex project named MobileGettingStarted. Store the project files locally (see Figure 5) and use the default Mobile Settings (see Figure 6).

In Flash Builder 4.5 for PHP, select File | New | Flex and PHP Project and create a new Flex/PHP project. Call the PHP project PHPWebService and be sure to specify the appropriate web root and root URL for the TestDrive web (PHP) application, and validate the configuration (see figure 5). Call the Flex project WebGettingStarted, make sure to define your output folder and store the project files locally (see figure 5).

Figure 5: Create a new PHP project called PHPWebService

The project location is where the application source files will be stored (see figure 5). The compiled application will be stored on your application server in the location you specify as the output folder (see figure 6). This folder should be a subfolder of the PHPWebService application you set up on your application server.

Figure 6: Create Flex project

Example project settings for your TestDrive web (PHP) application:

Web root: C:\Program Files\Zend\Apache2\htdocs
Root URL: http://localhost
Output folder: C:\Program Files\Zend\Apache2\htdocs\TestDrive\TestDrive-debug

What You Created

Flex

When you create a new Flex/PHP project, Flash Builder 4.5 for PHP creates an MXML file under the Flex project with the same name as the project (see Figure 7). This is the main application file where you add your client-side code. You create the client side of Flex applications using two languages: ActionScript and MXML. Typically, you use MXML and Flex components to create application interfaces and ActionScript and events to program application logic. MXML tags and ActionScript code can reference each other, similar to HTML tags and JavaScript code. You use PHP to create the server-side code.

When you compile an application, a SWF file is created. You reference the SWF file in an HTML page and the SWF file is downloaded and rendered by Flash Player (available as a browser plugin or ActiveX control).

Figure 7: Create the TestDrive project

In WebGettingStarted.mxml, the first line of code is the XML declaration for the parser. The next line is the <s:Application> tag, which defines the Application container that must be the root tag for a Flex application. When the application is compiled, a SWF file, an HTML wrapper page that references the SWF file, and other files are placed in the bin-debug folder on your application server so you can browse to the application.

PHP

When you create a PHP project Flash Builder 4.5 for PHP creates a container where you can create and manage all your PHP resources for your Flex/PHP application. Your PHP project is created with Zend Framework already built in, along with a services, public and library folder.

Your services folder is where you will create and manage all the PHP Services you will use in your application. A PHP Service is a PHP class containing PHP methods. The PHP methods you define in your PHP Service are used as operations for the Flex side of your application.

The library folder will contain the business logic of your application.

The public folder holds all the public resources of your application, which are all the resources that will be visible to the client. Also included in the public folder is the Gateway script. The gateway is responsible for converting objects and translating the results from PHP methods into native ActionScript objects used in the Flex User Interface.

The Zend Framework library is included in the Include Path of your PHP project automatically. You can see this and the resources contained within it by opening the PHP Explorer view (see figure 8).

Figure 8: PHP Explorer view

Did you know...

The gateway script initializes the Zend AMF Server, which is able to translate between Flex/ActionScript and PHP, and the Zend Framework Autoloader which enables dynamic class loading.

For more information see The Gateway Script.

Step 3: Use Design Mode to Add Components and Set Properties

Switch to Design mode and drag out Label, DataGrid, and Button components from the Components view to create the interface shown in Figure 9. Use the Properties view to assign component ids of empBtn, deptBtn, and empDg and set other properties.

Figure 9: Arrange components as shown here

HTML applications are built from document elements such as headings, paragraphs, and tables. Flex applications are built from components such as Buttons, CheckBoxes, and DataGrids. The Flex 4.5 framework includes over 70 components, including user interface controls to display content and provide user interaction and containers to manage the layout.
Switch to Source mode and take a look at the generated code. You will see a new tag for each of the components you added. The order of the tags does not matter because the Application container uses absolute positioning by default so component positions are set by their x and y properties.
The <s:Label> tag represents a Label control, a very simple user interface component that displays text. Its text property is set to "XYZ Corporation Directory" and its x and y properties are set to where it will appear in the interface. The color and fontSize attributes change the style of the font used. In Flex, you can set color styles to a string for any of the 16 colors in the VGA color set (for example, red or blue) or an RGB triplet in hexadecimal format (for example, #FF0000 or #0000FF).

<s:Label x="36" y="36" text="XYZ Corporation Directory" color="maroon" fontSize="20"/>

For each component, you can specify properties and styles. Properties apply only to that particular component instance. Styles can be set inline as done here or using CSS to create style rules to apply to your components.

Step 4: Change Component Attributes in MXML

Use the Flash Builder Content Assist to select and set values for various properties and styles.

When you place your cursor inside a tag and press the spacebar or Ctrl+spacebar, you get code hinting with the Content Assist (see Figure 10). It shows a list of all the attributes you can set for that tag, including properties, styles, events, and more. Different symbols are used for each different type of attribute. This is the same list you see in the Alphabetical view of the Design mode Properties view.

Figure 10: Use Content Assist to see a list of all possible tag attributes

You can get more complete descriptions for each of the attributes in the component's API, its application programming interface. To navigate to a component's API, select Help | Dynamic Help and then click a component tag in your code. You will see a link to that component's API in the Help view, which you click to open the API (see Figure 11). To get the class explorer on the left side, click the Show Table of Contents link in the upper-right corner of the window.

Figure 11: View a component's API

Step 5: Create Your PHP Project Resources

In your Library folder, create two PHP file's by going to File | New | PHP File and name then Employee and Department. Copy the Employee.php and Department.php code into the files and save the project.

Figure 12: The PHP Explorer view showing your PHP Service and the Department and Employee files.

Step 6: Create Your PHP Service

Select the services folder in your PHPMobileService project, and from the Right Click Menu select New | Class (see figure 13). Call the file EmployeeService (enter the name in the Class Name text field). Mark the Constructor and the Generate PHPDocBlocks checkboxes (see figure 14) which creates a skeleton in the file in which to add your methods.

Figure 13: Select Class from the Right Click Menu of your services folder.

Figure 14 The Create New PHP Class dialog.

Copy the EmployeeService example code into the file.

As this code includes details about your database, edit the values represented in the "" according to the details of your database.

Step 7: Run a PHPUnit Test on Your PHP Service

Running a PHPUnit test will allow you to test the methods in your PHP service, ensuring that individual methods are working properly. In the same way that you can debug an application to diagnose problems within it, you can run a PHPUnit test to help you diagnose any problems or errors in your PHP class. Testing an individual method is one option (see figure 20), but running a PHPUnit Test will allow you to test all of the methods in the class simultaneously.
In this case, we are using this resource to ensure that our PHP class is working smoothly to prevent any future errors.

Go the PHP Explorer view and select the EmployeeService class. From the Right Click Menu select New | Other | PHP | PHPUnit | PHPUnit Test Case (see figure 15).

Figure 15: Select PHPUnit Test Case from the New wizard.

Click the 'Click here to add PHPUnit to the Include Path' option, which will allow the PHPUnit Test to be aware of the resources in your project and functionalities such as Content Assist. In the Element to test field click Browse and write EmployeeService in the search field and select EmployeeService from the list.
A file named EmployeeServiceTest has now been created in the services folder of your PHPWebService project (see figure 16). This file includes methods that are created specifically to run and test the methods in your EmployeeService class.

Figure 16: You can see the new test file created for your PHPUnit Test in the PHP Explorer view.

Still in the PHP Explorer view select your new EmployeeServiceTest file and from the Right Click Menu select Run as | Run Configurations and double click PHPUnit. Name the configuration EmployeeServiceTest and open the PHP Script tab and select the Alternate PHP option and select the PHP 5.3.3 (CGI) (Zend 5.3.3 CGI) option (see figure 17).
Click Apply and Run to run the application.

Figure 17: Run the file as a PHPUnit Test to run and test the methods in your PHP Service.

The PHPUnit view opens with the results of the test. For a successful test you will see a green bar and the covered lines in the Code Coverage tab (see figure 18). For a failed test, there is a red bar with a list in the Trace failure tab of the specific lines in the code that failed.

Figure 18: A successful PHPUnit Test with the lines covered in the Code Coverage tab.

Step 8: Introspect and Bind

After you have created your PHP services, you need to connect it to your Flex project. This makes the methods in the PHP service easily accessible for binding while developing the Flex side of your application. Once you have introspected your PHP service, you can use the methods contained within it as operations for the Flex component's in your applications GUI.

Introspecting PHP services in Flash Builder 4.5 for PHP can be done in two ways; using the Right Click Menu or using the Data/Services view. Here we will go through the process using the Right Click Menu.

From the Right Click Menu of EmployeeService.php select Create PHP Service for Flex.

The service details (service name, service package, and data type package) are automatically generated according to the PHP class.
Click Next and Finish to complete the PHP Introspection. Your PHP service is now connected to your Flex project.

Select your WebGettingStarted.mxml file in the Package Explorer view, and open the Data/Services view to see all the public methods included in the PHP service (see figure 19).

Figure 19: See all the public methods included in your PHP service in the Data/Services view.

Test the method in your service to make sure it is functioning properly by selecting the getEmployee method in the Data/Services view and select Test Operation from the Right Click Menu. In the Test Operation view make sure getEmployee is selected in the Operation dropdown menu and click Test. The test run will show you all the response names and values received (see figure 20). In this case it is the details of each of the employees in the database.

Figure 20: The Test Operation view lists all of the names and values received from the specific method you tested.

Binding is the process of consuming the PHP methods into your Flex project by binding the data. This is achieved by tying your existing Flex components to an operation (a PHP method). Flash Builder 4.5 for PHP allows you to bind your data in the following ways: using the drag and drop functionality (see figure 21), by going to Data | Bind to Data after selecting code in the Source view or a component in the Design view, by selecting Bind to Data from the Right Click Menu of a Flex component in the Design view, or by inserting it directly in the code.
To bind the data using the drag and drop, open the WebGettingStarted.mxml file in Design mode and the Data/Services view. Select the getEmployees function and simply drag into the data grid you inserted when creating the UI (see figure 21).

Figure 21: Use the drag and drop functionality to drag a method directly into the UI.

Step 9: Run the Application

Use the Run button or the Run menu to compile the application and view it in an HTML page in a browser window by selecting Run As | Web (PHP) Application from the Right Click Menu of the file.
Your application appears in the browser inside a generated HTML wrapper page (see Figure 22).

Figure 22: View the application in a browser

Step 10: Debug Your Application

Set breakpoints on the getEmployee method in your WebGettingStarted and EmployeeService files. You are placing breakpoints in both the Flex and PHP code so that the debugger can debug both the server side and client side of your application simultaneously.
From the Right Click Menu of your WebGettingStarted project select Debug As | Web (PHP) Application. In the Debug perspective, you will see that the debugger has stopped at the first breakpoint (see figure 23). Click , and then click it again after the next breakpoint is hit.

Figure 23: When debugging your Flex Mobile and PHP application, you will see the results in the Debug perspective.