ClickOffline.com

A lot of you may very well know what happens behind the scenes when a webpage is requested or being served, this article will explain the details and internals of what goes behind when you type http://www.clickoffline.com/index.php

The Internet Architecture

What is meant by internet is a collection of networks that interconnect a large number of content providing servers with the end users. Internet typically is a network of much smaller networks which are interconnected. Any network/machine that is connected to the internet can provide and retrieve content from the internet.

Since internet is a network, just like any other network it supports a wide range of protocols, one of the most frequently used protocols is the HTTP protocol. The HTTP (Hyper Text Transfer Protocol) is the main medium for content retrieval and delivery over the internet. Some of the other protocols that are frequently used are as follows

• FTP – File Transfer Protocol
• SMTP – Simple Mail Transfer Protocol
• POP – Post Office Protocol
• IMAP – Internet Message Access Protocol
• HTTPS – Secure HTTP Protocol

All these protocols are dependent on the internet as the backbone for providing the infrastructure needed to communicate. However these protocols may be used in a wide range of networks, not just the internet, for example, you may run an ftp server in an intranet (local LAN), which is not exactly internet.

DNS Service

Internet also has services that are used by other applications. DNS or Domain Name System is the one of the most important one. DNS works like a telephone directory. DNS typically is a collection of servers, which have a list of domain names matched with their internet IP addresses. Since every machine in the internet can be assigned with a unique IP address, and remembering the IP address is not so easy. DNS helps in referencing these Domains with IP addresses

A sample DNS table is shown below.

So when you request a page from Google.com, the browser sends a request to the DNS server to find a match for ‘www.google.com’, the DNS servers will in turn, return the IP address of the respective Domain Name by doing a looking in the DNS table. When this operation is performed in reverse, i.e identifying the default domain name from a given IP address, it is referred to as Reverse DNS Lookup or rDNS.

Steps and processes involved in obtaining an html webpage

Request a web page

Once you type the URL in your browser, which may be IE or Firefox; the steps as described above happen sequentially before we get to see the page on our browsers. Let’s look at each of these steps in detail.

Components of the URL

The first phase is to understand the URL or identifying the components of the URL. A typical URL consists of the following components

•    Protocol
•    Domain Name
•    Resource Name

However there are other components that can be plugged into a URL which include, usernames, passwords and port numbers; we can ignore them as they are not used prominently.

The figure above explains the components of the URL. Now were ready to send the HTTP Request.

Construction of the HTTP Request

The browser composes a request called the HTTP Request that should be sent to the server to retrieve information from the server.

Sample

GET /index.php HTTP/1.1
Host: www.clickoffline.com

Since HTTP is a connection-less protocol, all information related to the session are sent along the request every time, this includes, resource name, protocol version, browser name, version and OS, supported content types, cookies if any, etc.

Identifying the server

Before sending out a HTTP request, we will need to identify the remote server; this is done by identifying the IP address using DNS for the domain specified in the URL. The HTTP Request is sent to eth remote server by establishing a route between the local machine and the remote server.

Wait For Response

The client browser waits for the response for the server.

Analysis/ Rendering of HTTP Response

The HTTP Response consists of a HTTP Response Header and the HTTP Response Data.
The Response Headers provide information related to the HTTP Response, the most important field is the Response code. Different response codes mean different statuses

The browser analyzes the HTTP response and renders the response one the screen, any dependencies like Images, CSS, java scripts that arise from the source html page follow the same processes to load int eh client, except that the URLs of the  resources is loaded automatically by the client browser instead of a user typing it.

HTTP/1.1 200 OK
Date: Wed, 18 Feb 2009 16:19:57 GMT
Server: Apache/2.2.11 (Unix)
X-Powered-By: PHP/5.2.8
X-Pingback: http://www.clickoffline.com/xmlrpc.php
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html; charset=UTF-8

Advanced Resources
•    Specfications for URL (RFC 1738): http://www.w3.org/Addressing/URL/url-spec.txt
•    Specifications for DNS (RFC 1035): http://www.ietf.org/rfc/rfc1035.txt
•    HTTP Protocol Details: http://en.wikipedia.org/wiki/HTTP

Disclaimer: The views expressed on this webpage are my personal views and do not necessarily reflect views of my employer.

There can be many instances where you would like to preload images in a HTML primarily for caching in order to serve the page better. This can be achieved by the use of Image objects in JavaScript. Image Object allow dynamic creation and manipulation of images in JavaScript, it is support by IE 4+ and Firefox.

Preloading Image

Preloading an image can be done by invoking a small JavaScript, that creates an image object and loads an image from the URL specified in the src parameter. See below

<head>
<script type="text/javascript">
<!--
image01= new Image();
image01.src="http://www.google.co.in/intl/en_com/images/logo_plain.png";
image02= new Image();
image02.src="http://labs.google.com/images/labs_logo2.gif";
//-->
</script>
</head>

The most optimal place to trigger the preloaded is on the body onLoad(), so that the images will start loading once the page has completed loading.

Changing images in JavaScript

The most immediate function after loading/caching and image is to use it somewhere in the html page, this can be achieved easing using JavaScript
See Full Example below

<html>
<head>
<title>Page title</title>
<script language="JavaScript">
objImage1 = new Image();
objImage2 = new Image();
objImage3 = new Image();
cnt = 0;
function preLoadImages(){
// preload the image file
objImage1.src='http://www.google.com/logos/mlk09.gif';
objImage2.src='http://www.google.com/logos/newyear09.gif';
objImage3.src='http://www.google.com/logos/olympics08_opening.gif';
}

function changeImage() {
cnt++;
if (cnt==1) {
document.images['im'].src = objImage1.src;
}
else if (cnt==2) {
document.images['im'].src = objImage2.src;
}
else if (cnt==3) {
document.images['im'].src = objImage3.src;
cnt=0;
}
}
</script>
</head>
<body onLoad="preLoadImages()">
<form name="myWebForm">
<img name="im" src="http://www.google.com/logos/olympics06_opening.gif"><br>
<input type="button" name="Prev" value="Switch Image " onClick="changeImage()">
</form>
</body>
</html>

The ’CustomConfigurationsPath’ setting of FCK editor provides a great deal of customizations and configurations for users of FCKEditor. I was implementing FCK editor in one of the projects and the default interface toolbars occupy almost 50 % of the screen area of the editor control. Most of the toolbar options are unnecessary, so I used the ‘’CustomConfigurationsPath’ property to provide FCKEditor with a custom configuration file to get the right settings.

Default Code

/TestProject/test1.php

include_once 'includes/fckeditor/fckeditor.php';
$oFCKeditor = new FCKeditor('txtQuesText') ;
$oFCKeditor->BasePath = './includes/fckeditor/' ;
$oFCKeditor->Width = 600;
$oFCKeditor->Height = 300;
$oFCKeditor->Value = '' ;
$oFCKeditor->Create() ;

The code will render as follows

In order to customize the FCK editor, you will have create a FCK Editor Setting file, like the following javascript file
/TestProject/includes/fck_editor_config.js

FCKConfig.ToolbarSets["TestToolbar"] = [
['Source','-'],
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink'],
];

The settings file has to be connected to the PHP script that loads the FCKEditor and the appropriate settings that have to be loaded have to be configured in the PHP Script (in this case it is “TestToolbar”). This methods, multiple settings to be configured as a part of the settings file and allows dynamic swapping of editor control properties.

PHP Script with settings file loaded

$oFCKeditor = new FCKeditor('txtQuesText') ;
$oFCKeditor->BasePath = './includes/fckeditor/' ;
$oFCKeditor->Config["CustomConfigurationsPath"] = "/TestProject/includes/fck_editor_config.js";
$oFCKeditor->ToolbarSet = 'TestToolbar';
$oFCKeditor->Width = 600;
$oFCKeditor->Height = 200;
$oFCKeditor->Value = '' ;
$oFCKeditor->Create() ;

Result

pChart is a charting library for PHP that allows generation of dynamic good looking GD based charts. Ever since I saw a small demo of charts in their website, it was attracted to try this product; I didn’t get a chance until last week.

Installing pChart in XAMPP and in Linux (Ubuntu)

The ‘pChart‘ download comes with a numerous list of files and folders, although you will need only about two major folders. They are

• /pChart
• /Fonts

In XAMPP

You can copy both the folders to your global includes folder, so that they can be accessed from anywhere across the system. Say C:\xampp\php-includes\pChart and
C:\xampp\php-includes\Fonts or you can reference them directly using the full path name. The library includes are usually kept outside the htdocs folder for security reasons.

In Linux (Ubuntu)

You can copy both the folders to your global includes folder, so that they can be accessed from anywhere across the system. Say /var/www/php-includes/pChart and
/var/www/php-includes/fonts or you can reference them directly using the full path name.

In this example of creating a bar chart we will use XAMPP, full paths, whereas the examples provided in the pChart download will tell you about how to use the includes folder option. It is best add the folder to the php include setting, so that it can be referenced from anywhere.

Configuring the pChart charting setup in XAMPP

Now we will start placing the php file that will generate the chart, lets create some folders called

• C:\xampp\htdocs\charting-test\
• C:\xampp\htdocs\charting-test\cache-images\

Now create a file called index.php in charting-test folder that will generate the chart. The generated charts are stored in cache-images folder and can be rendered from that folder.

<?php
define ('CHART_ENGINE_ROOT','C:\\xampp\\php-includes\\');
include_once CHART_ENGINE_ROOT.'pChart\\pChart.class';
include_once CHART_ENGINE_ROOT.'pChart\\pData.class';

$chartFileName = $_SERVER['REQUEST_TIME']."_testChart.png";

$dataRow = Array();
$dataRow[0]['studentName']= "Praveen";
$dataRow[0]['studentMarks']= 52;
$dataRow[1]['studentName']= "Krishna";
$dataRow[1]['studentMarks']= 20;
$dataRow[2]['studentName']= "Joseph";
$dataRow[2]['studentMarks']= 35;
$dataRow[3]['studentName']= "Deepak";
$dataRow[3]['studentMarks']= 26;
$dataRow[4]['studentName']= "Martin";
$dataRow[4]['studentMarks']= 37;
$dataRow[5]['studentName']= "Vijay";
$dataRow[5]['studentMarks']= 19;

// Dataset definition
$DataSet = new pData;
for ($i=0; $i<6; $i++) {
$dispStudName = $dataRow[$i]['studentName'];
$dispStudMarks = $dataRow[$i]['studentMarks'];
$DataSet->AddPoint($dispStudName,"Names");
$DataSet->AddPoint($dispStudMarks,"Marks");
}
$DataSet->AddAllSeries();
$DataSet->RemoveSerie("Names");
$DataSet->SetAbsciseLabelSerie("Names");
$DataSet->SetSerieName("Marks","Marks");
$DataSet->SetYAxisName("Marks");

// Initialise the graph
$Test = new pChart(700,270);
$Test->setFontProperties(CHART_ENGINE_ROOT."Fonts\\tahoma.ttf",9);
$Test->setGraphArea(70,30,680,200);
$Test->drawFilledRoundedRectangle(7,7,693,263,5,240,240,240);
$Test->drawRoundedRectangle(5,5,695,265,5,270,270,270);
$Test->drawGraphArea(255,255,255,TRUE);
$Test->drawScale($DataSet->GetData(),$DataSet->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,45,2,TRUE);
$Test->drawGrid(4,TRUE,230,230,230,50);

// Draw the 0 line
$Test->setFontProperties(CHART_ENGINE_ROOT."Fonts\\tahoma.ttf",6);
$Test->drawTreshold(0,143,55,72,TRUE,TRUE);

// Draw the bar graph
$Test->drawBarGraph($DataSet->GetData(),$DataSet->GetDataDescription());

// Finish the graph
$Test->setFontProperties(CHART_ENGINE_ROOT."Fonts\\tahoma.ttf",8);
$Test->drawLegend(575,35,$DataSet->GetDataDescription(),255,255,255);
$Test->setFontProperties(CHART_ENGINE_ROOT."Fonts\\tahoma.ttf",10);
$Test->drawTitle(60,22,"Student Marks Comparision",50,50,50,585);
$Test->Render("cache-images/".$chartFileName);
$Test->ReportWarnings();

$webPrintStr = <<<
<img src="cache-images/$chartFileName" alt="" />
ETEXT;

echo $webPrintStr;
?>

Resulting Chart

The charts are really cool