A Taste of CGI
by Danny Swarzman of Stow Lake Software
Thanks to Victoria Leonard for preparing Sample1.html

preface

This presents the basics of CGI following an example.

purpose and scope

When a form is displayed on a web page the user enters data to be processed by a server. The form itself is coded as an HTML document.

The script which runs on the server and handles the data and returns information to the user is Common Gateway Interface (GCI).

The example is written in perl. Any of several languages could have been used.

files in the example

The example consists of these files:

  • Sample1.html This displays a web page with a form. Take a look at the source code. Just open the link and use the menu item in the browser to view the source.
  • Sample1.cgi is invoked when the user click 'Submit' in the form. All it does is invoke the PERL program.
  • Sample1.pl contains the PERL program.

Take a look at the source code as you read further.

The script which runs on the server and handles the data and returns information to the user is Common Gateway Interface (GCI).

information flow

  1. The user links to our page which contains a form.
  2. The user fills information in the fields and other controls in the form.
  3. When the user clicks on the 'Submit' button in the form, the browser creates a URL to process the information.
    The URL consists of the address of a CGI script specified in the HTML together with the information that the user has entered.
  4. The browser sends the URL over the Internet to the server specified in the URL.
  5. The server invokes the CGI, handing to it the data that the user has entered into the fields of the form.
  6. The CGI processes the user's data storing and retrieving data as needed.
  7. The CGI produces a new page to send back to the browser.
  8. The browser displays the new page.

the FORM tag

forms generally

A form on the web has text fields, check boxes, radio buttons, etc. When all the necessary information has been entered, the user clicks on the submit button to send the data to the server.

structure of the FORM tag

Consider the sample form:

<FORM

ACTION="/www.stowlake.com/sample1.cgi"

METHOD="POST"

>

<INPUT TYPE="text" NAME="Name">

<INPUT TYPE="text" NAME="Answer">

<INPUT TYPE="submit" NAME="Send">

<INPUT TYPE="reset" NAME="Clear">

</FORM>

This form contains two text fields, a submit button and a reset button.

ACTION attribute

Specifies a URL of a the CGI script to run on our server.

METHOD attribute

The method can be POST or GET. Determines how the data are passed to the CGI. See methods of delivery below.

INPUT tags

For every text field, button, checkbox, etc. in the form, there is an INPUT tag. Note that the INPUT tags appear between the <FORM...> and the </FORM>

the structure of query strings

The information the browser sends over the network consists of an address of a script followed by '?' followed by a name/value list.

A name/value list consists of a series of name/value pairs separated by an ampersand, '&'.

Each pair consists of the name of an INPUT in the form together with the value entered by the user.

Example of URL with query string:

http://www/stowlake.com/sample1.cgi?Name=Danny&Answer=3

methods of delivery

The method attribute of the FORM tag specifies how the server is to present the user's data to the CGI.

When the method is POST, the data are passed to the CGI as the standard input.

When the method is GET, the data are passed via the environment variable, QUERY_STRING.

creating mime for client's browser

The CGI script writes to standard output a file that the server is to send to the browser.

The information is passed in a file with a header that signals the type of information that is included.

The format of the file is Multipurpose Internet Mail Extensions (mime).

The mime spec provides for several header fields. The examples only use the Content-type field to specify that the contents are HTML.

tourist introduction to perl

This section contains a summary of some of the more common perlisms

Perlism Example Explanation
$ $rawQuery Indicates a string variable.
=~ $cleanQuery =~ s/\+/\x20/g   Means modify $cleanQuery
  1. search for every plus sign
  2. replace with hex 20 or space
% %dictionary Indicates associative array

Each element is a pair of strings. The first in the pair serves a a key. The second in the pair is the value which is associated with the first.

Thus, $dictionary{"Answer"} represents the second string of an element of %dictionary. The first string in that element is "Answer".

@ @brokenPair Indicates an array

Indices are numeric starting at 0

In this example, $brokenPair[0] would refer to the first element

<< print <<EndOfGood; Indicates a here-document.

Everything that appears after this line until the terminator is copied to the output file. In the example, the interpreter will copy until it encounters a line whose sole contents is EndOfGood

Bibliography

Programming Perl by Larry Wall and Randal L. Schwartz published by O'Reilly - camel book

CGI Programming on the World Wide Web by Shishir Gundavaram published by O'Reilly - mouse book

Home | Services | Peg Solitaire | Drawing Applet | JavaScript Shell | Canadian Checkers | SF Go Club | The Lake | Email Me