A348/A548 Mastering the World-Wide Web (4/3 cr.)

Fall Semester 2002

Lecture Notes Five: Circular scripts (Part I).

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>};

Try it, see how you can enter some data into it. (The program is all geared up for work with a user).

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>};

For owt the question is: do you see any differences, as compared with the previous program?

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

have the same contents, yet
produce different output?

How could that be? (So the contents is not all that matters!)

4. Ignoring the time stamp aspect, 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/lh07.gif", 
  "Eight"   =>    "http://www.cs.indiana.edu/dept/img/lh08.gif", 
  "Nine"    =>    "http://www.cs.indiana.edu/dept/img/lh09.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>
  }; 
} 

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

When you run it what potential expressiveness remains unexpressed?

(How can you get specific images from the script, that is)?

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> "; 

$pic = "http://www.cs.indiana.edu/l/www/classes/a202-dger/sum99/a202.gif"; 

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?

Is there any improvement? (Try to look for differences, if not).

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> "; 

$pic = "http://www.cs.indiana.edu/l/www/classes/a202-dger/sum99/a202.gif"; 

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

(Review eno and owt if not clear).

The program now is again geared up for user interaction.

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">$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>}; 
}

Nothing new, just a different approach, actually.

15. What do we need to do if we don't want to 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">$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 (and is taken straight from eno and owt)?

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>}; 
}

(What's that: GET? And, is there any other method?)

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>"; 


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>
}; 

&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>}; 
}

(When trying this out, one needs to observe the changes that occur in the URL.)

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>"; 

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>
}; 

&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>}; 
}

If we missed it at 22, it should now be clear: we're getting the values inside.

24. Is your calculator working already?

(Still, the format's a bit strange).

25. Are we getting any closer?

(Yes, but we need to take the input string apart).

26. Perhaps we should take a break?

(Yes, I think I need a way to store intermediary results, too).

27. OK, let's stop here. See you next time.

(You bet.)

Last updated: Sep 16, 2002 by Adrian German for A348/A548