Approaches for creating dynamic web pages

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 Client-side processing Server-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  The following formats are incorrect:  <! --#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

SSI Example <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>  <h2> Remote address is:</h2>  <p> (Last modified </P> </body> </html>

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.

Introduction to Perl 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.

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

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.

Approaches for creating dynamic web pages