One-day Application Building With The Horde Framework

Chuck Hagenbuch

The Horde Project

Do you need to know what a mashup is? How to make sure your application is a fully Web 2.0-compliant interactive masterpiece? Then start Googling. If you want to quickly build applications that tie in to some of the dynamic services now available, however, then this tutorial is for you. Chuck Hagenbuch will walk through creating an interactive, persistent mapping application using building blocks from the Horde Framework. The tutorial will be code-intensive, and will also touch on using the Prototype javascript library, Scriptaculous, and several Yahoo and Google services.

Chuck Hagenbuch founded the Horde Project in 1998 and has been working with PHP and the world of web development ever since. He is currently a Senior Technical Consultant at Zend Technologies, providing professional services to high-profile PHP users such as PayPal and Portugal Telecom.

Goal

Final Product

Tools

A note on code examples

This is a code-heavy, code-focused tutorial. There are a lot of code listings, and they're pretty dense. What I've tried to do is to comment only the parts of the code that are new. So for the PHP examples, look for the orange and read those parts.

V1: Prototype it with Horde

V2: Be more selective

V3: Nicer data entry

V4: Time to create our own template

V5: AJAX time

Ajax.Updater

We're using prototype's Ajax.Updater helper:

Event.observe(window, 'load', function () {
  rows = $('mytable_body').getElementsByTagName('TR');
  for (var i = 0; i < rows.length; ++i) {
    Event.observe(rows[i], 'click', (function() {
      if (selectedRow) {
        Element.removeClassName(selectedRow, 'selectedRow');
      }
      selectedRow = this;
      Element.addClassName(this, 'selectedRow');
      $('prop').innerHTML = '';
      new Ajax.Updater('prop', 'details.php?id=' +
        encodeURIComponent(this.id.substring(5)));
    }).bind(rows[i]));
  }
});

Ajax.Updater target

V6: In-place editing

V7: Geocoding

Fun with latitude and longitude

Automation

Put it on the map

Our mapping code

A few more tweaks ...

Final Product

Questions?

Resources