Rating script in 1 to 5 star scale using PHP MySQL and Ajax

This is a simple rating script where users are asked to rate an article in a scale of one star to five star.

To understand this script you must have knowledge of PHP MySQL and Ajax concept. If you are not yet comfortable with Ajax then you can read the basic rating script using PHP and MySQL

For Demo of this script , click the button towards the end of this page.

Features of this rating script

Related Tutorial
• Displaying rating in same page

Common page so easy to integrate across several pages and easy to change or modify.
Rating scale of 1 to 5 stars is opened in a new window with period buttons for users to select.
On Selection the data will be added to table without refreshing the page ( Ajax ) and the window will close automatically.

MySQL Table

To keep the script simple we have used one single table and here is the structure.

CREATE TABLE IF NOT EXISTS `plus2net_rating` (

  `rating_id` int(10) NOT NULL AUTO_INCREMENT,

  `rating` int(1) NOT NULL,

  `page_name` varchar(100) NOT NULL,

  PRIMARY KEY (`rating_id`)

) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Unique Page name.

Each page should have one unique identification number or page name and this is to be passed to our script as we are using common page to display the rating window.

Integrating the rating page

From each page of your site you can integrate the rating window by including it.

require "common-tags2.php";

Inside this common-tag2.php page we will keep the radio buttons to receive user selection. Each radio button is connected to Ajax function by onClick event and it passes the rating value to the ajax function.

<?Php
echo "<br><br><div id='rating-box' style="text-align:center;border:1px solid red;width:550px;">Please  rate this Article on one to five scale<br>";
echo "<input type=hidden id=page_name name=page_name value='$page_name'> 
<INPUT TYPE=RADIO NAME=rone Value=1 onClick='ajax_rating_Function(1)';><img src=images/star.gif> <INPUT TYPE=RADIO NAME=rone Value=2 onClick='ajax_rating_Function(2)';><img src=images/star.gif><img src=images/star.gif> <INPUT TYPE=RADIO NAME=rone Value=3 onClick='ajax_rating_Function(3)';><img src=images/star.gif><img src=images/star.gif><img src=images/star.gif> <INPUT TYPE=RADIO NAME=rone Value=4 onClick='ajax_rating_Function(4)';><img src=images/star.gif><img src=images/star.gif><img src=images/star.gif><img src=images/star.gif> <INPUT TYPE=RADIO NAME=rone Value=5 onClick='ajax_rating_Function(5)';><img src=images/star.gif><img src=images/star.gif><img src=images/star.gif><img src=images/star.gif><img src=images/star.gif>";
echo" </div>";
?>

rating-ajax.js

This is the JavaScript file having the Ajax function inside. It receives two data from the main page. One is the user rating and other one is the unique page name. These two values will be posted to our backed script rating-window-ajax.php file for storing in database table.

rating-window-ajax.php

This file receives rating value and unique page name from JavaScript file. Then it insert the same to table by using pdo insert command.

$sql=$dbo->prepare("insert into plus2net_rating (rating,page_name) values(:rating,:page_name)");
$sql->bindParam(':rating',$rating,PDO::PARAM_INT, 1);
$sql->bindParam(':page_name',$page_name,PDO::PARAM_STR, 100);

Displaying the rating of pages ( display.php ).

Displaying of rating is left to users to customize according to their requirement but we have given one simple query page display.php to display the total count of ratings and its average value. By clicking the page name users can see the all the ratings of that particular page.

select count(rating_id) as no, FORMAT(avg(rating),1) as avg1, page_name from plus2net_rating group by page_name

Displaying the top five

This query page can be further modified to display the top rated pages, or getting the top five rated pages by adding order by and limit SQL commands to our above query.

select count(rating_id) as no, FORMAT(avg(rating),1) as avg1, page_name from plus2net_rating group by page_name order by avg1 desc limit 0, 5

Display rating scale in same page.

Ajax Visitor star rating script