Spring Semester 2005


Lab Notes Two: Simple CGI scripting.

In this lab you will write a script that returns a random image from a predetermined sequence of available images every time it is invoked. The script includes in its output a link to its own URL to make it easy for the user to call the script over and over again (without having to reload the page). Here's a demo of the script you will be building in this lab. This should help you with your next homework assignment and will help you get started with CGI.

Log into your burrowww account and go straight to your cgi-bin directory.

Write the hello script that returns the following simple HTML page as output:

<html>
<head>
<title>
the hello script 
</title>
</head>
<body bgcolor=white>
<h1>Hello!</h1> 
<img src="http://www.cs.indiana.edu/dept/img/lh08.gif">
</body>
</html>
Essentially this means writing this script:
#!/usr/bin/perl
 
print qq{Content-type: text/html\n\n<html>
  <head>
  <title>
  the hello script
  </title>
  </head>
  <body bgcolor=white>
  <h1>Hello!</h1> 
  <img src="http://www.cs.indiana.edu/dept/img/lh08.gif">
  </body>
  </html>
};
Then run the script from the command line
./hello
and also invoke it from Netscape, over the web:
http://burrowww.cs.indiana.edu:176xx/cgi-bin/hello
Here's a working version of the script installed on my server.

Let's summarize what the script does: it always always gives me the same picture.

Now let's modify the script a little. Copy

hello
into
helloTwo
in the same directory (cgi-bin).

Then make the following changes into the new script, as indicated below, in blue.

#!/usr/bin/perl

$imgname = "lh08.gif"; 

print qq{Content-type: text/html\n\n<html>
  <head>
  <title>
  the helloTwo script 
  </title>
  </head>
  <body bgcolor=white>
  <h1>Hello!</h1> 
  <img src="http://www.cs.indiana.edu/dept/img/$imgname">
  </body>
  </html>
};
So you need to add a line and change a line.

Check the new script from the command line and from the web.

Here's my version of helloTwo.

It works exactly as the one before, except that in the URL that's used to identify the image (in the image tag,) a string that contains the name of the image is interpolated (included) at the time the line is written out. This may not look like a significant change but it really is.

Copy

helloTwo
into
helloThree
and make the following changes to it:
#!/usr/bin/perl

@images = ("lh08.gif", "lh07.gif", "lh09.gif", "lh01.gif");  
 
$imgname = $images[0]; 
 
print qq{Content-type: text/html\n\n<html>
  <head>
  <title>
  the helo three script 
  </title>
  </head>
  <body bgcolor=white>
  <h1>Hello!</h1> 
  <img src="http://www.cs.indiana.edu/dept/img/$imgname">
  </body>
  </html>
};
Again, the parts in blue are new, the rest is unchanged (compared to helloTwo).

Before you try the script think about the changes.

We still show one and the same image, but the name of the image is in a string variable, and we have more than one such string available in a list of strings. All these strings represent names of images located on the departmental web server, and with an index we can scan the entire list.

Can we pick a random image everytime the script is invoked?

Yes, if we use a variable $index and set it to random values between 0 and $#names (including) and then use it as an index when we set the value for the string $imgname.

That takes us to

helloFour
that looks like this:
#!/usr/bin/perl
 
@images = ("lh08.gif", "lh07.gif", "lh09.gif", "lh01.gif");  
 
$index = int(rand($#images + 1)); 
 
$imgname = $images[$index]; 
 
print qq{Content-type: text/html\n\n<html>
  <head>
  <title>
  the hello four script 
  </title>
  </head>
  <body bgcolor=white>
  <h1>Hello!</h1> 
  <img src="http://www.cs.indiana.edu/dept/img/$imgname">
  </body>
  </html>
};
And behaves like this (don't forget to reload the page).

Type

perldoc -f rand
at the prompt. What does the rand function do?

The last thing we do is to provide a link to the program itself in the HTML file that is its output. This way the user does not need to reload the page for a new image, (s)he can click on the link on the page and obtain a new image).

This is helloFive

#!/usr/bin/perl
 
@images = ("lh08.gif", "lh07.gif", "lh09.gif", "lh01.gif");  
 
$index = int(rand($#images + 1)); 
 
$imgname = $images[$index]; 
 
print qq{Content-type: text/html\n\n<html>
  <head>
  <title>
  in-lab assignment 1
  </title>
  </head>
  <body bgcolor=white>
  <h1>Hello!</h1> 
 
  <p> The image below has index $index. <p> Click <a href=
  "http://burrowww.cs.indiana.edu:13280/cgi-bin/helloFive">here</a> 
  for a new random image. <p>  

  <img src="http://www.cs.indiana.edu/dept/img/$imgname">
 
  </body>
  </html>
};
And here's a working version of helloFive.

This completes our introduction to scripting.

We're now ready for serious CGI scripts (next week). To summarize this lab here's your:

A348/A548 LAB ASSIGNMENT TWO

Read the notes above carefully, and then
  1. implement hello and post it on your site
  2. follow the steps to change hello to helloTwo
  3. continue by installing helloThree, and helloFour
  4. finish the lab by installing helloFive
Question for graduate students:

What would it take for the pictures in helloFive to be shown in order, one after another, as in a circular list (instead of being randomly selected from the list)?


Last updated on Jan 20, 2004, by Adrian German for A348/A548