CPSC 225: Spring 2003
Assignment 3: Web Survey, Part 2

THIS ASSIGNMENT IS PART TWO of the Web survey that was begun in the previous assignment. For this assignment, you will prepare an HTML page containing the survey form, and you will write a CGI program to process data that is submitted in the form. Processing the data just means adding it onto the end of a data file. (For the first assignment, you wrote a program that reads this same data file and reports on the result.)

Part of the point of this assignment is using and writing functions. The data from an HTML form is provided to a CGI program in a rather complicated way. I have written some functions to make it easier to access the data. You will use these functions in your program and in the process learn more about include files and about multi-file programs.

Although you could probably write your program as one big main() function, the assignment requires you to write some functions: You should do a reasonable amount of error-checking in your program. This will probably mean checking for errors in several places. Write a function that will send a page with an error message back to the user. This function could have a parameter of type string containing an error message. You should also write a function for adding the data that you collect to your data file. You can write additional functions if you like.

The files, cgi.h and cgi.cc, that you need for the assignment can be found in the directory /home/cs225/cgi. The assignment is due next Friday, February 7. You should have a completely working survey on the Web. Turn in a printout of your CGI program.

HTML Forms and CGI

An HTML Form can be used on a Web page as a way of collecting data from the user and submitting it to a CGI program for processing. The form can contain input items such as text-input boxes, checkboxes, radio buttons, and pull-down menus. It also contains a button that the user can click in order to submit he data from all the input items. The data will be submitted to a specified URL, which is presumably the URL for a CGI program. In the HTML source code, a typical form looks likes this:

       <form method="POST" action="url-of-CGI-program">
          .  input items and other stuff

The "method" can also be "GET". The "action" can be simply the name of the CGI program, if that program is in the same directory on the server with the HTML file, or it can be a complete URL such as "http://math.hws.edu/~jsmith/survey/process.cgi". (There are actually more options, but I only want to cover the most common possibilities here.) Between <form> and </form> you can include just about any valid HTML (text, images, tables, ...) in addition to input items. Generally, you will at least include some text to describe each input item. To make the form look neat, it's common to lay out the form items in a table.

Each input item in a form has a name, which is specified by the HTML source code. It also has a value, which is either specified in the HTML source or is entered by the user. The data that is sent to the CGI program consists of name/value pairs. The program can then find out the value associated to each name. I have written some functions that you can use to find the value associated with a given name. These functions are declared in the include file cgi.h, which is discussed below.

Text fields, checkboxes, radio buttons, and submit buttons are created using the <input> tag. For example:

          <input type="text" name="submitter" size="20">

If you include this tag in your HTML source, a one-line text input box will appear on the Web page. The type specifies that this is a text field. The name identifies this particular input item. The size specifies how large the input box is in terms of the number of characters that it can display. The value of the input box is whatever the user types into the box (possibly the empty string). When the form is submitted, the name and value are sent to the CGI program.

You can create a submit button with

          <input type="submit" value="Click Here to Submit">

The value specifies the text that will appear on the button. If you also give a name to the submit button, then the name/value pair will be sent to the CGI program. This allows you to have several submit buttons in a form and be able to check which one was clicked by the user.

A checkbox can be made using an <input> tag with type=checkbox:

          <input type="checkbox" name="Math">

This just creates a small square box that the user can check. If you want any text next to the box, you have to add the text to the source code:

          <input type="checkbox" name="Math"> Mathematics

Textboxes are a bit unusual in that they don't usually have a specified value. If the user has left the box unchecked, then the name of the checkbox simply doesn't appear in the data sent to the CGI program. If the user checks the box, then the name does appear in the data (with value "on"). So, to determine whether the box was checked, you should look for the name in the data. If the name is there, then the box was checked.

Radio buttons are similar to checkboxes except that they occur in groups. The user can select only one button in the group. Each radio button is created by a separate <input> tag. All the radio buttons in a group must have the same name; they should have different values. The CGI program can check the value associated with the name to determine which button in the group was selected, if any. Here is a the HTML code for a radio group that gives the user a choice of four options. The values associated with the options are "1" through "4" (although they could just have easily been things like "+" or "mul".) We need to add some text to label the three buttons:

          <input type="radio" name="operation" value="1">Add&nbsp;&nbsp;
          <input type="radio" name="operation" value="2">Subtract&nbsp;&nbsp;
          <input type="radio" name="operation" value="3">Multiply&nbsp;&nbsp;
          <input type="radio" name="operation" value="4">Divide

On a Web page, this HTML source produces a group of four buttons:

Add   Subtract   Multiply   Divide

Another way to let the user select from a group of pre-set options is to use a pull-down menu, which can be created using the <select> tag rather than the <input> tag. The options are enclosed between <select> and </select> and are specified using the <option> tag. Each option can have a value, which is sent to the CGI program if the user has selected that option. Here, for example is the code for a menu that is equivalent to the above group of radio buttons:

          <select name="operation">
             <option value="1">Add
             <option value="2">Subtract
             <option value="3">Multiply
             <option value="4">Divide

We can put all this together into a complete form. This is a working form that submits its data to a CGI program. The source code for that program can be found in calc.cc.

x = y =

Include Files and Multi-file Programs

The program that you write for this assignment will use functions that are defined in the file cgi.cc. The declarations for the functions are in a header file, cgi.h. For your program to have access to the functions, you must use the line

          #include "cgi.h"

at the beginning of the program. The quotes used around "cgi.h" tell the compiler to look for cgi.h in the same directory as the program; the angle brackets in #include <iostream> tell it to look for iostream in the directories where standard include files are stored. Note that the main program only needs to know the declarations, which are in cgi.h, and not the definitions, which are in cgi.cc. To make the complete compiled program, you need to compile both programs and "link" the results. The simplest way to do this is simply to give both files to the g++ command. It will know what to do with them. If the main program is in a file named survey.cc, this would look like:

          g++  -Wall  -osurvey.cgi  survey.cc  cgi.cc

This sort of defeats the purpose of using separate files, however. Once cgi.cc has been compiled, it should only be necessary to re-compile it if you you modify it (which you won't do). It's possible to compile part of a program without linking it to the rest of the program. This is done by adding the -c option to the g++ command. For example:

          g++  -Wall  -c  cgi.cc

This will produce a compiled file named cgi.o. This is not a complete program, and you can't run it. However, you can link it to other parts of the program without recompiling cgi.cc. If you give g++ a ".o" file, it will link it into the program without trying to compile it:

          g++  -Wall  -osurvey.cgi  survey.cc  cgi.o

Large programming projects typically use large numbers of files. Later in the course, we'll see how such projects are managed.

David Eck