How to make a simple visitor counter using PHP
Imagine you want a visitor counter on your homepage. Sure, there are plenty of free ones out there, but I’m never happy about embedding third party code in my website, and besides wouldn’t it be more fun to make your own?
Of course it would!
Here’s what we’ll be making
Number of visitors to this page so far:
N.B. This counter does work. Try closing your browser and then reopening it!
Count all the visitors!
In order to do this, the first thing we’ll need is a method of keeping track of the number of visitors to the site. You could store this number in a database, but that’ll make things a bit more complicated. Therefore, for the purposes of this demonstration, I’ll use a plain and simple text file.
In addition to this, we’ll also need a method of identifying unique visitors, as the counter should only increment once per visitor, not once per page view. For this we’ll use a session variable.
As you can see I’m using four of PHP’s filesystem functions to create, read from, write to and close the text file. I’m also checking if our session variable is set before incrementing the counter. So far, so good …
Display the number as an image
Now all we need to do is read the number stored in the text file and display it on our web page as an image. Here are the steps I’ll take to accomplish this:
- Pad the counter value with zeros, so that it has a length of five digits in total. For example a value of one will display as 00001.
- Split the counter value into an array of individual digits. This means that “00001” would become
["0", "0", "0", "0", "1"]
- Using PHP’s
imagecreatefrompngfunction, create a reference to six png files (one to act as the canvas and five individual digits).
- Using PHP’s
imagecopymergefunction, combine these six png files into one.
- Output the finished image an free it from memory.
The code for this is a little more complicated, so let’s step through it bit by bit. Steps one and two are achieved thus:
$counterVal = str_pad($counterVal, 5, "0", STR_PAD_LEFT); $chars = preg_split('//', $counterVal);
Now, before we can start manipulating images with PHP we need an image set to work with. I’ve chosen to go with the Danielle Young’s free Otto number set, which I’m using with her kind permission. If this isn’t your kind of thing, a quick Google search should uncover a few more, for example: http://www.bittbox.com/freebies/free-glass-number-icons. Whatever you decide to use, please make sure that you abide by the author’s terms and conditions.
In preparation for dynamically creating the final image, I have made one transparent png file (canvas.png) which will act as a canvas. This measures 296px by 75px. I have also resized the individual images to a dimension of 56px by 75px and saved them with the same file name as the digit they represent. These will be placed onto the canvas as shown in the diagram:
I can now use
imagecreatefrompng to get a reference to canvas.png, as well as to the individual digits, stored in the elements of the
$im = imagecreatefrompng("canvas.png"); $src1 = imagecreatefrompng("$chars.png"); $src2 = imagecreatefrompng("$chars.png"); $src3 = imagecreatefrompng("$chars.png"); $src4 = imagecreatefrompng("$chars.png"); $src5 = imagecreatefrompng("$chars.png");
Then we need to fit the individual digits onto the canvas and send the result to the browser to display.
We can use
imagecopymerge to accomplish the first part. The parameters it takes are as follows:
- destination image link resource
- source image link resource
- x-coordinate of destination point
- y-coordinate of destination point
- x-coordinate of source point
- y-coordinate of source point
- source width
- source height
- pct (we can just leave this at 100).
imagecopymerge($im, $src1, 0, 0, 0, 0, 56, 75, 100); imagecopymerge($im, $src2, 60, 0, 0, 0, 56, 75, 100); imagecopymerge($im, $src3, 120, 0, 0, 0, 56, 75, 100); imagecopymerge($im, $src4, 180, 0, 0, 0, 56, 75, 100); imagecopymerge($im, $src5, 240, 0, 0, 0, 56, 75, 100);
With that done we need to send the image to the browser and free it from memory:
header('Content-Type: image/png'); echo imagepng($im); imagedestroy($im);
Here’s the complete listing:
Now you can write the following in your HTML code and have it display your very own visitor counter:
<div class="visitor-count">Number of visitors to this page so far:</div> <img alt="Hit counter" src="counter.php" />
You can see the finished script in action at the top of the page. I hope you have found this useful!