04/01/2021 PHP Star Rating System with JavaScript - Phppot

helping build websites Shop Services Testimonials Blog About Con

eCommerce PHP Star Rating System with JavaScript Hi, I’m Vincy. I help build websites
Components Last modified on July 26th, 2019. and I’m available for freelance work.
Files
Star rating feature allows the user to grade the service, product, web page, etc. [email protected]
UI Star rating also allows the owner to understand the user preference and improve
Performance the quality accordingly. As for the general users, for example, in a shopping cart
Contact Form - Iris
application with star rating will help users to search for highly rated products.
Framework

PHP

Learn PHP
PHP Introduction
PHP Basics
Contact Form
Comments System
Types, Variables &
Operators
PHP Strings
PHP Arrays
PHP Functions
PHP OOPS
“Not only did she get back to me right aw
PHP Forms
but she provided exactly what I was looki
Advanced for, and I was able to essentially drop the
PHP AJAX code directly into my solution ...” read mo
Country-State-City
Example: Cascading Implementing five-star rating using PHP is very simple. We have seen several Wendell Koi, SeaPro Solutions Inc, USA
jQuery AJAX examples for the PHP star rating system. Let us create a PHP star rating
Dependent Dropdown
in PHP system only with JavaScript without loading jQuery or any third party libraries.
Load Dependent See dynamic star rating with jQuery post if you want PHP star rating code with
Dropdown on Multi- jQuery. In this example, the five-star rating option is shown to collect user rating
Select using PHP and
jQuery for restaurants. The user-based rating is added by initializing userid at the
AJAX Based Login beginning of the code. You can replace this initialization by integrating your user
Registration System authentication code. Once the user rates a restaurant, then he could not rate the
with jQuery Lightbox
same again.
Create AJAX-Based
PHP Event
Management System The restaurant and its ratings are stored in the database. The restaurant results
with Bootstrap
are listed row by row with the star rating option. When the user rates a
How to Create
Facebook Like Infinite
restaurant the AJAX call will be sent to the PHP to insert rating for the
Scroll Pagination using restaurant. The added ratings are displayed with the highlighted stars.
PHP and jQuery
Facebook Like Header
Notification in PHP Database Script for Star Rating
Sorting MySQL Row
Order using jQuery
This SQL script is with the create statements and the data dump for the
AJAX Pagination with
PHP tbl_rating and tbl_restaurant tables.
Change Order of
Images in Photo --
Gallery with Drag and -- Table structure for table `tbl_rating`
Drop using PHP AJAX --

PHP AJAX CREATE TABLE `tbl_rating` (

Programming `id` int(11) NOT NULL,
PHP Star Rating `user_id` int(11) NOT NULL DEFAULT '1',
System with `restaurant_id` int(11) NOT NULL,
JavaScript `rating` int(2) NOT NULL,
`timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CU
Events Display using ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
PHP AJAX with CLNDR
Calendar Plugin -- --------------------------------------------------------
RESTful API
--
PHP Databases -- Table structure for table `tbl_restaurant`
PHP Sessions and --
Cookies
CREATE TABLE `tbl_restaurant` (
Error and Exception `id` int(11) NOT NULL,
Handling `name` varchar(100) NOT NULL,
`address` varchar(150) NOT NULL
File Upload
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
Files and Directories
--
PHP Date Time
-- Dumping data for table `tbl restaurant`
PHP XML
PHP Code Samples
Library
List Restaurants with Star Rating Option
https://phppot.com/php/php-star-rating-system-with-javascript/ 1/5
04/01/2021 PHP Star Rating System with JavaScript - Phppot
More PHP This code is used to fetch the restaurants details from the MySQL database and
PHP Freelancer to list them with the star rating option. The stars are highlighted by hovering on
the rating element. On page load, the AJAX call will get and display the user
added rating with the highlighted stars. Each restaurant record shows the
graphical representation of the five-star rating with overall rating count.

<body onload="showRestaurantData('getRatingData.php')">
<div class="container">
<h2>Star Rating System using PHP and Javascript</h2>
<span id="restaurant_list"></span>
</div>
</body>

<script type="text/javascript">
function showRestaurantData(url) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("restaurant_list").innerHTML = t
}
};
xhttp.open("GET", url, true);
xhttp.send();

}//endFunction
</script>

getRatingData.php

This PHP code is called with an AJAX request to return the restaurant list with
user rating data. It forms HTML response that will be received at the AJAX
success callback.

<?php
require_once "db.php";
require_once "functions.php";
// Here the user id is harcoded.
// You can integrate your authentication code here to get the logged in
$userId = 1;

$query = "SELECT * FROM tbl_restaurant ORDER BY id DESC";

$result = mysqli_query($conn, $query);

$outputString = '';

foreach ($result as $row) {

$userRating = userRating($userId, $row['id'], $conn);
$totalRating = totalRating($row['id'], $conn);
$outputString .= '
<div class="row-item">
<div class="row-title">' . $row['name'] . '</div> <div class="response
<ul class="list-inline" onMouseLeave="mouseOutRating(' . $row['id']

for ($count = 1; $count <= 5; $count ++) {

$starRatingId = $row['id'] . '_' . $count;

if ($count <= $userRating) {

$outputString .= '<li value="' . $count . '" id="' . $starR

Add Star Rating using PHP AJAX

On the click event of the unclicked star element, an AJAX function addRating()
to call the PHP file insertRating.php. This AJAX function will pass the restaurant
id and the user rating to the PHP file. In PHP, it receives the rating param and
inserts ratting data into the database.

<script>
function addRating(restaurantId, ratingValue) {
var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {

showRestaurantData('getRatingData.php');

if (this.responseText != "success") {
alert(this.responseText);
}
}
};

xhttp.open("POST", "insertRating.php", true);

xhttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
var parameters = "index=" + ratingValue + "&restaurant_id="
+ restaurantId;
xhttp.send(parameters);
}
</script>

https://phppot.com/php/php-star-rating-system-with-javascript/ 2/5
04/01/2021 PHP Star Rating System with JavaScript - Phppot
insertRating.php

<?php
require_once ('db.php');
// Here the user id is harcoded.
// You can integrate your authentication code here to get the logged in
$userId = 1;

if (isset($_POST["index"], $_POST["restaurant_id"])) {

$restaurantId = $_POST["restaurant_id"];
$rating = $_POST["index"];

$checkIfExistQuery = "select * from tbl_rating where user_id = '" .

if ($result = mysqli_query($conn, $checkIfExistQuery)) {
$rowcount = mysqli_num_rows($result);
}

if ($rowcount == 0) {
$insertQuery = "INSERT INTO tbl_rating(user_id,restaurant_id, ra
$result = mysqli_query($conn, $insertQuery);
echo "success";
} else {
echo "Already Voted!";
}
}
?>

Other JavaScript Functions to Create Hover

Effect on Five-Star
The following code shows rest of the functions used in this example to create
the hover highlighting effects on the five-star elements.

<script>
function mouseOverRating(restaurantId, rating) {

resetRatingStars(restaurantId)

for (var i = 1; i <= rating; i++)

{
var ratingId = restaurantId + "_" + i;
document.getElementById(ratingId).style.color = "#ff6e00";

}
}

function resetRatingStars(restaurantId)
{
for (var i = 1; i <= 5; i++)
{
var ratingId = restaurantId + "_" + i;
document.getElementById(ratingId).style.color = "#9E9E9E";
}
}

function mouseOutRating(restaurantId, userRating) {

var ratingId;
if(userRating !=0) {
for (var i = 1; i <= userRating; i++) {

PHP JavaScript Star Rating System Output

This screenshot shows the list of restaurants with the five-star rating system.

download

https://phppot.com/php/php-star-rating-system-with-javascript/ 3/5
04/01/2021 PHP Star Rating System with JavaScript - Phppot

Comments to “PHP Star Rating System with

JavaScript”

Diogo
July 27, 2019 at 4:06 am

Hello, how could I create the webpage of every restaurant?

Reply

Vincy
July 27, 2019 at 11:55 pm

Do you want to create a separate page for a restaurant? or do you

want to integrate the PHP star rating on every restaurant?

Reply

Abeer
July 31, 2019 at 9:45 am

thank you for this tutorial

Reply

Vincy
June 25, 2020 at 12:33 pm

Welcome Abeer.

Reply

kaka
September 15, 2020 at 10:38 am

More good! nice work

Reply

Vincy
September 15, 2020 at 6:04 pm

Thank you Kaka.

Reply

Engineer Muhammad Saleem

October 5, 2020 at 8:49 am

Great

Reply

Vincy
October 17, 2020 at 11:37 pm

Thank you.

Reply

Leave a Reply

Comment

https://phppot.com/php/php-star-rating-system-with-javascript/ 4/5
04/01/2021 PHP Star Rating System with JavaScript - Phppot

Name *

Email *

Post Comment

Popular Articles
★ PHP AJAX Programming
★ Create AJAX-Based PHP Event Management System with Bootstrap
★ AJAX Based Login Registration System with jQuery Lightbox

Search articles

↑ Back to Top

Looking for a freelance web developer?

Do you want to build a modern, lightweight, responsive website and launch quickly? Contact Me

Blog subscription:

Enter your email here Subscribe

Shop

FAQ Support Policy Refund Policy Licenses

Terms of Service Privacy Policy Cookie Policy © 2020 Phppot

https://phppot.com/php/php-star-rating-system-with-javascript/ 5/5