ITNW 2310 - PERL
Allan Kochis,Adjunct Professor - CIT

HTML/CGI

  1. One Minute html tutorial
    The general format of htm is <tag>Text</tag>
    Like :
    <B>BOLD</b>

    There are many online tutorials on html.
    Here is one to get started :
    http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html

  2. The HTTP Model

  3. CGI Common Gateway Interface

  4. Example one calling a cgi module
    one.html 
    <HTML>
<HEAD>
<TITLE>Perl CGI </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFD8">
<Center>
<H2>
One
</h2>
<hr>
<form method=get action="/cgi-bin/kochis/one.cgi" >
<br>
<input type=submit value="DOIT">
</form>
<p>
</center>
</body
</html>
    one.cgi 
    #!/usr/bin/perl

print "Content-Type:  Text/html\n\n";

print "Hello World\n";

  5. Writing html
    two.html 
    <HTML>
<HEAD>
<TITLE>Perl CGI </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFD8">
<Center>
<H2>
Two
</h2>
<hr>
<form method=get action="/cgi-bin/kochis/two.cgi" >
<br>
<input type=submit value="DOIT">
</form>
<p>
</center>
</body
</html>
    two.cgi 
    #!/usr/bin/perl

print "Content-Type:  Text/html\n\n";

print <<EOF;
<html>
   <head>
      <title>
         TWO
      </title>
   </head>
   <body bgcolor="#FFFFD8">
      <center>
        <H1>
           Hello World
        </H1>
      </center>
   </body>
</html>
EOF

  6. Adding color
    three.html 
    <HTML>
<HEAD>
<TITLE>Perl CGI </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFD8">
<Center>
<H2>
Three
</h2>
<hr>
<form method=get action="/cgi-bin/kochis/three.cgi" >
<br>
<input type=submit value="DOIT">
</form>
<p>
</center>
</body
</html>
    three.cgi 
    #!/usr/bin/perl

print "Content-Type:  Text/html\n\n";

print <<EOF;
<html>
   <head>
      <title>
         TWO
      </title>
   </head>
   <body bgcolor="#FFFFD8">
      <center>
          <table width=60% border=1>
          <tr>
            <td align=center bgcolor="#FF0000">
              <font size=+2 color="#FFFFFF">
                Hello World
              </font>
            </td>
          </tr>
          </table>
      </center>
   </body>
</html>
EOF

  7. Form input and get method
    four.html 
    <HTML>
<HEAD>
<TITLE>Perl CGI </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFD8">
<Center>
<H2>
Four
</h2>
<hr>
<form method=get action="/cgi-bin/kochis/four.cgi" >
<br>
Text Field : <input type=text name=name size=20 maxlength=40>
<br>
<br>
Radio Buttons:
<input type=radio name=radio value=1>Option 1
<input type=radio name=radio value=2>Option 2
<br>
<br>
Checkbox:
<br><input type=checkbox name=check value=1>Choice 1
<br><input type=checkbox name=check value=2>Choice 2
<br><input type=checkbox name=check value=3>Choice 3
<br><input type=checkbox name=check value=4>Choice 4
<br>
<br>
Selection:
<Select name=select>
<option value=1>Select 1
<option value=2>Select 2
<option value=3>Select 3
<option value=4>Select 4
</select>
<br>
<br>
<input type=submit value="DOIT">
<br><br>

</form>
<p>
</center>
</body
</html>
    four.cgi 
    #!/usr/bin/perl

print "Content-Type:  Text/html\n\n";

print <<EOF;
<html>
   <head>
      <title>
         TWO
      </title>
   </head>
   <body bgcolor="#FFFFD8">
   Arguments from \@ARGV
   <UL>
EOF
print "@ARGV"."\n";
@in=split("\\&","@ARGV");
for $item (@in) {
    ($a,$b)=keyvalue($item);
    print "<LI>$a = $b\n";
}
print <<EOF;
      </center>
   </body>
</html>
EOF
sub keyvalue {
    local($_)=@_;
    chop if(/[^\w]$/);
    m/(\w+)\s*=\s*(.*)\s*$/;
    ($1,$2);
}

  8. Post method
    five.html 
    <HTML>
<HEAD>
<TITLE>Perl CGI </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFD8">
<Center>
<H2>
Five
</h2>
<hr>
<form method=post action="/cgi-bin/kochis/five.cgi" >
<br>
Text Field : <input type=text name=name size=20 maxlength=40>
<br>
<br>
Radio Buttons:
<input type=radio name=radio value=1>Option 1
<input type=radio name=radio value=2>Option 2
<br>
<br>
Checkbox:
<br><input type=checkbox name=check value=1>Choice 1
<br><input type=checkbox name=check value=2>Choice 2
<br><input type=checkbox name=check value=3>Choice 3
<br><input type=checkbox name=check value=4>Choice 4
<br>
<br>
Selection:
<Select name=select>
<option value=1>Select 1
<option value=2>Select 2
<option value=3>Select 3
<option value=4>Select 4
</select>
<br>
<br>
<input type=submit value="DOIT">
<br><br>

</form>
<p>
</center>
</body
</html>
    five.cgi 
    #!/usr/bin/perl

print "Content-Type:  Text/html\n\n";

print <<EOF;
<html>
   <head>
      <title>
         TWO
      </title>
   </head>
   <body bgcolor="#FFFFD8">
   Arguments from STDIN
   <UL>
EOF
$in=<STDIN>;
print $in."\n";
@in=split("\\&",$in);
for $item (@in) {
    ($a,$b)=keyvalue($item);
    print "<LI>$a = $b\n";
}
print <<EOF;
      </center>
   </body>
</html>
EOF
sub keyvalue {
    local($_)=@_;
    chop if(/[^\w]$/);
    m/(\w+)\s*=\s*(.*)\s*$/;
    ($1,$2);
}

  9. CGI Module
    http://206.77.144.61/kochis/CGI.pm.htm
    http://10.71.25.10/kochis/CGI.pm.htm

    six.html 
    <HTML>
<HEAD>
<TITLE>Perl CGI </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFD8">
<Center>
<H2>
SIX
</h2>
<hr>
<form method=post action="/cgi-bin/kochis/six.cgi" >
<br>
Text Field : <input type=text name=name size=20 maxlength=40>
<br>
<br>
Radio Buttons:
<input type=radio name=radio value=1>Option 1
<input type=radio name=radio value=2>Option 2
<br>
<br>
Checkbox:
<br><input type=checkbox name=check value=1>Choice 1
<br><input type=checkbox name=check value=2>Choice 2
<br><input type=checkbox name=check value=3>Choice 3
<br><input type=checkbox name=check value=4>Choice 4
<br>
<br>
Selection:
<Select name=select>
<option value=1>Select 1
<option value=2>Select 2
<option value=3>Select 3
<option value=4>Select 4
</select>
<br>
<br>
<input type=submit value="DOIT">
<br><br>

</form>
<p>
</center>
</body
</html>
    six.cgi 
    #!/usr/bin/perl
BEGIN {
unshift @INC,"../CGI.pm-3.11/";
}
use CGI qw(:standard);

print header();

print start_html(
   -title => 'Six',
  -bgcolor => '#FFFFD8');

print h1('Six');

my @a=param();

print p('Parameters are ',join(",",@a));
print hr();
print "<UL>";
for $item (@a) {i
    $val=param($item);
    print "<LI>".$item."= ".$val,"\n";
}
print "</ul>";

print end_html();
© Allan Kochis Last revision 10/19/2005