Laboratory Exercises For Computer Science 151

An Introduction to the World-Wide Web and CGI Programming

Goals: This laboratory exercise 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.math.grin.edu/~walker/courses/153.sp00/lab-cgi-intro.html .
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 lab-sample.html .

To get started understanding how this document is produced in the given format, follow these steps:

Click here to view this document in your viewer.
Once you have this sample document in your viewer, move to the View option in your browser, and select the Page Source option. This will show you the original document lab-sample.html, as sent by the server to your browser (and before the browser has done its formatting).

In the new source window, note that all formatting commands are listed in angle brackets: < > . 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

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

Creating and Editing an HTML Document

Follow these steps to copy this sample lab to your account in a way that will be accessible to the World-Wide Web:

Before anything in your MathLAN account can be accessed on the Web, you must make your home directory accessible. To do this, open a dtterm window and give the command
```
chmod 755 ~
```
at the prompt. (The symbol ~ stands for your home directory.)
Any materials related to the World Wide Web belong in a subdirectory of your home directory named public_html. If you have no such subdirectory, create one by giving the command
```
mkdir ~/public_html
```
in the dtterm window. This directory, too, must be accessible; give the command
```
chmod 755 ~/public_html
```
to make it so.
Copy the sample program to your public_html directory in two steps: First move from your home directory to the public_html directory with the command:
```
cd public_html
```
Then copy the file to your current directory (which is public_html) with the command:
```
cp  ~walker/public_html/courses/151.fa98/lab-sample.html  sample.html
```
The copy of the file will have the name sample.html .
Share your copy of sample.html with the command:
```
chmod 755 sample.html
```
Load this file into your Web browser by entering the URL:
```
http://www.cs.grinnell.edu/~yourusername/sample.html
```
Note that when you specify a URL, the Web server automatically looks in your public_html directory, so you do not need to include that directory name in what you type.
Edit this file with XEmacs, trying some variations of the wording and trying some of the formatting tags described above. At the very least, change the address at the bottom of the Web page to your username and file name. Also, update the date created and last revised.
After each modification, use the reload button on your browser to check your revised version of sample.html .
Edit the file further, leaving out the initial < html > tag. Reload and describe what happens. Then reinsert this tag, and try omitting some other closing elements, reload, and describe what happens.
Change the <h3> to <h2> or <h1> or <h4>, and describe what happens in each case. Do you see any progression in style or format from <h1> to <h2> to <h3> to <h4> ?

Static and Dynamic Web Documents

Both sample.html 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 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 "<html>")
(writeln "<head>")
(newline)
(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

<html>
<head>

<title>
title
</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:
```
#!/usr/bin/csh

/usr/local/bin/scm -q << !
(load "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 dtterm windows; its full name is /usr/bin/csh, as shown.
- The next line tells the C-programmng shell to run the Scheme interpreter /usr/local/bin/scm in quiet mode -q . This Scheme interpreter is much like Chez Scheme, which we have been using throughout the semester. scm has a few additional capabilities which can be helpful with Web programming, and we will investigate some of those capabilities shortly.
- On the same line, the << ! indicates that commands for Scheme will follow. In this case, we only will load our program, as the loading will generate the desired output for the Web. Since the loaded file concludes with (exit), Scheme will quit at the end of the loading operation.
- The final line contains just an exclamation point, which indicates this is the end of the input for Scheme (which began with the previous !).
Altogether the above directions (with #!/usr/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.math.grin.edu/~walker/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

In order to experiment with the above program, you will need to copy both the cgi script and program to you account. By convention, these should be put into a subdirectory cgi-bin within your public_html account, and these files must be shared for others to access. If such a directory has not been set up in your account previously, this task may be done with the following steps.

Within a dtterm window, be sure you have established a public_html directory, as described earlier in this lab.
Check that you have moved to that directory by typing pwd into dtterm -- this command (print working directory) indicates what directory you are working with.
If you are not in the right directory, type
```
cd ~/public_html
```
to move there.
Create a subdirectory cgi-bin and share it, using the commands:
```
mkdir cgi-bin
chmod 755 cgi-bin
```
Move to this new directory with the command
```
cd cgi-bin
```

Now move the sample cgi script and program to your account, and share these files:


cp ~walker/public_html/cgi-bin/sample-script.cgi .
cp ~walker/public_html/cgi-bin/sample-script.ss .
chmod 755 sample-script.cgi
chmod 755 sample-script.ss

You are now ready to view the results of your copies of these files by using the URL


http://www.math.grin.edu/~yourusername/cgi-bin/sample-script.cgi

The above discussion noted that the cgi script (in sample-script.cgi) runs scm scheme in the same way one might interact with a dtterm window. To test this out, move to a dtterm window, and type /usr/local/bin/scm -q. As this is in -q or quiet mode, no prompts will appear. Then type
```
(load "sample-script.ss")
```
as is done by the cgi script. Note the output received.
Back within the dtterm (without Scheme running), now type the full script command from the cgi command:
```
/usr/local/bin/scm -q << !
(load "sample-script.ss")
!
```
and observe the output. Note that this runs scm Scheme and then issues the command (load "sample-script.ss"), just as you typed in the previous step.
Use XEmacs to edit your cgi program sample-script.ss. Try making various changes, and see what happens when you reload your URL page.

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.math.grin.edu/~walker/cgi-bin/what-i-know-script.cgi

Try this link to see what happens.

This document is available on the World Wide Web as

http://www.math.grin.edu/~walker/courses/153.sp00/lab-cgi-intro.html

created October 12, 1998
last revised January 11, 2000