I was recently asked by someone to write a page counter, which would work seperatly for EACH page. I came across this cool “retro counter” jQuery plugin, which I thought I would use to create an AJAX based hit counter (using jQuery, Perl, AJAX, and the flipCounter plugin)
Ok – first of all lets see what exactly we are gonna be creating:
http://www.mywebsitedesignersblog.com/examples/counter/counter.html and http://www.mywebsitedesignersblog.com/examples/counter/counter2.html (same example, but showing how it works on seperate pages)
As you can see, we have a nice little counter that is showing us the number of page views this specific page has had. You can also see that for each page, we can keep a seperate counter.
Ok – now please download the attachment here: download ZIP
Now please follow the instructions below on how to set this script up.
1) First of all you need to create a mySQL database in your hosting control panel (each web-server will differ). Then once its made, you need to run the following SQL command to create the table we need:
CREATE TABLE IF NOT EXISTS `Page_Counter` ( `page_id` int(11) NOT NULL AUTO_INCREMENT, `hits` int(11) NOT NULL, `url` char(255) NOT NULL, PRIMARY KEY (`page_id`), KEY `url` (`url`), KEY `url_2` (`url`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1
2) Now in counter.cgi, please open it using NotePad++ (or whatever you use to edit CGI scripts). You can find NotePad++ here, in case you don’t already have it. Once that file is open, please find:
# CONFIG VARIABLES my $platform = "mysql"; my $database = "db_name"; my $host = "localhost"; my $port = "3306"; my $user = "username"; my $pass = "password!?";
Tweak the username, password, database name, and also the host and port number (if you host doesn’t provide mySQL on the standard host/port). You may also have to tweak the “shebang” line to wherever Perl is accessable on your server.. i.e this line:
3) Now upload counter.cgi into your /cgi-bin folder and CHMOD it to 755.
4) Now in your public_html (or www, or whatever web folder your host uses), crease a new sub-folder called “counter”. Upload all the .js files there, as well as the /img folder
Between your <head> … </head> parts, please add:
6) Now just add this HTML wherever you want the counter to show:
7) There are a couple of final tweaks you need to do in counter.js. Please open it and find:
var counter_url = '/examples/counter/counter.cgi'; var log_each_page = 1; /* set this to 1 if you want to log each seperate page. set to 0 if you want to log the WHOLE site as 1 page*/
The 1st option needs to be set to the location of counter.cgi (ideally set this to the “relative” URL, so it will work on both www. and non-www versions of your site)
The 2nd option can be changed to 0 if you want to just have an overall page counter (i.e for it NOT to track specific pages)
Thats about it!
Feel free to ask any questions, make suggestions etc. Enjoy!