HTML and CGI, Part One

team lib

The common gateway interface is the key to interactive Web sites.

This series of tutorials, which began with the "Providing Internet and World Wide Web Services," has examined services commonly available on the Internet and has explored what you, as a network manager, need to do to make such services available within your company (via your corporate intranet) and to others (via the Internet).

In "Hypertext Markup Language" we focused on HTML and took a first look at hypertext links. This month, we'll continue to explore HTML, and we'll take a look at the common gateway interface (CGI).

Using simple tags, you can make any word or phrase a hyperlink. Hyperlinks are not limited to text, however. They can also be images. The following code fragment shows how to make an image into a hyperlink:

 <A HREF="http://www.amphibian.com/frog.htm"><IMGSRC="frog.gif"></A> 

This sample code displays the graphic image frog.gif, andif the user clicks on that imagecauses the Web browser to request the Web page frog.htm from the Web server www.amphibian.com.

The Common Gateway Interface

HTML, along with HTTP, is the enabling technology of the World Wide Web. HTML's most compelling feature is hypertext linking. When you look for information in a conventional book you might search the index for a key word, then flip through the book to find the referenced page, and hope to find the information you seek. By contrast, when searching for information on the Web, simply clicking on a hyperlink and immediately jumping to the referenced page is gratifyingly quick and easy. HTML is, however, essentially a read-only format. It's not interactive except when using the mouse to navigate. HTML pages are static documents that don't change until someone (the Webmaster, in many cases) accesses the Web server and edits them.

From the start, Web developers have been looking for ways to make Web servers interactiveto allow users to input information as well as retrieve information. The standard way of delivering information in this manner is now known as the common gateway interface. Using CGI, the Web server, in response to a user request for information, runs a program to search for that information and returns the results to the user. In order to achieve these results, the Web server typically generates an HTML page by inserting a few HTML statements into a preexisting page. A Web server using CGI in this manner could potentially run an infinite variety of programs.

If you've used a Web search engine to find an item of interest, you've used CGI. But CGI itself isn't the search engine. Rather, it's a way to interface programs, such as search engines, with Web servers.

HTTP (Web) servers are designed primarily to serve up HTML documents. CGI files, however, aren't documents, they're programs. Therefore, to store CGI programs, most Web servers use a special directory, commonly named cgi-bin. The Web server knows that files stored in the cgi-bin directory are to be executed rather than simply sent to the user's Web browser for display. CGI programs can be written in a wide variety of languages, including DOS batch files, BASIC, C, and scripting languages such as Perl. It's the job of the CGI to activate the CGI program at the proper time and pass the program to any necessary user- or operating environment-generated data. The CGI program then processes whatever data is generated. Once the program accomplishes this process (which should take only secondsthe goal here is interactivity), it must return some output to the user via the user's Web browser. To make the output appropriate for browser display, the CGI program must format its output in the form of an HTML document.

A Form For Everything

A CGI program has to somehow get from the user any data to be processed . That's where HTML forms come into play. HTML forms are similar to paper forms: They provide specific spaces in which to enter specific data items. A simple form is shown in Figure 1. This sample form has one text input field: product name . The form also has some multiple-choice fields, in which, for example, the user can check off the type of product, as well as what networking protocols the product supports. The form also has a button the user can click on to submit the entry. (A CGI program will only act upon the information in a form when the form data has been submitted to the CGI program.) Clicking on the form's Clear Form button resets the form back to its default values. The HTML code for this form is shown in Listing 1. Note that to aid in discussion, Listing 1 includes line numbers , which you wouldn't use in actual HTML code.

click to expand
Figure 1
Listing 1: HTML Code for Figure 1
start example
 1   <FORM ACTION="URL" METHOD="GET"> 2   <H5>Please enter the following information:</H5><BR> 3   Product name:  4   <INPUT TYPE="TEXT" NAME="NAME" SIZE="25" MAXLENGTH="30"><BR> 5   Select product type:  6   <INPUT TYPE="RADIO" NAME="ProdType" VALUE="Bridge" CHECKED> Bridge 7   <INPUT TYPE="RADIO" NAME="ProdType" VALUE="Router"> Router 8   <INPUT TYPE="RADIO" NAME="ProdType" VALUE="Switch"> Switch<P> 9   Protocols handled: <INPUT TYPE="CHECK BOX " NAME="IP" CHECKED> IP 10  <INPUT TYPE="CHECK BOX " NAME="IPX" CHECKED> IPX 11  <INPUT TYPE="CHECK BOX " NAME="AppleTalk" CHECKED> AppleTalk 12  <INPUT TYPE="SUBMIT" VALUE="Press here to submit your entry"> 13  <INPUT TYPE="RESET" VALUE="Clear Form"> 14  </FORM> 
end example
 

The source code for a form is bound by the <form action="url"> and </form> tags (see line 1 and line 14 of Listing 1). The use of action specifies the action to be taken when the form is submitted. In other words, action determines which CGI program should be run in order to process the form, and you specify either a full or partial URL for that program. Depending on the Web server, you may be able to set a default directory for all CGI programs. As long as the program you want to run is stored in that directory you need only specify the program's file name. Otherwise, you will probably have to provide a complete URL for the file.

Use method to move input data from the form into the CGI program that's going to process that data. We'll explore the methods by which this is done in more detail in the tutorial "HTML and CGI, Part II," but for now, just be aware that there are two general methods you can use: get and post. If you're going to use the get method to transfer data from the form to the CGI program specified in the action URL, be sure that the CGI program is written to accept data in this manner. By the same token, if you use post to send data from your form, be sure the CGI program is expecting post data input.

Line 2 and line 3 of Listing 1 prompt the user to enter data. After the prompts comes the code that puts a text field into the form (line 4). Entering input type="text" tells the Web browser that it is a text field. Specifying name="name" tells the browser that the name of this field is name. (This example asks for the name of a product; if you want to ask for the user's address, you might name this field address.) size="25" indicates that the text box will be large enough to see 25 characters at a time. maxlength="30" means that the field can hold up to 30 characters of text. In this case, the length of the field exceeds the length of the box, so a scroll bar will appear if the user types a long text string.

Next on the form are radio buttons , followed by check boxes. These are both multiple-choice, but they differ slightly in how they work in that, using check boxes, you can check more than one box at a time, but you can select only one radio button. Clicking on a radio button clears the radio button that was previously selected. By comparison, selecting one check box does not deselect another.

Let's discuss radio buttons first. You determine the button style by setting the type for the input equal to radio. There are three statements for radio buttons (line 6 through line 8)one for each of the possible selections. Each statement contains name="prodtype." This creates a logical field named prodtype. If the first button is checked, the field prodtype takes on the value bridge. (You can determine the value by using the statement "value='bridge'"). Note also the keyword checked in line 6. When the form first appears, the radio button for bridge will be checked; in other words, we've made this setting the default. The user can override this default setting by clicking on the Router or Switch button.

Next comes a series of three check boxes that allow the user to indicate which network protocols the product supports (represented by lines 9 through 11of the sample code in Listing 1). When a user clicks in a box, "X" appears in that box to indicate that it is checked. Clicking again on a checked check box removes the "X," or unchecks the box.

You create a check box field with the statement input type= "check box ." You also need to specify the name of the input field. In Listing 1, the name of the input field for the first check box is set to IP. The sample code uses the keyword checked, indicating that this box is selected by default, which the user can clear by clicking on the check box.

When a check box is selected, by default the field with that name has its value set to "on." Although it is not included in the example, you can optionally use the value attribute to set the value, for example, to "green" when the box is selected. When the check box is not selected, the field has no value. In this example, the default setting for all three boxes is checked. Thus, unless the user clears the boxes, the form returns ip=on, ipx=on, and appletalk=on. If only the IP box is selected, the form returns only ip=on. The IPX and AppleTalk boxes will be disregarded.

I don't have quite enough space here to finish the discussion of our sample form, so we'll have to conclude that in the tutorial "HTML and CGI, Part Two." Also, so far, I've discussed gathering data to be passed to a CGI program, but I haven't said much about how that data is transferred or how the CGI program sends output back to the user. I'll cover that (and more) in the tutorial "HTML and CGI, Part Two."

Resources

Using HTML , by Neil Randall (Que, ISBN: 0-7897-0622-9)

This book is an excellent overall resource for those who are just learning HTML. Written in an engaging, easy-to-comprehend style, it is liberally sprinkled with examples of HTML code and the screen images they generate.

CGI Programming on the World Wide Web , by Shishir Gundavaram (O'Reilly & Associates, ISBN: 1-56592-168-2)

Gundavaram's book is the most thorough treatment of CGI programming I've found. It's augmented by a prodigious number of examples, which are mostly written in the Perl scripting language (the most commonly used language for CGI programs).

One of the best ways to get information about Internet services such as the World Wide Web is the Web itself. I've listed a few URLs here, but there are plenty more to be found. Submitting the phrase "common gateway interface" to Digital's AltaVista search engine (http://www. altavista .digital.com) yields a huge number of potential links.

http://hoohoo.ncsa.uiuc.edu/cgi

http://www.ncsa.uiuc.edu/demoweb/url-primer.html

http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/fill-out-forms/overview.html

This tutorial, number 96, by Alan Frank, was originally published in the August 1996 issue of LAN Magazine/Network Magazine.

 
team lib


Network Tutorial
Lan Tutorial With Glossary of Terms: A Complete Introduction to Local Area Networks (Lan Networking Library)
ISBN: 0879303794
EAN: 2147483647
Year: 2003
Pages: 193

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net