Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Assignment #1 Preparation
Transcript
INT322
Assign1 Prep: Server-side Programming Using Perl
Note: This lab must be completed by midnight Friday June 3, 2005
Worth 1% of final INT322 grade
Purpose:
This lab will provide a step-by-step solution to create a single CGI program using Perl.
This program will display a form, accept and parse form element values in order to
display different responses based on the data submitted. This lab is considered essential
to help you successfully complete your Assignment #1.
Step 1: Write a Perl script to generate a simple form using xHTML.
Login to your Zenit account, and create/edit a file called prep.cgi in your public_html
directory. Enter the following contents into this file (remember to use your Zenit ID for
the form’s action!). Also notice that single quotes ‘ ’ are used to quote the print
statement’s multi-line argument.
#!/usr/bin/perl -w
# Generate a form using xHTML
print 'Content-type:text/html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Assignment #1 Preparation</title>
</head>
<body>
<form method="get"
action="http://zenit.senecac.on.ca/~yourzenitid/prep.cgi">
<p>Name <input name="fullname" size="40" maxlength="40" /></p>
<p>Type of Animal:</p>
<p>
<select name="animal" size="4">
<option selected="selected">Please make a selection</option>
<option>Dog</option>
<option>Cat</option>
<option>Bird</option>
</select>
</p>
<p><input type="submit" value="SEND" /></p>
</form>
</body>
</html>
';
Page 1 of 5 pages
INT322
Assign1 Prep: Server-side Programming Using Perl
Note: This lab must be completed by midnight Friday June 3, 2005
Worth 1% of final INT322 grade
Step 2: Test and Validate your xHTML document.
Open a web browser and enter the URL to run your CGI program to see if it works.
eg. http://zenit.senecac.on.ca/~yourzenitid/prep.cgi
If you get an Internal Server Error (code 500), then you must fix your error and reload
the web page. If you have difficulty troubleshooting the problem, simply return to your
shell or telnet window and run your Perl script to see output and/or errors and warnings.
For example, at the shell prompt enter the command:
./prep.cgi | more
When you get your CGI program working, copy your URL in the web browser, and
validate your xHTML document at validator.w3.org. Once it validates, add the code to
produce a linked image for validation somewhere in your code (eg. at the bottom before
the </body> tag). Reload the web page and click on the linked icon to check/validate
again!
Step 3: Add a Parsing Routine to your CGI program.
Although you may not fully understand how this routine works to parse received data,
copy and paste this code somewhere near the top of your CGI program (eg. below the
she-bang line (#! etc… ) and above the print statement). This code will also be included
with your Assignment #1 specifications:
#================= May 27,2005 ======================================
#
# Read xhtml form variables submitted via the 'get' method.
# This code supplied by the INT322 instructors.
# Loop through all of the QUERY_STRING name/value pairs
foreach ( split( "\&" , $ENV{QUERY_STRING} ) ) {
# Split each pair into name and value
(my $name, my $value) = split("=");
#
#
Replace each + with a space and decode
hex values into ASCII (e.g. '%40' to '@' etc..)
$value =~ tr/+/ / ;
$value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C",hex($1))/eg ;
# Place the decoded value into %form_element
$form_element{$name}=$value;
}
# To access form variables use $form_element{name}
#====================================================================
Page 2 of 5 pages
INT322
Assign1 Prep: Server-side Programming Using Perl
Note: This lab must be completed by midnight Friday June 3, 2005
Worth 1% of final INT322 grade
NOTE: If the “parsing routine” does not work correctly, please visually check your code
on this handout with code on your terminal. Copying and pasting text does not always
work correctly. For example, if you paste in the MS command prompt window using
<ALT><SPACE> -> edit -> paste, it may not display quotes (eg. “ …..” ).
If in doubt, you can always manually type this code in by hand!
Step 4: Use Logic and the “hash array” to generate new web page content
Here is where the fun begins…
>;)
As stated in the bottom comment line for the parsing routine:
# To access form variables use $form_element{name}
Eg. fullname value is represented as:
animal value is represented as:
$form_element{fullname}
$form_element{animal}
We can use logic and now access value of form elements to create a full CGI
programming solution. We will now modify your CGI program to do the following:
For the first time, just display the form (eg. name and animal field values are
null). This is a trick, since for the first time, there is no data sent: therefore, both
$form_element{name} and $form_element{animal} are null. It is important to
note that you cannot simply use a “flag” since the program will always be run
from the start each time that the user submits the form! (Think about that…)
If name is null and/or animal is not selected and form is submited, then just
re-display the form (eg. user did not make a proper selection).
If name is not null and animal is selected, create a web page with information
for just that animal. To save time, we will just ask you to generate plain text
instead of constructing another xHTML web page.
You will be asked to modify your original program with code provided on the next
page.
Page 3 of 5 pages
INT322
Assign1 Prep: Server-side Programming Using Perl
Note: This lab must be completed by midnight Friday June 3, 2005
Worth 1% of final INT322 grade
For you CGI program, keep the she-bang line and parsing routine as-is, but replace
your remaining code with the following:
# Generate a form and proper response based on submitted data
# test first time, or form not completed
if ( $form_element{fullname} eq "" || $form_element{animal} eq "" ||
$form_element{animal} eq "Please select an option" ) {
$display = 'Content-type:text/html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Putting It All Together</title>
</head>
<body>
<form method="get"
action="http://zenit.senecac.on.ca/~yourzenitid/prep.cgi">
<p>Name <input name="fullname" size="40" maxlength="40" /></p>
<p>Type of Animal:</p>
<p><select name="animal" size="4">
<option selected="selected">Please select an option</option>
<option>Dog</option><option>Cat</option><option>Bird</option>
</select></p>
<p><input type="submit" value="SEND" /></p>
</form>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0!" height="31" width="88" /></a>
</p>
</body>
</html>
';
}
elsif ( $form_element{animal} eq "Dog" ){ # if Dog is selected
$display = "Content-type:text/plain
# xHTML document containing dog links";
}
elsif ( $form_element{animal} eq "Cat" ) { # if Cat is selected
$display = "Content-type:text/plain
# xHTML document containing cat links";
}
else {
$display = "Content-type:text/plain
# if Bird is selected
# xHTML document containing bird links";
}
print $display;
Page 4 of 5 pages
INT322
Assign1 Prep: Server-side Programming Using Perl
Note: This lab must be completed by midnight Friday June 3, 2005
Worth 1% of final INT322 grade
Note: When using logic in Perl, use code blocks for if / elsif / else statements even for
just one command: otherwise, you may get errors. Also, note that in Perl, the syntax
is “elsif” not “elseif”!
Step 5: Test your CGI program
You should now run your CGI program and see a form displayed. If the fullname field is
null or the select menu value is “Please select an option” then the form will be
displayed again. On the other hand, if the user enters at least one character for name, and
selects Dog, Cat, or Bird, different content (in the form of plain text) will appear on the
web page.
Of course, you can substitute plain text with xHTML code for each response for Dogs,
Cats or Birds. You should notice that we can spend lot of time just generating xHTML
for programming in CGI! Suggestion: start all of your assignments as early as
possible! We are now on page 5 of this tutorial and we have only done a very simple
CGI programming example!
Step 6: Bonus Challenge
In assignment #1, you will be doing something similar to this tutorial except you will
only be making changes to the same web page containing the form!
For example, if a name is entered and the animal “Dog” is selected, then CGI program
will generate the “Dog” information within the same web page as the form.
How will you do this? I will leave that up to you for a bonus mark.
If you can modify your CGI program to generate different content within the same web
page that contains the form, you will receive an extra 0.5 % (i.e. you get 1.5% out of 1%).
Submission Instructions
You must email your instructor ([email protected] - with subject line
“INT322 – assn1 practice”) and include your CGI program prep.cgi that you
created from performing this tutorial as an attachment.
DUE DATE: Friday June 3, 2005 by midnight.
GOOD LUCK!
Page 5 of 5 pages
