Simple AJAX Rating Script

I finally decided to implement some AJAX on the website and thought that a good place to start would be to create a rating script so that users could cast votes on articles posted. To make it user friendly I knew I had to go the AJAX route and don't refresh the page between voting and seeing the updates results. So I came up with this simple AJAX rating script written in PHP. I uses MySQL database on back end, but only one table is needed, so that this code could easily be changed to accommodate just about any database or even run off a flat file with some additional effort.

I will provide a quick explanation on how to use the script on your website out of the box. The package you can download from files section of this website consists of the following parts:

1. MySQL script to create table - articleratings.sql

First of all we must create a table in MySQL database. You must run the SQL script to do so. The script will create a table of four fields called articleratings. ID field is a simple auto increment sequence to make sure each row in the table is uniquely represented. They should be anyway, but I still created it just in case. ARTICLEID is the id of your article item that users rate. in real usage example this field would be pulled from another table that holds your articles. SCORE is a numeric value (1 to 5 in this script, from lowest to highest) representing article's rating. Finally, IP is user's IP address to make sure no user could vote twice on the same article. Easy enough? Let's move onto the next step.

2. Main rating functions - rating.php

This file contains all functions that are needed to successfully allow rating of articles, but we will take a look only at those that are directly responsible for rating logic.

The user_voted function will return true if there is already an entry in the table for current IP and false otherwise. It is needed by other core functions to tell it if the rating widget must be inactive because current user has already voted. The function expects article id as an argument.

get_article_rating does just what it says in its name - returns all HTML for the rating widget. It accepts two arguments - article id and a boolean true/false to determine if current user has already casted his vote on this article. For the second parameter you should use return of user_voted function explained earlier. Note how returned HTML is enclosed by a parent element. You need this for JavaScript code in rating.js to work properly. It does not have to be a span element, could be just about anything else.

Finally we get to the function that actually rates an article when user clicks on the rating widget therefore submitting his vote. It accepts two arguments - article id and its score as submitted by user. it will check if there's already a vote for current IP address of the client and perform voting it there is none. This way duplicate votes on the same item will not be taken into account.

3. JavaScript library - rating.js and callback file - callback.php

In here we create our The XMLHttpResponse and define JavaScript functions. It's all pretty basic and should work right out of the box, so I won't spend time explaining it in detail. One thing worth mentioning is that I decided to use a callback function to run functions from rating.php file itself instead of creating a new page to handle user requests. This code will also pre-load all images used by the rating script, so if you change their names you must also edit this js file. JavaScript was tested in Firefox 2.0.0.9 and IE 6, so it might need additional tweaking for other browsers.

4. Images - rating_star_off.gif, rating_star_on.gif, rating_star_on_voting.gif

Three images are used by the script. First is inactive grey star, second is yellow active star to represent current vote value for each article and the last orange star is to show your own vote value as you put mouse over the stars. The third image is only made so that you can differentiate between current article rating and the one you're about to cast.

5. Main page where we put it all together - index.php

index.php includes all the lines needed to show the rating widget on your page. Tiny bit of CSS is included to change user mouse pointer as he hovers over the widget. For even more simplicity, I chose to have a global database connection object going, but it does not have to be this way of course. In the example provided get_article_rating() takes 1(one) as the article id to vote on.

This is all that is needed to get your rating widget going. If you got any question please leave a comment here and I will make sure to get back to you. Of course, the script isn't perfect, so feel free to change and expand on it.

Download Simple AJAX Rating Script

Posted by P1x44r on 26/11/2007 19:54 View Comments Comments (16)