Programming 2.0

Programming 2.0

April 3rd, 2010 @ Gareth Bult // No Comments

Programming 2.0

If you’ve familiar with HTML and have ever looked at new Web 2.0 applications and thought ‘wow, that looks difficult’, don’t be fooled, what you’re seeing is typically far easier to achieve than using traditional programming techniques.

Here’s a quick-start guide to Web programming with ExtJS, one of the many options out there if you want to write modern online applications. (For a taster of what can be achieved, please take a look at the ExtJS demos)

What you will need

First you’ll want a web server with PHP installed, typically using your local desktop machine will be quite sufficient and indeed all the components required are included in most standard Linux distributions. Also, I’m going to show you how to extract information from an SQL database, so you’ll want to install a copy of MySQL and the PHP/MySQL interface.

Setting up

Next you’ll want a copy of ExtJS, so down load either version’s 3.1 or 3.2 from ExtJS.com and unpack them into the root folder of your webserver, on Linux this is usually /var/www.  For convenience, copy the contents (including sub-folders) of extjs/examples/direct/php into /var/www/remote, this folder contains the files you’ll need to allow your browser based application to talk to your server.

Now for some html

Create a file in /var/www called index.html and paste in the following;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>EXTJS Example</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="remote/api.php"></script>
<script type="text/javascript" src="example.js"></script>
</head>
<body>
</body>
</html>

A bit of JavaScript

Next we’re going to load some javascript into example.js, this should also sit in /var/www and is referenced by the html file above. The ‘viewport’ will render to the page or document body which was defined in the html file above as being empty.

Ext.Direct.addProvider(Ext.app.REMOTING_API);

Ext.onReady(function(){
   var panel = new Ext.Viewport({
      layout   : 'fit',
        defaults : {
         border     : true,
         frame      : true
      },
      items : [grid]
   });
});

Note that we’ve not yet defined grid, so this code needs also to come inside of the onReady function, but before the definition of the panel variable.

var grid = new Ext.grid.GridPanel({
   store: store,
   columns: [
      { width: 100,   header: 'IP Address', dataIndex: 'ip'     },
      { width: 100,   header: 'Host Name',  dataIndex: 'name'   },
      { width: 100,   header: 'Status',     dataIndex: 'status' }
   ]
});

As a little explanation; store is something else we’ve not yet defined. The the remainder of the code defines a table with columns “IP Address”, “Host Name” and “Status”. Next we need to define store which is the client side interface to the appropriate MySQL table, or to be more specific, MySQL query.

store = function()
{
   return new Ext.data.DirectStore({
      directFn : direct.hostList,
      autoLoad : true,
      fields   : [
         { name: 'ip'     , type: 'string' },
         { name: 'name'   , type: 'string' },
         { name: 'status' , type: 'number' }
      ]
   });
}

As far as code that’s going to run ‘in’ your browser is concerned, we should be about done for the moment and the next snippets are code for the server side of the equation. First we start by editing config.php in your remote folder (this is the folder you created / copied above). You need to make it look like this;

<?php
$API = array(
   'direct'=>array(
      'methods'=>array(
         'hostList'=>array( 'len'=>1 )
      )
   )
);

This is telling the ExtJS code how to locate the correct methods to call when your store components asks for it’s table to be populated with data. Next comes the scary PHP code, note that when you get to grips with this it’s really is pretty trivial.

The following needs to be called direct.php and goes into the direct/classes folder.

<?php

function report($code,$text) {
   return array( array('status'=>$code,'text'=>$text));
}

define('DB_NAME'      , '<database>');
define('DB_USER'      , '<user>');
define('DB_PASSWORD'  , '<password>');
define('DB_HOST'      , '<host>');

class direct {

   function hostList($data)
   {
      $db = mysql_connect(DB_HOST,DB_USER,DB_PASSWORD,true);
      if(!db) return report(0,mysql_error());
      if(!mysql_select_db(DB_NAME)) return report(0,'Unable to select database');
      $sql = 'SELECT * FROM hosts';
      $results = mysql_query($sql,$db);
      if(!$results) return report(0,mysql_error());
      $out = array();
      while( $row = mysql_fetch_assoc($results) )
      {
         array_push($out,array('ip'=>$row['ip'],'name'=>$row['hostname'],'status'=>$row['response']);
      }
      return $out;
   }
}

For this to work you will obviously need to have a database with matching name and login credentials as specified in the four define lines. If you want to re-create this MySQL table, you will need something like;

CREATE TABLE `hosts` (
   `id` smallint(6) NOT NULL AUTO_INCREMENT,
   `ip` varchar(15) DEFAULT NULL,
   `hostname` varchar(32) DEFAULT NULL,
   `response` varchar(15) DEFAULT NULL,
   PRIMARY KEY (`id`)
) ENGINE=MyISAM;

What does it look like

It may not be much to look at, but if you consider what you’re doing in the context of the framework, you already have something which can form the basis of a fairly complex application.

To see a ‘complete’ online version in action, together with an ‘assembled’ version of example.js, please visit this link.

Where to go from here?

First you should add some error trapping, the roots of which are already inserted into direct.php, then you could try looking at passing parameters through to the store for filtered loads, and calling ‘Ext.direct’ ‘directly’ without going through a store (which is very useful for obtaining small amount of information or simply performing updates).

Expect to see some ‘complete’ projects appear here over coming months .. Cool


Leave a Reply

Mobile broadband deals
Compare mobile broadband deals from all UK mobile broadband providers at Broadband Expert.		IT Support Bristol
Outsourced IT Support & IT Services for Bristol, London & Bath. Linux & Microsoft certified business support, Call 01225 588 588		IT Support
For The Best IT Support In London Make Our IT Department Your IT Department. Microsoft Gold Certified Partner.		IT Support London
Offers executive IT Support and IT Services to SME businesses in and around Greater London.		IT SERVICES
Award winning IT Services from London provider Wavex offering support, advice, and training
IT Support
A full range of services, from hosting, data recovery and day-to-day support through to Board-level IT advice through our virtual IT Director offering.