We don’t have a programming forum, but here’s something I wrote recently if it’s of any interest …
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
http://encryptec.net/wp-content/uploads/2010/04/Screenshot-1.png
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. http://encryptec.net/example.html
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).
ExtJS can be found at http://extjs.com
The ExtJS examples are at http://www.extjs.com/deploy/dev/examples/
)