Ajax Star Rating

After reviewing the CSS for a star rating system at komodomedia.com, I decided to make my own star rating system using AJAX. There are a few out there, one is another really good one created by Ryan Masuga over at www.masugadesign.com. I really could have just used his, but oh no, I needed to challenge myself – and I wanted to add feature or two. After a few days I came up with my own unobtrusive ajax star rating system.

Download     See Demo

star rating example

Bug Fixes in v1.7

    Fixed ratings appearing in the correct order. Order by highest rated AND most ratings. (Sebastians Comment)

Features

    Non-obtrusive (works with javascript disabled)
    Does not allow multiple votes – checks against IP and cookies
    Tested in IE 6, IE 7, Firefox 2.x, Opera and Safari
    Pre-loads all images
    Easily style text using the stylesheet
    Precise rating to a 2 decimal place
    Automatically pull top rated based on a custom number – NEW!
    Ability to set ‘novote’ option in the function to not allow users to vote (same thing as static)
    Checks not only against IP upon vote but now includes a cookie check
    Display rating information you want using true or false
        Show rating out of 5
        Show rating in percentage format
        Show number of votes

Installation

Open up includes/rating_config.php and change the mysql database connection info:

$server = 'localhost'; // Database server (default localhost)
$dbuser = 'user'; // Database user
$dbpass = 'pass'; // Database pass
$dbname = 'test'; // Database Name

Now upload the files/directories to your web server. I have named all files
with the prefix "rating_" to not clash with your other files.

You will need to create the necessary tables for the rater. You can either run "create_ratings_table.php" OR paste the following SQL into your phpMyAdmin.

CREATE TABLE `ratings` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`rating_id` int(11) NOT NULL,
`rating_num` int(11) NOT NULL,
`IP` varchar(25) NOT NULL,
PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1;

Usage

The following 3 lines must be on your page.

include("includes/rating_functions.php");

<link href="css/rating_style.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="js/rating_update.js"></script>

Now to call the rating stars to display on your page, simply add:

echo pullRating(35,false,false,false,NULL);

Param 1: 35 would be your unique rating id (usually people put $_GET['id'] in there)

Param 2: The first false statement is if you want it to show the rating out of 5.
Example: 3/5. Change this to true if you want to display the rating.

Param 3: The second false statement is if you want to show the rating in percentage format.
Example (50%). Change this to true if you want to display the percentage.

Param 4: The last false statement if if you want to display the total amount of votes
Example (23 Votes). Change this to true if you want to display the amount of votes.

Param 5: The last statement is if you want it to be static (no one can vote) or if you want people to be allowed to vote. NULL is the default but if you only want logged in users to vote then you can change this to ‘novote’. If you’ve used Ryan Masuga’s star rating system then you’ll find this does the same thing as ‘static’.

Getting the top rated items

This feature was added upon request, if you read the comment’s then you’ll know who requested it. Here is an example of the function being used

echo getTopRated(10,'articles','article_id','article_title');

What this is doing getting the top 10 rated articles. You must specify how many top rated items you want to return, fallowed by what table name you are looking in, followed by the id in the table (auto incremented, primary key) and the title/name you want to display.

The function will return the following:

    Baby Born (5.0)
    NY loses to BC (3.4)
    Man loves food (3.2)
    Nike to sponsor vegetables (1.5)

This is returning the article_title along with the rating for it.