Printed from TeacherJohn.com • http://teacherjohn.com/cabrillo/dm160c/exercises/ex05.php

Exercise 5: Form Processor CGI Script


Resources for this exercise:


In this exercise you will download, configure, install, and use a form processing Perl CGI script. A form processor takes input from a user and processes it in some way. In this case a user fills out a form on a Web page, clicks on a submit button, and then the script sends this information to an email address. (This script can also write this information to a file, but we won't go there for now.)

This package that you will download also provides you with a form template, a Web page that has some of the basic form tags, or "form widgets," so that you will not have to write this page from scratch (but I will give you a better page template to use). If you are not familiar with HTML form tags, you should first read this forms tutorial at
http://www.w3schools.com/html/html_forms.asp

1) Go to the BigNoseBird CGI Script Archive to download a free form processor. This site is at:
http://bignosebird.com/carchive/bnbform.shtml

2) On this page you will see two links that can be used to download the script:

You can use either one, but it's better to use the link that says: "Download it from Here!". If you try that link and your computer won't decompress the tar archive into a folder called "bnbform", then use the other link.

3) If all goes correctly, the zipped file will automatically expand into a folder called "bnbform" after the file downloads. If it doesn't, you may need to manually open the zipped file with your decompression software.

4) You will now have a folder called "bnbform" containing seven text files. Yes, you should read the "README.TXT" file, but if you don't want to read it all now you can follow these exercise instructions to get the script to work.

5) With a text editor, open the CGI script called "bnbform.cgi". Although it is not necessary to do so for the script to work, you need to make one simple, but important, change to this file.

Find the line that reads:
#@okaydomains=("http://mydomain.com", "http://www.mydomain.com");
and change it to:
@okaydomains=("http://webhawks.org", "http://www.webhawks.org");

Note: not only do you have to uncomment this line, but you also have to change the domain name, as indicated above.

This will stop anyone from running your script from another Web site.

6) Save these changes to "bnbform.cgi" — save this file as a text file, of course.

Note: technically, there are actually a few formats for text files: Macintosh OS 9, Unix/Mac OS X, and DOS/Windows. Mac OS 9 text files place a "carriage return" at the end of each line of text, by default. Unix/Mac OS X (usually simply called Unix) text files place a "line feed" at the end of a line, and DOS and Windows place both a "carriage return" and a "line feed" at the end of a line. Because the script will be installed on a Unix server, the script should be a Unix text file, or it may not run. When you save a CGI script, see if your text editor can save it as a Unix text file (for example, in BBEdit, choose "Save As …", then click the "Option…" button, then choose Unix line breaks).

See Text Editors for HTML and Script Editing to make sure your text editor is properly configured to edit scripts. Your text editor must save this CGI script as a Unix text file (a text file with Unix-style line endings) or the script will not work.

7) In the bnbform folder you will see a file called "bnbform.html". This is a Web page that contains some basic HTML form tags and is meant to be used as a template with the script. Unfortunately, this template page doesn't even validate to HTML 4.01 Transitional, let alone XHTML 1.0 Strict or HTML 5. So I modified this template to conform to HTML 5, and you can see my modified page, "johnsbnbform.html", here. View the source of my template and save it to your disk. Discard the template that came with the script (bnbform.html), and use my template (johnsbnbform.html) instead.

Note that the template is unstyled. You will need to use an external style sheet to make this page look the way you want it to look.

8) With a text editor, open the form template Web page, "johnsbnbform.html".

9) Now you need to modify the <form> tag to point to the place on the server where you will install the CGI script.

Find the line that reads:
<form method="post" action="/cgi-bin/bnbform.cgi">
and change it to reflect the path to the script. You will install the script into (where else?) your cgi-bin directory.

Change this line to read:
<form method="post" action="http://webhawks.org/~yourusername/cgi-bin/bnbform/bnbform.cgi">

Of course, you need to change the above path to use your account name (which will look something like "~dm62masmit1234"), in place of "~yourusername". Note that in this case you include the tilde (~) in front of yourusername.

The above URL assumes that you have a CGI script called "bnbform.cgi" inside of a folder called "bnbform" that is inside of a folder called "cgi-bin", and that this cgi-bin folder is in your "public_html" folder. Note that because you are using an absolute URL rather than a relative path here, you can put this Web page anywhere on the server and it should work.

10) Now you need to specify the email address to which the form's data will be sent.

Find the line that reads:
<input type="hidden" name="submit_to" value="yourname@domain.com">
and change the value to your email address:
<input type="hidden" name="submit_to" value="you@duh.com">

Of course, you need to change the value to use your email address, in place of "you@duh.com".

11) Now you need to specify the path to the "thanks.html" page. This is the page that the user will see after clicking on the Submit button.

Find the line that reads:
<input type="hidden" name="ok_url" value="http://domain.com/test/thanks.html">
and change it to reflect the path to this page.

Change this line to read:
<input type="hidden" name="ok_url" value="http://webhawks.org/~yourusername/thanks.html">

Of course, you need to change the above path to use your account name, in place of "yourusername". Note that in this case you include the tilde (~) in front of yourusername.

The above URL assumes that you have a Web page called "thanks.html" in your "public_html" folder. If you decide to put your "thanks.html" page anywhere else you will need to change this URL.

12) Now you need to specify the path to the "oops.html" page. This is the page that the user will see after clicking on the Submit button if they did not fill in the required fields.

Find the line that reads:
<input type="hidden" name="not_ok_url" value="http://domain.com/test/oops.html">
and change it to reflect the path to this page.

Change this line to read:
<input type="hidden" name="not_ok_url" value="http://webhawks.org/~yourusername/oops.html">

Of course, you need to change the above path to use your account name, in place of "yourusername". Note that in this case you include the tilde (~) in front of yourusername.

The above URL assumes that you have a Web page called "oops.html" in your "public_html" folder. If you decide to put your "oops.html" page anywhere else you will need to change this URL.

13) This page's <title> must indicate that this is your exercise 5 page, so it should say something like "John Sky's DM62 Exercise 5".

14) Add both a select drop-down menu, and a textarea field, to this form. You may use a tool such as the Accessify Quick Form Builder to make this task easier.

Important note that whenever you add another form field, you will need to modify the "data order" section of the page. For example, if you add a pulldown selection or textarea field named "duh", you will need to find the line in the Web page code that looks like this:
<input type="hidden" name="data_order" value="name,phone,submit_by,sex,how_found,grape,banana,apple">

and add the field name, like so:
<input type="hidden" name="data_order" value="name,phone,submit_by,sex,how_found,grape,banana,apple,duh">

15) This form template page contains the necessary "submit" button that the user clicks to send the information entered into this form to the server. But this template page also contains the optional "reset" button (in this template it is labeled "Clear Form") that the user clicks to wipe out all the information entered into this form, so the user can start fresh. Reset buttons can annoy users who, after entering data into a long form, accidentally click the reset button instead of the submit button, resulting in their having to fill out the whole form again. Some user interface experts caution against using reset buttons, and I agree with them. I have included the reset button in this template so you can see the code, but, if you wish to remove it, simply find the code that reads:
<input type="reset" value="Clear Form">
and delete it.

16) Style this page with an external stylesheet.

17) This page must display your name and say "Exercise 5".

18) This page must contain a relative link to your home page.

19) This page must contain the HTML 5 DocType that will enable you to use an HTML validator (as explained in How to Use the W3C HTML and CSS Validators).

20) This page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)

21) Save these changes to "johnsbnbform.html", but change the name of this file to be "exercise5.html", as this will become your exercise 5 Web page.

22) When you downloaded the script you also got an "oops.html" file (the page the user sees if the user tries to submit the form without entering data in all the required fields) and a "thanks.html" file (the page the user sees after successfully submitting the form). You will need to modify these pages so that they have validator links, and validate.

23) Now upload the following files into your public_html folder on the server:

24) If you have not already created a folder called "cgi-bin" in your public_html folder, do so now. Create a folder called "bnbform" inside your cgi-bin folder in your public_html folder.

25) Upload the following text file into this bnbform folder:

26) Now upload the CGI script, "bnbform.cgi", into this bnbform folder.

Note: CGI scripts must always be uploaded in "ASCII," or " text," mode. This means that when you upload the script, your FTP software to be in ASCII, or text, mode. Most FTP programs, such as Fetch and Fugu for Macintosh, and CoreFTP for Windows, will automatically do this for you, as they will see the ".cgi" extension on the file name and do the right thing.

27) Now you need to make the CGI script (the file "bnbform.cgi") executable. This means you need to change its file permissions to what Unix calls a permissions set of "755" (some FTP programs may show this as "0755"). Using the following instructions, change the permissions of the script, "bnbfprm.cgi". (Do not change the permissions of your exercise 5 Web page — in fact, do not change the permissions of any file other than "bnbform.cgi". And do not change the permissions of any folder.)

One more time: Do not change the permissions of any file other than "bnbform.cgi".

How to change file permissions using Fetch (Macintosh):

  1. While viewing the list of remote files in Fetch, control-click (or, if you have a 2-button mouse, right-click) on the file whose permissions you wish to change.
  2. From the pop-up menu that appears, choose "Get Info".
  3. You will now see an "Info" window, with nine checkboxes. (If you do not see the nine checkboxes, click on the tiny triangle to the left of "Ownership and Permissions".) Check the appropriate boxes. (To set the permissions for an executable CGI script, check the following 7 boxes: Read, Write, and Execute of Owner, Read and Execute of Group, and Read and Execute of Others. This is known as chmod 755.)
  4. Click "Apply".
  5. Close the Info window by clicking on the small red button in the upper-left corner of the window.

How to change file permissions using CoreFTP (Windows):

  1. While viewing the list of remote files in CoreFTP, right-click on the file whose permissions you wish to change.
  2. From the pop-up menu that appears, choose "Properties".
  3. You will now see a File Properties window, with nine checkboxes. Check the appropriate boxes. (To set the permissions for an executable CGI script, check the following 7 boxes: Read, Write, and Execute of Owner, Read and Execute of Group, and Read and Execute of Other. This is known as chmod 755.)
  4. Click "OK".

How to change file permissions using Cyberduck (Macintosh):

  1. While viewing the list of remote files in Cyberduck, control-click on the file whose permissions you wish to change.
  2. From the pop-up menu that appears, choose "Get Info".
  3. You will now see an "Info" window, with nine checkboxes. Check the appropriate boxes. (To set the permissions for an executable CGI script, check the following 7 boxes: Read, Write, and Execute of Owner, Read and Execute of Group, and Read and Execute of Everyone. This is known as chmod 755.)
  4. Close the Info window by clicking on the small red button in the upper-left corner of the window.

How to change file permissions using Fugu (Macintosh):

  1. While viewing the list of remote files in Fugu, control-click on the file whose permissions you wish to change.
  2. From the pop-up menu that appears, choose "Get Info".
  3. You will now see an "Info" window, with nine checkboxes. Check the appropriate boxes. (To set the permissions for an executable CGI script, check the following 7 boxes: Read, Write, and Execute of Owner, Read and Execute of Group, and Read and Execute of Everyone. This is known as chmod 755.)
  4. Click "Apply".
  5. Close the Info window by clicking on the small red button in the upper-left corner of the window.

28) View your page (the page on the server, not the page on your disk) in a Web browser.

Try the script! Does it work? Did you get the email? (Note that an email message generated by a script may look like spam to your spam filters; you may need to adjust your spam filter settings.) Did you see the thanks page after submitting the form? If you do not fill out the required fields, do you see the oops message?

If it is not working, take a deep breath, and start troubleshooting. Try reuploading the script. Try changing the script's permissions to 755 again. (Important: every time you reupload a CGI script, you may need to change its permissions again.) Check your paths.

Don't stress if you can't get your CGI script to work right off the bat. It depends on every detail being correct. We'll do quite a bit of CGI troubleshooting in class. And please use the help forum!

29) Make sure the HTML on this page validates (using the HTML 5 DocType) with no errors, according to the W3C's online HTML Validator. You can easily do this by clicking on your HTML validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

30) Make sure the CSS on this page validates, with no errors, according to the W3C's online CSS Validator. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.

31) If there are any errors, fix them, re-upload the page, and validate it again.

32) You may wish to customize the exercise 5 page after you get everything working.

33) Make sure your home page has a working link to all your completed exercises, including this exercise, and that the HTML and CSS on your home page validates, and that the menu on your home page is coded as an HTML list.

Note: The field named "submit_by" is used by the script to imndicate the email address that will receive the confirmation email message. If you delete or rename this field, no email message will be sent to the one who submits the form.

34) Submit the feedback form. To receive full credit for this exercise you must submit this feedback form before it expires. This exercise is due on 3/3/14. Allowing for a one-day grace period, the form will expire at the end of the day following the due date, which means the form for this exercise will expire at 12:00 AM on 03/05/14.