Introduction to CGIs | Still Plugging Away

Walk through the process of invoking a CGI from an HTML form. Topics include:

Processing when Submit button pressed
Data checking
Building form dataset
Passing request to server
Server set up to run CGI
Possible actions of CGI

Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.

Lesson 5: Introduction to CGIs

Click here for the video transcript

Hands on exercise

This exercise is primarily focused on using some entry data validation. We have supplied two files to help you do this: "validationRoutines.js" and "checkValsModel.txt".

First, get familiar with the three functions included in "validationRoutines.js":
1. The function "isValidName" is passed the value of a string that is supposed to hold a person's name
2. The function "isValidText" is passed the value of a general text string
3. Both of the above functions check that the tested field only contains allowed characters and return 'false' if they find dis-allowed characters
4. You might want to create variations of these functions for specific types of text strings you have in forms for your pages (you should probably keep a copy of the original versions)
5. The function "stringErrMsg" is passed a short description of the control in error and the string of allowed characters for that field and issues an 'alert' to the user
6. Make any changes you need and then save this file with a unique name and add a <script> element with src= this name to the page containing the form (Note: you may not need to change the script at all)
Next, learn how to use "checkValsModel.txt":
1. Copy and modify parts of this file into a <script> element in a page, building your own version of "checkVals()"
2. So, in your page, add a <script> start tag, followed by a </script> end tag
3. Then copy the first two lines from "checkValsModel.txt" into your page, right after the <script> start tag
4. There are two model test sections, one invokes "isValidName()" and the other invokes "isValidText()"; build your own checkVals() function for your page using these two model functions
5. For each personal name input field in the form, copy the "if" statement that checks on "isValidName":
  - change the two occurrences of "**id" to be the id of the field you are testing
  - if necessary, change the list of characters assigned to "allowed" in the first line (Note: if you do this, you will need to change the code in isValidName() in the validationRoutines.js script)
  - change the string "++field_being_tested" to have a short text identifying which field this is for
6. For each general text input field in the form, copy the "if" statement that checks on "isValidText":
  - change the two occurrences of "**id" to be the id of the field you are testing
  - if necessary, change the list of characters assigned to "allowed" in the first line (Note: if you do this, you will need to change the code in isValidText() in the validationRoutines.js script)
  - change the string "++field_being_tested" to have a short text identifying which field this is for
7. Copy the last two lines from checkValsModel.txt to just before your </script> end tag.
The rest of this lab will demonstrate using these files for the Suggestion Box page; we'll look at the Tripsite page later.

Open "SuggestionBox.shtml" and make the following changes:
1. After the title element, add a script element with src=validationRoutines.js
2. Then add another script element with the content inline, drawn from "checkValsModel.txt":
  - copy the first two lines (the function declaration and openning brace)
  - copy the test for 'isValidName' and
    - replace '**id' with 'name' (both occurrences)
    - replace '++field_being_tested' with 'the name field'
  - copy the test for 'isValidText' and
    - replace '**id' with 'suggestion' (both occurrences)
    - replace '++field_being_tested' with 'the suggestion field'
  - copy in the last two lines from "checkValsModel.txt" to the end of the script
3. Modify "suggest.shtml" by including onsubmit="return checkVals();" in the form element start tag
Save and upload "SuggestionBox.shtml" and "suggest.shtml"
Test that bad data does not get through when entered in the name or suggestion fields (the cgi won't work, of course)

Supplemental materials

A cumulative summary of the contents of this course so far: Click here
For a combined cumulative summary of both Web courses so far, Click here

Lesson 5: Introduction to CGI programming