CSCI A348/548
Lecture Notes Eight

Spring 2001 (Second semester 2000-2001)

CGI in slow-motion and help with the second assignment.

1. This is a script, called eno:

#!/usr/bin/perl

print qq{Content-type: text/html\n\n<html><head>
<title>Hello script</title></head><body bgcolor=white>}; 

$date = localtime; 

print "<h1> Hello $date </h1>"; 

$valueOne = $ENV{"QUERY_STRING"}; 

$valueTwo = $ENV{"SCRIPT_NAME"}; 

print qq{

  env of query string is: $valueOne <p>

  env of script name is: $valueTwo <p> 

  <a href="$valueTwo?something">Click Here</a>

};

print qq{</body></html>};

2. This a script called owt:

#!/usr/bin/perl

print qq{Content-type: text/html\n\n<html><head>
<title>Hello script</title></head><body bgcolor=white>}; 

$date = localtime; 

print "<h1> Hello $date </h1>"; 

$valueOne = $ENV{"QUERY_STRING"}; 

$valueTwo = $ENV{"SCRIPT_NAME"}; 

print qq{

  env of query string is: $valueOne <p>

  env of script name is: $valueTwo <p> 

  <a href="$valueTwo?something">Click Here</a>


};


print qq{</body></html>};

3. Can two programs (such as eno and owt above)

have the same contents, yet
produce different output?

4. Ignoring the time stamp aspect of it, what makes the two identical programs produce different output?

5. The program below (called eerht) will now get us started.

#!/usr/bin/perl

%images = (
  "One"     =>    "http://www.cs.indiana.edu/dept/img/lh01.gif", 
  "Seven"   =>    "http://www.cs.indiana.edu/dept/img/lh01.gif", 
  "Eight"   =>    "http://www.cs.indiana.edu/dept/img/lh01.gif", 
  "Nine"    =>    "http://www.cs.indiana.edu/dept/img/lh01.gif"
); 

&printTop;

print "Hello!";

&printBottom; 

sub printTop {
  print qq{Content-type: text/html\n\n<html>
    <head><title>My Pictures Script</title></head>
    <body bgcolor=white>
  }; 
} 

sub printBottom {
  print qq{</body></html>}; 
}

6. Can you explain what it does, and how it works?

7. Let's change eerht into ruof below:

#!/usr/bin/perl

%images = (
  "One"     =>    "http://www.cs.indiana.edu/dept/img/lh01.gif", 
  "Seven"   =>    "http://www.cs.indiana.edu/dept/img/lh07.gif", 
  "Eight"   =>    "http://www.cs.indiana.edu/dept/img/lh08.gif", 
  "Nine"    =>    "http://www.cs.indiana.edu/dept/img/lh09.gif"
); 

&printTop;

print "Let me show you my images: <p>"; 

@lst = (keys %images); 

$input = $ENV{"QUERY_STRING"}; 

print "Your input is: $input <p> "; 

foreach $i (@lst) {
  $name = $i;
  $pic  = $images{$i}; 
  print qq{$name: <img src="$pic"><p>}; 
} 

&printBottom; 

sub printTop {
  print qq{Content-type: text/html\n\n<html>
    <head><title>My Pictures Script</title></head>
    <body bgcolor=white>
  }; 
} 

sub printBottom {
  print qq{</body></html>}; 
}

8. What does it do? How does it work?

9. Are you comfortable with foreach?

10. Can you express it in terms of a for construct?

#!/usr/bin/perl

%h = (
  "one"   => "Larry", 
  "two"   => "Michael", 
  "three" => "Tony"
); 

foreach $k (keys %h){
  # do something with $k
  # and with $h {$k}

  print $k, " ", $h{$k}, "\n"; 
}

print "----( again, again! )----\n"; 

@a = keys %h;
for ($i = 0; $i <= $#a; $i++) {
  # do something with $a[$i] (which is 
  # the $k of before) and with $h{$a[$i]} 
  
  print $a[$i], " ", $h{$a[$i]}, "\n";
}

11. If the program above was called evif this next one is xis and improves on ruof.

Stage one first:

#!/usr/bin/perl

%images = (
  "One"     =>    "http://www.cs.indiana.edu/dept/img/lh01.gif", 
  "Seven"   =>    "http://www.cs.indiana.edu/dept/img/lh07.gif", 
  "Eight"   =>    "http://www.cs.indiana.edu/dept/img/lh08.gif", 
  "Nine"    =>    "http://www.cs.indiana.edu/dept/img/lh09.gif"
); 

&printTop;

print "Let me show you my images: <p>"; 

@lst = (keys %images); 

$input = $ENV{"QUERY_STRING"}; 

print "Your input is: $input <p> "; 

foreach $i (@lst) {
  $name = $i;
  if ($input eq $name) { 
    $pic  = $images{$i}; 
    print qq{$name: (shown below) }; 
    print qq{<img src="$pic"><p>}; 
  } else { 
    print "$name (not shown) "; 
  } 
} 



&printBottom; 

sub printTop {
  print qq{Content-type: text/html\n\n<html>
    <head><title>My Pictures Script</title></head>
    <body bgcolor=white>
  }; 
}

And now Stage Two:

#!/usr/bin/perl

%images = (
  "One"     =>    "http://www.cs.indiana.edu/dept/img/lh01.gif", 
  "Seven"   =>    "http://www.cs.indiana.edu/dept/img/lh07.gif", 
  "Eight"   =>    "http://www.cs.indiana.edu/dept/img/lh08.gif", 
  "Nine"    =>    "http://www.cs.indiana.edu/dept/img/lh09.gif"
); 

&printTop;

print "Let me show you my images: <p>"; 

@lst = (keys %images); 

$input = $ENV{"QUERY_STRING"}; 

print "Your input is: $input <p> "; 

foreach $i (@lst) {
  $name = $i;
  if ($input eq $name) { 
    $pic  = $images{$i}; 
    print qq{$name: (shown below) }; 
  } else { 
    print "$name (not shown) "; 
  } 
} 

print qq{<p> <img src="$pic"><p>}; 

&printBottom; 

sub printTop {
  print qq{Content-type: text/html\n\n<html>
    <head><title>My Pictures Script</title></head>
    <body bgcolor=white>
  }; 
}

12. Can you see the improvement?

13. Here's neves which improves the user interface.

#!/usr/bin/perl

%images = (
  "One"     =>    "http://www.cs.indiana.edu/dept/img/lh01.gif", 
  "Seven"   =>    "http://www.cs.indiana.edu/dept/img/lh07.gif", 
  "Eight"   =>    "http://www.cs.indiana.edu/dept/img/lh08.gif", 
  "Nine"    =>    "http://www.cs.indiana.edu/dept/img/lh09.gif"
); 

&printTop;

print "Let me show you my images: <p>"; 

@lst = (keys %images); 

$input = $ENV{"QUERY_STRING"}; 

print "Your input is: $input <p> "; 

foreach $i (@lst) {
  $name = $i;
  if ($input eq $name) { 
    $pic  = $images{$i}; 
    print qq{$name: (shown below) }; 
  } else { 
    print qq{ <a href="neves?$name"</a>$name</a>  }; 
  } 
} 

print qq{<p> <img src="$pic"><p>}; 

&printBottom; 

sub printTop {
  print qq{Content-type: text/html\n\n<html>
    <head><title>My Pictures Script</title></head>
    <body bgcolor=white>
  }; 
} 

sub printBottom {
  print qq{</body></html>}; 
}

14. Here's thgie that has a default case.

#!/usr/bin/perl

%images = (
  "One"     =>    "http://www.cs.indiana.edu/dept/img/lh01.gif", 
  "Seven"   =>    "http://www.cs.indiana.edu/dept/img/lh07.gif", 
  "Eight"   =>    "http://www.cs.indiana.edu/dept/img/lh08.gif", 
  "Nine"    =>    "http://www.cs.indiana.edu/dept/img/lh09.gif"
); 

&printTop;

print "Let me show you my images: <p>"; 

@lst = (keys %images); 

$input = $ENV{"QUERY_STRING"}; 

print "Your input is: $input <p> "; 

foreach $i (@lst) {
  $name = $i;
  if ($input eq $name) { 
    print qq{$name: (shown below) }; 
  } else { 
    print qq{ <a href="thgie?$name"</a>$name</a>  }; 
  } 
} 

if ($images{$input}) {
  $pic = $images{$input}; 
} else { 
  $pic = "http://www.cs.indiana.edu/classes/a202-dger/sum99/a202.gif"; 
}

print qq{<p> <img src="$pic"><p>}; 

&printBottom; 

sub printTop {
  print qq{Content-type: text/html\n\n<html>
    <head><title>My Pictures Script</title></head>
    <body bgcolor=white>
  }; 
} 

sub printBottom {
  print qq{</body></html>}; 
}

15. What do we need to do if we don't have to change thgie to enin later?

16. Here's enin that does not care about that:

#!/usr/bin/perl

%images = (
  "One"     =>    "http://www.cs.indiana.edu/dept/img/lh01.gif", 
  "Seven"   =>    "http://www.cs.indiana.edu/dept/img/lh07.gif", 
  "Eight"   =>    "http://www.cs.indiana.edu/dept/img/lh08.gif", 
  "Nine"    =>    "http://www.cs.indiana.edu/dept/img/lh09.gif"
); 

&printTop;

@lst = (keys %images); 

$input = $ENV{"QUERY_STRING"}; 

print "<table border cellpadding=6 width=100%><tr>"; 

$script = $ENV{"SCRIPT_NAME"}; 

foreach $i (@lst) {
  $name = $i;
  if ($input eq $name) { 
    print qq{<td> $name </td> }; 
  } else { 
    print qq{ <td> <a href="$script?$name"</a>$name</a> </td> }; 
  } 
} 

print "</tr>"; 

if ($images{$input}) {
  $pic = $images{$input}; 
} else { 
  $pic = "http://www.cs.indiana.edu/classes/a202-dger/sum99/a202.gif"; 
}

print qq{<tr> 
<td align=center colspan=4> <p> <img src="$pic"><p> </td> 
</tr> }; 

print "</table>"; 

&printBottom; 

sub printTop {
  print qq{Content-type: text/html\n\n<html>
    <head><title>My Pictures Script</title></head>
    <body bgcolor=white>
  }; 
} 

sub printBottom {
  print qq{</body></html>}; 
}

17. How does it do it?

18. What else is enin adding to the previous stage?

19. Let's now move to the second problem, with one (a suddenly simple program).

#!/usr/bin/perl

&printTop; print "Hello!"; &printBottom; 

sub printTop {
  print qq{Content-type: text/html\n\n<html>
    <head><title>My Pictures Script</title></head>
    <body bgcolor=white>
  }; 
} 

sub printBottom {
  print qq{</body></html>}; 
}

20. So far so good.

21. What do we add in two to it?

#!/usr/bin/perl

&printTop; 

$name = $ENV{"SCRIPT_NAME"}; 

$method = $ENV{REQUEST_METHOD};

print "Hello, I am  $name, and I am called with method: $method. <p>"; 

&printBottom; 

sub printTop {
  print qq{Content-type: text/html\n\n<html>
    <head><title>My Pictures Script</title></head>
    <body bgcolor=white>
  }; 
} 

sub printBottom {
  print qq{</body></html>}; 
}

22. This is three a bit reorganized for better focus.

#!/usr/bin/perl

&printTop; $name = $ENV{"SCRIPT_NAME"}; $method = $ENV{REQUEST_METHOD};
print "Hello, I am  $name, and I am called with method: $method. <p>"; 
&printBottom; 

print qq{
  <form method="$method" action="$name"> 
     Argument: <input type="text" name="arg"> <p>
     Function: <select name="fun"> 
       <option value="non"> Click Me!
       <option value="add"> Addition
       <option value="sub"> Subtraction 
     </select> <p>
     <input type="submit" value="Proceed">      
  </form>
}; 

sub printTop {
  print qq{Content-type: text/html\n\n<html>
    <head><title>My Pictures Script</title></head>
    <body bgcolor=white>
  }; 
} 

sub printBottom {
  print qq{</body></html>}; 
}

23. Let's make a change (four) and experiment.

#!/usr/bin/perl

&printTop; $name = $ENV{"SCRIPT_NAME"}; $method = $ENV{REQUEST_METHOD};
print "Hello, I am  $name, and I am called with method: $method. <p>"; 
&printBottom; 

print "(", $ENV{"QUERY_STRING"}, ")<p>"; 

print qq{
  <form method="$method" action="$name"> 
     Argument: <input type="text" name="arg"> <p>
     Function: <select name="fun"> 
       <option value="non"> Click Me!
       <option value="add"> Addition
       <option value="sub"> Subtraction 
     </select> <p>
     <input type="submit" value="Proceed">      
  </form>
}; 

sub printTop {
  print qq{Content-type: text/html\n\n<html>
    <head><title>My Pictures Script</title></head>
    <body bgcolor=white>
  }; 
} 

sub printBottom {
  print qq{</body></html>}; 
}

24. Is your calculator working already?

25. Here's five, taking the input apart.

#!/usr/bin/perl

&printTop; $name = $ENV{"SCRIPT_NAME"}; $method = $ENV{REQUEST_METHOD};
print "Hello, I am  $name, and I am called with method: $method. <p>"; 
&printBottom; 

$input = $ENV{"QUERY_STRING"}; 

print "($input)<p>"; 

@pairs = split(/&/, $input); 

foreach $pair (@pairs) {
  print "($pair)<p>"; 
} 

print qq{
  <form method="$method" action="$name"> 
     Argument: <input type="text" name="arg"> <p>
     Function: <select name="fun"> 
       <option value="non"> Click Me!
       <option value="add"> Addition
       <option value="sub"> Subtraction 
     </select> <p>
     <input type="submit" value="Proceed">      
  </form>
}; 

sub printTop {
  print qq{Content-type: text/html\n\n<html>
    <head><title>My Pictures Script</title></head>
    <body bgcolor=white>
  }; 
} 

sub printBottom {
  print qq{</body></html>}; 
}

26. But that's only part of it.

27. The next one (six) does the rest of the work.

#!/usr/bin/perl

&printTop; $name = $ENV{"SCRIPT_NAME"}; $method = $ENV{REQUEST_METHOD};
print "Hello, I am  $name, and I am called with method: $method. <p>"; 
&printBottom; 

$input = $ENV{"QUERY_STRING"}; 

print "($input)<p>"; 

@pairs = split(/&/, $input); 

foreach $pair (@pairs) {
  print "($pair)<p>"; 
  ($nam, $val) = split(/=/, $pair); 
  print qq{
    Name is ($nam) and value is ($val). <p> 
  }
} 

print qq{
  <form method="$method" action="$name"> 
     Argument: <input type="text" name="arg"> <p>
     Function: <select name="fun"> 
       <option value="non"> Click Me!
       <option value="add"> Addition
       <option value="sub"> Subtraction 
     </select> <p>
     <input type="submit" value="Proceed">      
  </form>
}; 

sub printTop {
  print qq{Content-type: text/html\n\n<html>
    <head><title>My Pictures Script</title></head>
    <body bgcolor=white>
  }; 
} 

sub printBottom {
  print qq{</body></html>}; 
}

28. The next program (seven) not only takes the input apart in the same manner as six, it also carefully records the input in a hash table, for future use, and gets prepared for its role as a calculator.

#!/usr/bin/perl

&printTop; $name = $ENV{"SCRIPT_NAME"}; $method = $ENV{REQUEST_METHOD};
print "Hello, I am  $name, and I am called with method: $method. <p>"; 
&printBottom; 

$input = $ENV{"QUERY_STRING"}; 

print "($input)<p>"; 

@pairs = split(/&/, $input); 

foreach $pair (@pairs) {
  print "($pair)<p>"; 
  ($nam, $val) = split(/=/, $pair); 
  print qq{
    Name is ($nam) and value is ($val). <p> 
  };
  $form{$nam} = $val; 
} 

foreach $key (keys %form) {
  print "($key) is associated with (", $form{$key}, ")<p>"; 
} 

if ($form{fun} eq "add") {

} elsif ($form{fun} eq "sub") {

} else {
  
} 

print qq{
  <form method="$method" action="$name"> 
     Argument: <input type="text" name="arg"> <p>
     Function: <select name="fun"> 
       <option value="non"> Click Me!
       <option value="add"> Addition
       <option value="sub"> Subtraction 
     </select> <p>
     <input type="submit" value="Proceed">      
  </form>
}; 

sub printTop {
  print qq{Content-type: text/html\n\n<html>
    <head><title>My Pictures Script</title></head>
    <body bgcolor=white>
  }; 
} 

sub printBottom {
  print qq{</body></html>}; 
}

29. Are we getting any closer?

#!/usr/bin/perl

&printTop; $name = $ENV{"SCRIPT_NAME"}; $method = $ENV{REQUEST_METHOD};
print "Hello, I am  $name, and I am called with method: $method. <p>"; 
&printBottom; $input = $ENV{"QUERY_STRING"}; print "($input)<p>"; 

@pairs = split(/&/, $input); 

foreach $pair (@pairs) {
  ($nam, $val) = split(/=/, $pair); 
  $form{$nam} = $val; 
} 

if ($form{fun} eq "add") {
  $acc = $acc + $form{arg}; 
} elsif ($form{fun} eq "sub") {
  $acc = $acc - $form{arg};
} else {
  
} 

print qq{
  <form method="$method" action="$name"> 
     Accumulator is: ($acc) <p> 
     Argument: <input type="text" name="arg"> <p>
     Function: <select name="fun"> 
       <option value="non"> Click Me!
       <option value="add"> Addition
       <option value="sub"> Subtraction 
     </select> <p>
     <input type="submit" value="Proceed">      
  </form>
}; 

sub printTop {
  print qq{Content-type: text/html\n\n<html>
    <head><title>My Pictures Script</title></head>
    <body bgcolor=white>
  }; 
} 

sub printBottom {
  print qq{</body></html>}; 
}

30. The program above (eight) is trying. What's missing?

31. How's nine handling this problem?

#!/usr/bin/perl

&printTop; $name = $ENV{"SCRIPT_NAME"}; $method = $ENV{REQUEST_METHOD};
print "Hello, I am  $name, and I am called with method: $method. <p>"; 
&printBottom; $input = $ENV{"QUERY_STRING"}; print "($input)<p>"; 

@pairs = split(/&/, $input); 

foreach $pair (@pairs) {
  ($nam, $val) = split(/=/, $pair); 
  $form{$nam} = $val; 
} 

$acc = $form{acc}; 

if ($form{fun} eq "add") {
  $acc = $acc + $form{arg}; 
} elsif ($form{fun} eq "sub") {
  $acc = $acc - $form{arg};
} else {
  
} 

print qq{
  <form method="$method" action="$name"> 
     Accumulator is: ($acc) <p>
     Field named acc containg the accumulator value: 
         <input type="text" value="$acc" name="acc"> <p>  
     Argument: <input type="text" name="arg"> <p>
     Function: <select name="fun"> 
       <option value="non"> Click Me!
       <option value="add"> Addition
       <option value="sub"> Subtraction 
     </select> <p>
     <input type="submit" value="Proceed">      
  </form>
}; 

sub printTop {
  print qq{Content-type: text/html\n\n<html>
    <head><title>My Pictures Script</title></head>
    <body bgcolor=white>
  }; 
} 

sub printBottom {
  print qq{</body></html>}; 
}

32. In ten we change one word only.

#!/usr/bin/perl

&printTop; $name = $ENV{"SCRIPT_NAME"}; $method = $ENV{REQUEST_METHOD};
print "Hello, I am  $name, and I am called with method: $method. <p>"; 
&printBottom; $input = $ENV{"QUERY_STRING"}; print "($input)<p>"; 

@pairs = split(/&/, $input); 

foreach $pair (@pairs) {
  ($nam, $val) = split(/=/, $pair); 
  $form{$nam} = $val; 
} 

$acc = $form{acc}; 

if ($form{fun} eq "add") {
  $acc = $acc + $form{arg}; 
} elsif ($form{fun} eq "sub") {
  $acc = $acc - $form{arg};
} else {
  
} 

print qq{
  <form method="$method" action="$name"> 
     Accumulator is: ($acc) <p>
     Field named acc containg the accumulator value: 
         <input type="hidden" value="$acc" name="acc"> <p>  
     Argument: <input type="text" name="arg"> <p>
     Function: <select name="fun"> 
       <option value="non"> Click Me!
       <option value="add"> Addition
       <option value="sub"> Subtraction 
     </select> <p>
     <input type="submit" value="Proceed">      
  </form>
}; 

sub printTop {
  print qq{Content-type: text/html\n\n<html>
    <head><title>My Pictures Script</title></head>
    <body bgcolor=white>
  }; 
} 

sub printBottom {
  print qq{</body></html>}; 
}

33. Can you see which one, and what the difference is?

34. What is the difference between GET and POST?

The program below (eleven) would be able to point it out to you.

#!/usr/bin/perl

&printTop; $name = $ENV{"SCRIPT_NAME"}; $method = $ENV{REQUEST_METHOD};
print "Hello, I am  $name, and I am called with method: $method. <p>"; 
&printBottom; 

if ($method eq "GET") {
  $input = $ENV{"QUERY_STRING"}; 
} else {
  read(STDIN, $input, $ENV{"CONTENT_LENGTH"}); 
}

print "($input)<p>"; 

@pairs = split(/&/, $input); 

foreach $pair (@pairs) {
  ($nam, $val) = split(/=/, $pair); 
  $form{$nam} = $val; 
} 

$acc = $form{acc}; 

if ($form{fun} eq "add") {
  $acc = $acc + $form{arg}; 
} elsif ($form{fun} eq "sub") {
  $acc = $acc - $form{arg};
} else {
  
} 

print qq{
  <form method="POST" action="$name"> 
     Accumulator is: ($acc) <p>
     Field named acc containg the accumulator value: <input type="hidden"
value="$acc" name="acc"> <p>  
     Argument: <input type="text" name="arg"> <p>
     Function: <select name="fun"> 
       <option value="non"> Click Me!
       <option value="add"> Addition
       <option value="sub"> Subtraction 
     </select> <p>
     <input type="submit" value="Proceed">      
  </form>
}; 

sub printTop {
  print qq{Content-type: text/html\n\n<html>
    <head><title>My Pictures Script</title></head>
    <body bgcolor=white>
  }; 
} 

sub printBottom {
  print qq{</body></html>}; 
}

35. Are we any closer now?

36. Can you write the two programs?

37. These notes developed in cooperation with:

38. If you have any questions please let me know!

Last updated on Jan 31, 2001, by Adrian German for A348/A548

CSCI A348/548 Lecture Notes Eight

CSCI A348/548
Lecture Notes Eight