What are our objectives?
If you have already read my pages on simple CGI programming
and my Server Side Include (SSI) page, this is where you
will learn something about when to use CGI & or SSI to
solve a problem. More importantly, you will learn how and when
to combine them to your advantage.
As always, please feel free to help yourself to all the
source code you can carry!
One of the more popular requests I have been getting of late
is for a simple and educational version of the Banner
URL Rotation Program. To keep things
simple, let's just call it the BURP. The fact is,
depending on exactly what we want to accomplish, there are
really two different ways we have to set up our BURP.
Our first scenario is one where we have several image files,
but either no links or a single link that never changes. This
situation allows us the most simple solution, a very small
script that is called using the <IMG> tag.
For most personal pages this method is desirable in that you
can rotate various pictures without having to update your
source code. For a business page, this is a good way to use
several different images to try and draw people to a
particular page or product.
Another popular situation we might find ourselves in, is one
where not only do we want to rotate our image, but we want to
rotate our link information as well. This is found more often
on business sites, whether as a way to feature various products,
or to sell advertising space.
The Daddy BURP therefore requires a bit more programming
effort, and we must use the Server Side Include (SSI) method to
implement the rotation.
Our objectives for this tutorial are to create two very simple,
yet useful programs, and to gain a deeper understanding of
some powerful devices available to you as a webmaster.
Of course, if you are on the computer less changing images
and links you will save electricity. You will also rest easier
which will lower your respiration. All of these things result in
less Carbon Dioxide, a major greenhouse gas. Think about it...
Not too hard, okay?
Why do we need two BURPs?
Maybe you caught the subtle hint contained in our two different
objectives. The answer to our question is what kind of information
we are returning to the browser. With Baby BURP we are
returning only the contents of a graphic file, but with Daddy
BURP we need to also supply link information which is text.
In our earlier CGI & SSI tutorials, we would start each output
with the program code:
print "Content-type: text/html\n\n";
This would instruct our browser to accept the information
returning from our script to be treated as HTML code. As you
might have guessed by now, this is not our only option. In
dealing with images, we have two other popular choices:
Hmmmm. I bet you can figure out which one is for a JPG and
which one is for a GIF file. The reason we have to do this
may seem a little strange at first, but it will make sense
in a moment.
Why do we need to use Content-type?
When your browser receives a web page, it can read through
it and figure out what is what because it already knows how
to handle the more popular file types based on what is called
the extension of the file. The extension of a file are
the characters after the period in the file name. Here are some
familiar examples with their meanings:
JPG graphics file
GIF graphics file
MIDI music file
WAV sound file
Note: MIMEs are not those folks that seem to always
be stuck in boxes, don't
speak and walk into the wind. MIME actually stands for
Multipurpose Internet Mail Extension. Systems
people make heavy use of acronyms because we can't stand
the words that we have created.
The reason we must use the Content-type at the beginning
of our dynamic output is so the browser will know how to decode
the information being sent to it. Look at the banner directly
under here. Each time you load this page, the odds are you will
get a different banner. There are four images in this rotation
The line directly below the graphic is how the CGI program is run
on this system. One important thing to notice now is that there is
nothing in this URL (address) to tell our browser what to do with
the information when it shows up. Then name banner is
only meaningful to us humans, not to our browsers!
The other important point is that our CGI can only return one
type of information. Just one of those limitations I warned you
about. You will see when we get around to our Daddy BURP
that we will be returning text to our browser, not an image.
As with most things in life, you will find that the solution
to that problem is also simple!
Great. Where's the program?
Look down. Just a little. That's it! Believe it or not, this is
the entire Baby BURP program.
Edit the file so that the first line has your path
to the perl language. Usually /usr/bin/perl
works, if not, try /usr/local/bin/perl. Remember,
the first line of all perl scripts must be the
#!/usr/bin/perl. Be sure there is nothing above it!
All your files must be of the same type. If you are
using JPG, change the Content-type to jpeg.
For the best results, use images that are the same
Edit the paths and filenames on the lines starting with
$mypic. If you have less than four images, delete
the highest numbered ones first. If you have more, than
start adding with number 4. Always be certain that the
first one is a zero.
Save the file as banner.cgi
Upload the file to your cgi directory and set the permissions
to owner-read/write/execute, group-read/execute, and
others-read/execute. The unix command is: chmod 755 banner.cgi
If you are on a unix server, be sure to upload the file as
Add the line below to your document. You may need to change the
path to your cgi-bin as this does vary from system to system. If
you have already installed any CGI programs on your system, you
should be able to figure this out pretty fast. If not, contact
your system administrator.
How does this program work?
Again, another great mystery of the system's world has been exposed
to you. The answer is, "Very simply!"
This line tells our server where to find the perl language.
This tidbit tells the server to send the information out ASAP.
The next four lines is what we call an array or list.
This is not the best way to fill one up from a technical position,
but it should result in the fewest typographical errors. Notice
that our first array element is the number zero, not one.
This is how we pick a random number between 0 and the highest
item in our array. The srand performs what is called a
seeding of the random number generator. If this is not
done, we would always get the same result when rand is
called. Since time always marches on, it makes a good seed.
srand(time ^ $$);
$pick = rand(@mypic);
Here is how we tell the browser what to expect.
print "Content-type: image/gif\n\n";
We then open our randomly selected file. Notice that we have
replaced the numerals such as (0,1,2,...) with the variable
$pick that is our random number.
With the least amount of code possible we send the file out
to the browser.
print <BANNER> ;
Being considerate programmers, we close the file to make certain
that valuable system resources are not tied up.
Where's Daddy BURP?
Just place your mouse pointer