CSC 153: Computer Science Fundamentals	Grinnell College	Spring, 2005

Laboratory Exercise Reading

An Introduction to the World-Wide Web and CGI Programming

Abstract

This reading introduces a general framework for documents which you routinely find on the World-Wide Web. The lab also begins a discussion of CGI programming, which allows a Web developer to tailor documents to an individual Web user.

Introduction

As a reader of this lab, you already have interacted with the World-Wide Web in something like the follow sequence:

Within a Web browser (e.g., Netscape, Internet Explorer, or Mosaic), you type an address (or URL or Uniform Resource Locator), such as http://www.walker.cs.grinnell.edu/courses/153.sp05/readings/reading-cgi-intro.shtml .
Your browser sends a request to the server for that address.
The server finds the file on a disk drive.
The server retrieves the file from the disk.
The server sends the file back to your browser.
Your browser interprets the file and displays it on your screen.

This sequence of events is illustrated in the following diagram.

Client-server interaction for the World-Wide Web - 1

HTML Format

As a simple example, consider the document sample.html.

For reference, the original file sample.html is shown below:


     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     <html>
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
         <title>Sample HTML page<</title>
     </head>
     
     <body>
     <p>
     If by merely intelligible objects we mean those
     things which are thought through pure categories,
     without any schema of sensibility, such objects
     are impossible.  For the condition of the
     objective employment of all our concepts of
     understanding is merely the mode of our sensible
     intuition, by which objects are given us; if we
     abstract from these objects, the concepts have no
     relation to any object.  Even if we were willing
     to assume a kind of intuition other than this our
     sensible kind, the functions of our thought would
     still be without meaning in respect to it.
     </p>
     </body>
     </html>

In analyzing this material, all formatting commands are listed in angle brackets: < > . Further, the first and fourth lines are special:

The first line <!DOCTYPE ... indicates this is Web document, written in html (hypertext markup language), according to an international standard version called "4.01 Transitional".
The fourth line <meta indicates this Web document is a "text" document using html, and characters come from the English alphabet ("charset=ISO-8859-1").

Beyond these two special lines, many commands apply for a section. For example, <b> indicates the beginning of a section which should be printed in a bold type face, and </b> indicates the end of the same section. As in this example, in many cases, the formatting commands at the start and at the end of a section have the same name, but an extra slash / is added to the end marker.

The following table gives some main formatting commands illustrated in this example:

Command	Meaning
<html >	begin an HTML document
<head>	begin the header section
<title>	begin a title
<body>	begin the body of the document
<h3>	begin a header3 section (headers can be h1, h2, h3, h4)
<p>	begin a new paragraph
<br>	break a line (begin a new line)
<b>	begin bold type face
<i>	begin italics type face
<hr>	draw a horizontal line
<blockquote>	display the section exactly as formatted

[For more information about HTML, you might try the primer A beginner's guide to HTML, currently maintained by Marty Blase of the National Center for Supercomputing Applications.]

Static and Dynamic Web Documents

Both sample.shtml and virtually all of the labs for this course are static documents. That is, each document was created once with all information included at that time. Each document is static and does not adapt to user input.

In contrast, a dynamic document is produced by a program that can receive input from a user and modify the Web page based on that input. A typical mechanism for communication between a user's browser and a Web server is called the Common Gateway Interface (CGI). Altogether, the Common Gateway Interface (CGI) is a set of conventions, supported by software, that facilitate the writing of programs that generate World Wide Web documents. CGI programs can be written in almost any programming language; naturally, though, we'll use Scheme.

With CGI programming, the sequence of events for Web interaction has an extra step:

Within a Web browser, you type a URL.
Your browser sends a request to the server for that address.
The server finds the file on a disk drive.
The server retrieves the file from the disk and notes that the file identifies a program to run.
The server runs the program, which produces an HTML document.
- The first line of the HTML document tells both the Web server and your browser that this will be a text-based html document, and thus clarifies how both the server and browser will communicate
- The rest of the HTML document contains formatting instructions and text for display.
The server sends the newly-produced HTML document back to your browser.
Your browser interprets the file and displays it on your screen.

This sequence of events is illustrated in the following diagram.

Client-server interaction for the World-Wide Web - 2

To expand on this idea, consider the following Scheme program:


(define writeln             ;; This procedure writes multiple items one a line,
  (lambda args              ;; and then goes to a new line.
    (for-each display args) ;; See Springer/Friedman, page 199, for details.
    (newline)
    ))

(writeln "Content-type: text/html")
(newline)
(writeln "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">

(writeln "<html>")
(writeln "<head>")
(newline)
(writeln "<meta http-equiv=\"Content-Type\" content="text/html; charset=ISO-8859-1">")
(writeln "<title>")
(writeln "title")
(writeln "</title>")
(writeln "</head>")
(writeln "<body>")

(writeln "<h2>" "Welcome to the world of Internet programming!" "</h2>")
(writeln "<p>")
(writeln "<i>" "This page is created by a Scheme program." "</i>")

(writeln "</body>")
(writeln "</html>")
(newline)

When this program runs, it prints the following


Content-type: text/html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>
title
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=ISO-8859-1\">
</title>
</head>
<body>
<h2>Welcome to the world of Internet programming!</h2>
<p>
<i>This page is created by a Scheme program.</i>
</body>
</html>

In order to have this program run in response to a Web request to a server, our instructions to the Web server must specify running Scheme and then executing the program. This is accomplished in two main steps:

We type the above program into a file sample-script.ss. As this file is to include a full Scheme session, the last line of the file has the command
```
(exit)
```
This tells Scheme to quit when after running the program.
We write a special program which will tell the Web server to run our program. This is done with the following file:
```
#!/bin/csh

/usr/bin/mzscheme --mute-banner --version --load /home/walker/public_html/cgi-bin/sample-script.ss
```
While this file may look a little imposing, the pieces are not as bad as they may seem:
- The first two characters ( #! ) tell the server that a program is to be executed.
- The rest of the first line identifies the main program to run. For Web servers, such as the computers on Grinnell's MathLAN, which runs the Unix operating system, this is usually the C-programming shell. This is what you have used within terminal windows; its full name is /bin/csh, as shown.
- The next line tells the C-programming shell to run the Scheme interpreter /usr/bin/mzscheme under relevant conditions for use with the Web:
  - −−-mute-banner indicates not to print the Scheme header (all about Mz Scheme), so that information will not clutter the Web page
  - −−version supresses the read-eval-print loop, so that prompts for user-typing will not be printed
  - −−load allows us to execute directly the program found in a Scheme file.
Altogether the above directions (with #!/bin/csh ) is called a cgi script which, in turn, runs a Scheme program ( sample-script.ss ).
Putting these pieces together, we run our Scheme program by typing the URL http://www.walker.cs.grinnell.edu/cgi-bin/sample-script.cgi into our browser.
By clicking on this link, we call the instructions (with the C-shell), which in turn runs our program.

Experimenting with CGI Scripts

By convention on Linux/Unix systems, all Web-related pages and programs are placed in a subdirectory of your home directory called public_html. Further, cgi scripts are placed in a subdirectory cgi-bin of public_html. This structure provides some level of privacy for your files. The Web server may access, display, and/or run files found within your public_html subdirectory, but it will not access files in other subdirectories of your log-in account.

Beyond this general access protocol, you will need to explicitly share your public_html directory, cgi-bin subdirectory, and any specific files that you want made available to others through the World Wide Web.

Preview

As noted earlier, cgi scripts and programs may be helpful, in that they allow a Web server to return information specifically tailored to the user.

One such cgi script is http://www.walker.cs.grinnell.edu/cgi-bin/what-i-know-script.cgi

This document is available on the World Wide Web as

http://www.walker.cs.grinnell.edu/courses/153.sp05/readings/reading-cgi-intro.shtml

created 12 October 1998 last revised 6 March 2006
For more information, please contact Henry M. Walker at walker@cs.grinnell.edu.