OAC Problem Set III

Random Pictures Problem

One of the major problems website designers have to face is how to get a visitor to return to the site. One solution is to have the site display different options each time it is visited.

For this problem you will create a dynamic web page that randomly selects and displays four pictures from a set of twelve.

Your page will look like the one to the right.

All twelve pictures come in two sizes, normal and thumbnail. When a visitor clicks on the thumbnail, the normal size version will be diplayed.

Ten of the pictures can be found on the Internet. For those ten, you are to provide a link under the picture which will take the visitor to the appropriate site.

The Raw Material You Are Given

To make your job easier, five things have been provided.

All twelve thumbnail pictures and their corresponding normal-sized ones;
A file called images.list which provides all of the required information about the graphics files;
A PHP script, images_list.php, which reads in the images.list file and displays the information in a table;
A web page about generating random values;
Pseudocode for the PHP script you are to write;
The web page you are to generate, allowing you to reverse engineer the problem.

Items 1-3 are to be downloaded by clicking on this link. Save the file in your PHP directory. Then, inside a terminal window, cd into your PHP directory and type:

tar xzvf ranimages.tar.gz

This will create a subdirectory called randomimages with 26 files in it.

Use your web browser to execute the PHP script. In a terminal window, open the images.list file. Compare the two.

images.list is an example of what is known as a "flat file data base". Each line is a record. The fields are separated using a character which does not appear in any field -- here that character is TAB, 0x09, \t.

The Starter Code

There are several things of note in this code which will be helpful when you do your own program.

The built-in function rtrim() is used to eliminate the newline character at the end of the input line.
explode() breaks up the input-line string using the TAB character as the break point. $picinfo is a very interesting variable. If the code read
```
$fields = explode("\t", $str);
```
$fields would become an array variable with four elements, the subscript starting at 0 as would be expected: $fields[0], $fields[1], $fields[2], $fields[3].
However, since $picinfo[] includes the square brackets, we will be creating a two-dimensional array on the fly. To see how this happens, add the following three lines of code after the line which includes the call to explode().
```
echo "<pre>";
print_r($picinfo);
echo "</pre>";
```
$picinfo[0][0] will be the first field from the first record in the file. All of the output from print_r will be placed at the top of the web page so that it is easy to find.
count($picinfo) provides the number of elements in $picinfo[], but only the number of rows, i.e., the number of different values of the first subscript.
In the loop which prints the body of the table, curly brackets are used to enclose the $picinfo identifier and its subscripts. This is one of the quirks of PHP syntax. Without the curlies around a variable with multiple subscripts inside the double quotes of an echo statement, the name of the element would be printed and not its value.

<html>
<head><title>Pics</title></head>
<body>
<?php
// images_list.php
// 22 Oct 02 DFStermole

// Open the file for reading
// File format: Four (4) Fields separated by tabs
// Large Pic Name    Small Pic Name   Caption Text   Link to Web if it exists
$fp = fopen( "images.list", "r") or die("No such file!\n");
// Read lines one by one, exploding each in turn
while ( !feof($fp) ) {
   $str = fgets( $fp, 500);
   $str = rtrim($str, "\n"); // Delete NL
   if( $str )
      $picinfo[] = explode("\t", $str);
}
// close file
fclose($fp);
?>
<table border>
<tr><td><font color=ff0000>Name of Large Pic</font></td>
    <td><font color=ff0000>Name of Thumbnail</font></td>
    <td><font color=ff0000>Caption Text</font></td>
    <td><font color=ff0000>Link to Web</font></td>
</tr>
<?php
// print body of table
for( $i = 0; $i < count($picinfo); $i++) {
   echo "<tr>";
   echo "<td>{$picinfo[$i][0]}</td>";
   echo "<td>{$picinfo[$i][1]}</td>";
   echo "<td>{$picinfo[$i][2]}</td>";
   if(strlen($picinfo[$i][3]))
      echo "<td>{$picinfo[$i][3]}</td>";
   else
      echo "<td>&nbsp;</td>";
   echo "</tr>\n";
}
?>
</table>
</body>
</html>

The Pseudocode

Read data base info from file into array
Randomly choose four records of info
Display pictures and info for the four records in a table