CS 105 Lab 8 -- Fall 1998

In class, we have been discussing two closely related Web features: the Common Gateway Interface and HTML Form tags. For this lab, we would like you to get some practical experience using these features. The lab will involve two exercises. The first is quite short. All it will require is that you add a few images and links to your pages using the addresses of CGI scripts we have supplied. The result, however, will be that you will be able to monitor references made to the pages you have created.

For the rest of the lab period, we will ask you to work on the construction of an on-line questionnaire built using form tags. The emphasis here will be on building a form that incorporates a wide variety of input element types rather than on the interaction between the form and any CGI script. In fact, at first we will have you use the CGI script that has been used in class to simply "echo" the data your form sends to the server back to your browser.

There is no part II this week.

As usual, to simplify printing, a version of the complete instructions for this lab as a single page is also available. Otherwise, the following links will lead you through the sections of this document.

If you have questions about the instructions for this lab, you are encouraged to ask them through the discussion area for this lab in the course discussion forum.

I-SPI: A Web Site Monitoring System

With sufficient programming experience, one can create CGI applications to implement complex interactive systems based on HTML. Fortunately, those with such expertise are often excited enough about their work to want to share it (freely!) with others. The result is the existence of many sites providing pre-packaged systems of CGI programs that can be installed on a web server and used by web page authors who might not have quite enough programming experience to construct the CGI programs themselves. A visit to to Yahoo's collection of CGI related sites will provide plenty of examples of such scripts.

For the first part of this lab, we want you to use one of the freely available CGI scripts. We have installed one such script on the Computer Science department's web server (www.cs.williams.edu) so that you can include references to it in your web pages. The CGI application we have installed does not require you to add any forms to your pages. Instead, you will simply add a URL that references a CGI program as the source of an IMG tag in some of your pages.

Normally, the form that references a CGI script provides information that the script can process. It might seem that invoking a script without using a form would mean that the CGI program would have no information to work with. The truth, however, is that whether a form is used or not, when a CGI script is invoked by a web server, the CGI script is given a fair amount of information about the client that referenced it. This information includes the client's IP address and domain name and the page from which the URL was extracted. When invoked, the CGI script we have installed records this information so that it can later give you statistical reports on the usage of your page. Every time someone visits a page to which you have added a reference to the CGI script, that visit will be recorded. Later, you can find out who visited your page and when.

The package we want you to use is named I-SPI (Internet Statistical Package). It is really quite easy to use. There are three scripts that you will use:

http://www.cs.williams.edu/cgi-bin/I-SPI/hit-spi2.cgi

Including a reference to this URL in one of your pages will cause every visit to that page to be recorded by I-SPI. The actual data returned when a request is made to "GET" this URL will be a GIF image file. So, references to this URL should appear as the SRC attribute of an IMG tag. The image file returned is a transparent image one pixel wide and one pixel high. In other words, it is intended to be invisible.

This script expects one key-value pair to be supplied when it is invoked. Because many of you will be using I-SPI at the same time, it needs some information that will allow it to record references to your pages separately from those to other student's. Accordingly, the key-value pair it expects is of the form:

name=cs-bull-login-id

where you should replace "cs-bull-login-id" with your actual account login name. This key-value pair must be attached to the end of the URL used and separated from the rest of the URL with a question mark. For example, for my own pages I would use:

http://www.cs.williams.edu/cgi-bin/I-SPI/hit-spi2.cgi?name=tom

You should include an image tag referencing such a URL on every page you would like I-SPI to monitor.

http://www.cs.williams.edu/cgi-bin/I-SPI/hit-spi.cgi

Including a reference to the "hit-spi.cgi" script is just like including a reference to "hit-spi2.cgi" except that the image returned isn't invisible. Instead it looks like:

It also expects you to include key-value pair providing your CS bull login account identifier.

The author of I-SPI suggests that the image produced by referencing this script be used as a link to the script used to view the information I-SPI has collected (which is described next). We suggest you include such a link on at least (and probably exactly) one of your pages.

http://www.cs.williams.edu/cgi-bin/I-SPI/index.cgi

This is the script that provides access to the information I-SPI has collected. When referenced it will send back the HTML for a page with links to several other dynamically generated HTML pages containing statistical information about the use of your pages. Accordingly, it should be used as the URL in the HREF attribute of an <A ... > tag.

It also expects you to include a key-value pair providing your CS login account identifier.

You should place a link to this script on your CS 105 labs page so that we can try it to make sure everything is working correctly.

So, add IMG tags referencing the "hit-spi2" or "hit-spi" CGI scripts to several of your existing HTML pages. Then, add a link to the "index.cgi" script to your CS 105 labs page. Next, visit a few of your pages and/or ask the student sitting next to you to visit some of your pages. Then, click on the link associated with the "index.cgi" script and see what kind of information has been collected. Take a look again in a few weeks and you should be able to see when the graders hit town.

I should warn you that I will have to remove I-SPI from our server at some point in the future (once the files recording visits to your pages get too large). I will try to do this in a way that will minimize the impact on your pages.

Run Your own Survey

For the remainder of the lab, I'd like you to construct a form using HTML tags. I'd like this to be open-ended. You can make any form you want as long as it uses selection menus, textareas, text input fields, radio buttons, check boxes and of course has a submit button. Last year's students seemed to have no trouble selecting topics for their forms. Feel free to be serious or silly about this as the spirit move you.

At the end of the writeup, I will give you instructions on how to set things up so that you will actually see how people fill in your form. You may find this more interesting than expected. My daughter made such a form for a high school social studies class a year or two ago. It was a questionaire about school dress codes. While this may not seem like something that would attract a lot of interest, at this point over 1200 individuals have found the form on the net and taken the time to fill it in. The Web is a big place. If you put a form out there you may be surpised at the response you get (be patient though).

In building your form, remember that you can intermix form input elements with HTML tags for list, tables, etc. Be imaginative in using these tags to lay out your survey.

The "Forms" sub-menu under the PageSpinner "Tags" menu provides items that can be used to add form element tags to an HTML file (of course, you can always just type them in directly). When using the PageSpinner dialog boxes, you must account for the fact that the first CGI script you will use with your form expects the client to use the "GET" method when submitting information. This is the HTML default. So, if you type your own form tags, just leaving out the "METHOD" attribute will be appropriate. The PageSpinner Form dialog box, however, uses the POST method by default. So, those who use PageSpinner's menus to insert a FORM tag must remember to set the METHOD to "GET".

Once your form is ready, specify

http://www.cs.williams.edu/cgi-bin/query

Once your form seems to be working, change the METHOD to POST and change the ACTION attribute of the FORM to:

http://www.cs.williams.edu/cgi-bin/mail?your-cs-user-id

Leave it like this until we can grade it. Eventually, however, you may want to add a "hidden" entry to your form like the one shown below:

<INPUT TYPE="hidden" NAME="next-url" VALUE="url-for-confirmation-page">

As always, place a link to your form on your labs page and make sure to include your name in a comment in the HTML file that describes your form.