| ★ wanayoo — archive 1999 http://howstuffworks.com/cgi.htm | Nouvelle recherche | Portail wanayoo |
At webhosting.com we love How Stuff Works, and that is why we support the site. HSW provides great information in an easy-to-understand format. If you are reading this page and looking for a company that can host the site you are developing, we hope you will come visit webhosting.com and look at the services we have to offer. We host over 30,000 sites in 130 countries, and we would love to host yours!
|
How a Web Server Works
As described in the How Stuff Works article entitled How
Web servers and the Internet Work, web servers can be pretty simple. At their most basic,
web servers simply retrieve a file off the disk and send it down the wire to the requesting
browser. Let's say you type in the URL http://www.bygpub.com/books/tg2rw/author.htm.
The server gets a request for the file /books/tg2rw/author.htm. If you look
at the following figure you can see how the server resolves that request:
During setup, the web server has been instructed to understand that c:\My Documents\www is the server's root directory. It then looks for /books/tg2rw/author.htm off of that root. When you ask for the URL http://www.bygpub.com/books/tg2rw/ the server understands that you are looking for the default file for that directory. It looks for several different files names to try to find the default file: index.html, index.htm, default.html, default.htm. Depending on the server, it may look for others as well. So the server turns http://www.bygpub.com/books/tg2rw/ into http://www.bygpub.com/books/tg2rw/index.htm and delivers that file. All other files must be specified by naming the files explicitly.
This is how all web servers handle static files. Most web servers additionally handle dynamic files through a mechanism called the Common Gateway Interface, or CGI. You have seen CGI in all sorts of places on the web, although you may not have known it at the time. For example:
How CGI Scripts Work
On most web servers, the CGI mechanism has been standardized in the following way. In the normal
directory tree that the server considers to be the root you create a subdirectory named cgi-bin.
You can see this directory in the previous figure. The server then understands that any file requested
from the special cgi-bin directory should not simply be read and sent, but instead should be executed.
The output of the executed program is what it actually sent to the browser that requested the page.
The executable is generally either a pure executable, like the output of a C compiler, or it is a PERL
script. PERL is an extremely popular language for CGI scripting.
So, for example, imagine that you type the following URL into your browser: http://www.howstuffworks.com/cgi-bin/search.pl. The server recognized that search.pl is in the cgi-bin directory, so it executes search.pl (which is a PERL script) and sends the output from the execution to your browser. That is how the search engine for How Stuff Works is implemented.
You can write your own scripts and try out CGI yourself provided that:
Simple CGI Scripts
Assuming that you have access to a cgi-bin directory (see the previous section),
and assuming that you know either the C programming language
or PERL,
you can do a whole bunch of interesting experiments with CGI to get your feet wet.
Let's start by creating the simplest possible CGI script.
In the HSW article on web pages we examined the simplest possible HTML web page. It looked something like this:
<html>
<body>
<h1>Hello there!</h1>
</body>
</html>
The simplest possible CGI script would, upon execution, create this simple, static page as its output. Here is how this CGI program would look if you wrote it in C:
#include <stdio.h>
int main()
{
printf("Content-type: text/html\n\n");
printf("<html>\n");
printf("<body>\n");
printf("<h1>Hello there!</h1>\n");
printf("</body>\n");
printf("</html>\n");
return 0;
}
On my web server, I have entered this program into the file simplest.c and then compiled it by saying (see the HSW article on C programming for details on compiling C programs):
gcc simplest.c -o simplest.cgi
By placing simplest.cgi in the cgi-bin directory it can be executed. You can try it out now if you like by typing in or clicking on this URL: http://www.howstuffworks.com/cgi-bin/simplest.cgi. As you can see, all that the script does is generate a page that says, "Hello there!". The only part that is unexpected is the line that says:
printf("Content-type: text/html\n\n");
The line "Content-type: text/html\n\n" is special piece of text that must be the first thing sent to the browser by any CGI script. As long as you remember to do that, everything will be fine. If you forget, the browser will reject the output of the script.
You can do the same thing in PERL as well. Type this PERL code into a file named simplest.pl:
#! /usr/bin/perl
print "Content-type: text/html\n\n";
print "<html><body><h1>Hello World!</h1></body></html>\n";
Place the file into your cgi-bin directory. On a UNIX machine it may help to additionally type:
chmod 777 simplest.pl
This tells UNIX that the script is executable. You can try it out now if you like by typing in or clicking on this URL: http://www.howstuffworks.com/cgi-bin/simplest.pl.
You have just seen the basic idea behind CGI scripting. It is really that simple! A program executes and its output is sent to the browser that called the script. You can see that the process is extremely simple - normal output sent to stdout is what is sent to the browser.
The whole point of CGI scripting, however, is to create dynamic content. That is, each time the script executes you would like the output to be different. After all, if the output is the same every time you run the script, then you might as well use a static page. The following C program demonstrates very simple dynamic content:
#include <stdio.h>
int incrementcount()
{
FILE *f;
int i;
f=fopen("count.txt", "r+");
if (!f)
{
sleep(1);
f=fopen("count.txt", "r+");
if (!f)
return -1;
}
fscanf(f, "%d", &i);
i++;
fseek(f,0,SEEK_SET);
fprintf(f, "%d", i);
fclose(f);
return i;
}
int main()
{
printf("Content-type: text/html\n\n");
printf("<html>\n");
printf("<body>\n");
printf("<h1>The current count is: %d</h1>\n", incrementcount());
printf("</body>\n");
printf("</html>\n");
return 0;
}
With a text editor, type this program into a file named count.c. Compile it by typing:
gcc count.c -o count.cgi
Additionally, create another text file named count.txt and place a single zero in it. By placing counter.cgi and count.txt in the cgi-bin directory you can run the script. You can try it out now if you like by typing in or clicking on this URL: http://www.howstuffworks.com/cgi-bin/count.cgi. As you can see, all that the script does is generate a page that says, "The current count is: X", where X increments once each time you run the script. Try running it several times and watch the content of the page change dynamically!
The count.txt file holds the current count, and the little incrementcount() function is the function that increments the count in the count.txt file. This function opens the count.txt file, reads the number from it, increments the number and writes it back to the file. The function actually tries to open the file twice. It does that just in case two people try to access the file simultaneously. It certainly is not a fool-proof technique, but for something this simple it works. If the file cannot be opened on the second attempt, -1 is the error value returned to the caller. A more sophisticated program would recognize the -1 return value and generate an appropriate error message.
Forms Create Input for CGI Scripts
We have seen that the creation of CGI scripts couldn't be easier. The web server
executes any executable placed in the cgi-bin directory, and any output that the
executable sends to stdout appears in the browser that called the script.
Now what we need is a way to send input into a script. The normal way to send
input in is to use an HTML form.
You see forms all over the web. Any page where you have been able to type something in is a form. You see them in search engines, guest books, questionnaires, etc. The home page for HSW at http://www.howstuffworks.com actually contains two mini-forms, one for the "How did you get here?" sidebar and one for the suggestions sidebar (yes, a single HTML page can contain multiple forms). You create the form on your HTML page, and in the HTML tags for the form you specify the name of the CGI script to call when the user clicks the Submit button on the form. The values that the user enters into the form are packaged up and sent to the script, which can then use them in any way it likes.
You have actually been seeing this sort of thing constantly and may not have known that it was happening. For example, go to http://www.lycos.com, type the word "test" into the "Search for:" box and press the "Go Get It!" button. The URL of the result page will look like this:
http://www.lycos.com/cgi-bin/pursuit?matchmode=and&cat=lycos&query=test&x=10&y=9
You can see that the Lycos home page is a form. Lycos has a script in the cgi-bin directory named pursuit. The form sends 5 parameters to the script:
Let's create a simple form to try this out. Create a file named simpleform.htm and enter the following HTML into it:
<html>
<body>
<h1>A super-simple form<h1>
<FORM METHOD=GET ACTION=/old?u=http%3A%2F%2Fhowstuffworks.com%2F%26quot%3Bhttp%3A%2Fwww.howstuffworks.com%2Fcgi-bin%2Fsimpleform.cgi%26quot%3B%26gt%3B&y=1999
Enter Your Name: <input name="Name" size=20 maxlength=50>
<P><INPUT TYPE=submit value="Submit"> <INPUT TYPE=reset value="Reset">
</FORM>
</body>
</html>
You can click on this URL to try it out: http://www.howstuffworks.com/simpleform.htm.
As you can see, the HTML code specifies the creation of a form that uses the GET method sent to the CGI script at http://www.howstuffworks.com/cgi-bin/simpleform.cgi. Inside the form is a text input area plus the standard Submit and Reset buttons.
The file http://www.howstuffworks.com/cgi-bin/simpleform.cgi referenced by the form is a C program. It started life as this piece of C code placed in a file named simpleform.c:
#include <stdio.h>
#include <stdlib.h>
int main()
{
printf("Content-type: text/html\n\n");
printf("<html>\n");
printf("<body>\n");
printf("<h1>The value entered was: %s</h1>\n", getenv("QUERY_STRING"));
printf("</body>\n");
printf("</html>\n");
return 0;
}
It was compiled with the following command:
gcc simpleform.c -o simpleform.cgi
And placed in the cgi-bin directory. This program simply picks up the value sent by the form and displays it. For example, you might see the following:
The value entered was: Name=John+Smith
Name is the identifier for the text input field in the form (each input field on a form should have a unique identifier), and John+Smith is a typical name that might be entered on the form. Note that the "+" replaces the space character.
From this example you can see that the basic process of setting up a form and getting data from a form into a CGI script is fairly straightforward. Here are a couple of details to keep in mind:
Creating a Real Form
A real form is going to be made up of a variety of input areas, and it will require
some amount of code in the script to undo the character mappings and parse out the
individual strings. Let's start by looking at the standard input controls on a form.
They include:
Here are several examples that demonstrate the use of the different control tags:
Single Line Edit:
The word "input" identifies a single line edit area. The "name" field provides an identifier for the control to the CGI script and should be unique for each control on the form. The "size" field indicates the width, in characters, of the input area on the form. "Maxlength" constrains the maximum number of characters in the input area. "Value" sets an initial value.
Enter Name: <input name="Name" size=30 maxlength=50 value="Sample">
Typically the input area is preceded by a piece of static text identifying the purpose of the input field. Shown here is the static text "Enter name:".
You can add the value "type=int" to constrain input to integer values. By default the type is "text" and it accepts any characters.
Multi-line Edit:
A multi-line edit area is similar to a input area. You define a name for the control, and its size on the form in rows and columns. Anything you put prior to the </textarea> tag will appear in the control as a default value.
<textarea name="Company Address" cols=30 rows=4></textarea>
Check boxes:
A check box is a specialized form of an input area with the type set to "checkbox".
<input type=checkbox name="Include" value=1>
The value will be returned if the checkbox is selected.
Radio buttons:
Radio buttons are similar to check boxes, but grouped together visually:
Choose the search area:<br> <input type=radio CHECKED name=universe value=US-STOCK>Stocks <input type=radio name=universe value=CA-STOCK>Canadian Stocks <input type=radio name=universe value=MMF>Money Markets <input type=radio name=universe value=MUTUAL>Mutual Funds
Note that the default radio button can be marked with the word CHECKED. Also note that all radio buttons in the same group have the same name.
Selection lists:
A selection list offers the user a choice from a number of options. The tag for a selection list lets you specify the number of visible rows in the "size" field, as well as the values for all of the options.
Select an Option<br>
<SELECT size=2 NAME="Option">
<OPTION> Option 1
<OPTION> Option 2
<OPTION> Option 3
<OPTION> Option 4
</SELECT>
The word MULTIPLE creates a multi-selection capability.
Special buttons:
The following tags create two special buttons, one to Submit the form to the server and one to Reset the form:
<INPUT TYPE=submit value="Submit"> <INPUT TYPE=reset value="Reset">
Putting it all together
Let's say that you would like to create a simple questionnaire for one of your web pages.
For example, you would like to ask for the reader's name, sex, age and comment, and then process it in
a CGI script. The HTML form might
live in a file named http://www.howstuffworks.com/survey.htm
and look like this:
<html>
<body>
<h1>HSW Survey Form<h1>
<FORM METHOD=POST ACTION=/old?u=http%3A%2F%2Fhowstuffworks.com%2F%26quot%3Bhttp%3A%2Fwww.howstuffworks.com%2Fcgi-bin%2Fsurvey.cgi%26quot%3B%26gt%3B&y=1999
Enter Your Name: <input name="Name" size=20 maxlength=50>
<P>Enter your sex: <input type=radio CHECKED name=sex value=MALE>Male
<input type=radio name=sex value=FEMALE>Female
<P>Select your age<br>
<SELECT size=2 NAME=age>
<OPTION> 1-10
<OPTION> 11-20
<OPTION> 21-30
<OPTION> 31-40
<OPTION> 41-50
<OPTION> 51-60
<OPTION> 61 and up
</SELECT>
<P>Enter Your Comment: <input name="Name" size=40 maxlength=100>
<P><INPUT TYPE=submit value="Submit"> <INPUT TYPE=reset value="Reset">
</FORM>
</body>
</html>
Click on this URL to see the form in action: http://www.howstuffworks.com/survey.htm.
The CGI script referenced by this form will receive 4 different pieces of data: the name, age, sex and comment of the reader who submits the form. The script will have to parse out the four values and handle all of the character transformations. The file http://www.howstuffworks.com/survey.c was used to create the script survey.cgi and is perhaps 100 lines long.
Summary
In this quick tour of CGI scripting, we have seen that:
| If you are thinking about creating a web site and are looking for a company that can reserve your domain name or host your site, please click here. See also Question 222 for information on the entire process! |
The following links will be extremely helpful as you are learning about CGI. Have fun!
Links
|
|
||||||||||||||||||||||||||||
|
|
How Stuff Works (http://www.howstuffworks.com) is a production of BYG Publishing, Inc. http://www.bygpub.com - questions@bygpub.com P.O. Box 40492 - Raleigh, NC 27629 |
© 1998 BYG Publishing, Inc. All rights reserved.
