How To Create HTML Code For Counters

How To Create HTML Code For Counters
Page content


To implement some useful HTML code for counters, you are going to have to find a way to store data used to determine the counter value. Luckily this is not a problem when it comes to websites. You can always rely on a database to do this for you.

Unfortunately by the very nature of HTML, it is not possible to store persistent data within the confines of HTML. Therefore the HTML will need some help preferably from a server-side language like PHP, JSP, ASP.NET, RUBY and any others out there.

In this article I will show you how to save the persistent data for the counter index in a database using PHP as our server-side code to complement the HTML.

The HTML Source Code for the Counter

The counter can be in the form of text or in the form of an image. The image on the left shows both samples. Both styled to look the same. Seeing it is possible to style the counter to look similar to the one with the image, it makes more sense to just go with the text based version as dynamic images have overheads to overcome that are beyond the scope of this tutorial as compared to simple text.

The source code you would need to attach either of these counters to your page is:

You are visitor number

The code above uses a text-based solution while the code below uses a more complicated image based solution which I have included just for your knowledge, but we will not need to implement it.

You are visitor number

The Server Side Source Code For The Counter

The server-side code needs to determine is if the visitor is unique. In this case it can use cookies or IP addresses for detecting that the user has previously visited the website. If it is a hit counter then of course this does not apply as hits can count repeat visitors.

This code assumes that we are going to use the IP address to determine who has previously visited and who has not. Take note that using IP addresses for determining who is unique is not a full proof method and the details are beyond the scope of this article.

Also assumed is that you have already got a database set up on your web server with a table holding the IP addresses which is constrained to hold unique items.

The code starts off by retrieving the IP address using the built-in PHP variable $_SERVER[‘REMOTE_ADDR’] as follows:

function get_count(){$ip_address = $_SERVER[‘REMOTE_ADDR’];mysql_query(“INSERT INTO ip_addresses (ip) values (’$ip_address’)”);$result = mysql_query(“select COUNT(*) from ip_addresses”);return mysql_result($result, 0); }

The code above returns the correct result whether the insert fails or not. If it fails it is because the particular IP address is already in the database, if it succeeds well and good. Either way the figure it returns after counting is what is expected as we want to display total users ever visited up to that point in time.

The get_count() function above would be placed somewhere before the code where it is used in the HTML file wrapped in these tags. If you were to use cookies instead of IP addresses then you would use the built in PHP variable $_COOKIE[’name_of_cookie’] instead of $_SERVER[‘REMOTE_ADDR’].


If you were counting hits instead of visitors you would not need to save the IP addresses. You would need a table with a single row and an integer value of zero, which is incremented by one every time a user visits the page.

Follow these tips on [creating a site map for a website](/tools/creating a site map for a website) to learn more about web development. You can also have a look at this article on other resources for free web design elements.