|
|
CGI enables viewers to interact with your Web presentation, and that makes it one of the more powerful and complex aspects in Web design. If you have ever filled out an online form or used a search engine, you have used CGI, probably without even
realizing it (which is exactly the point). Because of security risks and strain on the server, CGI scripts should be used only when necessary, and should be integrated into your site seamlessly so the viewer doesn't even realize they are being used.
CGI is not for the beginner; it involves much more programming knowledge than basic HTML. If you are planning to tackle CGI, you should have not only a basic grasp of programming concepts, but also familiarity with the server system on which
your script will reside. If you do not possess these requirements, we suggest you either pick up a book on CGI (preferably one that focuses on your system), visit some of the CGI resources listed in Appendix F, or move directly to the Quick and Dirty
Guide, "Ways to Avoid CGI," at the end of this chapter.
This chapter explains how CGI works, describes some possible uses for CGI, details how to create HTML forms and their accompanying CGI decoders, and suggests some ways to avoid CGI. The subject of CGI is far too complex to cover fully within the
constraints of this chapter; therefore, it is our intention to give you a basic understanding of the concepts of CGI and to teach its most popular use as an HTML form decoder.
Are you ready? Get yourself some caffeine, clear your desk, and let's dig in to CGI!
CGI stands for Common Gateway Interface (and also, Computer Graphics Interface, which we mention so that you'll know that to some "computer people," the term CGI might mean something else), and is a program run on a Web server that is
triggered by input from the viewer (via the browser). CGI is an interface for running external programs (or gateways) under an HTTP server; it enables users on the Web to access programs of all types on remote systems as if they were actually using the
remote computer themselves. The most common programming languages used with CGI are PERL (used mainly on the UNIX platform) and Visual Basic (used primarily with Windows). Other languages you can use to create a CGI script are C/C++, AppleScript, TCL, the
Bourne shell, FORTRAN, and any UNIX shell. These scripts enable the WWW server and browser to run external programs launching another application.
CGI scripts work like this (see Figure 11.1):
Figure 11.1. How a CGI script works.
If one CGI script were able to do the same thing on every computer, scripting would be easy. Unfortunately, the CGI script relies on the operating system of the server, so a PERL (UNIX) script might look like garbage to a non-UNIX server, and so on.
CGI scripts are generally held in a CGI-BIN. If you are using a virtual host, your ISP may have CGI-BIN directories, which you may be able to make use of. You should also be able to have your own CGI-BIN so that you can run your own scripts (rather
than adapting your system to work with the scripts that already reside on the system). Your host will be the best source of information about how and where this is set up.
If your site is located on your own server, you will need to set up your CGI configuration yourself. Depending on your server and how it is set up, you will either need to create a CGI-BIN directory to store your scripts or name your scripts with a
special extension (for example, .cgi). The best place to find information on how to set up your particular server will probably be the company who produced the software (usually located at the company's Web site).
CGI has many uses, including
Fill-out forms are used all over the Web for many different applications, but the use we see most often is to provide the viewers a place for feedback. This is most likely the first use you want to learn, so we are going to take you step-by-step
through this process. By doing this, we intend to give you a general understanding of how forms work with HTML, as well as to help you to begin to understand the CGI scripts you will find available on the Web (some of which are listed in Appendix F). So
here we go
As with any complex project, we begin by assessing and sketching out our goal.
The goal of this project is to provide a feedback form for viewers' questions and comments. Once the viewers fill out the feedback form and click the Submit button, we want an HTML page to load, letting them know we received the form and thanking them
for their time. We also want the information they provided to be sent to our e-mail box in a readable manner (which requires that we decode it; without decoding, the e-mail looks like a mess and is very difficult to work with).
So, there are three separate files we must create to develop the feedback form: the HTML form itself (as in Figure 11.2), the CGI script that will decode it, and the HTML redirect page (which lets the user know that their form has been submitted).
Figure 11.2. The goal of our feedback form example.
Now that we know where we're headed, let's get started on the HTML form. For this very simple form we will use the code in Listing 11.1.
Listing 11.1. Our feedback form code.
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN" "html.dtd">
<HTML>
<HEAD>
<TITLE>Feedback Form</TITLE>
<!-- Author: Kim and Brad Hampton -->
</HEAD>
<BGCOLOR="FFFFFF" TEXT="000000" LINK="425AFF" VLINK="0018C4" ALINK="FFFFFF">
<H1>We would appreciate your feedback</H1>
<P>
<FONT FACE="Lucida Sans", "Arial", "Times Roman">
<FORM ACTION="/cgi-bin/formmail.pl" METHOD=POST>
<INPUT TYPE="hidden" name="recipient" value="hampton@ha.net">
<INPUT TYPE="hidden" NAME="redirect" VALUE="http://www.ha.net/thanks.htm">
<DL>
<DT><I>Subject:
<DD><SELECT name="subject">
<OPTION>My suggestions
<OPTION>My comments
<OPTION>I have a question
<OPTION>Other
</SELECT>
<DT>Your Name:
<DD><input type=text name="realname" size=30>
<DT>Your Email Address:
<DD><input type=text name="email" size=30>
<DT>Your Company Name:
<DD><input type=text name="Company" size=30>
<DT>Your Phone:
<DD><input type=text name="Phone" size=30>
<P>
<DT>Message:
<DT><TEXTAREA name="comments" cols=60 rows=3></TEXTAREA><p>
</DL></I>
<DT><input type=submit value="Send This Form">
<input type=reset value="Start Over">
<P>
</FONT>
</FORM>
<HR>
Please note: Although it is most unlikely that you will experience any problems responding to
this form, certain non-standard browsers will not respond properly. If you experience any difficulties,
(or if you are not using a forms-capable browser) you may email your response to this form to:
<a href="mailto:hampton@ha.net">hampton@ha.net</A>.
</BODY>
</HTML>
Now, let's make sure you know what all this code means. Everything should look familiar until you get to the <FORM> tag, as in
<FORM ACTION="/cgi-bin/formmail.pl" METHOD=POST>
The <FORM> tags are used to define a fill-out form for processing by the HTTP server. All forms must be within these tags. You can include multiple forms within a document, but you cannot nest the forms (you cannot include a <FORM> tag
within a <FORM> tag). Also, the <FORM> tag does not specify the layout of the form; you have to add regular HTML tags within the form to do that. Attributes for this tag are the following:
Describes the URL of the query server to which the form contents will be submitted in our example:
/cgi-bin/formmail.pl
Specifies the encoding of the form contents. Only applies if the METHOD attribute is set to POST. We do not use this tag in our example.
Submits the form to the query server (which method you use depends mostly on your server). Options for this attribute are
POST Used in our example, this option causes the form contents to be sent to the server in a data body (not as part of the URL).
GET Causes the form contents to be appended to the URL as if it were a normal query. GET is the default, yet for most purposes POST is preferable.
This is the next tag in our example and requires no ending tag. It is used to specify a form control. In our example, it looks like this:
<INPUT TYPE="hidden" name="recipient" value="hampton@ha.net">
The first attribute we use for this tag is TYPE. This specifies the type of the control to use. In this case the type is "hidden", which specifies that no field is seen by the viewer, but the content of the field is sent with the submitted
form. This value is often used to transmit information about client/server interaction.
Other options for this attribute are
IMAGE An image field that you can click, causing the form to be immediately submitted. The coordinates of the selected point are measured in pixel units from the upper-left corner of the image and are returned (along with the other contents of the
form) in two name/value pairs. The x-coordinate is submitted under the name of the field with .x appended, and the y-coordinate is submitted under the name of the field with .y appended. Any VALUE attribute is ignored. The image itself is specified by the
SRC attribute, exactly as for the <IMG> tag.
PASSWORD The same as the TEXT attribute, except that the text is not displayed as it is entered.
RADIO Used for attributes that accept a single value from a set of alternatives. Each radio-button field in the group should be given the same name. Only the selected radio button in the group generates a name/value pair in the submitted data. Radio
buttons require an explicit VALUE attribute.
RESET When clicked, this button resets the form's fields to their specified initial values. The label to be displayed on the button can be specified the same way as for the SUBMIT button. In our example it appears like this:
SUBMIT When clicked, this button submits the form, like in our example:
You may use the VALUE attribute to provide a noneditable label to be displayed on the button (in our example "Send This Form"). If a SUBMIT button is pressed to submit the form, and that button has a NAME attribute specified, then that button
contributes a name/value pair to the submitted data. If the button has no name, then a SUBMIT button makes no contribution to the submitted data.
TEXT Specifies a single line text entry field, like in our example:
FONT COLOR="#000080"><input type=text name="realname" size=30> This can be used in conjunction with the SIZE and MAXLENGTH attributes.
TEXTAREA For multiple-line, text-entry fields— in our example, we use it for the message box like this:
This can be used in conjunction with the SIZE and MAXLENGTH attributes.
FILE This option (which is currently supported by Netscape) enables the inclusion of files with form information.
<input type=reset value="Start Over">
<input type=submit value="Send This Form">
Message:<TEXTAREA name="comments" cols=60 rows=3></TEXTAREA>
Other attributes we use for the <INPUT> tag are
Specifies the name of the control, like this:
<input type=text name="realname" size=30>
This attribute is required for radio buttons and is used for numerical/textual controls. It specifies the initial displayed value of the field or the value to be returned when the field is selected. The value attribute generally appears like this:
<input type=submit value="Send This Form">
Specifies the vertical alignment of the next line of text in relation to the image. For use only with TYPE=IMAGE. Possible values are the same as for the ALIGN attribute of the <IMG> element.
This is used for checkboxes and radio buttons and indicates that they are selected. The options are TRUE or FALSE; it is used like this:
<INPUT NAME="control2" TYPE=CHECKBOX CHECKED=TRUE>
This indicates the maximum number of characters that can be entered into a text control. It appears like this:
<INPUT NAME="control2" TYPE=TEXTBOX MAXLENGTH=20>
Used to specify the size of a control in characters (for TEXTAREA controls, both height and width can be specified) like this:
<INPUT NAME="control2" TYPE=TEXTAREA SIZE="25,5">.
This would allow 5 lines of text, each 25 characters long.
Used in conjunction with TYPE=IMAGE, specifies the source address of the image to be used.
The next line of code is
<INPUT TYPE="hidden" NAME="redirect" VALUE="http://www.ha.net/thanks.htm">
This line means the following: This input is hidden, and once the form has been submitted, load the page http://www.ha.net/thanks.htm, which will thank them for their input.
These tags should look familiar to you; they have nothing to do with the form information itself, only the layout of it. Here we have used the <DL> tag, which is a definition or glossary list, containing <DT> elements that give terms and
<DD> elements that give the corresponding definitions. We have included this formatting here to encourage you to use your imagination with tags. They can be used for much more than their intended purpose. Note: <DT> and <DD> do not use
closing tags.
This indicates a listbox or drop-down list. In our example it appears like this:
<SELECT name="subject">
<OPTION>My suggestions
<OPTION>My comments
<OPTION>I have a question
<OPTION>Other
</SELECT>
The NAME attribute gives the list a name. Here it is used for the subject of the message sent to us (the respondent's choice will appear in the subject line of our e-mail).
Two other possibilities for this tag are MULTIPLE, which specifies that multiple items can be selected; and SIZE, which is used to specify the size of the list control.
This tag resides within our drop-down list, and each indicates one choice in a listbox.
And last but not least, our warning message:
<HR> Please note: Although it is most unlikely that you will experience any problems responding to this form, certain non-standard browsers will not respond properly. If you experience any difficulties, (or if you are not using a forms-capable browser) you may email your response to this form to: <a href="mailto:hampton@ha.net">hampton@ha.net</A>.
It is a very good idea to include a message like this on your forms. It will not only aid viewers with nonstandard browsers, but will also be invaluable should there be a problem with your CGI script.
And that's it for the form itself! Figure 11.3 shows how it looks.
Figure 11.3. How our HTML form example turned out.
The thank you page is next. This is just a standard HTML page (as described in Chapter 10, "Taking Advantage of HTML"). The code for our example is shown in Listing 11.2.
Listing 11.2. The thank you page.
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN" "html.dtd"> <HTML> <HEAD> <TITLE>Thank You</TITLE> </HEAD> <BGCOLOR="FFFFFF" TEXT="000000" LINK="425AFF" VLINK="0018C4" ALINK="FFFFFF"> <CENTER><BR><H2>Your form has been submitted. Thank you for your time, we truly appreciate your comments and suggestions.</H2><P> <I>If your form included a question we will contact you within 24 hours.</I><BR><BR><P> <H3><A HREF="index.html">Please Return to Our Home Page</H3> </CENTER> </BODY> </HTML>
Now let's see what we can do with this baby!
When you write a form, each of your input items has a NAME attribute associated with it (as we saw in the form example). Now, when a viewer places data in the fields on the form, that information is encoded into the form data. The response to each of
the input items given by the user is called the value.
Form data is a stream of name=value pairs normally separated by the & character. Each name=value pair is URL encoded; that is, spaces are changed into plusses and some characters are changed. This makes the forms content very difficult to read and
nearly impossible to import directly to a database. So, in order to use this valuable information, we need to unencode it. For this we will use CGI.
So, do you need to take a course it CGI programming and work round the clock to debug a script? Well, you could, but you have better things to do right? And, as we have said before, there is really no need to reinvent the wheel (especially in cases
where there are experts who have spent their lives inventing it for you).
Now, we need the perfect script—one which will read our form, send the thank you page, and send us an easily readable e-mail. Well, we don't need to look very far—CGI scripts are all over the place on the Web (some are included on your CD-ROM
as well), and many are free (provided you give the author or authors credit and are approved to use them commercially). But, before you go exploring the Web (and if you are using a virtual host), call to see if your ISP has any CGI scripts in their bin
that could be used for your form. They will almost always have something that will work for this purpose. This is usually the easiest way to set up your form. Since the script is already on your server, you need only reference the directory it is in, and
need not ever see the CGI script itself.
If you have no luck with your host (or you have no host), your next step is to visit some CGI resources. We found the script we were looking for at Matt's Script Archive: http://www.worldwidemart.com/scripts/examples/formmail.shtml (Figure 11.4). There we found a CGI script called FormMail (this CGI script is called formmail.pl and is included on your
CD-ROM in the directory: D:\cgi\formmail [where D is your CD-ROM drive]) that is written in PERL and would work on our UNIX server. This is why our code reads
<FORM ACTION="/cgi-bin/formmail.pl" METHOD=POST>.
Figure 11.4. Matt's Script Archive.
Now that you have found your script, you will need to configure it so it will work properly on your server. This configuration is generally pretty minor. You will usually find out how to do this by
After your script is configured properly, upload it to your server, and make sure it is referenced correctly in your HTML form. Now let's see if it works.
The viewer clicks on the feedback link from the home page and arrives at our HTML form. He/she fills out the form and clicks the Send This Form button (Figure 11.5).
Figure 11.5. How a viewer fills out the form example.
The form is then submitted, and the viewer jumps to the thank you page (Figure 11.6).
Figure 11.6. The thank you page.
Our form contents then arrive in our e-mail box (Figure 11.7).
Figure 11.7. How the form contents look when we get them via e-mail.
Hey, what do you know? It works!
The quick tip for CGI is simple: Don't use it. There are a variety of ways you can get around using CGI, and avoiding it has its advantages:
Luckily, two of the most popular uses for CGI—image mapping and forms handling—can actually be accomplished using no CGI at all. In this Quick and Dirty Guide we show you how to use one of those programs on your CD-ROM, WebMania, to handle
forms; we discuss quick image mapping in the next chapter, "Working with Graphics."
WebMania is an HTML editor and forms generator that automatically creates HTML forms and reads their responses. Responses are automatically sent to your mailbox, then read by WebMania and collected in a response database. This means you can create your
form, give the viewer a thank you (with the help of JAVA), and read your responses without the use of CGI—and it's so easy. Here's how it works:
Figure 11.8. How our form turned out using WebMania.
So, now how do you read the submitted information and import it for use into a database? We discuss that in Chapter 13, "Databases and Searches."
The integration of HTML with CGI is a huge subject that is covered in more depth within this book as it pertains to different tasks. This chapter is simply intended to give you an overview of the subject. By now you should
Now that you have all the information you wanted from the viewer, what you do with it? Well, that is up to you, but we would like to suggest you keep this information in a database to use for sales leads. How do you do that? We discuss that in Chapter 13, "Databases and Searches," but for now let's get creative as we move on to "Working With Graphics."
