Assignment 5

First CGI (Common Gateway Interface) Program

Due: Wednesday, March 31st


Note: Setting permissions on I5 with Fetch (as described below) will probably not work. You will have to SSH to I5 and change the cgi scripts permissions using "CHMOD 755 myscript.cgi"
This assignment is intended to help you understand the basic aspects of setting up and running a CGI program. There are two parts to this assignment:

Part 1 - Set up your i5 account for CGI scripts

Part 2 - Modify the CGI script and HTML web page

This assignment assumes that you do not have UNIX and programming experience. By following the directions below, you will be shown how to create the proper folders on i5 and how to modify html and the CGI scripts for your own purposes.

Please follow the directions carefully. Everything you need to do is described on the following pages.

A final note, the directions provided below should only be used for i5. Other NYU computers may not let students run CGI programs since they pose a security risk. For example, you will be unable to use this code for your NYU Home Account.

Summary

The html and CGI scripts (e.g., assign5.html and assign5.cgi) will be used to create an electronic address book. The html uses the FORM, INPUT and TABLE tags to create the web page seen below. Look at Appendix A to see the html that creates this web page.

 

As described in class, the FORM tag will be used to invoke a CGI script. The CGI script will process the input and return a web page that looks like the following. There are two links on this page. The first link will be used to access an output file. The values that the user enters into the text boxes will be written into the output file. The second link will be used to return to the initial web page. Finally, the name "Michael", found in the title, was a value that the user entered into the first name text box of the form. To see the code for the CGI script, see Appendix B.

 

Part 1

Purpose:

The goal of part one is to set up your i5 account so that we can run CGI programs. You will create the required "cgi-bin" folder on i5 and use fetch to load two files, assign5.html and assign5.cgi to the proper i5 folders.

Please, do not modify these files. You will do this in the second part of the assignment. Do not expect the CGI program to work when you are done with Part1. You will still need to modify the two files for them to work!

Directions:

Step 1) Open Fetch and sign on to your i5 account. Enter i5 for the Host and public_html for the Directory. Then use your own User ID and Password.

Step 2) Use fetch to send the file assign5.html to your public_html folder. The assign5.html file is found in the following folder:

 

Step 3) After you have put the file to your "public_html" folder on i5, click on the entry for assign5.html from the list box.

Step 4) Click on "Remote" from the title bar. Then select "Set Permissions ...". Make sure the following check boxes are selected. Then click the "OK" command button.

Step 5) Click on "Directories" from the title bar. Then select "Create New Directory ..." from the list.

Step 6) Enter the word "cgi-bin" into the text box and click "OK".

Step 7) Select the "cgi-bin" entry in the list box.

 

Step 8) Click on "Remote" from the title bar. Then select "Set Permissions ...". Make sure that the following boxes are checked. If they are not selected, then you must select the check boxes. Cick "OK" when you are done.

Step 9) Click on "Directories" from the title bar. Then select "Change Directory .." from the list.

Step 10) Enter the word "cgi-bin" into the text box and click "OK". Now you are working out of the "cgi-bin" folder. (In the following steps we will put the assign5.cgi file in this folder.)

Step 11) Use fetch to send the file assign5.cgi to your "cgi-bin" folder. The assign5.cgi file is found in the following folder:

 

Step 12) Click on the entry for assign5.cgi from the list box.

Step 13) Click on "Remote" from the title bar. Then select "Set Permissions ...". Make sure the following check boxes are selected. If they are not selected, then you must select the check boxes. Cick "OK" when you are done.

Congratulation! You are done with the first part of the assignment.

Part 2

Purpose:

Welcome to part two! In Part 2, you will rewrite parts of the html and CGI program. The changes you are going to make are very superficial. You are only expected to find the lines of code that need changes and alter them slightly.

 

* Before you start, look at the Appendix C for a quick lesson on fetch! This will teach you a little bit about navigating between the "public_html" and the "cgi-bin" folder. Remember, the "public_html" folder should contain the assign5.html file. The "cgi-bin" folder should contain the assign5.cgi file. If you have this wrong, then the assignment will not work!

 

Step 1) Use fetch to get the assign5.html. See Appendix C if you are having difficulties doing this.

 

Step 2) Edit the assign5.html file in SimpleText. Within the file you will find the directions on how to modify this file. They are listed underneath the titles: MODIFICATION 1 and MODIFICATION 2.

 

Step 3) Use fetch to send assign5.html back to the "public_html" folder.

 

Step 4) Use fetch to get the assign5.cgi file. This will be located in the "cgi-bin" folder.

 

Step 5) Edit the assign5.cgi file in SimpleText. Within the file you will find the directions on how to modify the file. They are listed underneath the titles: MODIFICATION 3, MODIFICATION 4, and MODIFICATION 5.

 

Step 6) Use fetch to send assign5.cgi back to the "cgi-bin" folder.

 

Step 7) Now you must test out the electronic address book. Access the URL http://i5.nyu.edu/~your_user_name/assign5.html. Enter data into the text boxes and click on the "submit" push button. Make sure the CGI program works correctly. Try clicking on the link to the output file to make sure the information is being saved to the file correctly. If you have any problems, refer to Appendix D.

 

 

Appendix A

 

<HTML>

<HEAD>

<TITLE>Address Book</TITLE>

<H1><CENTER>My Address Book</CENTER></H1>

 

</HEAD>

<BODY>

 

<h2>Please enter your information into my electronic address book.</h2>

 

 

<!-- MODIFICATION 1

The following line is the FORM tag. The ACTION attribute specifies the

location of the cgi script. Since NYU has a special procedure for

calling CGI scripts, the path to the cgi script is a little funny.

 

You will need to change the ACTION attribute to call your own cgi script.

So, change the - mn208 - to your username.

-->

 

<FORM METHOD="GET" ACTION="http://i5.nyu.edu/cgi-bin/cgiwrap/~mn208/assign5.cgi">

 

<TABLE BORDER="0">

 

<!-- MODIFICATION 2

You must modify all the INPUT tags where the TYPE is "text".

Modifications must be make in the following way: change the

value given to the NAME attribute for each of the INPUT tags.

For example, I used "fname" and "lname" for the NAME attributes in the

first row of the table. You will need to change all the values given

to the NAME attribute into something different.

 

For example, you may want to substitute "fname"

with "FisrtName" , "address" with "StreetAddress" and so on. Make sure

you do not use any spaces or garbage characters (!@#$%^&*(){}[]'"/\|<>,.=+`~;:).

 

Remember the changes. Later on in the assignment, you will have to

modify the CGI script (i.e., assign5.cgi) to reflect these changes.

-->

 

<!-- Row 1 -->

<TD ALIGN=RIGHT>Name (First / Last)</TD>

<TD ALIGN=LEFT>

<INPUT TYPE="text" NAME="fname" size=15>

<INPUT TYPE="text" NAME="lname" size=15>

</TD>

</TR>

 

<!-- Row 2 -->

<TD ALIGN=RIGHT>Address</TD>

<TD ALIGN=LEFT>

<INPUT TYPE="text" NAME="address" size=32>

</TD>

</TR>

 

<!-- Row 3 -->

<TR>

<TD ALIGN=RIGHT>City State ZIP</TD>

<TD ALIGN=LEFT>

<INPUT TYPE="text" NAME="city" size=20>

<INPUT TYPE="text" NAME="state" size=3>

<INPUT TYPE="text" NAME="zip" size=5>

</TD)

</TR>

 

<!-- Row 4 -->

<TR>

<TD ALIGN=RIGHT>Phone</TD>

<TD ALIGN=LEFT>

<INPUT TYPE="text" NAME="phone" size=32>

</TD>

</TR>

 

<!-- Row 5 -->

<TR>

<TD ALIGN=RIGHT>Email</TD>

<TD ALIGN=LEFT>

<INPUT TYPE="text" NAME="email1" size=32>

</TD>

</TR>

 

 

<! -- Row 6 -->

<TR>

<TD></TD>

<TD>

<!-- These are command buttons, you do not need to

modify their values. -->

<INPUT NAME="submit" TYPE="submit" VALUE="submit">

<INPUT NAME="cancel" TYPE="reset" VALUE="reset ">

</TD>

</TR>

 

</TABLE>

</FORM>

 

</BODY>

</HTML>

Appendix B

#!/usr/bin/perl

#The above line is required and should remain unchanged. It is a

#special command that tells the operating system the location of Perl.

 

######################### Section 1 ##############################

######### Read in the environment variable. This script is only

######### written to use the Get method.

##################################################################

 

#The following line reads in the QUERY_STRING environment variable

$query_string = $ENV{ 'QUERY_STRING' };

 

#The following is an example of a query string:

# >> fname=Mike&lname=Notch&address=1+Poppy+Place&submit=submit

# fname, lname, address and submit are the values assigned

# to the NAME attribute of the INPUT tag (see assign5.html).

# Mike, Notch, 1+Poppy+Place and submit are the values that the user

# entered into the web page. Note that the all spaces are substituted

# with + signs. For example, the user entered "1 Poppy Pl", then the

# string received by the cgi script is 1+Poppy+Pl

 

 

######################### Section 2 ##############################

######### Parse the input string (stored in the query_string

######### variable).

##################################################################

 

 

# Place the input string into an array.

@pairs=split(/&/,$query_string);

 

#"pairs" is the name of the array. The following values will be placed in

#the array:

# First element: fname=Mike

# Second element: lname=Notch

# Third element: address=1+Poppy+Place

# Forth element: sumbit=submit

 

#The foreach loop will take that array and make an associative array.

# The result will be the following:

# $FORM{"fname"} = Mike

# $FORM{"lname"} = Notch

# $FORM{"address"} = 1 Poppy Place

# $FORM{"submit"} = submit

 

foreach $pair (@pairs) {

 

#Splits the elements in the pair array.

#On the first iteration of the loop: $name="fname" and $value="Mike"

#On the second iteration of the array: $name="lname" and $value="Notch", etc

($name,$value)=split(/=/,$pair);

 

# Replace any + signs with a space. This is mainly for "1+Poppy+Place".

$value =~ tr/+/ /;

$value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;

 

# Stop people from using subshells to execute commands.

# This is a security measure that prevents the web user from

# executing operating system commands.

$value =~ s/~!/ ~!/g;

 

#This line actually creates the associative array. On the first

#iteration of the loop $FORM{"fname"} = "Mike". The other values

#will be added on subsequent iterations of the loop.

$FORM{$name} = $value;

 

}

 

######################### Section 3 ##############################

######### Print the output and save information to a

######### file.

##################################################################

 

 

 

#MODIFICATION 3

#The address information that the user has provided will be written

#to a file. Currently, I have used the name cpp_assignment.txt to be

#the name of this file. You need to use a different name for the file.

#Where you see cpp_assignment.txt, change it to a different name.

#Hint: You only need to modify two lines - where you see cpp_assignment.txt

 

#MODIFICATION 3 Note

#When you modify the "open" command (found below), make sure you

#keep the ">>". This is a special symbol that means you want to

#append to an exist file, not overwrite. So the new line

#would look like - open(OUTFILE,">>newfile.txt");

 

 

#Opens the output file for appending. The data that the user entered

#will be placed in this file.

open(OUTFILE,">>cpp_assignment.txt");

 

#The following command sets the permission for the datafile.

chmod(0644, "cpp_assignment.txt");

 

#The following lines print out the information placed in the

#associative array. The "\t" means that a tab should be placed after

#the value. Make a special note of the "\n" on the last line.

#This means end-of-line. Make sure you put it after the last

#print statement.

 

#MODIFICATION 4

#During MODIFICATION 2 you modified the NAME attribute of the INPUT tag. In my

#example, I used fname, lname etc. You must change the values below

#to reflect the changes you made. So, if your INPUT tag

#looks like <INPUT TYPE="text" NAME="klingon_fname">, then you

#need to rewrite one of the following lines to use the

#value "klingon_fname", etc.

 

print OUTFILE $FORM{fname} . "\t";

print OUTFILE $FORM{lname} . "\t";

print OUTFILE $FORM{address} . "\t";

print OUTFILE $FORM{city} . "\t";

print OUTFILE $FORM{state} . "\t";

print OUTFILE $FORM{zip} . "\t";

print OUTFILE $FORM{email1} . "\n";

 

#This line closes the output file

close(OUTFILE);

 

######################### Section 4 ##############################

######### Print the output and save information to a

######### file.

##################################################################

 

#The first print line is necessary. It denotes that the output is html text.

#Without this line, the web browser would not realize that the statements

#should be interpreted as html.

 

print("Content-Type: text/html\n\n\n");

 

# MODIFICATION 5

#We need to customize the output given to the user. You will need to

#modify three lines that are provided below.

# 1) Rewrite the line that prints "Thank you ...". Change this line

# so that it uses one of names you used for your INPUT fields.

# 2) Rewrite the first line that has the HREF tag. The HREF tag should

# reference the output file that you used above, not cpp_assignment.txt.

# 3) Rewrite the next line that has the HREF tag. This line should provide a

# link to your assign5.html.

#

#Hint: Be very careful how you modify the print statements. Try to stick to my format.

 

#This line prints out a thank you message. It uses the INPUT tag that

#was assigned fname for the NAME attribute. You must change fname into

#a NAME that you are using for your INPUT tags.

print("<H1 ALIGN=CENTER>Thank You, " . $FORM{fname} . "!</H1>\n");

 

#This line references the file where the CGI script writes the output.

#Make sure that cpp_assignment.txt is changed to the file name that

#you have decided to use. Also, make sure that mn208 is changed to your

#user id for i5.

print("<h3><A HREF=\"http://i5.nyu.edu/~mn208/cgi-bin/cpp_assignment.txt\">Look at the address book (you will need to reload!).</h3>\n");

 

print("<br><br>\n");

 

#This line should be a link back to your assign5.html, not mine. So

#change the user name.

print("<h3><A HREF=\"http://i5.nyu.edu/~mn208/assign5.html\">Go Back</h3>\n");

 

exit;

Appendix C

 

Here is a quick fetch lesson that you should understand before you begin. After you have finished Part 1, you will have created a folder called "cgi-bin". This folder is located within the "public_html" folder!

 

Remember, when you do fetch, the file will go into the folder that appears at the top of the fetch window (in the rectangular box). In the pict>


Transfer interrupted!

the current folder. When you click on "Put File ...", the file will go into this folder.

So, here is the problem: CGI files must go in the "cgi-bin" folder. In the current example, if you try to use "Put File ..." on assign5.cgi, the file will be placed in the "public_html" folder. In this case, make sure you navigate to the "cgi-bin" directory. The instructions for doing this will be found in steps 7 and 8 for Part 1 of this assignment.

 

Now the flip side to this is navigating from the "cgi-bin" folder to the "public_html" folder. To do this, click (and hold) the triangle next to the "cgi-bin" label (see rectangular box below).

Then select the entry that says "public_html". Now, if you transfer a file using fetch, it will go to the "public_html" directory.

 

 

Appendix D

Error Messages:

You may encounter the following error messages. I have provided a sort description and probable cause of the error message.

404 Not Found

The requested URL /cgi-bin/cgiwrap was not found on this server. HTTP/1.0 500 Server Error Date:

Mon, 07 Apr 1997 20:35:15 GMT Server: NCSA/1.5.2 Content-type: text/html

Description:

Your html is not calling the correct CGI program.

Action:

Double check your FORM tag in assign5.html. The ACTION method may be wrong. For me to call my CGI script, I used -

<FORM METHOD="GET" ACTION="http://i5.nyu.edu/cgi-bin/cgiwrap/~mn208/assign5.cgi">

Your ACTION should look the same, except you username will appear instead of mn208. (Don't forget to use the "~")

 

404 Not Found

The requested URL /cgi-bin/~mn208/assign5.cgi was not found on this server.

Description:

The assign5.cgi can not be found.

Action:

Make sure the assign5.cgi is in the "cgi-bin" folder and it has the correct name.

 

The contents of the file assign5.cgi appears in your browser!

Description:

You are not calling the cgiwrapper program.

Action:

You changed too much in the FORM tag that I gave you. cgiwrapper must be a part of the path. For example, if your ACTION attribute look s like this:

<FORM METHOD="GET" ACTION="http://i5.nyu.edu/~mn208/assign5.cgi">

Then, you would get this error.

 

 

500 Server Error

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

Please contact the server administrator, webmaster@nyu.edu and inform them of the time the error

occurred , and anything you might have done that may have caused the error.

Description:

Don't email your webmaster!!!!! This is a problem with your CGI script. It means that there is a bug in your CGI program.

Action:

Examine the changes you made in assign5.cgi and find your mistake. Compare your code with the code that I gave you. One of the lines you changed is causing an error.

 

Error: HTTPd: malformed header from script /usr/local/etc/httpd/cgi-bin/cgiwrap

Description:

One of your print statements are not working correctly.

Action:

Examine the print statements in assign5.cgi. Compare your code with the code that I gave you.

 

CGIwrap Error: Script is not executable. Issue chmod 755 /home/m/mn208/public_html/cgi-bin/assign5.cgi

Description:

This means that the "Set Permissions..." step was done incorrectly for assign5.cgi.

Action:

Make sure the check boxes for "Search/Execute" are checked.

 

403 Forbidden

Your client does not have permission to get URL /~mn208/assign5.html from this server.

Description:

This means that the "Set Permissions ..." step was done incorrectly for assign5.html.

Action:

Make sure the check boxes for "Read" are checked.

 

CGIwrap Error: Script file not found!

Error: Permission denied (13)

Description:

Another "Set Permissions..." error.

Action:

This time, make sure the check boxes are selected for the cgi-bin folder.

 

CGIwrap Error: Script File Not Found!

Description:

The assign5.cgi program was not found.

Action:

Make sure the file was "fetch'ed" to the "cgi-bin" folder. If you see the assign5.cgi in the "public_html" folder, then it is in the wrong location!