Simple Ajax Rating System

A quick, easy and customisable solution for displaying real-time rating bars on your webpage. Requires PHP and MySQL. A flat-file version will be coming soon. Voting is restricted to one-per visitor based upon IP address.

stars | shields | thumbs | hearts | discs | flags

How Does it Work?

1. Displaying the rating bar

The DIV that contains the rating bar echoes a PHP function called showRating(x) where x is the unique ID of the object which is being rated. The function itself resides in the ajax_rate.php file which is an include on this page. The showRating(x) function connects to the database and shows the current rating for the unique ID passed to it. If the visitor's IP address is already listed as voted, a static bar is shown which cannot be clicked on. If the visitor hasn't voted yet, a rating bar is shown with click-able stars.

The granularity of the rating is rounded to 2 decimal places.

2. Passing the clicked-on rating to the database...and back again

Clicking on a star triggers an AJAX call, once again, to the ajax_rate.php file. This file takes the unique ID of the object, the rating clicked on, the maximum rating possible (in this case 10), and the width of each rate unit in pixels (in this case 32). It stores the rating - along with the visitor's IP address - in the database and returns an okay signal back to the original page which shows a javascript alert. That's it.

Installation

• Download the ZIP file
• Unpack, preserving the directory structure
• Use the 'ajax_rate.sql' file to create your database table
• Edit the 'ajax_rate_db.php' file to reflect your database connection
• Upload everything to your webspace
• Visit 'http://www.yourdomain.com/ajax_rate_example.php' in your browser to see it working

Including a Rating Bar on your Page (in depth)

To include a rating bar on your page, you need to:

1. Include the database connection file:
   include('includes/ajax_rate_db.php');
   
   
2. Include the main AJAX file:
   include('includes/ajax_rate.php');
   
   
3. Reference the image to be used:
   $rating_image = './images/starrating32.gif';
   
   
4. Include the rating stylesheet - Important! Must be included using PHP as it contains dynamic values:
   <style type="text/css">
   <?
   include('./css/ajax_rate.css');
   ?>
   
   
5. Include the JavaScript file:
   <script language="JavaScript" type="text/javascript" src="js/ajax_rate.js"></script>
   
   
6. Include the function call in a DIV:
   <div id="rate"><?=showRating(0); ?></div>

The example page included in the ZIP file is ready to go with all the relevant variables and includes - you simply need to edit your database details in the 'ajax_rate_db.php' file.

Changing the Rating Bar Image

The actual rating bar is a single image - the sequence is: placeholder, hover and current rating from top to bottom.

Changing the rating bar requires a few tweaks. Click to see how it looks with different images: stars, shields, thumbs, hearts, discs, flags. They're all included in the ZIP file.

First off, if you want use your own image, you'll need to create it first. It should be three times high as it is wide - e.g., 16 pixels by 48 pixels or 32 pixels by 96 pixels.

Secondly, you need to change the '$rating_image' variable in whatever page is displaying your rating bar. This variable is picked up inside the stylesheet.

Changing the size of the image

If you wish to change the size of your image, you'll need to edit the stylesheet to reflect the new dimensions - there are comments to help you out where deemed necessary. You'll also need to change the '$rating_object_width' variable in the 'ajax_rate.php' file to reflect the new size of your rating image.

A smaller, 16 x 16 image featuring stars is included in the ZIP file with the corresponding CSS commented-out in the stylesheet.

Changing the Maximum Rating

You can change the maximum rating by editing the '$max_rating' variable in the 'ajax_rate.php' file. The default value is 10.

Disabling the JavaScript Alert

If you wish to disable the JavaScript alert, you can do so in the 'ajax_vote.js' file. Simply comment out the following line:

alert(response_alert_text);

Incidentally, it shouldn't be that difficult to pass extra variables to this alert, i.e., the vote they placed or the current rating.

MySQL Table Structure

Nice and simple.

CREATE TABLE `ajax_rate_votes` (
`id` int(25) NOT NULL default '0',
`total_votes` int(11) default NULL,
`total_value` int(11) default NULL,
`used_ips` longtext NOT NULL,
PRIMARY KEY (`id`)
) TYPE=MyISAM;