June 26, 2007

Add star ratings to Web pages with AJAX Star Rater

Author: Dmitri Popov

If you want feedback on the contents of your Web site, let your visitors rate your pages. Some content management systems include this functionality by default, but if yours doesn't, you can add rating capabilities with AJAX Star Rater, a PHP/MySQL application that allows you to display AJAX-ified star rating bars on any Web page.

AJAX Star Rater doesn't include an automatic installer, so you need to do some manual tweaking to make it work. Start by downloading and unpacking the latest version. You have to create a database for use with AJAX Star Rater using your MySQL manager of choice (e.g. phpMyAdmin) and add the rating table using the following SQL script:

CREATE TABLE `ratings` (
`id` varchar(11) NOT NULL,
`total_votes` int(11) NOT NULL default 0,
`total_value` int(11) NOT NULL default 0,
`used_ips` longtext,
PRIMARY KEY (`id`)
) TYPE=MyISAM AUTO_INCREMENT=3;

Next, open the _config-rating.php file in a text editor and specify the MySQL connection settings, so they look something like this:

$rating_dbhost = 'localhost';
$rating_dbuser = 'root';
$rating_dbpass = 'password';
$rating_dbname = 'ajaxstarrater';
$rating_tableName = 'ratings';

Upload the entire AJAX Star Rater folder to your server, and it's ready to go.

To embed a star rating bar in a Web page, you have to add a few lines of code. First of all, you have to add the following PHP code at the top of the page: <?php require('_drawrating.php'); ?>

Then you have to reference the required JavaScript and CSS files:

<script type="text/javascript" language="javascript" src="js/behavior.js"></script>
<script type="text/javascript" language="javascript" src="js/rating.js"></script>
<link rel="stylesheet" type="text/css" href="css/rating.css" />

And finally, use the following code where you want the rating bar to appear on the page:

<?php echo rating_bar('Rate This Page',7); ?>

As you can see, the rating_bar function has two parameters: the first one specifies the rating bar capture (in this case it's "Rate this Page"), while the second one determines the number of stars used in the bar (7 in this example).

The AJAX Star Rater tool has proven to be quite popular, and the discussion thread on its official page contains a few worthy improvements done by its users. Make sure to check them out if you want to make the tool even better.

Category:

  • Web Development
Click Here!