oreilly.comSafari Books Online.Conferences.


The Power of Google Gears (Part 2)

by Jack Herrington

Google Gears for Offline Data Entry

The ease of HTML and server-side programming makes web development, and the use of web applications, very popular. But dogging the web application developer all this time has been one nagging problem; what happens when the customer can't get access to the Web?

Most of the options available to engineers thus far have either been fragile, relying on the customer not to change the page or close the browser, or they required the download of some software, which is what we are trying to get away from in the first place. Google Gears provides an interesting mid-point for web applications developers. With a little extra JavaScript code, they can use a client-side cache of data to drive their applications until the user becomes connected again.

I won't go into the Google Gears architecture in this article. I'll leave that to my previous article, which provides a good introduction to everything Gears provides and explains how to get started with Gears. In this article I'm going to use the SQLite database Gears provides to allow for offline data entry, which then syncs up with a PHP web application when connectivity is available.

My example is a simple contact database that holds first names, last names, and email addresses. It's the kind of task you can imagine doing when you are on the train looking at some business cards you just got. But you can't with a traditional application, because you are away from the Web. My solution here will be to hold the data locally in the SQLite Gears database, and then update the web server database when connectivity becomes available.

The Web Server Code

The first thing I need to do is to build the web server database and the simple PHP application. The MySQL database schema is shown in Listing 1.

Listing 1. addresses.sql
CREATE TABLE address (
  first VARCHAR(255),
  last VARCHAR(255),
  email VARCHAR(255)

I create the database and add this table to it by using the following Unix command line shown below:

% mysqladmin create addresses
% mysql addresses < addresses.sql

The next step is to write a PHP page that will add a record to the database and return the current list of addresses in the database. This code is shown in Listing 2.

Listing 2. add.php
$db =& DB::Connect( 'mysql://root@localhost/addresses', array() );
if (PEAR::isError($db)) { die($db->getMessage()); }
$sth = $db->prepare( 'INSERT INTO address VALUES ( ?, ?, ? )' );
$db->execute( $sth, array( $_POST['first'], $_POST['last'], $_POST['email' ] ) );
$count = 0;
$res1 = $db->query( 'SELECT count(*) FROM address' );
while( $res1->fetchInto( $row1 ) ) { $count = $row1[0]; }
echo( $count." addresses in the database " );
$res2 = $db->query( 'SELECT * FROM address' );
while( $res2->fetchInto( $row2 ) ) {
<tr><td><?php echo($row2[0]); ?></td>
<td><?php echo($row2[1]); ?></td>
<td><?php echo($row2[2]); ?></td></tr>

At the beginning of the script I include the PEAR DB library that I will be using to talk to the database. The script then connects to the database and adds the posted record to the address table using the insert statement. After that, the script gets the current count of rows and outputs that, then gets the complete list of addresses and outputs that as a table.

If you don't have the PEAR DB library installed already, you can install it using this command line:

% pear install DB

Now, you might have a look at that page and think to yourself, "That's not a complete page, it's just a fragment of a page." Right you are! This PHP page is meant to be called using Ajax from a page with the data entry form. The output of this add.php page will then be put into a <div> within that original page to show the result of the update.

Just to make sure that all works, I'll create a non-Gears test page called form1.html. This page is shown in Listing 3.

Listing 3. form1.html
<script src="prototype.js"></script>
function postForm()
  new Ajax.Updater( 'result', 'add.php', {
    method: 'post', parameters: $('addform').serialize()
  } );
<form id="addform">
<td><input type="text" name="first"></td></tr>
<td><input type="text" name="last"></td></tr>
<td><input type="text" name="email"></td></tr>
<button onclick="postForm()">Add</button><br/><br/>
<div id="result"></div>

Right at the beginning, I include the excellent prototype.js library, which makes writing Ajax requests a breeze. There is then a JavaScript function that posts the form data from the entry fields located below.

The Ajax.Updater class takes a couple of parameters. The first is the id of the <div> tag to update with the output of the add.php page. The second is the URL to make the request to. And then, some optional parameters are included in a hash. In this case, I'm specifying that the POST method should be used, and specifying the post data using the very handy serialize method that comes from the Prototype library.

When I bring this page up in the browser and add a first, last, and email, I see something like Figure 1.

The form1.html test page
Figure 1. The form1.html test page

When I hit the add button the page uses the Ajax.Updater class to post the data to the add.php page, which then sends back the count of records and the records table. This is shown in Figure 2.

After hitting the Add button
Figure 2. After hitting the Add button

All right, now I know that Ajax works. So, what happens if I'm disconnected? Can I save this data up so that it can be posted later, when I'm connected again? With Google Gears I can, very easily.

Pages: 1, 2, 3

Next Pagearrow

Sponsored by: