Creating an iPad / iPhone Web App using Informix and PHP.

Requirements:

  • Web Server with PHP and Informix PDO.
  • XCode – Dashcode
  • Informix Database Server with the stores_demo database.
  • About 10 minutes of your time.

In this example we will be using the Apache/PHP stack that is provided by the IBM OpenAdminTool for Informix.

Assumptions and Glossary.

The following assumes you have  OAT installed in /Applications/OpenAdmin.

The term WEBROOT will refer to the /Applications/OpenAdmin/Apache_XXX/htdocs directory.

Overview

The application we are going to create will display a list of customer names , selecting a particular customer will then display further information about that customer like their address , contact details etc.

Creating an iPad Application that pulls data from your Informix Database is a simple 3 step process.

Step 1. Create a web service in php that pulls out your required data.
Step 2. Create the application that consumes that data.
Step 3. Sit back and marvel at how cool you are.

Lets get started.

Step 1

We need to create a web service in PHP. The service will get all the customer records from the database.

In the WEBROOT directory create a new directory called  ‘custdemoapp’ .

Now lets create our service within that new directory.

Create and edit a file called service.php with the following code.

<?php
# setup some variables for our connection.
# change the following for your environment.
$host = HOSTNAME; #Hostname of where Informix is running.
$port = PORTNUM;  # port # that Informix is listening on.
$server = SERVER;  # The INFORMIXSERVER.
$database = stores; # Name of the stores_demo database.
$protocol = PROTOCOL;  # Protocol for the connection.
$user = USERNAME;  # Username to connect as.
$password = PASSWORD; # Password for the user.

#setup our ‘dsn’
$dsn  = "informix:host={$host};service={$port}";
$dsn .= ";database={$database};protocol={$protocol}";
$dsn .= ";server={$server}";

# connect to the database.
$db = new PDO($dsn,$user,$password);

# create the select statement
$sql = "SELECT * FROM customer";

# perform the query.
$stmt = $db->query($sql);

# fetch all the data.
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

#close the query.
$stmt->closeCursor();

# we are going to output this in an xml format so
# lets tell the browser to expect xml
header("Content-Type: text/xml");

#create a simplexml.
$xml = simplexml_load_string("<?xml version='1.0' encoding='utf-8'?><cust/>");

# loop thru our records adding each one to our xml.
foreach ($rows as $key => $value)
{
        $node = $xml->addChild("customer");
        foreach ($value as $k >= $v )
        {
                #fix up any special characters.
                $v = htmlentities($v);
                $node->addChild($k,$v);
        }
}

#display the xml;
print $xml->asXML();
?>

We now have a URL that will give us the customer records in a XML format.

Step 2

In this step we will create our UI and ‘hook up’ our newly created service to provide the data.

To begin,  launch the application Dashcode.

You should see a screen similar to the one shown.
If not select File -> New Project from the Dashcode menu

Select the template type  ‘Browser’ and also be sure to uncheck the ‘Safari’ option.

Click ‘Choose’ to create the new project.

The next step is to define our data source.

Dashcode gives us a nice easy to follow work flow.

The option we are looking for is ‘Customize data’ .

Clicking on the ‘Customized data’ tab will show us the options available.

With the expanded Customized data tab select the ‘Data Sources’  option.

The template we selected comes with some sample data , which is loaded from a javascript file.

We want to use the service we created above so we just need to change the URL to point to our web server and the location of our service.

Below the URL we should now see the first customer record.

So we have our data , lets modify the User Interface to be more applicable.

To get back to the  ‘work flow’ click the icon located at the bottom left. The elements of the  UI are laid out in a ‘tree’ form , expanding a level shows each part of the UI.  The part we need to change is the ‘detailBox’ under ‘detailLevel’ .

Selecting the element in the ‘tree’ also selects the element in the UI preview , so with the ‘detailBox’ selected lets make it a little bigger . We also need to delete the existing text boxes as we want to create our own.  To delete an element just selected it and hit the delete key.

To add our fields open up the Library panel . To open the Library panel either select the Library option in the Workflow panel or use Window -> Show Library from the Dashcode menu. ( The keyboard shortcut SHIFT->CMD->L also opens the panel )

The Library Panel shows the various UI elements we have available to use.

Find the ‘Text’ part and drag it from the Library into the ‘Detailbox’.

Modify the Text to say ‘address1’ .

Add 4 more ‘Text’ parts changing the text to ‘address2’ , ‘city’ , ‘state’ and ‘zip’ .

Align them up using the ‘guides’ that appear.

Next add a ‘Rounded Box’ underneath the existing one.

Add 2 more text fields , label them ‘fname’ and ‘lname’ .

Finally ,  to the new box ,  add a ‘Call Button’.

For completeness add 2 more ‘Text’ boxes labels ‘Address’ and ‘Contact’ and position above each box accordingly.

You should now have something that looks like this :

Lets switch to the ‘list’ view by selecting ‘list’ just above detailLevel and wire up our data to the UI.

Once again select the ‘Data Source’ option from the workflow.

What we need todo is connect our datasource to the itemList as a data array.

To achieve this click on the ‘customer’ , you will notice a ‘circle’ appear at the end. Hovering over the circle and it changes to a plus sign. Clicking and dragging reveals a blue line.

Draw the line up to the Item list , as you move over the item list it will highlight and the word ‘list’ will appear in a grey box towards the bottom right .

Releasing the mouse button will then show a dialog asking what ‘element’ of the ‘list’ do you want to connect too , click on the ‘dataArray’ .

Next to the customer should now be an additional box saying “list.dataArray” ,

Now we need to connect the ‘company’ field to the ‘itemRow”,

Following the same as we did above , this time hover over the ‘company’ field , select the circle , with the mouse button held , draw up to the Item box.

Move over the Item box till it highlights with rowTitle , releasing the button shows another popup , this time select the ‘text’ option.

Next to ‘company’ should be an additional box that reads “rowTitle.text” .

We now have our customer data hooked up to the list part of the UI .  Setting up the detail view is very similar so lets do it .

If not still active , switch back to the Data Sources in the flow control , you should notice an additional element listed there now called “list” . Select ‘list’  , with list highlighted select the ‘detailBox’ to show our detail UI .

Just as we did with the ‘listItem’ , we connect a ‘dataField’ (eg: ADDRESS1) to its corresponding UI Element ( The Text we added and called address1 ) by clicking the circle and dragging.  Be sure to select the ‘text’ element from the popup to make sure we bind to the text part of the text box.

Connect all the remaining customer fields.

The ‘CallButton’ can be connected to the PHONE datasource element and when running on an iPhone this will actually ‘dial’ the number when pressed. When connecting Phone to CallButton be sure to select the ‘phoneNumber’ element of the dialog.

When everything is hooked up it should look similar to the picture on the left.

Now all we have todo is Run our application.  Selecting the Run option at the top or press the shortcut COMMAND R .

You may see some dialogs warning you about running in the simulator just click continue.

The iPhone simulator should start and launch Safari and load your application.

Tapping a customer name will slide in the customer details.

Step 3.

In the simulator change the hardware to be an iPad .

Files for the app can be downloaded here

Comments are closed.