Assignment #3 - Forms and CGI
COMP 2513 Introduction to E-Commerce Technology
Description
For this assignment, you will create a "madlib" game. This
game will consist of a web page that provides a series of text fields that
allow the player to input different kinds of words (nouns, adjectives,
verbs, names, places, etc.). After these text fields are all filled in, the
user will then click a "submit" button and a second web page will appear
containing a story that uses the words that the player provided.
Your challenge is to utilize HTML Forms and the CGI standard to dynamically
create the story using the entered words.
To see some examples of madlibs go to MIT's
StoryFun Site
Procedure
-
View the sample
madlib page.
-
Look through the html source and ensure that you understand its elements (it contains some
useful comments). Save this file as madlib.htm
to your store folder on Eagle (Note: Alternatively,
you can
work with your html and cgi files on you laptop and then copy them to Eagle;
this provides a backup of your work).
-
View the .cgi file
that goes with the sample page (Note: the Perl code is surrounded by HTML for
browser viewing).
-
Create a folder in your store directory called: cgi-bin\
and save the cgi Perl code as cgi-bin\madlib.cgi.
-
Use an editor like WordPad to review and edit the madlib.cgi file. Ensure you understand
how the html and cgi code work together. All of the lines that start with
a # sign are comments (with the exception of the first line). Remove the
html surrounding the Perl code in the madlib.cgi file and save it.
-
Test the madlib.cgi file to make sure that it works with the madlib.htm file.
To check point your web browser to: http://eagle.acadiau.ca/storeXX/madlib.htm
(where XX is the number of your store)>
-
After you have gotten the basic madlib working ...
make up you own madlib story and select the nouns, verbs, adjective, etc you
wish to act as variables for the story.
-
Modify the html and the cgi files to fit your story
and the interesting words you have selected to be variables. Make
sure the names of the cgi variables match the names of the input fields in your
html page.
-
The <form> tag in your webpage should have its action set to: "http://eagle.acadiau.ca/storexxxxx/cgi-bin/madlib.cgi"
-
Test your new madlib page again, and if it works, congratulations! You just made a
dynamic FORMS/CGI web application!!!
-
Feel free to go back and customize the assignment through use of your technical
knowledge.
You'll get the very best mark by demonstrating your use of technology
beyond the sample madlib.
-
If you run into any problems that you can't solve, contact your TA
for assistance. If this fails to resolve your problem send me an email.
Bonus
For a 10% bonus on the assignment, have your
madlib game verify that the player has filled in all of the fields.
Submitting the assignment:
When completed, notify your TA
that you have completed the assignment indicating the following:
- Your Team Number
- Your name and student number
- A .zip file containing your .htm and .cgi files
- The URL where the html can be found
Marking Scheme
The marking scheme is as follows. All TAs will review each Madlib to
ensure an individual effort and to ensure the fairness of the mark across the
class.
0 - Does not work
1 - Works with some major technical problems
2 - Works with minor technical problems
3 - Works but is sloppy in terms of spelling and grammar
4 - Works as well as the sample madlib
5 - Shows technical ability and/or effort beyond the sample
madlib
1 extra point if the bonus part is completed.
Maximum mark is 5+1=6.
Summary of Related Links
Sample Page
http://eagle.acadiau.ca/demo/madlib.htm
Sample CGI
http://eagle.acadiau.ca/demo/madlib.cgi.txt
MIT's StoryFun Site
http://stuff.mit.edu/storyfun
CGI sources on the Web:
http://hoohoo.ncsa.uiuc.edu/cgi/
http://www.cgidir.com/
http://cgi.resourceindex.com/