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

Submit star ratings with fetch()

Modern browsers can post a rating without the older XMLHttpRequest/new-window pattern. Return JSON from the PHP endpoint and update the result area only after the request succeeds.

document.querySelector('#rating-form').addEventListener('change', async (event) => {
    if (event.target.name !== 'rating') return;

    const body = new FormData(event.currentTarget);
    const response = await fetch('rating-submit.php', {
        method: 'POST',
        body,
        headers: {'Accept': 'application/json'}
    });

    if (!response.ok) throw new Error('Rating could not be saved');
    const result = await response.json();
    document.querySelector('#rating-result').textContent = result.message;
});

The PHP endpoint should validate the 1–5 value, verify the page/content identifier, check the CSRF token, use a prepared statement, and enforce the application's duplicate-vote or rate-limit policy.

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

Features of this rating script

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

Rating scale in same page

We have seen how users can submit rating in a new window. Now here we will add a new feature by including rating in the same page. There is not much difference in the basic concept of the script and database structure remains same.

We will keep the star rating scale in a include file and connect it to different pages.

require "../common-tags2.php";

Download Rating Script using Ajax PHP MySQL

Scripts

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect: