Topic: Web 2.0 Programming ... (Read 374 times)

Mad Penguin · « **on:** April 03, 2010, 04:06:20 pm »

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;

Code: [Select]

<!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.

Code: [Select]

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.

Code: [Select]

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.

Code: [Select]

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;

Code: [Select]

<?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.

Code: [Select]

<?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;

Code: [Select]

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. 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/

goldendragonuk · « **Reply #1 on:** April 04, 2010, 07:06:54 pm »

where are the status numbers being pulled from ? Am i correct in assuming these numbers are server load ?

Mad Penguin · « **Reply #2 on:** April 04, 2010, 07:45:05 pm »

All the information is being pulled from a pre-existing MySQL table that I just happened to have handy. It can be re-created using the SQL definition provided .. as it happens the table is maintained by the 'watchman' app I'm developing, currently that field is the time it takes for the client server to make a 'connection' to the monitoring server (us).

kirrus · « **Reply #3 on:** April 06, 2010, 10:53:33 am »

Doesn't that mean that your MySQL username and password are publicly accessible..?

Mad Penguin · « **Reply #4 on:** April 06, 2010, 11:49:15 am »

Firstly, the host/user/pass settings are not useful to anyone who doesn't have access to the server itself as they are issued in MySQL 'per ip'. (and in this instance the MySQL server isn't actually visible on a public network - 10.0.0.%)

Secondly, the settings are embedded in the PHP file, and the only access to the file is via HTTP .. and because there is a PHP extension on the file, you will get the results of the file once executed rather than the source code for the file.

So unless I'm missing something, I'm not entirely sure I understand where the issue might be .. ??

(I'm afraid the source links in the example link to "direct.php.htm l" which is a copy if "direct.php" with the details *'d out ..

)

goldendragonuk · « **Reply #5 on:** April 06, 2010, 09:50:20 pm »

i think kirrus thought the same as me when i first read it (until i went to the site)

you stated

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

<insert code here>

the code is meant to be for the direct.php file and not a js file. If it was a js file as stated then you would be able to find the database details. Believe its just a wrong extension i did mean to mention this before but slipped my mind sorry.

Mad Penguin · « **Reply #6 on:** April 06, 2010, 10:47:44 pm »

Ahhh, all becomes clear - methinks Jon was just being a little facetious. He will be very well aware that a file beginning <?php should have a .php file extension and not a .js file extention!

Anyway, well spotted all, typo now corrected!

kirrus · « **Reply #7 on:** April 07, 2010, 02:14:22 pm »

I must have got confuddled as well.. I didn't read it fully, only skimmed it

Author Topic: Web 2.0 Programming ... (Read 374 times)

Mad Penguin

Web 2.0 Programming ...

goldendragonuk

Re: Web 2.0 Programming ...

Mad Penguin

Re: Web 2.0 Programming ...

kirrus

Re: Web 2.0 Programming ...

Mad Penguin

Re: Web 2.0 Programming ...

goldendragonuk

Re: Web 2.0 Programming ...

Mad Penguin

Re: Web 2.0 Programming ...

kirrus

Re: Web 2.0 Programming ...