CGI program examples

This lecture notes is based on Prof Doreen De Leon's lectures.

Example 1

webpage

Form for PIC 40

Enter your name:
Sex: Female
Male
Address:
State
CityStateZip Code

What PIC classes are you taking?

Any comments?

html file

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title> Form for PIC 40 </title>
</head> 
<body>
   <h1> Form for PIC 40 </h1>
   
   <form method="get" action="parseform.cgi">
      <table>

      <tr>
      <td>Enter your name:</td>
      <td><input type="text" name="name" size="20" /></td>
      </tr>
      <tr>
      <td>Sex:</td>
      <td><input type="radio" name="sex" value="female" />Female</td>

      </tr>
      <tr>
      <td></td>
      <td><input type="radio" name="sex" value="male" />Male</td>
      </tr>
      <tr>
      <td>Address:</td>
      </tr>

      <tr>
      <td><input type="text" name="street" size="30" /></td>
      <td colspan="2"></td>
      </tr>
      <tr><td>State</td></tr>
      <tr>
      <td><input type="text" name="city" size="15" /></td>
      <td><input type="text" name="state" size="2" /></td>

      <td><input type="text" name="zipcode" size="5" /></td>
      </tr>
      <tr><td>City</td><td>State</td><td>Zip Code</td></tr>
      </table>
      <p>What PIC classes are you taking?</p>
      <p>
      <select name="classes" multiple='multiple'> 
         <option>PIC 10A</option>

         <option>PIC 10B</option>
         <option>PIC 20</option>
         <option>PIC 40A</option>
      </select>
      </p>
      <p>Any comments?</p>
      <p><textarea name="comments" rows="6" cols="60">

      </textarea></p>
      <p>
      <input type="submit" />
      </p>
   </form>
</body>
</html>

CGI program

#!/usr/local/bin/perl -wT

if ($ENV{'REQUEST_METHOD'} eq 'GET') {
   @pairs = split(/&/, $ENV{'QUERY_STRING'});
} 
elsif ($ENV{'REQUEST_METHOD'} eq 'POST') {
   read (STDIN, $querystring, $ENV{'CONTENT_LENGTH'});
   @pairs = split(/&/, $querystring);
} 
else {
   print "Content-type: text/html\n\n";
   print "<p>Use Post or Get</p>";
}

foreach $pair (@pairs) {
   ($name, $value) = split (/=/, $pair);
   $name =~ tr/+/ /;
   $name =~ s/%([a-fA-F0-9]{2})/chr(hex($1))/eg;
   $value =~ tr/+/ /;
   $value =~ s/%([a-fA-F0-9]{2})/chr(hex($1))/eg;
    
   if ($formdata{$name}) {
      $formdata{$name} .= ", $value";
   } 
   else {
      $formdata{$name} = $value;
   }
}

print "Content-type: text/html\n\n";
print qq(<?xml version="1.0" encoding="UTF-8"?>
         <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\n);
print qq(<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\n);
print qq(<head>\n<title>Parsing Checker</title></head>\n<body>);

foreach $name (sort keys(%formdata)) {
   print qq(<p>The field named <b>$name</b> contained 
          <b>$formdata{$name}</b></p>);
}

print "</body>\n</html>\n";

Sample output

The field named city contained Los Angeles

The field named classes contained PIC 20, PIC 40A

The field named comments contained The classes are great!

The field named name contained Charles Li

The field named sex contained male

The field named state contained CA

The field named street contained UCLA Math Department

The field named zipcode contained 90024

html file of the sample output

<?xml version="1.0" encoding="UTF-8"?>
          <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Parsing Checker</title></head>
<body><p>The field named <b>city</b> contained 
          <b>Los Angeles</b></p><p>The field named <b>classes</b> contained 
          <b>PIC 20, PIC 40A</b></p><p>The field named <b>comments</b> contained 
          <b>The classes are great!      </b></p><p>The field named <b>name</b> contained 
          <b>Charles Li</b></p><p>The field named <b>sex</b> contained 
          <b>male</b></p><p>The field named <b>state</b> contained 
          <b>CA</b></p><p>The field named <b>street</b> contained 
          <b>UCLA Math Department</b></p><p>The field named <b>zipcode</b> contained 
          <b>90024</b></p></body>

</html>

Example 2

Webpage

Welcome to Burger Hut

Price List
Hamburger $3.49
French Fries $1.99
Soda $1.19
Number of Burgers
Number of Fries
Number of Sodas
Do you have a coupon? Yes No

html file

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title> Burger Hut </title>
</head>
<body>
   <h1 style="text-align: center">Welcome to Burger Hut</h1>
   <table border="border" cellspacing="0" cellpadding="5" 
       style="background-color: #ffaaff">
      <caption>Price List</caption>

      <tr>
         <td>Hamburger</td>
         <td>$3.49</td>
      </tr>
      <tr>
         <td>French Fries</td>
         <td>$1.99</td>

      </tr>
      <tr>
         <td>Soda</td>
         <td>$1.19</td>
      </tr>
   </table>   
   <form action="burgerhut.cgi" method="post">
      <table cellspacing="0" cellpadding="2">

      <tr align="left">
        <td>Number of Burgers</td>
        <td><input type="text" name="burgers" size="3" maxlength="3" /></td>
      </tr>
      <tr align="left">
        <td>Number of Fries</td>
        <td><input type="text" name="fries" size="3" maxlength="3" /></td>
      </tr>

      <tr align="left">
        <td>Number of Sodas</td>
        <td><input type="text" name="sodas" size="3" maxlength="3" /></td>
      </tr>
      <tr align="left">
        <td>Do you have a coupon?</td>
        <td><input type="radio" name="coupon" value="yes" /> Yes</td>

        <td><input type="radio" name="coupon" value="no" /> No</td>
      </tr>
      </table>
      <p>
      <input type="submit" value="submit order" />
      </p>
   </form>
</body>

</html>

CGI

#!/usr/local/bin/perl -wT
# burgerhut.cgi

# Used to process form burgerhut.html
use CGI qw(:standard);

@names = param();
foreach $name (@names) {
   @item = param($name);
   if ($#item > 0) {
      $formdata{$name} = join(', ', @item);
   }
   else {
      $formdata{$name} = $item[0];
   }
}

$subtotal=$formdata{"burgers"}*3.49+$formdata{"fries"}*1.99+
          $formdata{"sodas"}*1.19;
$subtotal -= 1 if ($formdata{"coupon"} eq "yes");
$total = $subtotal * 1.0825;
print <<"HTML code";
Content-type: text/html\n\n
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;
<html>
<head> 
<title> Thank you! Come again! </title>
</head>
<body>
   <h1 align=center> Thank you! Come again! </h1>
   <p> You're subtotal is 
HTML code
printf "%1s%.2f", "\$", $subtotal;
print "   <p> And with tax, you're purchase comes to ";
printf "%1s%.2f", "\$", $total;
print "</body>\n</html>\n";

sample output

Thank you! Come again!

You're subtotal is $26.56

And with tax, you're purchase comes to $28.75

html file of the sample output

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head> 
<title> Thank you! Come again! </title>
</head>
<body>
   <h1 style="text-align: center"> Thank you! Come again! </h1>
   <p> You're subtotal is 
$26.56</p>

<p> And with tax, you're purchase comes to $28.75</p>
</body>
</html>

Example 3

CGI

#!/usr/local/bin/perl -wT
# survey_simple.cgi

# This CGI script will generate and process a from requesting information
# from the user.
use CGI qw(:standard);

if(param()) {
   @names = param();
   foreach $name (@names) {
      @item = param($name);
      if ($#item > 0) {
         $formdata{$name} = join(', ', @item);
      }
      else {
         $formdata{$name} = $item[0];
      }
   }

   header("Results");
   print <<"   HTML out";
   <h1>Results</h1>
   <p>Thank you, $formdata{"name"}.</p> 
   <p>Your address is<br /><br /> 
   $formdata{"street"}<br />
   $formdata{"city"}, $formdata{"state"} $formdata{"zipcode"}
   </p>
   <p>You are taking $formdata{"classes"}.  Good luck!</p>
   HTML out
   footer();
}
else {
   header("Form for PIC 40");
   print <<"   HTML code";
   <h1>Form for PIC 40A</h1>

   <form method="get" action="$0">
      <table cellspacing="0" cellpadding="2">
      <tr>
      <td>Name:</td>
      <td><input type="text" name="name" size="20" /></td>
      </tr>
      <tr>
      <td>Sex:</td>
      <td><input type="radio" name="sex" value="female" />Female</td>
      </tr>
      <tr>
      <td></td>
      <td><input type="radio" name="sex" value="male" />Male</td>
      </tr>
      <tr>
      <td>Address:</td>
      <td><input type="text" name="street" size="30" /></td>
      </tr> 
      <tr>
      <td></td>
      <td>Street</td>
      </tr>
      <tr>
      <td></td>
      <td><input type="text" name="city" size="15" /></td>
      <td><input type="text" name="state" size="2" /></td>
      <td></td>
      <td><input type="text" name="zipcode" size="5" /></td>
      </tr>
      <tr>
      <td></td>
      <td>City</td>
      <td>State</td>
      <td></td>
      <td>Zip Code</td>
      </tr>
      </table>
      <p>
      What PIC classes are you taking?
      <select name="classes" multiple="multiple" size="2">
      <option>PIC 10A</option>
      <option>PIC 10B</option>
      <option>PIC 20A</option>
      <option>PIC 20B</option>
      <option>PIC 40A</option>
      </select>
      <p>Any comments?
      <p>
      <textarea name="comments" rows="6" cols="60">
      </textarea>
      <p>
      <input type="submit" value="Send it in!" />
   </form>
   HTML code
   footer();
}

sub header() {
   print "Content-type: text/html\n\n";
   print qq(<?xml version="1.0" encoding="UTF-8"?>
          <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\n);
   print qq(<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">);
   print "<head>\n<title>\n";
   print "$_[0]\n</title>\n</head>\n<body>\n";
}

sub footer() {
   print "</body>\n</html>\n";
}

Webpage that generates by the CGI program

Form for PIC 40A

Name:
Sex: Female
Male

What PIC class are you taking?

Any comments?

Html file

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
Form for PIC 40A
</title>
</head>
<body>
<h1 style="text-align: center">Form for PIC 40A</h1>
<form method="post" action="survey.cgi">
<table cellspacing="0" cellpadding="2">
<tr>
<td>Name:</td>

<td><input type="text" name="name" size="20" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><input type="radio" name="sex" value="female"  />
       Female</td>
</tr><tr>
<td></td>
<td><input type="radio" name="sex" value="male"  />
     Male
</td>
</tr>
</table><p>

What PIC class are you taking?  
</p><p><select name="classes" size="2" multiple="multiple">
<option >PIC 10A</option>
<option >PIC 10B</option>
<option >PIC 20A</option>
<option >PIC 20B</option>
<option >PIC 40A</option>
</select></p>
<p>Any comments?
</p><p><textarea name="comments" rows="6" cols="60">
</textarea></p>
<p>

<input type="submit" value="Go for it!" />
<input type="reset" value="Clear" /></p>
</form></body>
</html>

Output

Results

Thank you, Mandy Smith.

Your address is

1234 Westwood
Los Angeles, CA 90024

You are taking PIC 10B, PIC 20A. Good luck!

html file

<?xml version="1.0" encoding="UTF-8"?>
     <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>
Results
</title>
</head>
<body>
   <h1>Results</h1>
   <p>Thank you, Mandy Smith.</p> 
   <p>Your address is<br /><br /> 
   1234 Westwood<br />

   Los Angeles, CA 90024
   </p>
   <p>You are taking PIC 10B, PIC 20A.  Good luck!</p>
</body>
</html>

Example 4

CGI program

#!/usr/local/bin/perl -wT
# survey.cgi

# This CGI script will generate and process a form requesting information
# from the user.  If the required info. is not entered, the form
# will be reprinted with an error message, and with all other entries
# filled in with the user's info.
use CGI qw(:standard);

if(param()) {
   @names = param();
   foreach $name (@names) {
      @item = param($name);
      if ($#item > 0) {
         $formdata{$name} = join(', ', @item);
      }
      else {
         $formdata{$name} = $item[0];
      }
   }

   # analyze and reprint form if name not filled in
   if ($formdata{'name'} =~ /^\s*$/) { # name is left blank
      reprint_form("You must enter your name.", "",
                   $formdata{"sex"}, $formdata{"classes"}, 
                   $formdata{"comments"});
   }
   else {
     results();
   } 
}
else {
   generate_form();
}

sub header {
   print "Content-type: text/html\n\n";
   print qq(<?xml version="1.0" encoding="UTF-8"?>
          <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\n);
   print qq(<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\n);
   print "<head>\n<title>\n";
   print "$_[0]\n</title>\n</head>\n<body>\n";
   print qq(<h1 style="text-align: center">$_[0]</h1>\n);
}

sub footer {
   print "</body>\n</html>\n";
}

sub form_header {
   print qq(<form method="post" action="$0">\n),
         qq(<table cellspacing="0" cellpadding="2">\n);
}

sub generate_form {
   header("Form for PIC 40A");
   form_header();
   print name_field();
   print radio();
   print menu_of_classes();
   print textarea();
   print buttons_plus_endform();
   footer();
}

sub name_field {
   my ($name) = @_;
   my $s = qq(<tr>\n<td>Name:</td>\n<td><input type="text") .
           qq( name="name" size="20");
   return $s . qq( value="$name" /></td>\n</tr>\n) if $name;
   return $s . " /></td>\n</tr>\n";
}

sub radio {
   my ($sex) = @_;
   my ($male, $female) = ();
   if ($sex eq "male") {
      $male = qq(checked="checked");
   }
   elsif ($sex eq "female") {
      $female= qq(checked="checked");
   }
   return "<tr>\n<td>Sex:</td>\n" .
   qq(<td><input type="radio" name="sex" value="female" $female />
       Female</td>\n</tr>) .
   "<tr>\n<td></td>\n<td>" .
   qq(<input type="radio" name="sex" value="male" $male />
     Male\n</td>\n</tr>\n) .
   "</table>";
}

sub textarea {
   my ($text) = @_;
   my $s = "<p>Any comments?\n</p><p>" .
           qq(<textarea name="comments" rows="6" cols="60">);
      $s .= $text;
      $s .= "\n</textarea></p>\n";
   return $s;
}

sub menu_of_classes {
   my ($choices) = @_;
   @classes = split(/, /, $choices);
   my ($p10A, $p10B, $p20A, $p20B, $p40A);

   foreach $class (@classes) {
      $p10A = qq(selected="selected") if $class eq "PIC 10A";
      $p10B = qq(selected="selected") if $class eq "PIC 10B";
      $p20A = qq(selected="selected") if $class eq "PIC 20A";
      $p20B = qq(selected="selected") if $class eq "PIC 20B";
      $p40A = qq(selected="selected") if $class eq "PIC 40A";
   }

   my $s = "<p>\nWhat PIC class are you taking?  \n</p>".
      qq(<p><select name="classes" size="2" multiple="multiple">\n).
         "<option $p10A>PIC 10A</option>\n".
         "<option $p10B>PIC 10B</option>\n".
         "<option $p20A>PIC 20A</option>\n".
         "<option $p20B>PIC 20B</option>\n".
         "<option $p40A>PIC 40A</option>\n".
      "</select></p>\n";
   return $s;
}

sub buttons_plus_endform {
  return qq(<p>\n<input type="submit" value="Go for it!" />\n) .
         qq(<input type="reset" value="Clear" /></p>\n</form>);
} 

sub results {
   header("Results");
   print qq(<p>Thank you, $formdata{"name"}. </p>\n),
   qq(<p>You are taking $formdata{"classes"}.  Good luck! </p>\n);
   footer();
}

sub reprint_form {
   my ($msg, $name, $sex, $classes, $comments) = @_;
 
   header("Form for PIC 40A");
   form_header();
   print qq(<p style="color:red">\n$msg\n</p>);
   print name_field($name);
   print radio($sex);
   print menu_of_classes($classes);
   print textarea($comments);
   print buttons_plus_endform();
   footer();
}

html file generated by the CGI program

Form for PIC 40A

Name:
Sex: Female
Male

What PIC class are you taking?

Any comments?

html file

<?xml version="1.0" encoding="UTF-8"?>
          <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
Form for PIC 40A
</title>
</head>
<body>
<h1 style="text-align: center">Form for PIC 40A</h1>
<form method="post" action="survey.cgi">
<table cellspacing="0" cellpadding="2">
<tr>
<td>Name:</td>

<td><input type="text" name="name" size="20" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><input type="radio" name="sex" value="female"  />
       Female</td>
</tr><tr>
<td></td>
<td><input type="radio" name="sex" value="male"  />
     Male
</td>
</tr>
</table><p>

What PIC class are you taking?  
</p><p><select name="classes" size="2" multiple="multiple">
<option >PIC 10A</option>
<option >PIC 10B</option>
<option >PIC 20A</option>
<option >PIC 20B</option>
<option >PIC 40A</option>
</select></p>
<p>Any comments?
</p><p><textarea name="comments" rows="6" cols="60">
</textarea></p>
<p>

<input type="submit" value="Go for it!" />
<input type="reset" value="Clear" /></p>
</form></body>
</html>

Sample output: suppose I forget to input my name

Form for PIC 40A

You must enter your name.

Name:
Sex: Female
Male

What PIC class are you taking?

Any comments?

html file

h1 style="text-align: center">Form for PIC 40A</h1>
<form method="post" action="survey.cgi">
<table cellspacing="0" cellpadding="2">
<p style="color:red">
You must enter your name.
</p><tr>

<td>Name:</td>
<td><input type="text" name="name" size="20" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><input type="radio" name="sex" value="female"  />
       Female</td>
</tr><tr>
<td></td>
<td><input type="radio" name="sex" value="male" checked="checked" />
     Male
</td>

</tr>
</table><p>
What PIC class are you taking?  
</p><p><select name="classes" size="2" multiple="multiple">
<option selected="selected">PIC 10A</option>
<option >PIC 10B</option>
<option >PIC 20A</option>
<option >PIC 20B</option>
<option >PIC 40A</option>
</select></p>
<p>Any comments?
</p><p><textarea name="comments" rows="6" cols="60">

</textarea></p>
<p>
<input type="submit" value="Go for it!" />
<input type="reset" value="Clear" /></p>
</form>

Example 5

CGI

h1 style="text-align: center">Form for PIC 40A</h1>
<form method="post" action="survey.cgi">
<table cellspacing="0" cellpadding="2">
<p style="color:red">
You must enter your name.
</p><tr>

<td>Name:</td>
<td><input type="text" name="name" size="20" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><input type="radio" name="sex" value="female"  />
       Female</td>
</tr><tr>
#!/usr/local/bin/perl -wT 
# count.cgi

if (-e "count.txt") {
   open(FH, "count.txt");
   flock(FH, 2);
   chomp($num=<FH>);
   flock(FH, 8);
   close FH;
   $num++;
} 
else {
   $num=1;
}

open FH, ">count.txt";
flock(FH, 2);
print FH $num;
flock(FH, 8);
close FH;

# Creates the HTML page displaying the number of visitors
print "Content-type: text/html\n\n";
print qq(<?xml version="1.0" encoding="UTF-8"?>
          <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\n);
print qq(<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\n);

print "<head>\n<title>\n";
print "Counter\n</title>\n</head>\n<body>\n";
print qq(<table border="0" cellspacing="0" cellpadding="0">\n);
print qq(<tr align="center">\n);
print "<td>So many visitors, so little time.  You are visitor &nbsp;</td>\n";
print qq(<td style="font-family: Roman; font-weight: 650; font-size: 90%;
         background-color: black; color: white" align="right">);
print "$num</td>\n<td>&nbsp;&nbsp;to this web page.</td>\n</tr>\n</table>\n";
print "</body></html>\n";

webpage

So many visitors, so little time. You are visitor  259   to this web page.

html

<?xml version="1.0" encoding="UTF-8"?>
          <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
Counter
</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td>So many visitors, so little time.  You are visitor&nbsp;</td>
<td style="font-family: Roman; font-weight: 650; font-size: 90%;
background-color: black; color: white" align="right">259</td>
<td>&nbsp;&nbsp;to this web page.</td>

</tr>
</table>
</body></html>