Fall Semester 2002
|
|
Fall Semester 2002 |
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:
Essentially this means writing this script:<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>
#!/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>
};and also invoke it from Netscape, over the web:./hello
Here's a working version of the script installed on my server.http://burrowww.cs.indiana.edu:36xxx/cgi-bin/hello
Let's summarize what the script does: it always always gives me the same picture.
Now let's modify the script a little. Copy
hellohelloTwocgi-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
helloTwohelloThree#!/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>
};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#!/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>
};Type
perldoc -f randrand 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:10200/cgi-bin/helloFive">here</a>
for a new random image. <p>
<img src="http://www.cs.indiana.edu/dept/img/$imgname">
</body>
</html>
};This completes our introduction to scripting.