AJAX/PHP rating script

Subscribe to our newsletter and receive a weekly report with the best websites and resources for webmasters.

get the feedDo you like our posts? Wanna stay informed and be the first to know when we publish new content?
subscribe to our newsletterWeekly newsletters with the best websites organized by categories and other news.

No matter what your website is about (blog, articles directory, web directory, ecommerce website etc.) is always good to have a rating system for your entries. It can help you organize better, make a top, display by popularity or by rating, it can modelate you, tell you how you should and shouldn't do and lots of other things. Offering to your visitors the chance to rate your items will also increase the effectiveness of your website and its popularity.

In this tutorial we will learn how to implement a rating system to a blog. Following the same criteria like in every tutorial, I will try to explain the code rather than just pasting it here and letting you figure out how's working. We will work with two tables, one of them will hold the blog entries and the other one the ratings. Our rating system will use incremental values from 1 to 5 and some AJAX magic (you're not in 2007 if your rating needs to reload or navigate between pages to insert the votes) with the help of xajax which is a very good open source PHP class library. You can do a LOT of things using it but we are going to focus on our small project. The rating system itself will be similar in looks with the one that I've seen on Sitepoint if I'm not wrong. I like this kind of look because it's not so shiny and glossy like all the other ajax/php rating I've seen on the internet and it kinda gives a serious impression. Anyways, it's very, very easy to configure the html part of our application.

CREATE TABLE `articles` (
  `ID` int(11) NOT NULL auto_increment,
  `a_title` varchar(255) NOT NULL,
  `a_subtitle` tinytext NOT NULL,
  `a_content` text NOT NULL,
  PRIMARY KEY  (`ID`)
) ENGINE=MyISAM;

INSERT INTO `articles` VALUES (1, 'This is the article title', 'This is the article subtitle', 'This is the article content This is the article content This is the article content This is the article content This is the article content ');
INSERT INTO `articles` VALUES (2, 'This is the article title', 'This is the article subtitle', 'This is the article content This is the article content This is the article content This is the article content This is the article content ');

CREATE TABLE `articles_ratings` (
  `ID` int(11) NOT NULL auto_increment,
  `article_id` int(11) NOT NULL,
  `rating_value` tinyint(2) NOT NULL,
  `rater_ip` varchar(20) NOT NULL,
  PRIMARY KEY  (`ID`)
) ENGINE=MyISAM;

Our example will be formed from 2 visible pages, one will list the articles and the other one (linked) will display the details. Our rating table will store the value of the rating, the article id (necessary to build the relations and output data/ratings) and also the ip of the visitor. At start, I was thinking to allow only registered members to rate but that would only complicate things. You can adjust the script to require membership.

What I like at xajax is the fact that it doesn't needs javascript enabled (it's Unobtrusive), you work only with PHP (no Javascript knowledge required), it's easy to configure and it's free.

I will skip the creation of the first page which has nothing important on it but an sql SELECT to pull the articles from the database and link them to the 2nd page which is where we'll stop and show/explain our code.

<?php
	require_once("db.php");
	require_once("xajax/xajax.inc.php");
	require("functions.php");
	$xajax = new xajax();
	$xajax->registerFunction("insert_rating");
	$xajax->processRequests();

	$query = mysql_query("SELECT * FROM articles WHERE ID ='".mysql_real_escape_string($_GET['ID'])."'");

	echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'."\n";
	echo '<html xmlns="http://www.w3.org/1999/xhtml">'."\n";
	echo '	<head>'."\n";
	echo '		<title>Testing the PHP/Ajax rating script</title>'."\n";
	echo '		'.$xajax->printJavascript();
	echo '	</head>'."\n";
	echo '	<body>';
	if(mysql_num_rows($query)==1)
	{
		$row=mysql_fetch_assoc($query);
		echo '	<h1>'.$row['a_title'];
		echo '</h1>'."\n";
		echo $row['a_content'];
		echo '	<hr />'."\n";
		echo '	<div id="response">'."\n";
		echo '	<table>'."\n";
		echo '		<tr>'."\n";
		echo '			<td align="center" style="width:50px">1</td>'."\n";
		echo '			<td align="center" style="width:50px">2</td>'."\n";
		echo '			<td align="center" style="width:50px">3</td>'."\n";
		echo '			<td align="center" style="width:50px">4</td>'."\n";
		echo '			<td align="center" style="width:50px">5</td>'."\n";
		echo '		</tr>'."\n";
		echo '		<tr>'."\n";
		echo '			<td align="center" style="width:50px"><input type="radio" name="rating" id="radio_1" onclick="xajax_insert_rating(1, '.$_GET['ID'].');" /></td>'."\n";
		echo '			<td align="center" style="width:50px"><input type="radio" name="rating" id="radio_2" onclick="xajax_insert_rating(2, '.$_GET['ID'].');" /></td>'."\n";
		echo '			<td align="center" style="width:50px"><input type="radio" name="rating" id="radio_3" onclick="xajax_insert_rating(3, '.$_GET['ID'].');" /></td>'."\n";
		echo '			<td align="center" style="width:50px"><input type="radio" name="rating" id="radio_4" onclick="xajax_insert_rating(4, '.$_GET['ID'].');" /></td>'."\n";
		echo '			<td align="center" style="width:50px"><input type="radio" name="rating" id="radio_5" onclick="xajax_insert_rating(5, '.$_GET['ID'].');" /></td>'."\n";
		echo '		</tr>'."\n";
		echo '	</table>'."\n";
		echo '	</div>'."\n";
	}
	else {
		echo 'There are no articles to display';
	}

	echo '	</body>';
	echo '</html>';


?>

At the beginning of our code (besides the fact that I included function.php and db.php for the script to work) you will notice that I created a new xajax object $xajax and registered a function (insert_rating) which is located in functions.php. Xajax requires you to register the functions you will work with on the page so it can generate the javascript lines ($xajax->printJavascript()) needed to communicate with it's core. Our function (insert_rating) does a very simple task. It first runs a little check to see if the visitor that wishes to insert a new vote has already voted and if the result is FALSE it will insert the rating. Either way, it returns with a result using an element id (<div id="response">) of our choice ($objResponse->addAssign("response","innerHTML", $response));. I used a div which also holds the rating table because it's unnecessary to show our rating system once the vote has been stored and the response sent back. For our little example we used "addAssign" but xajax is also able to return alerts "addAlert", to do redirects and a lot more.

	function insert_rating($rating, $article_id)
	{
		if(mysql_num_rows(mysql_query("SELECT ID FROM articles_ratings
						WHERE rater_ip='".mysql_real_escape_string(getIP())."'
						AND ID='".mysql_real_escape_string($article_id)."'"))==0)
		{
			if(mysql_query("INSERT INTO articles_ratings
					(`article_id`, `rating_value`, `rater_ip`)
					VALUES ('".mysql_real_escape_string($article_id)."',
					'".mysql_real_escape_string($rating)."',
					'".mysql_real_escape_string(getIP())."')"))
			{
				$response = 'Thank you for voting this article!';
			}
			else {
				$response = 'Ups. A problem. I was unable to save your rating!';
			}
		}
		else {
			$response = 'Sorry but you can only rate once';
		}

		$objResponse = new xajaxResponse();
		$objResponse->addAssign("response","innerHTML", $response);
		return $objResponse;
	}

As you can see in our function above, it works with two parameters: the value of the rating and the article id. Those values will be specified in our html part with an onClick event applied to a checkbox:

<input type="radio" name="rating" id="radio_4" onclick="xajax_insert_rating(4, '.$_GET['ID'].');" />

You will also notice some other functions in our examples (for more functions and code snippets please visit pur snippets section) needed to a better retrieval of the visitors ip address.

Everything else is self explanatory. You may download the full example lower on the page.

No.	Attachments	Downloads
1	Ajax/PHP rating script Archive containing the Ajax/PHP rating script files Uploaded on: 2007-09-21 \| 08:02 am	951
You need to be logged in to download files! Register / Login

More details & rating

AJAX/PHP rating script

Added by roScripts on May-28-2007, 10:44 am

This tutorial will teach you how to create a AJAX/PHP rating script using xajax.

3 comments Bury

BookmarkCategory: PHP » Tutorials » Other

Comments

For coding help and further support please use the forum.

hva6996 says:Thank for share. I'm very need this script.
2008-05-15 | 07:21 am
imspicy says:For some reason when I implement this script, it allow me to rate over and over again without any limit. The function to check if your IP address has already rated doesn't seem to work correctly. Once I get that part fixed, it will be great.
2008-03-26 | 08:27 pm
wizualizacje says:Thanks for the tutorial. This is very helpfull. Regards
2008-01-18 | 04:07 pm

View all / Add comment

AJAX/PHP rating script

More details & rating

Related articles (54)

Comments

→ LATEST NEWS & ARTICLES

→ we recommend