The Important Bit!

Javascript (jQuery) , Perl and AJAX Retro Page Counter

July 27th, 2011

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:

#!/usr/bin/perl

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

5) Now in your HTML pages you need to actually add the javascript to show the counter!

Between your <head> … </head> parts, please add:

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script src="/counter/jquery.easing.1.3.js" type="text/javascript"></script>
  <script src="/counter/jquery.flipCounter.1.1.pack.js" type="text/javascript"></script>
  <script src="/counter/counter.js" type="text/javascript"></script>

Change /counter to wherever you located these Javascript files.

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!

Categories: jQueryPerl Coding


Comments

Related Posts: