A text access counter
The Increment subroutine
The complete text access counter script
Seeding the Counter
Adding the Counter to Your HTML Page
With Server Side Includes
Without Server Side Includes
Creating the Template File
Modifying the access.pl Script
A graphical access counter
Incrementing the Counter
Creating the GIF Image
Returning the Graphical Counter Image
The Graphical Counter Script
Calling the Counter with the <IMG> Tag
A graphical access counter
The graphical access counter presents more challenges than the text counter. The graphical counter has the same basic functionality as the text access counter, such as reading in the counter value from the counter file, incrementing the counter value, and saving the value in the counter file. However, it must also create a graphical image that is a representation of the access count. For example, if the access count were 293, the graphical access counter would return an image containing the number 293.
The easiest way to accomplish this is to have a GIF file for every possible number the access counter can reach. For example, if the counter value were 769, your graphical counter script would only have to return the GIF file containing the number 769. However, doing the counter this way wastes a great deal of disk space. If your access counter only goes up to 1,000, you have to create and save 1,000 different GIF files on your Web server. Even if these files are 1K or less apiece, this still amounts to nearly 1 megabyte in disk storage. Maybe 1 megabyte doesn't seem like that big of a deal to you, but keep in mind that 1,000 accesses on the World Wide Web is a very small number. Realistically, if you have a moderately popular site, you want your counter to reach at least 100,000. It would take a tremendous amount of disk space and a lot of time to create files for this many numbers.
The more difficult method for returning a graphical image for the counter value is to create the graphical image dynamically from ten existing GIF files for the digits 0 through 9. Your CGI script would construct the graphical counter image from these digits by combining the GIF files in a new image. For example, if the counter value were 769, your CGI script would take the digit file for the 7, append the digit file for the 6, and then append the digit file for the 9, creating a GIF image representing the number 769.
As you can imagine, this approach is much more difficult than the text access counter example. To write the code for this GIF creation, you need to know quite a bit about the GIF file format and must be able to write routines that create a single GIF image from multiple existing GIF files. Although you could probably learn how to do this, there is a easier way.
One of the reasons to use a common language for CGI scripting is to be able to use library routines written by other people. Well, now is a perfect time to take advantage of one such library. Thomas Boutell has written a graphics library of functions in C that handle GIF creation and manipulation. This library, called gd, is available from http://www.boutell.com/gd/. His only restriction on the use of the gd library is that the credit and copyright given to the Quest Protein Database Center, Cold Spring Harbor Labs remain intact in all derived works. In other words, if you distribute the gd graphics library files with your code you cannot remove the copyright lines in the gd files. Although Lincoln Stein has written a Perl interface to the gd graphics library called GD.pm, the following graphical access counter does not use GD.pm. To use GD.pm, you must still download and install the gd graphics library, and GD.pm may not be easily installed on all systems. For this reason, the C programming language is used to create the graphical counter script for this graphical access counter example.
Before you start creating the graphical counter script, you should download and install the gd graphics library. You can download the source files from Thomas Boutell's Web site, http://www.boutell.com/gd/. Once you have downloaded and uncompressed the source files for gd, you should find a README file that contains directions for installing the graphics library.
Most of the code for the graphical access counter script is logically similar to the code for the text access counter. There is one major difference, however. In the text access counter example, the counter file contained the current count. When the text access counter script is called, it increments the counter value before displaying it in the Web page. The graphical counter, in contrast, stores the next counter value in the counter file instead of the current counter value. When the graphical counter script is called, it displays the value read from the file as the current count, not the incremented value. This makes it easier to create the GIF image, as explained in more detail in the section "Creating the GIF Image."