Today, We want to share with you PHP MySQLi Star Rating System using Ajax Jquery.
In this post we will show you Star Rating System using PHP, hear for Star Rating System with Ajax, PHP and MySQLi we will give you demo and example for implement.
In this post, we will learn about Dynamic Star Rating system by using PHP Script with Ajax Jquery with an example.

PHP MySQLi Star Rating System using Ajax Jquery

There are the Following The simple About PHP MySQLi Star Rating System using Ajax Jquery Full Information With Example and source code.

Star Rating System

Star Rating System with Ajax, PHP and MySQL Main Files below

  • index.php
  • rating.js
  • updateStarRating.php

Step 1: Make Database Table

CREATE TABLE `item_rating` (
`live_ratingId` int(11) NOT NULL,
`productId` int(11) NOT NULL,
`clientId` int(11) NOT NULL,
`totalStarNum` int(11) NOT NULL,
`title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`messages` text COLLATE utf8_unicode_ci NOT NULL,
`created` datetime NOT NULL,
`modified` datetime NOT NULL,
`status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1 = Block, 0 = Unblock'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
ALTER TABLE `item_rating`
ADD PRIMARY KEY (`live_ratingId`);

Step 2: Make Rating and Review Form

READ :  AngularJS ForEach Function - Angular Foreach Examples

main file index.php as well as 5 star rating system html code

<div class="row">
<div class="col-sm-12">
<form id="starRatingFrm" method="POST">
<div class="strRate form-group">
<h4>Rate This product</h4>
<button type="button" class="btn btn-warning btn-sm rateButton" >
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-success btn-grey btn-sm rateButton" >
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-success btn-grey btn-sm rateButton" >
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-success btn-grey btn-sm rateButton" >
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-success btn-grey btn-sm rateButton" >
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<input type="hidden" class="form-control" id="rating" name="rating" value="1">
<input type="hidden" class="form-control" id="productId" name="productId" value="12345678">
</div>
<div class="strRate form-group">
<label for="usr">Title*</label>
<input type="text" class="form-control" id="title" name="title" required>
</div>
<div class="strRate form-group">
<label for="message">Message*</label>
<textarea class="form-control" rows="5" id="message" name="message" required></textarea>
</div>
<div class="strRate form-group">
<button type="submit" class="btn btn-info" id="saveReview">Save Review</button> <button type="button" class="btn btn-info" id="cancelReview">Cancel</button>
</div>
</form>
</div>
</div>

Step 3: Rating Form Submit & Save

READ :  Vuejs Shopping Cart Application vue ecommerce

rating.js ajax call using jQuery and save database using updateStarRating.php

$('#starRatingFrm').on('submit', function(event){
var alldatafrm = $(this).serialize();
$.ajax({
type : 'POST',
url : 'updateStarRating.php',
data : alldatafrm,
success:function(response){
$("#starRatingFrm")[0].reset();
window.setTimeout(function(){window.location.reload()},1000)
}
});
});

Step 4: Save Rating and Review into Database Table

Now in updateStarRating.php file

<?php
//database connection
include_once("db_connect.php");
if(!empty($_POST['rating']) && !empty($_POST['productId'])){
$productId = $_POST['productId'];
$clientID = 1234567;
$queryReating = "INSERT INTO item_rating (productId, clientId, totalStarNum, title, messages, created, modified) VALUES ('".$productId."', '".$clientID."', '".$_POST['rating']."', '".$_POST['title']."', '".$_POST["message"]."', '".date("Y-m-d H:i:s")."', '".date("Y-m-d H:i:s")."')";
mysqli_query($conn, $queryReating) or die("database error: ". mysqli_error($conn));
echo "rating saved!";
}
?>

Step 5: Display Rating and Review Details

In main root index.php file, I shall see all the users saved star rating and some more details from mysql database table such as name item_rating with users get counter star rating to view side rating star as checked or selected .

<div class="row">
<div class="col-sm-7">
<hr/>
<div class="review-block">
<?php
$ratinguery = "SELECT live_ratingId, productId, clientId, totalStarNum, title, messages, created, modified FROM item_rating";
$ratingResult = mysqli_query($conn, $ratinguery) or die("database error:". mysqli_error($conn));
while($ratingStar = mysqli_fetch_assoc($ratingResult)){
	$date=date_create($ratingStar['created']);
	$reviewDate = date_format($date,"M d, Y");
	?>
	<div class="row">
	<div class="col-sm-3">
	<img src="image/profile.png" class="img-rounded">
	<div class="review-block-name">By <a href="#">phpzag</a></div>
	<div class="review-block-date"><?php echo $reviewDate; ?></div>
	</div>
	<div class="col-sm-9">
		<div class="review-block-rate">
			<?php
				for ($i = 1; $i <= 5; $i++) {
				$starRatingCls = "btn-success btn-grey";
				if($i <= $ratingStar['totalStarNum']) {
					$starRatingCls = "btn-warning";
				}
			?>
			<button type="button" class="btn btn-xs <?php echo $starRatingCls; ?>" >
			<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
			</button>
	<?php } ?>
	</div>
	<div class="review-block-title"><?php echo $ratingStar['title']; ?></div>
	<div class="review-block-description"><?php echo $ratingStar['messages']; ?></div>
	</div>
	</div>
	<hr/>
<?php } ?>
</div>
</div>
</div>

jQuery 15 Powerful Tips and Tricks for Developers and Web Designer

Read :

READ :  Vuejs Pagination Searching and Sorting of DataTable

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Star Rating System using PHP.
I would like to have feedback on my Infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.