Lesson 5 -- Printer Friendly Version

INSTRUCTIONS:

IMPORTANT: This version of your lesson is for saving or printing only. All links and images have been disabled to decrease download time and help you avoid printer difficulties.

Chapter 1

IMPORTANT: This lesson comes in two parts. Part 1 (chapters 1-12) teaches you how to create forms. The material in Part 1 may be a review for those of you who have taken my Advanced Web Pages course, but it is absolutely necessary for all of you to become quite proficient at working with forms before you proceed to the next lesson. Part 2 (chapters 13-14) will teach you how to write, upload, and troubleshoot a CGI program on your server.

HTML's forms capability allows you to create interactive pages containing prompts for your visitors to respond to. Visitors to your web site who access your form will be able to type in text boxes, select items from a list of choices, or click on checkboxes. All of the information they have entered on the form can then be sent to your e-mail box.

You can create your form entirely in HTML. However, you will also need to write a CGI program in Perl in order to organize the information your visitors enter on the form. Your program can then process this information and either store it in a database on your server, forward the information to you via e-mail, or generate a custom web page for your visitor.

The <form> tag

Every form must begin and end with <form> and </form> tags.

The <form> tag that appears at the beginning of your form will look something like this: 

 <FORM METHOD="POST"  
 ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query">
The <form> tag can have two attributes, "method" and "action."

The "method" attribute dictates how information will be sent to the computer program that will process your form. You have two choices, "method=get" or "method=post."

Of the two, "method=get" is faster than "method=post". The data your visitor enters on your form is simply tacked onto the end of the URL specified in your "action" attribute. Your server's form processing program receives this information almost the instant your visitor submits their completed form.

Because of its reputation for high speed, most search engines use "method=get" for form submissions. To see this, go to www.infoseek.com and type a couple of words in their search form. Click the 'Seek' button, and check the URL at the top of your browser. Notice how Infoseek tacks your search terms (and a few other codes) onto the end of the URL.

If you use "method=post," the data entered on your form is converted to a file and mailed to the URL specified in your "action" attribute. Your server must download this file in order for the forms processing program to process its contents, so the "post" method will take a fraction of a second longer than the "get" method.

Unfortunately, "method=get" only works if the information a visitor enters into your form is less than 256 characters. Because it is difficult to control how many characters a visitor might enter on your form, you should usually go with "method=post," which allows for the transfer of an unlimited number of characters between your form and your server.

The "action" attribute is used to identify the URL of the CGI program that will process the information entered on your form. This attribute must include the full URL of the program, including the name of the program.

For now, you are welcome to use a program run by the National Center for Supercomputing Applications (NCSA) to process form data. The NCSA provides this program as a service to the Internet community.

Unfortunately, NCSA's form-processing program exists solely for HTML programmers to try out their forms. That's it. It cannot process the form data in any way. If you want a more useful forms-processing program, you will need to create one yourself. That will be the focus of your remaining lessons in this class.

The URL for NCSA's forms-processing program is 

http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query
Therefore, if you want to use the NCSA CGI program, the <form> tag at the top of your form should look like this: 

 <FORM METHOD="POST"  
 ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query">
You should select method="post" because a visitor to your site might type more than 256 characters on the form you create. For now, you should also set the "action" parameter to action="http://hoohoo.ncsa.uiuc.edu/cgi- bin/post-query" so that you can test your form by sending your form data to the NCSA forms-processing program.

When you complete work on your own CGI form-processing Program, you will undoubtedly want to use your program Instead of the NCSA program. Your program will obviously have a different URL. When your CGI program is ready to take over the processing of form data, all you will need to do is substitute your program's URL for the NCSA URL in the "action" attribute above.

One more point to remember: the form should end with a tag that looks like this: 

 </FORM>
You don't have to type it now, because our form isn't done. I just don't want you to forget that the <FORM> tag has a partner!

Chapter 2

Now, all you need to do is create some places on your form so that visitors to your site can input information. You will accomplish this by using one or more <input> tags.

An <input> tag usually looks something like this: 

 <input name="streetaddress" type="text" size=25>
Many <input> tags have a 'size' attribute. This attribute specifies the width of the input device, in characters. The statement 'size=25' means that we want our input device to be 25 characters wide.

The "size" attribute does not limit the number of characters that your visitor can type in the input device. If you set the size to 25, the input device will be 25 characters wide. But a person can type 26 characters or 30 or 50 or more. The text will just scroll.

If you want to limit the number of characters a person can enter in the input device, simply add a "maxlength" attribute, like this: 

 <input name="streetaddress" 
 type="text" size=25  maxlength=25>
The tag above will restrict all entries in this text box to 25 characters.

All <input> tags will have a 'name' attribute. This attribute, which MUST be UNIQUE for each input tag (this is important--two input tags can NOT have the same name!), is used to identify each input device to the forms-processing program. The name can consist of letters, numbers, underscores, or dashes, but must not contain any spaces.

All <input> tags also have a 'type' attribute. This is used to indicate what type of input device you'll need. There are six types of input devices:

type="text" to create a one-line text box

type="checkbox" for check boxes

type="radio" for a set of radio buttons

type="submit" to create a button that, when clicked, will submit form data to the form-processing program.

type="reset" to create a button that, when clicked, will clear the form.

type="hidden" for any other information that needs to be sent to your forms-processing program without any intervention from the user.

There are also two additional input devices (discussed below) that do not use the <input> tag.

-Text Input-

If you want a visitor to your site to be able to type text on your form, just add the "type=text" attribute to an <input> tag.

For example, suppose you want to get your visitor to be able to type his or her e-mail address on your form. All you need to do is add the following tag to your form: 

 <input type="text" name="email" size=40>
This text input box will be 40 characters long, ample room for an e-mail address.

Now, if you type this tag exactly as I did above, all your visitor will see is an empty text box wide enough to accomodate 40 characters. It might not be a bad idea to put a little bit of paragraph text in front of the <input> tag so that the user is made aware of what they should type in the input text box: 

 <P>What is your e-mail address? <input 
 type="text"  name="email" size=40></P>
Notice how the </P> comes AFTER the <input> tag. This helps ensure that the input box will (hopefully) be on the same line as the "what is your e-mail address" prompt.

If you're going to place two or more text boxes on a page, it would be a good idea to use a table so the text boxes line up nicely. It is almost impossible to get the text boxes to look decent with <P> tags.

Start a text editor, and try recreating this form. It has three text boxes arranged neatly in a two-column table. Notice how the form must begin with a <form> tag and end with a </form> tag. 

 <HTML>  
 <HEAD>  
 <TITLE>Our first form</TITLE>  
 </HEAD> 
 <BODY BGCOLOR="#FFFFFF"> 
 <H3 align="center">Complaint Form</H3> 
 <FORM METHOD="POST"  
 ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query"> 
 <CENTER>  
 <TABLE WIDTH=500>  
 <TR> 
 <TD WIDTH=250>  
 What is your e-mail address?  
 </TD> 
 <TD WIDTH=250>  
 <input type="text" name="email" size=40>  
 </TD> 
 </TR>  
 <TR> 
 <TD>  
 What is your full name?  
 </TD> 
 <TD>  
 <input type="text" name="fullname" size=40>  
 </TD> 
 </TR>  
 <TR> 
 <TD>  
 What is your complaint?  
 </TD> 
 <TD>  
 <input type="text" name="complaint" size=40>  
 </TD> 
 </TR>  
 </TABLE>  
 </CENTER>  
 </FORM>  
 </BODY>  
 </HTML>
Unfortunately, the form won't work just yet. We need two more input devices:

Chapter 3

When your visitors finish filling out your form, they will need to click on a "submit" button so that they can send all of their input to your forms-processing program. To create the "submit" button, all you need to do is add the following <input> tag to your form: 

 <input TYPE="submit" VALUE="Submit Form">
Notice that the submit button is special in that it does not have a 'name' attribute. Instead it has a 'type' attribute and a 'value' attribute.

Although the 'type' attribute MUST say type="submit", the text you enter for the 'value' attribute is entirely up to you. The words you type in the 'value' attribute will be printed on the back of the button your visitor must click to submit the form to your forms-processing program.

Chapter 4

A 'reset' button tells the browser to clear the form if the visitor clicks on the button. As with the 'submit' button, the text you enter in the 'value' attribute will appear on the button. 

 <input TYPE="reset" VALUE="Clear Form">
Let's add these two buttons to our form, just below the table.

The complete HTML code for our form: 

 <HTML>  
 <HEAD>  
 <TITLE>Our first form</TITLE>  
 </HEAD>  
 <BODY BGCOLOR="#FFFFFF">  
 <H3 align="center">Complaint Form</H3>  
 <FORM METHOD="POST"   
 ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query">
 <CENTER>  
 <TABLE WIDTH=500>  
 <TR>  
 <TD WIDTH=250>  
 What is your e-mail address?  
 </TD>  
 <TD WIDTH=250>  
 <input type="text" name="email" size=40>  
 </TD>  
 </TR>  
 <TR>  
 <TD>  
 What is your full name?  
 </TD>  
 <TD>  
 <input type="text" name="fullname" size=40>  
 </TD>  
 </TR>  
 <TR>  
 <TD>  
 What is your complaint?  
 </TD>  
 <TD>  
 <input type="text" name="complaint" size=40>
 </TD>  
 </TR>  
 </TABLE>  
 <BR><BR>  
 <input TYPE="submit" VALUE="Submit Form">  
 <input TYPE="reset" NAME="Clear" 
 VALUE="Clear Form">  
 </CENTER>  
 </FORM>  
 </BODY>  
 </HTML>

Chapter 5

Checkboxes allow the visitor to click on a box and toggle a value to either "yes" or "no." All you have to do to create a checkbox is:

1. create an <input> tag with the 'type' attribute set to 'checkbox,'

2. in the <input> tag, give the checkbox a name, and

3. in the <input> tag, give the checkbox a value.

Here's an example of an <input> tag that would create a checkbox: 

 <input TYPE="checkbox" 
 NAME="mailing-list" VALUE="Yes">
Notice that we have entered a "value" attribute of "Yes" here. That means if a visitor checks the box, the forms- processing program will interpret that act as if the user had typed the word "Yes."

In other words, if this box is checked the forms-processing will send you confirmation that says, among other things:

mailing-list=Yes

If the box is left unchecked, the forms processing program wouldn't even bother mentioning this particular input device.

If you would like the box to be checked automatically every time a visitor encounters it (forcing the visitor to click on the box to deselect it), just add a space and the word "checked" to the end of the <input> tag, like this: 

 <input TYPE="checkbox" NAME="mailing-list"
 VALUE="Yes"  checked>
Unfortunately, a checkbox by itself is fairly useless. If you want your visitors to understand the purpose of the checkbox, you must type some instructions nearby: 

 <P> <input TYPE="checkbox" 
 NAME="mailing-list" VALUE="Yes"  checked>
Check this box if you'd like to be on our mailing list</P>

You can have as many checkboxes as you'd like on your form, but you must be careful to give each checkbox a different name: 

 <P><B>Which of the following products do you use?</B></P>
 <P>Please check all that apply:</P>
 <P><input TYPE="checkbox"
 NAME="cd" VALUE="Yes"> CD-ROM  drives</P>
 <P><input TYPE="checkbox"
 NAME="tape" VALUE="Yes"> Tape  drives</P>
 <P><input TYPE="checkbox"
 NAME="removable" VALUE="Yes"> Removable drives</P>
A person will be able to select all, none, or some of these checkboxes.

Chapter 6

Radio Buttons offer your visitors a whole group of buttons to click, but unlike checkboxes, all the buttons in the group are mutually exclusive. What that means is that only one button in the group may be selected at a time, like the buttons on an old-fashioned car radio. When you select one button, the others become deselected.

When creating a group of radio buttons, you will need several <input> tags, one for each button. Each of the radio button <input> tags must be adjacent to one another.

And here's something strange: each of the radio button tags in the group must also have the exact same NAME, but each button must have a different VALUE. This is because the radio buttons function as a group. Only one of the buttons can be selected at any one time.

Here's an example: 

 <P>What type of computer do you have?    

 <input TYPE="radio" NAME="computer" 
 VALUE="Pentium" checked>Pentium
 <input TYPE="radio" NAME="computer" 
 VALUE="486">486
 <input TYPE="radio" NAME="computer" 
 VALUE="386">386
 <input TYPE="radio" NAME="computer" 
 VALUE="Mac">Mac
 <input TYPE="radio" NAME="computer"
 VALUE="Other">Other</P>
Notice how all the radio buttons are named 'computer,' but each one has a different value. If someone were to select the radio button with a value of '486,' the forms processing program would send you confirmation that says, among other things:

computer=486

It is important that you retype the values a second time just outside of each <input> tags. The <input> tags themselves will just create a radio button and nothing more. Retyping the values next to the radio buttons helps you explain the purpose of each radio button to your visitors.

Notice how all the radio buttons and text are surrounded by just one set of <P> and </P> tags. This helps to ensure that the buttons and the accompanying text will all appear on the same line.

Finally, notice how the word "checked" at the end of the <input> tag for the "Pentium" radio button ensures that that button will be selected. If you choose to add the word "checked" to a radio button's input tag, make sure that you only do this for only ONE of the buttons!

Chapter 7

If you want to send any data to your CGI form-processing program but do not want to force your user to supply this information, you might want to consider adding it to your form using a hidden field.

A hidden field should have the 'type' set to "hidden." This type of field has two parameters, a 'name,' which must be unique, and a value. The value could be a text string or a number. Here's how a hidden field might look: 

 <input type="hidden" name="discount" value="10%">

Chapter 8

A drop-down list is essentially a text box with a down arrow at the right edge. When you click the down arrow, a list of options will drop down. Click an option, and it will be entered into the text box for you.

Unlike all of the other input devices we've learned about so far, drop-down lists are not created with <input> tags. Instead, we create the drop-down list with <select> and </select> tags.

The initial <select> tag should contain the name of the drop-down list. This name must be unique--it cannot be used by any other input device on your form. The name must not contain any spaces.

Also, each option on your drop-down list must be preceded by an <option> tag.

The tags below will create a drop-down list named 'OperatingSystem.' The drop-down list will have seven options: 

 <P>Please select your operating system:
 <select name="OperatingSystem">
 <option>DOS 	 
 <option>Windows 3.x 	 
 <option>Windows 95 	 
 <option>Windows 98 	 
 <option>Apple System 7 	 
 <option>Apple System 8 	 
 <option>other 	 
 </select> 	 
 </P>

Chapter 9

Like a drop-down list, a scrollable list presents users with multiple options to choose from. However, a scrollable list automatically displays several lines of options at all times. Unlike a drop-down list, there is no need to click a down arrow to make the options on your scrollable list visible.

If screen space is limited, you're probably better off going with a drop-down list. However, if you want to make it as easy as possible for your visitors to select one of many options, nothing beats a scrollable list.

Creating a scrollable list is not too different from creating a drop-down list. The entire list must be surrounded with <select> and </select> tags.

The initial <select> tag must contain a unique name for the scrollable list. This name should not contain any spaces.

The same <select> tag should also contain a size attribute that indicates the number of lines of options you'd like to have visible.

The number of lines of options you make visible can be less than or equal to the total number of options on your list. Any unseen options can be brought into view with scroll bars that will automatically appear on the right side of your scrollable list.

Finally, each option on your scrollable list should be preceded by an <option> tag.

The tags below will create a scrollable list named 'Language.' Although the list has six options, the 'size' attribute in the <select> tag dictates that only the first four will be visible initially. Clicking a scroll bar on the right side of the list will make the other two options visible. 

 <P>Please select a language:
 <select name="Language" size=4>
 <option>English 	 
 <option>French 	 
 <option>German 	 
 <option>Japanese 	 
 <option>Korean 	 
 <option>Spanish 	 
 </select> 	 
 </P>

Chapter 10

Both drop-down lists and scrollable lists allow the user to only make one selection. If you'd like people to be able to select more than one option at a time, you need to create a multiple list.

The tags for a multiple list are identical to the tags for a scrollable list, with one exception: the initial <select> tag must contain the word 'multiple.' This word tells the browser that the user is free to make multiple selections from your list.

The user selects the first option by clicking the option. To make more than one selection, the user need only hold down the CTRL key while clicking on subsequent options.

The following tags will create a 5-line tall scrollable list, with multiple selections possible.

<P>Which of the following kitchen appliances do you own?<BR>
(Hold down the CTRL key to select more than one item.) 

 <select name="Appliances" size=5 multiple>
 <option>Bread baking machine
 <option>Coffee machine 	 
 <option>Cuisineart 	 
 <option>Espresso maker 	 
 <option>Juicer 	 
 <option>Microwave 	 
 <option>Toaster oven 	 
 <option>Veg-o-matic 	 
 </select> 	 
 </P>

Chapter 11

A textarea is a large text box that can accommodate multiple lines of text. Form designers use textareas to create 'comment' boxes on their form.

You create a textare with the <textarea> tag. Each <textarea> tag you create must be accompanied by a closing </textarea> tag.

The initial <textarea> tag has three attributes:

name A unique identifier for the textarea. Must not contain spaces.

rows Number of lines of text that will be visible. The user can scroll if more lines are needed.

cols Width of textarea (in characters).

The following tag will create a textarea named 'comments.' The textarea will be 6 lines tall and 40 characters wide. 

 <P>Please type your comments below:<BR>
 <textarea name ="comments" rows=6 cols=40>
 </textarea>      
 </P>
Notice how the </textarea> tag immediately follows the initial <textarea> tag. Nothing appears between the two tags. If you were to type some text in between the two tags, the text would automatically appear inside of the textarea on your form.

Note: Most textareas will not wrap text automatically each time a line is filled with text. Your users will have to press the ENTER key every time they want to start a new line. If you'd like text to wrap (not all browsers support this), add the word 'wrap' to the end of the textarea tag, like this: 

 <P>Please type your comments below:<BR>
 <textarea name ="comments" rows=6 cols=40 wrap>
 </textarea>
 </P>

Chapter 12

NOTE: This is not the last chapter of lesson 5. The next two chapters contain an illustrated, step-by-step tutorial that will teach you how to upload and run a CGI program on your server. After you finish your quiz and assignment, don't forget to read the next two chapters!

-Quiz 5-

When you feel you have a grasp on all of the concepts taught within this lesson, I would like you to take a short, multiple choice quiz. To get to the quiz, click on 'Quizzes' on the menu bar. When the form comes up, input your last name, e-mail address, and password, and make sure you have 'Quiz 5' selected. Good luck!


-Assignment D-

Use a text editor to create a form that uses the following initial <FORM> tag:

<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query">

Your form should contain the following input devices:

-At least two text boxes

-At least one set of radio buttons

-At least one checkbox

-At least one hidden field

-A drop down list and/or a scrollable list and/or a multiple list

-A textarea

-A Submit button

-A Reset button

Don't just cut and paste my tags into your form. Instead, create your own form. Tailor the form to suit your own purposes.

Label each input device clearly and make the form look nice! Make sure all of your input devices line up nicely. You can use a table, or place your input devices below the labels.

Please test your form. To do so, save your form as 'form.htm' or 'form.html.' Then, log onto the Internet and fire up your favorite web browser. Click the browser's 'File' menu, choose 'Open,' and locate your 'form.htm' or 'form.html' file.

When the form appears in your browser, fill out the input devices to the best of your ability and click the 'Submit' button. After a pause of 45-90 seconds, the NCSA form- processing program should respond. If you are online and you get an error message from your browser each time you try to submit your form data, check your <form> tag for typos.

No need to send your form to me, but please post a message in the Discussion Area if you have any problems.

Chapter 13

The instructions below are designed to teach you how to upload a Perl script to your server.

In this lesson, you'll write a CGI program using Perl. Then, you'll set up a directory on your server, upload the program to the directory, and test the program. You'll also learn how to use the CHMOD and LIST commands to set and view file and directory permissions.

To participate in these exercises, you'll need access to a UNIX server running Perl. You can rent space on such a server from a variety of hosting services, including Iserver ($65/month), Tabnet ($29/month), or A+ Net ($29/month). If you don't want to pay for hosting and don't mind banner advertisements being placed on your pages by the host, there are many free hosting services that offer CGI support out there. If you (or someone you know) has a business you'd like to get online, I strongly recommend that you use Hypermart at hypermart.net--the best of the bunch. Other free hosting services are usually more difficult to deal with than Hypermart (due to protracted down times or non-existent technical support), but if you want to scout out a few other free services, try WebProvider dot com at webprovider.com or Virtual Avenue at virtualave.net. Note: in an earlier lesson, I also listed Fiberia as an option for free CGI hosting. Unfortunately, Fiberia recently announced that they no longer support CGI scripting and should not be considered.

You'll also need to download an FTP program that has the ability to issue the UNIX CHMOD command. I strongly recommend the student edition of WS_FTP 95 LE (version 4.50 or greater), which can be downloaded from http://tucows.abac.com. All the screen shots in this document were taken from WS_FTP 95 LE.

Step One

Let's begin by creating a simple Perl script. To do so, start your favorite text editor.

Step Two

Now, type the following program. Be sure to ask your hosting service for the correct path to Perl so you start your program off on the right foot. The path on the first line of this program is the correct one to use if you're a Hypermart member. The path may differ if you're using another hosting service.

Type your code very carefully. Don't leave out any quote marks or semicolons or your program won't run. Also, please remember that Perl is case-sensitive. The command 'print' might fail if you type 'PRINT' or 'Print' or 'pRiNt', for example.

#!/usr/local/bin/perl

#Warn browser that HTML is coming
print "Content-type: text/html\n\n";

#Create HTML page
print "<HTML><BODY>";
print "<H1>Hello, world!</H1>";
print "</BODY></HTML>";

#End of program

Step Three

Now, click your text editor's 'File' menu and choose 'Save As'. Choose a drive and folder for the file. You can use any drive and/or folder your heart desires, but do not forget the name of the drive and folder you select. You'll need that information in an upcoming step.

Once you've selected an appropriate storage location for your file, assign the name test.cgi to the file and proceed with the save.

IMPORTANT IMPORTANT IMPORTANT IMPORTANT

IMPORTANT: The Windows Notepad program has an unusual habit of appending an extension of .txt to the name of every file you save. If you're using Windows Notepad, you can prevent it from changing the extension by surrounding the filename with quotes each time you save. In other words, if you're using Notepad, save the file by typing the name inside of a pair of quotes exactly as you see below:

"test.cgi"

This is just a problem with the Windows Notepad text editor. If you're using any text editor other than Notepad, you shouldn't have to worry about surrounding the file name with quotes.

Step Four

After the file has been saved, log onto the Internet and start WS_FTP. You will be greeted by a Session Properties screen. (Note: if the Session Properties screen doesn't come up, just click the Connect button in the lower left corner of the WS_FTP window.)

In order to log into your server, you will need to enter the following pieces of information into the spaces provided on the Session Properties screen:

Your hosting service will provide you with this information when you sign up. For example, if you're a Hypermart member, you will find this information in the welcome e-mail you received shortly after signing up for that service.

If you're using WS_FTP, click the 'New' button to set up your account information. Click in the 'Profile Name' box and type the name of your hosting service. Example:

Hypermart

Next, click in the 'Host Name/Address' box and type the address of your host computer. This address will consist of three or four or more words or numbers, all separated by periods. Example:

server7.hypermart.net

Click in the 'User ID' box and type the username that your hosting service assigned you. Example:

mustang

Click in the 'Password' box and type the password your hosting service assigned to you. For security reasons, the password will not appear on your screen as you're typing it.

If you're the only one who will have access to this FTP program, click to select the 'Save Pwd' checkbox. When this option is selected, WS_FTP will enter your password for you the next time you need to log in to this server.

Step Five

After you fill in the Session Properties window, click the 'OK' button at the bottom of the window. Wait a bit, and, if you've typed your host address, username, and password crrectly, you'll connect to the server.

You should now see a window that has been divided into two panes. The pane on the left will show all the drives, folders, and files on your computer. The pane on the right shows the drives, folders, and files on the host computer.

Step Six

If your hosting service has not already created a folder on the server for your CGI programs, you'll have to take care of this yourself. To do so, click the MkDir button on the right side of the right pane.

Step Seven

A dialog box will appear, asking you to name the folder you just created on the host machine.

Type "cgi-bin" (without the quotes) and click 'OK'. It is traditional (although not always necessary) to name the folder that will hold your CGI programs "cgi-bin".

IMPORTANT IMPORTANT IMPORTANT IMPORTANT

IMPORTANT: If you use webprovider dot com for hosting, they ask that you give your CGI directory a name other than 'cgi-bin.' Each hosting service you work with is going to have its own rules and regulations that you must abide by, and this is one such rule. If you use webprovider dot com for hosting, be sure and name your CGI directory something other than cgi-bin. Most of my webprovider dot com-using students name their CGI directory 'cgi' or 'cgifiles' or something like that.

You should see a new folder named "cgi-bin" (or whatever you named it) in the right pane.

Step Eight

When you create a new folder on your server, you must indicate who should have access to the folder and what type of access they should have. We call this process "setting your permissions".

There are essentially three types of individuals who can access your folder. You are the owner of the folder, and you should give yourself the right to read (open), write (modify), and execute (run) the programs that will be stored in this folder.

The rest of the world should only be allowed to read and execute the programs stored in your new folder. They should not be allowed to write (modify) the programs in any way, because that could represent a security risk.

The procedure for setting file permissions varies from FTP program to FTP program. If you use WS_FTP, all you have to do is click your mouse once on the cgi-bin folder in the right pane to select it.

Once the folder has been selected, point your mouse at the folder and click your right mouse button. A menu containing a list of UNIX commands will pop up. The chmod command is always used to set file permissions, so click your left mouse button on chmod.

Step Nine

A 'Remote File Permissions' dialog box will appear. You will see nine checkboxes arranged into three sets of three. The words 'read' 'write' and 'execute' will appear next to each checkbox. You can use one set of checkbox to set permissions for the owner, another set of checkboxes to set permissions for the group, and the third set for everybody else. Set your permissions as follows:

Owner - read, write, and execute privileges.

Group - read and execute privileges.

Other/World - read and execute privileges only.

What this means is that you (the owner of the program files you'll be placing in this new directory) want to be able to read the program files, write over (change) the program files, and execute (run) the programs. Everybody else should only be able to read and execute the files. Nobody but you (the owner) should be permitted to change the files. When you're finished checking the boxes as described above, click the 'OK' button.

Some FTP programs other than WS_FTP (such as those that run on the Mac platform) will ask you to type a three-digit number (like 755) to set the file permissions. If you use such a program, here's how the numbering system works:

A read permission is worth 4 points
A write permission is worth 2 points
An execute permission is worth 1 point

You need to set permissions for three distinct entities: the user, the group, and the world, in that order.

What you need to do is add up the points for the permissions you want to set for each entity.

For example, if you want to give the user read (4 points) write (2 points) and execute (1 point) permissions, that would be a total of 4+2+1=7 points.

If you want to give the group read (4 points) and execute (1 point) permissions, that would be a total of 4+1=5 points.

And if you want to give the world read and execute permissions, that would also represent a total of 5 points.

When you issue the chmod command, you may be asked to enter the number of points you want to give the user, the number of points you want to give the group, and the number of points you want to give the world, in that order, and without any spaces between them.

Because we want to give the user 7 points, the group 5 points, and the world 5 points, we would issue the chmod command like this: 

chmod 755

Just for the sake of argument, let's say we want to give the user 7 points, but we want the group to have read (4 points) and write (2 points) permissions. That would be a total of 4+2=6 points. Let's say we also want to give the world read and write permissions (another 6 points). To do this, we would need to issue the following command: 

chmod 766

And if you wanted to give the user, the group, and the world read (4 points), write (2 points) and execute (1 point) permissions, you would need to issue the following command: 

chmod 777

IMPORTANT IMPORTANT IMPORTANT IMPORTANT

IMPORTANT: If you wish to verify that the permissions have been set correctly, do NOT use the chmod command! The chmod command can only be used to set permissions. It cannot be used to verify existing permissions. If you use WS_FTP LE, here's a way the curious among you can check file permissions: click your right mouse button inside the right pane and choose 'FTP Commands' followed by 'LIST'. A list of the folders and files on your server will appear. To the left of each folder or filename, you will see the file's permissions.

For example, you should see the letters 'rwx r-x r-x' in front of the cgi-bin folder. The first three characters indicate the owner permissions for the folder (rwx stands for 'read', 'write', and 'execute'). The next three characters show the group permissions (r-x stands for 'read' and 'execute'). The last three characters are used to indicate the other/world permissions (again, r-x stands for 'read' and 'execute').

Chapter 14

(Continued from previous chapter)

Step Ten

After you've set your folder permissions, you'll want to crawl inside the folder and get ready to upload the file. Please double-click the folder you created to hold your CGI program files (unless your hosting service forbids the practice, you will have named this folder 'cgi-bin.'

The pane on the right will now show the contents of your cgi-bin folder. If you just created this folder, the pane on the right will be empty.

Step Eleven

Now, please turn your attention to the left pane. You should see a small button sporting a down arrow in the lower right corner of this pane.

Click the down arrow and you'll scroll down to a list showing all the drives on your system. If necessary, double-click the drive that holds the 'test.cgi' file you saved in step 3.

Step Twelve

Look for a crooked green arrow in the upper left corner of the left pane. Double-click this arrow repeatedly until you reach the root directory for the drive you selected in the previous step.

For example, if your file is stored on the C: drive, you would want to double-click the green arrow until the box at the top of the left pane says nothing more than:

C:\

Step Thirteen

Next, double-click on the folder that you saved the 'test.cgi' file to in step 3.

Step Fourteen

You should now see the 'test.cgi' file. Click once on this file to select it.

IMPORTANT: If you cannot see the full name of the file, place your mouse on the black line that separates the word Name from the word Date at the top of the directory listing. Hold down your left mouse button and drag the line a little to the right. This will make the column wider. Make sure that the file is named test.cgi and not test.cgi.txt or Test.cgi or TEST.cgi or text.cgi or anything other than test.cgi. If the name is not correct, click once on the file and then click the 'Rename' button to the right of the filename. Change the filename to test.cgi (all lowercase) and click the OK button.

Step Fifteen

Your Perl scripts are text files. Therefore, when you transfer your programs to a server, you must transfer them in ASCII (text) mode. If you fail to transfer a program in text mode, it simply will not work.

To ensure that the file will transfer in ASCII mode, click the round option button in front of the word 'ASCII' at the bottom of the left pane.

IMPORTANT: Make sure that you explicitly tell your FTP program to upload the file in ASCII (text) mode. If you allow the FTP program to upload the file in 'Automatic' or 'Binary' mode, it will get destroyed and is guaranteed not to run!

Step Sixteen

You're now ready to transfer the file to your server. To do so, look for two buttons situated between the left and right panes.

Click the button that points to the right to transfer the file from your computer to the server.

Step Seventeen

After a few seconds, the file named 'test.cgi' will appear in the right pane.

Once again, verify that the file is named test.cgi and not Test.CGI or tEst.cgi or TEST.CGI or test.cgi.txt or anything other than test.cgi. If the name is not correct, select the file by clicking it with your mouse and use the 'Rename' button to change the name of the file to test.cgi.

Step Eighteen

You have now succeeded in uploading a program file to a server on the world's largest network (the Internet). Because this file will be shared by many dozens or hundreds or thousands of people, you must now set the permissions for this file. When you set permissions for a file, you are indicating how you want yourself and others to be able to use the file over this network. You will want to be able to look at (read), modify (write) and run (execute) the program file. You probably won't want to allow others to change the file by giving them write permissions, but you will want them to be able to read and execute the files. To change the permissions, click once on the copy of 'test.cgi' that appears in the right pane.

Step Nineteen

With your mouse still pointing at the selected file in the right pane, click your right mouse button. This will bring up a menu.

After the menu appears, select the chmod command by clicking once.

Step Twenty

You will now need to set the file permissions for this file. The file should have the same permissions you gave the folder in step 9:

Owner - read, write, and execute privileges.

Group - read and execute privileges.

Other/World - read and execute privileges only.

If you're using one of those FTP program that requires you to set the permissions with a three-digit number, just issue the following command instead:

chmod 755

When you're finished checking the boxes as described above, click the 'OK' button.

Step Twenty-One

The file is now ready to be run. Start your web browser and click in the 'Go To' or 'URL' or 'Location' box at the top of the browser. Then, just type the URL (web address) for your CGI program and press ENTER.

Typically, the URL for your CGI programs will start out the same as the URL for your web pages. However, since you're storing your CGI programs in a subdirectory named 'cgi-bin', you'll have to append the name of the subdirectory (and the name of the program) to the end of the URL you normally use. For example, if you're a Hypermart member, your URL should look something like this:

http://username.hypermart.net/cgi-bin/test.cgi

Be sure to substitute your real username for username in the example above.

Step Twenty-Two

After a brief pause, you will see one of the following messages:

Message One

Hello, World!

EXPLANATION: If you receive this message, your program worked perfectly. No further modification will be necessary.

Message Two

403 Forbidden

Your client does not have permission to get URL /cgi-bin/test.cgi from this server.

EXPLANATION: If you see this message, it means that you have not set file permissions properly. The world needs to be able to read and execute your cgi file.
SOLUTION: Use your FTP program's chmod command to change the file permissions. If you use WS_FTP, you can right- click on the file after you've uploaded it to your CGI directory. Give the owner read, write and execute privileges. Give the group read and execute privileges. Give the world (also known as other) read and execute privileges.
If you have Telnet and know how to use it, you could Telnet to your server and enter the cgi-bin subdirectory. Then, issue the following UNIX command:
chmod 755 test.cgi

Message Three

500 Server Error

The server encountered an internal error or misconfiguration and was unable to complete your request.

Please contact the server administrator, webmaster@yourcompany.com and inform them of the time the error occurred , and anything you might have done that may have caused the error.

EXPLANATION: This is the most common error. It is caused either by sloppy programming, or by uploading the file in 'Automatic' or 'Binary' mode instead of 'ASCII' (text) mode. If you see this error, you should first try re-uploading the file in 'ASCII' mode. If it still won't run, then you made a typo in your code. You probably forgot to type a quote mark or a semicolon or you used more than one pair of quote marks on one line or you spelled the word 'print' with an uppercase 'P' instead of a lowercase 'p' or you made some other typographical or spelling or letter case error in your cgi file.
SOLUTION: Look for and correct spelling errors. Make sure you didn't leave out a quote mark, semicolon, parenthesis, or bracket. I find that a missing semicolon at the end of a line is almost always to blame for this error. Using uppercase letters instead of lowercase (or vice-versa) is another common mistake. You might also have forgotten to close quotes opened earlier on the same line. Sometimes a second set of eyes can help you spot your typo. Have a friend, coworker or relative look over your code and compare it to mine until you find your error.

Message Four

404 Not Found

The requested URL /cgi-bin/test.cgi was not found on this server.

EXPLANATION: The server cannot find the file you specified in the 'URL' or 'Location' box at the top of your browser.
SOLUTION: Make sure that you have uploaded the test.cgi file to the cgi-bin directory you created in step seven. If your hosting service did not allow you to name your directory 'cgi-bin,' then make sure you are using the name you gave that directory instead of 'cgi-bin.' Basically, this message means that you are not typing the URL into your browser correctly, and it is usually simple to resolve. Make sure you spelled the name of the file and directory correctly, using all lower case (file and folder names are case-sensitive). If you can't figure it out, ask your hosting service to tell you what your URL is.

Message Five

Well, this really isn't a message, but sometimes your CGI file will just print out on the screen. Instead of running, the program will just display your source code.
EXPLANATION: The server isn't executing your file.
SOLUTION: The server either can't find the perl interpreter or doesn't recognize the file extension you used. Make sure that your test.cgi file name ends with a .cgi extension and not .txt or some other extension. If it does, look at the first line of your CGI file. Does it have a number sign (#) followed immediately by an exclamation point (!) and the correct path to perl? Check with your hosting service. Ask them what extension you should use on your CGI programs and what the very first line of your CGI program should say.

End of lesson.

IMPORTANT: This version of your lesson is for saving or printing only. All links and images have been disabled to decrease download time and help you avoid printer difficulties. Do NOT attempt to click any of the links on this page.

Copyright 1999 by ed2go.com. All rights reserved.
No reproduction or redistribution without written permission.

1