Approaches for creating dynamic web pages

Server-side processing:

Server receives a request, performs all processing necessary to create a dynamic web page, sends the finished page to client for display.

Client-side processing:

Some processing is done on client side e.g validation, animation, changing colours, opening new windows etc.

Web Technologies

Server-side processing Client-side processing

CGI programs (Any language)

Compiled Programs - ISAPI, NSAPI, Servelets

Server side includes (SSI)

Server-side scripts

Shell, JavaScript, Perl, VBScript, Active Server Pages (ASP), Java server pages (JSP)

Compiled Programs - Applets, ActiveX programs

Using Document Object Model (DOM) with:

JavaScript

VBScript

Common Gateway Interface (CGI)

How Web Server Works?

Listening port - a daemon.

Text commands from user agents.

Example: GET index.html

If index.html needs to display other files (e.g. images), the browser generates additional requests for each additional file and on receipt, combines them and displays.

Example: Get /index.html

Get /image1.gif

Get /image2.gif

Web Server and CGI

Browser sends requests that are implemented by server.

HTTP protocol used by the web is mostly one way street.

Bulk of data travels from server to the browser (text, graphics, sounds, applets, movies etc.). This is called Response path. Only a small amount of data flows in the other direction, called the Request path.

Client Server

Where CGI fits in?

Request path contains “Get” requests but some additional data also flows in this path: details about browser, user domain, and depending on method, data relating to fields in a form.

When a server gets a request to run a CGI program, it collects the necessary data sent from the client, starts the CGI program and passes on the relevant data to it.

There are two ways the data travels from the client to the server and then to the CGI program.

GET method and

POST method.

Understanding the Get Method

In GET method, the data from the fields of a form are sent to the server as part of the URL.

E.g. http://www.mydomain.com/cgi-bin/pgm1.cgi?subject=xyz

The text after ? Is the data meant for the CGI program (pgm1.cgi).

The server packs the data in an environment variable called QUERY_STRING. Additional data about browser and its defaults are also packed in other environment variables that are made available to the CGI program.

It is the job of the CGI program to separate the relevant data from environment variables and take required action.

One of the ways to do that is to use Perl script to pick apart - “parse” individual pieces of information in QUERY_STRING. This information is in name = value pairs, each pair separated by &. ‘+’ is used for space and some other hexadecimal characters for control sequences.

Understanding the Post Method

In this method no data is sent as part of the URL. All data is sent to the server via the requester path. Information from fields of a from is sent as name-value pairs. The server collects data in environment variables and the makes it available to the CGI program in the form of STDIN or standard input. It is the job of this program to parse the information contained in the standard input and use it as required.

Some Environment variables:

HTTP_ACCEPT: image/gif, image/jpeg (types of files that the browser can accept)

HTTP_USER_AGENT: contains info about browser.

QUERY_STRING: name=George&birthmonth=May

REMOTE_ADDR, REQUEST_METHOD, SCRIPT_NAME, SERVER_PORT, etc.

Server Side Includes (SSI)

Provide simple information as part of original page.

Does not provide real interactivity.

SSI directives are included in the HTML page, enclosed within comment tags

<!--#directive argument=“value”-->

The following formats are incorrect:

<!-- #directive argument=“value”-->

<! --#directive argument=“value”-->

< !--#directive argument=“value”-->

Server Side Includes (SSI)

Some directives:

Command Argument

#echo var Displays the

contents of environment

variable.

#fsize file Displays file size

#flastmod file When it was modified

#exec cmd Executes command

cgi Executes cgi pgm.

System administrators do not like to enable SSI on servers

<html> <head><Title> Test page</Title></head>

<Body> <P>This page is to test working of SSI and Perl</p><H2> Your Browser is: </h2><!--#echo var="HTTP_USER_AGENT" --><h2> Remote address is:</h2><!--#echo var="REMOTE_ADDR" --><p> (Last modified <!--#flastmod file="test.shtml" --></P></body></html>

SSI Example

How to make web pages interactive?

We discussed SSI. Server needs to know if it should go through a page requested by the browser or just send it without scanning. SHTML extension required for SSI.

SSI do not make a page interactive.

One of the common ways is to use Perl Script on server side. It is the job of this script to interpret if some information was received in the query string and get any required information, convert it to html and pass it to the server for onward transmission to the browser.

Introduction to Perl

We shall look at two examples to have some idea of how Perl Script works.

Like SSI, the browser needs to know if it should send the requested file without any further action or take some action. In this case to call perl program and pass info to it.

Extension .pl required.

First.pl

forms.pl

Your server does not have perl engine on it.

Perl was first released in 1987

Developed by Larry Wall

Very powerful and elaborate textual pattern matching

Most widely used language for CGI programming

Need a Perl language processing system

Perl has been ported to Many versions of UNIX and Windows.

Introduction to Perl

Perl Variables

Three categories:

Scalar variables identified by '$' as first character of their names. Following the $, they must have at least one letter. Letters are case sensitive and by convention user-defined names are lower case. $name, $u3, $age etc.

$age=35; #Assignment statement

"Smith is $age years old" => "Smith is 35 years old"

Can store 3 kinds of values: numbers, strings and references.

Not declared explicitly - compilers declares implicitly when it first encounters it. (except local variables inside a function)

Keyboard input: $input = <STDIN>

Built-in functions: chomp($input = <STDIN>)

Perl has a number of predefined variables called the implicit variables often consisting of one or more special characters. E.g. underscore '_',circumflex '^' etc.

It has usual control structures like: if, while, for, foreach etc.

While (STDIN)

{ print; #what?

chomp; #What is the argument to the function?

if ($_ eq "yes")

{print "Thanks for your consent";

}

}

Array variables identified by '@' as first character of their names.

Hash variables identified by '%' as first character of their names. They are also called associative arrays.

Perl Variables

pack function

The web browser encodes special characters like !, *, ?, . Or \ etc. into the form %xx where xx is a pair of hexadecimal digits. The pack function uses a pattern 'C' to convert the number back to a character. (other patterns do exist).

$ch = pack ("C", hex("2B"));

Converts 2B into decimal 43 to character +.

$ch = pack ("C", hex("21"));

Converts 21 into decimal 33 to character !

Pattern Matching

The pattern to be matched is delimited by slashes //. By default the string against which the matching is attempted is in the implicit variable $_.

E.g: /k600/ tries to find k600 in the string contained in $_

/snow./ looks for strings starting with snow plus any other character at the end - snowy, snowe, snowd etc.

You can specify a class of of characters for a match

[abc] matches 'a', 'b', or 'c'.

[a-h] matches any letter from 'a' to 'h'.

'^' inverts the specified set e.g. [^aeiou] matches consonants only.

Predefined character classes: \d, \D, \w, \s

Binding Operators

If you want to match a pattern against a string contained in a variable other than $_ you need to bind that variable by using ~ operator.

$string = ~ / \d/; looks for a digit in $string

Remembering Matches

The part of a string that matched a part of a pattern can be saved for later use by placing parenthesis around the pattern. The sub-string that matches the first parenthesized part of the pattern is saved in a variable $1, the next in $2 and so on.

"22 May 2002" =~ /(\d+) (\w+) (\d+)/;

print "$2 $1, $3 \n";

Will print on the screen:

May 22, 2002

Substitution

A part of the string contained in $_ variable by default can be replaced by :

s/Pattern/New_string/

$_ = "it is not raining today";

s/is not/ isn't/;

In order to match a hexadecimal number one could use:

/%[\dA-Fa-f]/

If we want to save the number found, we should use ():

/%([\dA-Fa_f])/

The number found is saved in the implicit variable $1.

We can convert it to a character by using pack function:

pack("C", hex($1));

s/%([\dA-Fa_f])/pack("C", hex($1))/e;

Transliterate operator

The operator "tr" translates a character or character class to another character or character class respectively.

tr/;/:/;

Translates all ; with : in $_.

Note: the last ; is a statement terminator.

tr/A-Z/a-z/;

Converts all upper case letters to lower case letters.