I didn’t find a good solution to the problem when searching and had to resort to my own, hacking away on Google Maps. As I was feeling really good about myself when I had it working really well I just remembered that Google Maps Javascript API V3 has been released in Google Labs… And of course there it was. The Marker class has a new method, setZIndex(zIndex:number).

Well, version 3 of the API is still only released by Google Labs which is “home to developer products that are still in their formative stages“. So for anyone not inclined to use version 3 just yet, I’ll write down how I did it here.

As I use JQuery in this particular project the example is also using JQuery. If used in production I suggest using try/catch wherever appropriate as the solution depends on a specific dom structure.

I have the below HTML which is the container for the Google map.

<div id="indexmap"></div>

The map is created as below (you’ll have to add the lat/lng variable values yourselves.

var map = new GMap2($('#indexamp'));
var point = new GLatLng(lat, lng);
map.setCenter(point, zoom);

This, as most know, creates the actual map. Then it is time to add the markers. In my case I have a list of locations with the latitude/longitude in the actual html. JQuery helps me loop over these locations and dynamically add markers in the correct spots. This HTML looks like below. Note how each definition list have an id no with “mm_” as prefix. (Never mind any objections you have on having many definition lists like this… Never mind that these coordinates are fiction…)

<dl id="mm_0">
  <dt>...</dt>
  <dd>
    <span class="lat">61.333</span><span class="lng">31.1324</span>
    Random text
  </dd>
</dl>
<dl id="mm_1">
  <dt>...</dt>
  <dd>
    <span class="lat">61.333</span><span class="lng">31.1324</span>
    Random text
  </dd>
</dl>

What I want is the markers to be highlighted with a different icon every time I hover over a definition list element (dl). However, both have the same coordinates and one of the markers will be hidden behind the other.

So to prepare we need to make sure the actual images in the Google generated map can be connected to these defintion list id:s. The Google map have many different layers on top of each other. One layer contain the foreground images, another the shadows, mouse map definitions and so on. Each of these layers (normal div elements) have their own z-index.

In these different layers the images used have their own z-index. However, the z-index for the marker foreground image is the same as for the transparent clickable marker image. This makes it possible to use the transparent image z-index to restore the foreground image z-index. This is important as not to confuse the user when he later click on a marker…

So let’s loop over these images and give them appropriate id values as well as put the markers on the map. (No – Google does not give them id’s). This is, stripped to the bare essentials, the complete code with some comments.

// Create the map
var map = new GMap2($('#indexamp'));
var point = new GLatLng(lat, lng);
map.setCenter(point, zoom);

// Loop over the definition lists picking up coordinates
var n = 0;
$('dl').each(function() {
	var lat = parseFloat($('span.lat', this).text());
	var lng = parseFloat($('span.lng', this).text());
	var point = new GLatLng(lat, lng);

	// Create the marker with custom images
	var markerIcon = new GIcon(G_DEFAULT_ICON);
	markerIcon.image = 'marker_default.png';
	markerIcon.iconSize = new GSize(23, 30);
	markerIcon.shadow = "marker_shadow.png";
	markerIcon.shadowSize = new GSize(50, 30);
	markerIcon.iconAnchor = new GPoint(11, 29);
	markerIcon.infoWindowAnchor = new GPoint(11, 14);

	var marker = new GMarker(point, {icon: markerIcon});

	// Change the foreground image when hovering over a definition list
	// Note that the actual id's have not been created yet.
	var no = this.id.substring(3); // Exclude the prefix
	$(this).hover(
		function() {
			marker.setImage('marker_selected.png');
			// Bring this image to foreground
			$('#mf_' + no)[0].style.zIndex = 1;
		},
		function() {
			marker.setImage('marker_default.png');
			// Reset the z-index based on the transparent image
			// that has the same z-index
			$('#mf_' + no)[0].style.zIndex = $('#mt_' + no)[0].style.zIndex;
		}
	);
}

// Add id values to the foreground images, based on the
// dom structure created beneath the #indexmap div element used
// as the place holder for the map
n = 0;
$('#indexmap div > div > div:eq(6) img').each(function() {
	this.id = 'mf_' + n++;
});

// Add id values to the shadow images the same way
n = 0;
$('#indexmap div > div > div:eq(8) img').each(function() {
	this.id = 'mt_' + n++;
});

You might have to amend the code to get it working for you as I have cut’n pasted different parts. In the real code there is a lot of other things going on that would’ve made the example above hard to read. I do think however that you should be able to understand how it works.

After a trip to Dublin I finally launched the beginning of a new social tourist Dublin guide. It is exactly the same site as both the Swedish Fuengirola guide as well as the English Fuengirola guide I launched after living there for five months. The functionality is somewhat basic as of yet but every now and then I’ll add something more.

Basing three different sites, even though they are very similar, using two different languages gives me the possibility to try out several parts of Zend Framework. It also requires a good design both in the backend and frontend to keep it maintainable. I thought maybe some people would be interested in a basic overview of the different parts needed to put everything together.

Backend

The sites aren’t really that complicated. On a basic level there is a MySQL database and a database layer using Zend_Db/Zend_Db_Table, there is a Zend Framework MVC architecture using models, controllers, views, layouts with Zend_Layout as well as a few view helpers and some HTML, CSS as well as Javascript. All commonly needed. There is more needed to make it a sitethough.

I want as little configuration per site as possible but I naturally still use Zend_Config_Ini for settings. Zend_Registry is needed to keep the global scope clean and is used to store instantiated objects that need to be available throughtout the website logic.

I have been a bit particular on using ZF as often as possible on these sites. With few exceptions. Thus I also use Zend_Form, Zend_Locale, Zend_Translate, Zend_Cache and more. Zend_Cache is really a no brainer and mainly used to speed up translations. This is extremely easy as Zend_Translate and Zend_Locale both are connected to the cache with one simple method call each. It is not complete but how simple this is to setup is illustrated by the below code.

$configuration = new Zend_Config_Ini(
    APPLICATION_PATH .'/config/app.ini',
    APPLICATION_ENVIRONMENT
);
$frontendOptions = array(
    'lifetime' => $config->cache->lifetime,
    'automatic_serialization' => true
);
$backendOptions = array('cache_dir' => $config->cache->dir);
$cache = Zend_Cache::factory(
    'Core',
    'File',
    $frontendOptions,
    $backendOptions
);

$conf_locale = $configuration->locale;
$locale = new Zend_Locale($conf_locale);
$locale->setCache($cache);

Zend_Translate::setCache($cache);
$translate = new Zend_Translate(
    'array',
    APPLICATION_PATH .'/config/translation-' . $conf_locale . '.php',
    $conf_locale
);
$translate->setLocale($conf_locale);

Zend_Form have had a few problems in many versions of ZF. In my opinion it is also a bit bloated and limiting to be used all the way. (Even though I like the automatic connection to the translation functionality in Zend_Translate and the validation through Zend_Validate) So I have settled for a simpler way where I use Zend_Form fully for validation (with Zend_Validate) and then give the view access to the form through a Zend_Form subclass to be able to print the fields individually. I think this is easier to handle than all the overloading and coding needed to fully make Zend_Form create forms as I want them. Another good thing with the form classes is that they too are locale aware and are translated automatically by connecting them to Zend_Translate through the simple line Zend_Form::setDefaultTranslator($translate);. The sub classed Form utility class looks like below. The generated elements are translated automatically. Very convenient.

class Custom_Form extends Zend_Form  {
    /**
     * Render a field
     * @param string $name The name of the form element
     */
    public function _e($name) {
        $e = $this->getElement($name);
        return ($e) ? $e->render() : "<dt>Error</dt><dd>Missing <$name> field element</dd>";
    }
}

Another thing needed for these sites are to keep the urls understandable and thus translated into the language used on the site. For this the routes, or paths, are kept in the translation file as well. The translated paths are then registered to the router through the use of Zend_Controller_Router_Route and Zend_Controller_Router_Route_Regex objects.

$frontController = Zend_Controller_Front::getInstance();
$router = $frontController->getRouter();
$router->addRoute(
    'route_review',
    new Zend_Controller_Router_Route(
        $translate->translate('route_review'),
        array('controller' => 'review', 'action' => 'index')
    )
);

For image manipulation I haven’t looked further than ImageMagick. After a bit of tweaking you get very good quality when producing different image sizes.

Search

Last but not least, on the backend that is, there’s the search engine. ZF have an implementation of Lucene through Zend_Search_Lucene (derived from the Apache Lucene project). This is the one time I haven’t gone with ZF as I very much like the open source Sphinx search engine as it is so easy to integrate with MySQL. So Sphinx get to power the search.

This is convenient for several reasons. MySQL is not a great full text search engine, Sphinx give you better weighted results. The main reason though is the performance. Sphinx is very fast in itself but for a site with heavier traffic it is as simple as moving the search backend to it’s own machine to get a performance increase.

Frontend

On the frontend there is as clean html as possible to make it easy to change the design with only CSS as well as manipulate the client side with JQuery. If it wouldn’t be for the Google map the site would actually be pretty useful even without no css style at all.

A good practice I learned just recently (remember I’m mostly a backend developer) is to base all javascript functionality on modules that are instantiated depending on element ids present in the html. This makes it a lot simpler to split the javascript functionality into manageble pieces and also makes it a lot easier to maintain.

There are functionality in the client side javascript used to display error messages and information. This makes it necessary to create one javascript file with translation stirngs for each language. The correct javascript translation file is chosen in the layout (template/view file) depending on the current locale.

The map used is (are there any alternatives) Google Maps API. I chose to completely initiate the map by scanning the actual data displayed on the page. This is possible through clean html markup and also means that if I choose to list ten reviews on a page instead of five nothing need to be changed at all in the frontend. Only a loop limit on the backend.

Conclusion

Well. No conclusion. This was just a very basic walkthrough of most of the different pieces needed to create a fairly simple Zend Framework based website. Mostly it was a walkthrough of the bootstrap… I still hope it is useful or at least interesting.

I know I find it interesting to read about other sites and the architecture and design behind them.

Representing a tree of nodes, for example product categories, in a relational database is not hard. The most common way of doing it is to store a parentid with each node. This is also known as the adjacency list model. It is sometimes also referred to as the recursive model. Whatever the name it is easy to grasp. It is very simple to insert and move nodes around but it is not an optimal solution if you often select the whole tree from the database for displaying on a web page as you need to recursively select all children of nodes.

The nested set model

A much better solution is the nested set model. In this model trees are represented as nested sets. Instead of using a parentid you have a left and right value for each node expressing the relationship to other nodes. A tree of nodes can look like this.

        34
         |
         +--36
         |   |
         |   +--46
         |   |
         |   +--47
         |
         +--38
             |
            +--39

The same data can be viewed more graphically as nested sets. This is also the way they are stored in the database. Notice how the left and right values are numbered in order from the outermost left to the outermost right.

                            id:34
   +----------------------------------------------------+
   |             id:36                     id:38        |
   |   +------------------------+    +--------------+   |
   |   |    id:46      id:47    |    |     id:39    |   |
   |   |   +-----+    +-----+   |    |   +------+   |   |
  1|  2|  3|     |4  5|     |6  |7  8|  9|      |10 |11 |12
   |   |   +-----+    +-----+   |    |   +------+   |   |
   |   +------------------------+    +--------------+   |
   +----------------------------------------------------+

In the database this is stored as in the following table.

 +----+-----+-----+
 | id | lft | rgt |
 +----+-----+-----+
 | 34 | 1   | 12  |
 | 36 | 2   |  7  |
 | 46 | 3   |  4  |
 | 47 | 5   |  6  |
 | 38 | 8   | 11  |
 | 39 | 9   | 10  |
 +----+-----+-----+

This allow you to select the full tree with only one select statement. Normally you select the full list of nodes including the depth of each node as shown below in the small table containing id and depth. It is then easy to loop over the data in PHP to produce a nice tree in HTML/CSS.

The data below can be displayed as the the tree on right. The depth is in parenthesis.

 +----+-------+        34 (0)
 | id | depth |         |
 +----+-------+         +--36 (1)
 | 34 | 0     |         |   | 
 | 36 | 1     |         |   +--46 (2)
 | 46 | 2     |         |   |
 | 47 | 2     |         |   +--47 (2)
 | 38 | 1     |         |
 | 39 | 2     |         +--38 (1)
 +----+-------+             |
                            +--39 (2)

Here is a more thorough article on how you use MySQL with nested sets.

On to the problem

Last night I was working on an application that display a full tree where the user must be able to to drag and drop nodes to reorder the tree. The problem is that it is much more difficult to insert or reorder the tree using the nested set model.

For the actual html I produced nested ordered lists using the OL and LI html element so that it was easy to use with the excellent MooTree script based on MooTools. (It does seem to have trouble with the latest version of MooTools though.) After reordering the structure it was easy to extract the tree list including the depth of each node. I sent this to the PHP backend to be handled there. The text data I sent to the PHP backend then look like below.

 34,0
 36,1
 46,2
 47,2
 38,1
 39,2

As you can see it looks exactly like the data I selected from the database previously. So I had to create a function in PHP that took this indata and produced a list of nodes with the correct left and right values. This list is then looped over to update all the nodes in the database.

function depth2nestedset($data)
{
  $lines = explode("\n", $data);
  $rows = array();
  $stack = array();

  $lft = 0;   // Left value
  $rgt = 0;   // Right value
  $plvl = -1; // Previous node level

  foreach($lines as $line) {
    list($id, $lvl) = explode(',', $line);

    // Skip empty/faulty lines
    if (trim($id) == '') {
      continue();
    }

    if ($lvl > $plvl) {
      $lft++;
      $rgt = 0;
      array_push($stack, $id);
    }
    else if ($lvl == $plvl) {
      $pid = array_pop($stack);
      $rows[$pid][2] = $rows[$pid][1] + 1;
      $lft = $lft + 2;
      $rgt = 0;
      array_push($stack, $id);
    }
    else {
      $lft = $lft + ($plvl - $lvl) + 2;

      $diff = $plvl - $lvl + 1;
      for($n = 0; $n < $diff; $n++) {
        $pid = array_pop($stack);
        $rows[$pid][2] = $lft - $diff + $n;
      }
      array_push($stack, $id);
    }

    $rows[$id] = array($id, $lft, $rgt);
    $plvl = $lvl;
  }

  $plvl++;
  $cnt = count($rows) * 2;
  $leftovers = count($stack);

  for($n = 0; $n < $leftovers; $n++) {
    $pid = array_pop($stack);
    $rows[$pid][2] = $cnt - $plvl-- + $n;
  }

  return $rows;
}

The resulting associated array that is returned looks like below.

Array
(
    [34] => Array
        (
            [0] => 34
            [1] => 1
            [2] => 12
        )
    [36] => Array
        (
            [0] => 36
            [1] => 2
            [2] => 7
        )
    [46] => Array
        (
            [0] => 46
            [1] => 3
            [2] => 4
        )
    [47] => Array
        (
            [0] => 47
            [1] => 5
            [2] => 6
        )
    [38] => Array
        (
            [0] => 38
            [1] => 8
            [2] => 11
        )
    [39] => Array
        (
            [0] => 39
            [1] => 9
            [2] => 10
        )
)

That makes the circle complete. From left/right values in the database to a node tree based on depths that is easy to manipulate in html and then back to left/right values. Hopefully this makes sense. Do you have a better solution or more examples on applications that do this I would love to hear about it.

1. A new extension for JSON decoding and encoding enabled by default.
2. Hooks for tracking file uploads.

These features aren’t competing for the heavy weight title in the release notes. Still, having these implemented in PHP makes it a lot easier to develop modern, more responsive, web based applications. JSON encoding have never been very hard but it makes sense to have native support in PHP. I have not tested the file uploads yet but being able to correctly display progress bars when uploading large files is definitely important when working with web applications.

I don’t want any PHP mixed with my html. I don’t want javascript in there either which is why I like the unobtrusive way of adding javascript to my applications. So behaviour fits right into my world. Normally you scatter lots of onclick and other event handling attributes in the html like below.

<a href="#" onclick="myaction()">My action</a>

Instead I create rules with the help of behaviour that applies certain events to a specific element based on id or css class. This gives me really clean html and is good because I need to style links individually in CSS anyways.

<a href="#" id="myaction">My action</a>

var sheetRules = {
    '#myaction': function(el) {
        el.onclick = handleMyAction;
    }
Behaviour.register(sheetRules);

I also want to use access keys. I don’t want users to be forced using the mouse. So the html I want is below.

<a href="#" id="myaction" accesskey="m">My action</a>

Using the access key combination, ALT-m in case you’re using windows, is working great. It seems the browsers are intelligent enough to fire the onclick event instead of following the actual link. So it doesn’t ruin it for you even if you have a backup link in addition to the onlick handler in case the users have javascript turned off.

It is actually quite simple to create accessible applications that degrade gracefully.

The most annoying thing is that the only user input I allow on my site, the comment form, is vulnerable. I guess I will have to fix that now. Immediately.

After investigating AOP a bit more I am convinced that the concept is well worth the effort. I really like object oriented architectures as I think it is a good way of modelling applications. I don’t like to overdo it though. In PHP projects I often end up with a few classes and a lot of procedural code. Mostly structured but still procedural.

Anyway I felt it was time to do some experimenting. I recently released my Toxic framework (Project is dead and gone), a javascript and PHP communication toolkit, which is object oriented in both ends. Toxic does not force me but it incurrage me to program program Javascript in a more object oriented fashion. I decided to see if aspects could be applied to the javascript end of things. I think it could be really useful in rich web applications which mostly depend heavily on javascript. As javascript does not support AOP I had to do some coding. As it turns out javascript is very suitable for some nifty AOP coding.

function Document(){}
Document.prototype = {
_id: 0,
_name: '',

name: function() {
  return this._name;
},

id: function() {
  return this._id;
},

save: function() {
   return true;
},

open: function(id) {
  this._id = id;
  this._name = 'Ajax on AOP steroids'
  return true;
}
}

function openDocument(id)
{
  var doc = new Document();
  try {
    doc.open(id);
  }
  catch(e)
  {
    alert(e);
    return;
  }

  // Update icons and other user elements affected  alert("Doc id: " + doc.id());
  return doc;
}

function Lockable(){}
Lockable.prototype = {
_locked: false,

  locked: function() {
    return this._locked;
  }
}

function lockOnOpen()
{
  // Lock this object        
  // If we didn't succeed
  throw (new Error ("Failed locking " + this._name));

  // The object is locked
  this._locked = true;

  var ret = proceed();     

  return ret;
}

try {
  Aspects.addIntroduction(Lockable, Document);
  Aspects.addAround(lockOnOpen, Document, "open");
}
catch(e)
{
  alert(e);
}

function openDocument(id)
{
  var doc = new Document();
  try {
    doc.open(id);
  }
  catch(e)
  {
    alert(e);
    return;
  }

  // Update icons and other user elements affected
  alert("Doc id: " + doc.id());
  return doc;
}

InvalidAspect = new Error("Missing a valid aspect. Aspect is not a function.");
InvalidObject = new Error("Missing valid object or an array of valid objects.");
InvalidMethod = new Error("Missing valid method to apply aspect on.");

Aspects = new Object();

Aspects._addIntroduction = function(intro, obj)
{ for (var m in intro.prototype)
    {
      obj.prototype[m] = intro.prototype[m];
    }
}

Aspects.addIntroduction = function(aspect, objs)
{
  var oType = typeof(objs);

  if (typeof(aspect) != 'function')
    throw(InvalidAspect);

  if (oType == 'function')
  {
    this._addIntroduction(aspect, objs);
  }
  else if (oType == 'object')
  {
    for (var n = 0; n < objs.length; n++)
    {
      this._addIntroduction(aspect, objs[n]);
    }
  }
  else
  {
    throw InvalidObject;
  }
}

Aspects.addBefore = function(aspect, obj, funcs)
{
  var fType = typeof(funcs);

  if (typeof(aspect) != 'function')
    throw(InvalidAspect);

  if (fType != 'object')
    funcs = Array(funcs);

  for (var n = 0; n < funcs.length; n++)
  {
    var fName = funcs[n];
    var old = obj.prototype[fName];

    if (!old)
      throw InvalidMethod;

    obj.prototype[fName] = function() {
      aspect.apply(this, arguments);
      return old.apply(this, arguments);
    }
  }
}

Aspects.addAfter = function(aspect, obj, funcs)
{
  if (typeof(aspect) != 'function')
    throw InvalidAspect;

  if (typeof(funcs) != 'object')
    funcs = Array(funcs);

  for (var n = 0; n < funcs.length; n++)
  {
    var fName = funcs[n];
    var old = obj.prototype[fName];

    if (!old)
      throw InvalidMethod;

    obj.prototype[fName] = function() {
      var args = old.apply(this, arguments);
      return ret = aspect.apply(this, Array(args, null));
    }
  }
}

Aspects._getLogic = function(func)
{
    var oSrc = new String(func);
    var nSrc = '';
    var n = 0;

    while (oSrc[n])
    {
      if (oSrc[n] == '\n' || oSrc[n] == '\r')
        nSrc[n++] += ' ';
      else
        nSrc += oSrc[n++];
    }

    n = 0;
    while (nSrc[n++] != '{');
    nSrc = nSrc.substring(n, nSrc.length - 1);
    return nSrc;
}

Aspects.addAround = function(aspect, obj, funcs)
{
  if (typeof(aspect) != 'function')
    throw InvalidAspect;

  if (typeof(funcs) != 'object')
    funcs = Array(funcs);

  var aSrc = this._getLogic(aspect);

  for (var n = 0; n < funcs.length; n++)
  {
    var fName = funcs[n];
    if (!obj.prototype[fName])
      throw InvalidMethod;

    var oSrc = 'var original = ' + obj.prototype[fName];
    var fSrc = oSrc + aSrc.replace('proceed();',
                 'original.apply(this, arguments);');
    obj.prototype[fName] = Function(fSrc);
  }

  return true;
}

The project is no longer available. Might be so in the future.

Recently I have been working hard on my SRSS (whatever) project. The result is nearly finished and has been dubbed Toxic.

Toxic is an AJAX toolkit, or framework, for creating rich web applications. It handles the tedious and repetetive tasks involved in integrating a client created using html and javascript with a server backend. It enables client side javascript to directly call class methods in PHP5 (or any other suitable language). It also enables the server side PHP to directly call client side javascript functions. Using Toxic you can get rid of much of the tedious work in form intensive rich web applications.

UPDATE: Toxic has been release here (Project is dead and gone).

<!ELEMENT class (a*|i*|d*|b*|n*|s*|u*)*>
<!ATTLIST class name CDATA #REQUIRED
                method CDATA #IMPLIED
                error CDATA #IMPLIED>
<!ELEMENT a (a*|i*|d*|b*|n*|s*|u*)*>
<!ATTLIST a id ID #IMPLIED
            k CDATA #IMPLIED>
<!ELEMENT i EMPTY>
<!ATTLIST i id ID #IMPLIED
            k CDATA #IMPLIED
            v CDATA #REQUIRED>
<!ELEMENT d EMPTY>
<!ATTLIST d id ID #IMPLIED
            k CDATA #IMPLIED
            v CDATA #REQUIRED>
<!ELEMENT b EMPTY>
<!ATTLIST b id ID #IMPLIED
            k CDATA #IMPLIED
            v CDATA #REQUIRED>
<!ELEMENT n EMPTY>
<!ATTLIST n id ID #IMPLIED
            k CDATA #IMPLIED>
<!ELEMENT s (#PCDATA)>
<!ATTLIST s id ID #IMPLIED
            k CDATA #IMPLIED>
<!ELEMENT u (#PCDATA)>
<!ATTLIST u id ID #IMPLIED
            k CDATA #IMPLIED>

Recently the Google Web Accelerator (GWA)has received a lot of attention from web application developers. Rightly so. When installing GWA for use in your browser it speeds up surfing by prefetching pages. This can be very useful but also extremely dangerous as it has very bad side effects on many (badly designed) web applications. Why? When you open up a web page GWA scans through the page looking for all the links and prefetch all the pages pointed to by the links. This is where things can go really wrong…

<a href="#" onclick="deleteUser(372);">Delete user</a>

<a href="deleteUser.php?id=372">Delete user</a>

RewriteCond %{HTTP:x-moz} ^prefetch
RewriteRule ^/*admin/.* - [F,L]

Spare time to spend on interesting projects is not plentiful nowadays. Even so I have managed to put quite a few hours into a small web application framework. My goal is to make it easier to develop web applications that heavily depend on client server communication. I really want to get rid of the painfully boring and repetetive task of validating form data and sending it to a backend in PHP where the data has to be validated again. The framework is based on XMLHttpRequest for the communication between the client and the server. This kind of communication is commonly known as Remote Scripting. Some people (not me) likes to use the new, more catchy, acronym AJAX. Anyway, this is a sneak peak on how the framework will be used.

Introduction

First I had a look at JPSpan and other similar implementations. Impressive as JPSpan is, I thought it a bit too much for me. I don’t need, or want, transparancy between javascript and PHP classes. To be honest, I really don’t like hiding the communication between client and server as it mostly creates problems. Pretending that the network isn’t there usually gives birth to architectures with a huge amount of method calls over the network. It is better to work with data on the client side, validate it and then send it to the server for the real work. However I did like the serialization into a streamlined XML format and thus I have adapted that in my solution.

The framework which has the wonderfully dry working name of SSRS is getting more and more complicated. I started working on a simple synchronous http communication between javascript and PHP. Now I am ending up with a framework for binding form fields to method calls with automatic validation of data. Still I think it is going to be really useful when production ready.

The HTML form

What is it then and what you do you do with it you ask? To show it off a bit I’ll give you a simple example. The below form is an extremely simple user form. It features a readonly field for the unique user id which of course will be empty when we create new users. When I use this form to create a new user I don’t want the page to reload. It is unecessary slow. But I still want the User_id field populated when the user has been saved.

<form id="User" onsubmit="return saveUser();">
<fieldset>
    <legend>User details</legend>

    <label id="lbl_User_id">Userid</label>
    <input type="text" readonly="1" id="User_id" />

    <label id="lbl_User_login">User login</label>
    <input type="text" id="User_login" />

    <label id="lbl_User_email">Email</label>
    <input type="text" id="User_email" />
    <a href="#" onclick="return saveUser();">Save</a>
</fieldset>
</form>

I have added an onsubmit handler and a link that both call the javascript function saveUser(). I could just as well have used a normal submit button.

The PHP class

To handle users I have created a User class implemented in PHP. The class have a save() method that takes id, login and email as parameters. The id is not mandatory. To be able to return more data than just a value, result data is always returned as key value pairs in an array. When errors or problems are encountered exceptions are thrown which automatically will be passed to the client as javascript exceptions.

class User
{
  public function save($id, $login, $email)
  {
    if ($id == null || $id == 0)
      {
        error_log("Creating new user");
        // Validate data
        // Save user
        // Retrieve the new numerical user id in $id
        $id = 1; // For the example
        return Array('id' => $id);
      }
    throw new Exception("Updating a user is not implemented");
  }
}

Tying them together

So what do I as a developer need to do to connect these two loose ends? Before we create the saveUser() function mentioned above we need to setup the form against SSRS. A few lines of javascript in an onload handler or an explicitly called init function is needed.

var g_user = null;
var frm = null;

frm = new Array(
	new Array('User_id', 'number', '', '', false, '', ''),
	new Array('User_login', 'string', 'A unique login',
		'Login not valid or not unique', true, 4, 8, ''),
	new Array('User_email', 'email', 'Email address is required',
		'Email is not valid', true));

g_user = new RemoteObject('postHandler.php', 'User');
g_user.bindFields(frm);
g_user.bindParams('save', 'User_id', 'User_login', 'User_email');

What the above essentially does is:

1. Create the client object and tell it what server class to use and which URI to communicate with. The postHandler.php is the backend implementation.
2. Create a structure that describes field data types, help and error messages, max/min length, etc.
3. Bind the form to the client object and bind form fields as parameters to method calls.

The framework can handle strings, numbers, decimals, emails, string lists and more. For each datatype it is possible to set various constraints. For some datatypes it is also possible to specify your own regular expression to use as validation.

When this is done we can create the actual saveUser() function.

function saveUser()
{
  var result;
  try
    {
      result = g_user.execute('save');
      document.getElementById('User_id').value = result.item(0);
    }
  catch(ex)
    {
      alert(ex.message);
    }
  return false;
}

That is all. As we have bound the form to the g_user object all the fields are validated prior to being sent to the server. The error messages specified for the fields above will be displayed if needed. Any exception on the server side will also be displayed in the same way. As the fields User_id, User_login and User_email are bound to the save method they will automatically be handed over the PHP method save() in the User class.

Conclusion

The data being sent between client and server is encoded in a simple streamlined XML format and is always validated against a DTD to ensure the data is encoded correctly. This does not mean that you don’t need to check the data on the server side but it does add an extra layer of data security. It is also a lot simpler to validate the parameters in a method, where it should be done, than filtering $_GET or $_POST arrays before calling PHP functions or methods.

The benefits of using a framework like this is that it lets the developer concentrate on the functionality. Another benefit is that it does not interfere with your choice of template engine. I have a few things left to iron out before I release the code.