Internet Publishing

"Materials used in this course are the property of the author. These lessons may be used only by course participants for self-study purposes. Application for permission to use these materials for other educational purposes such as for teaching or as a basis for teaching should be directly submitted to the author." 


This lesson covers the following topics:

You will find the same material covered in chapters 14 and 15 of the text.


7. Forms, CGI Scripts

7.1 Interaction
7.1.1 Input From Users
7.1.2 Administration
7.1.3 Output To the User

7.2 Forms
7.2.1 FORM Definition
7.2.2 INPUT Fields
7.2.3 SELECT Fields
7.2.4 Text Fields
7.2.5 Sending FORMS

7.3 Assignment


7. Forms, CGI Scripts


Until now, we have looked at the part of WWW technology where the user, with the help of a client (or browser), can choose the information she wishes returned. Identifying the information is done with the help of URLs and is made available to the user via links.

This can be illustrated in the following manner:

The server's tasks here are:

  1. to use the URL sent form the client to find the correct information object on the harddisk, here given as a "HTML file".
  2. to return the requested file to the client

The only information the user contributes in this case is the link is clicked upon. This is a one-way transfer of information or what we also call publishing. The user chooses only the information that she wishes to see.

7.1 Interaction

Reading the web

Until now, we have look at what we call reading on the web.

Interview on the web

WWW technology also has mechanisms where the user can provide information. This creates entirely new possibilities because the information given by the user can be processed by a program. The result of this processing can again decide what information shall be returned to the user. Perhaps we could call this an interview, in order to illustrate what happens.

intervju

We can increase interaction a great deal. Examples: lookups in databases after the user sets up criteria to be searched upon, registration forms where the user provides relevant data, for example, name, address, etc.

7.1.1 Input From Users

Input from the user can take different forms:

  1. Forms: Forms are the display of pages on the client where the user can fill in data in different objects, text boxes, check boxes, radio buttons, etc. A speical button on such a form sends the filled out values along with the names of the objects as data along with a URL which now says which program on the server shall process the data.
  2. Clickable images: The co-ordinates at the point on an image which the user clicks, along with the name of a map, is sent to the server along with a URL naming the program that processes the data.

This can be illustrated as below:

Notice that when the user "clicks", there will also be sent data in addition to the URL to the server. The data can be generated either with the forms or by reading the coordinates on a clickable image.

7.1.2 Administration

The server's tasks are:

  1. to start the right program. The program's identification is found in the URL.
  2. to transport the user's data to this program. This occurs through what is called CGI - Common Gateway Interface.
  3. to transfer output from the program started to the client. This also happens via CGI.

CGI - Common Gateway Interface
is a set of rules governing how a web server starts other programs, and how data is transferred between these programs and the web server.

A program started in this manner can, in principle, be any program which can read input and produce output. In doing so, this becomes a general mechanism, and many different programming techniques can be used. On UNIX machines, perl script(perl is a script language) or shell script is often used to create such programs. However, the programs may be any executable program, compiled from any type of language, say, C.

On Windows 3.x (with MS-DOS) machines, like some of you are using in this course, Visual Basic would be a possible candidate, but it is also possible to use perl for MS-DOS. In the assignment for the next lesson, we will use MS-DOS batchfiles as an administrative program. You will discover that this has big limitations, but I chose it because it can be created by everyone without any additional programs (like Visual Basic). As in the exercise for this lesson, we make use of prepared scripts.

Your HTTPD has a lot of documentation on CGI. You can read about CGI on:

Your own httpd1.4 WebSite
Per's httpd1.4 Per's WebSite

7.1.3 Output To the User

Processing a program or script on a server results in information which shall be returned to the user. This information can, in principle, take many different shapes. When information is sent back to the client, the client must know what form the information is in. The server provides this information by giving a MIME type.

Often, it is a HTML code which is sent back - as illustrated in the figure above. This is defined as MIME type "text/html".

Read more about output to the user in HTTPD's documentation or in the textbook, chapters 14 and 15.

Your own httpd1.4
Per's httpd1.4

7.2 Forms

Let's take a look at so-called forms where the user can type in data and send it to the server. We shall learn to create HTML files which contain FORMS:

You own httpd (or Per's httpd) has documentation on forms with their various input elements. Otherwise, refer to chapter 14 in the text.

7.2.1 FORM Definition

A form is enclosed in the following tags:

<FORM METHOD="method" ACTION="url">
...
...various input fields...
...
</FORM>

Method

The kind of mehtod used for transferring user input from the client to the server is named here. There are twopossible methods:

METHOD=GET
This method transfers the URL and input data in the same package; the input data is attached to the URL. This can make for very long strings and is, therefore, no longer recommended, even though it is the default method.
METHOD=POST
This method sends the URL and user data in two separate packages, and is the recommended method.

Action

This attribute contains a URL which identifies the progam to process the user input on the server.

Contents and Sending

Between the form tags, the following are inserted:

[Contents] [7. CGI Scripts] [7.2 Forms] [7.3 Assignment]

Several FORM examples are provided in the text below. You should read these on the screen so that you can try them. If you read them from a print out, you will not be able to see what the fields look like, neither will you be able to try them. If you don't want to pay the telephone company for the open phoneline, you can save the text on your harddrive (File/Save).

7.2.2 INPUT Fields

The following input fields can be used in a form:

text

This is the field for entering text (on a line), and is used, for example, as follows:

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

This will become a text field as show below:


-This is a FORM example -

Type in your telephone number: (Example: INPUT text)


Here, the attribute NAME given to the value is "Tele_no". It is the identification of the text field. Upon transmission, both the name of the text field and the value entered will be sent.

(If you try to fill in the text field, and end with "Enter", your client will try to transmit these values. If you are connected to the Internet, you will recieve an aswer from my practice machine.)

password

This field is for entering text (on a line), but you will get *'s as echoes in the field so that what you write will be hidden. Example:

<INPUT TYPE="password" NAME="Pwd">

This will become a password field as shown below:


-This is a FORM example -

Type in your password: (Example: INPUT password)


(Try writing something in the field to see the echo. If you press "Enter", you will receive an answer from my machine.)

checkbox

This is a selection box which the user clicks to toggle a function on and off. The HTML code to make one is::

<INPUT TYPE="checkbox" NAME="Quit">

radio button

These are radio buttons which the user can click upon in order to choose from several alternatives. They are created with the help of the following HTML construction:

<INPUT TYPE="radio" NAME="Drink" VALUE="Solo"> <BR>
<INPUT TYPE="radio" NAME="Drink" VALUE="Coca Cola"> <BR>
<INPUT TYPE="radio" NAME="Drink" VALUE="Light Beer"> <BR>


- This is a FORM example -

Would you like a receipt:
Solo
Coca Cola
Light Beer


[Contents] [7. CGI Scripts] [7.2 Forms] [7.3 Assignment]

7.2.3 Select Fields

These are fields for selecting from defined alternatives. In MS Windows, this is called a "Combo box and is created as follows:

<SELECT NAME="colors">
<OPTION VALUE="Red">Red</OPTION>
<OPTION VALUE="Blue">Blue</OPTION>
<OPTION VALUE="Yellow">Yellow</OPTION>
<OPTION VALUE="Green">Green</OPTION>
</SELECT>


- This is a FORM example -

Example:


7.2.4 Text Files

These are fields for inserting several lines of text. The fields are created with the following lines:

<TEXTAREA NAME="example" ROWS=4 COLS=40>
(Place initial text here.)
</TEXTAREA>


- This is a FORM example -

Example:


7.2.5 Sending FORMS

Each FORM can have a submit button. This is defined as:

<INPUT TYPE="submit" VALUE="Resend Lesson 7">

This is displayed as a button:


- This is a FORM example -

(If you click on this, you will receive another copy of this lesson! This is probably a poor example, because a FORM without values is sent. This example is only intended to show what the button looks like.)


When sending FORMS, the FORM-definition provides the method (POST or GET) which the data will be sent with, and the URL identifies the reception script. Data from all the fields in the FORM is transmitted as a string of Names/Value-pairs for all the fields. The assignment for this module will show you exactly what this looks like.

Reset

A button can be defined to set all the fields in a form to zero. This is defined as follows:

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


- This is a FORM example -

Example text field: You can try to write in this text field and then reset the contents with the button.


[Contents] [7. CGI Scripts] [7.2 Forms]

7.3 Assignment

Below is a picture of a FORM where many different types of elements are used.

.

For room alternatives, you ought to have the following possibilities:
- Single without private bath
- Single with private bath
- Double with private bath
- Suite

This week's assignment is to complete the following:

  1. Create a FORM resembling the image above.
  2. It shall be tested agains the script form-rpt.bat. This is a test program which is located at http://pb1.idb.hist.no/cgi-bin/form-rpt.bat

This is a MS-DOS batchfile which processes input from your FORM. This is done by returning a textstring which is the result of your clicking the "Order" button. It may be helpful to take a peek at what the script looks like on a MS-DOS machine.

Those of you running httpd1.4 have the same script located at HTTPD/CGI-DOS and can, if you wish, run everything locally against http://localhost/cgi-bin/form-rpt.bat. HOWEVER, a detailed description for running agains scripts on your own machines and all platforms will be discussed in the next lesson.

What to Turn In:
  1. the HTML code for the FORM you have created (text file)
  2. the text returned from form-rpt.bat when you send your form

Due date: 6.5.97

Good Luck!

[Contents] [7. CGI Scripts] [7.2 Forms] [7.3 Assignment]


Per Borgesen