How to add and display review in php using ajax and jquery ?
We are Going to add review section in php using ajax jquery.
In this Artical, We Will create product review and five-star rating system in PHP and Mysql using Ajax and jQuery.
Review or Star rating system is very important functionality in ecommerce or product selling website.User can rate or write feedback about perticular product using this rating system by selecting stars and write review
Create Database
create database testing;CREATE TABLE `review_table` (
`review_id` int(11) NOT NULL,
`user_name` varchar(200) NOT NULL,
`user_rating` int(1) NOT NULL,
`user_review` text NOT NULL,
`datetime` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;INSERT INTO `review_table` (`review_id`, `user_name`, `user_rating`, `user_review`, `datetime`) VALUES
(6, 'John Smith', 4, 'Nice Product, Value for money', 1621935691),
(7, 'Peter Parker', 5, 'Nice Product with Good Feature.', 1621939888),
(8, 'Donna Hubber', 1, 'Worst Product, lost my money.', 1621940010);ALTER TABLE `review_table`
ADD PRIMARY KEY (`review_id`);ALTER TABLE `review_table`
MODIFY `review_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;Create index file
File name index.php
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Review & Rating System in PHP & Mysql using Ajax</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<!-- <h1 class="mt-5 mb-5">Review & Rating System in PHP & Mysql using Ajax</h1> -->
<div class="card">
<div class="card-header">Sample Product</div>
<div class="card-body">
<div class="row">
<div class="col-sm-4 text-center">
<h1 class="text-warning mt-4 mb-4">
<b><span id="average_rating">0.0</span> / 5</b>
</h1>
<div class="mb-3">
<i class="fas fa-star star-light mr-1 main_star"></i>
<i class="fas fa-star star-light mr-1 main_star"></i>
<i class="fas fa-star star-light mr-1 main_star"></i>
<i class="fas fa-star star-light mr-1 main_star"></i>
<i class="fas fa-star star-light mr-1 main_star"></i>
</div>
<h3><span id="total_review">0</span> Review</h3>
</div>
<div class="col-sm-4">
<p>
<div class="progress-label-left"><b>5</b> <i class="fas fa-star text-warning"></i></div>
<div class="progress-label-right">(<span id="total_five_star_review">0</span>)</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="five_star_progress"></div>
</div>
</p>
<p>
<div class="progress-label-left"><b>4</b> <i class="fas fa-star text-warning"></i></div>
<div class="progress-label-right">(<span id="total_four_star_review">0</span>)</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="four_star_progress"></div>
</div>
</p>
<p>
<div class="progress-label-left"><b>3</b> <i class="fas fa-star text-warning"></i></div>
<div class="progress-label-right">(<span id="total_three_star_review">0</span>)</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="three_star_progress"></div>
</div>
</p>
<p>
<div class="progress-label-left"><b>2</b> <i class="fas fa-star text-warning"></i></div>
<div class="progress-label-right">(<span id="total_two_star_review">0</span>)</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="two_star_progress"></div>
</div>
</p>
<p>
<div class="progress-label-left"><b>1</b> <i class="fas fa-star text-warning"></i></div>
<div class="progress-label-right">(<span id="total_one_star_review">0</span>)</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="one_star_progress"></div>
</div>
</p>
</div>
<div class="col-sm-4 text-center">
<!-- <h3 class="mt-4 mb-3">Write Review Here</h3>
<button type="button" name="add_review" id="add_review" class="btn btn-primary">Review</button>
-->
<h4 class="text-center mt-2 mb-4">
<i class="fas fa-star star-light submit_star mr-1" id="submit_star_1" data-rating="1"></i>
<i class="fas fa-star star-light submit_star mr-1" id="submit_star_2" data-rating="2"></i>
<i class="fas fa-star star-light submit_star mr-1" id="submit_star_3" data-rating="3"></i>
<i class="fas fa-star star-light submit_star mr-1" id="submit_star_4" data-rating="4"></i>
<i class="fas fa-star star-light submit_star mr-1" id="submit_star_5" data-rating="5"></i>
</h4>
<div class="form-group">
<input type="text" value="admin" name="user_name" id="user_name" class="form-control" placeholder="Enter Your Name" hidden/>
</div>
<div class="form-group">
<textarea name="user_review" id="user_review" class="form-control" placeholder="Type Review Here"></textarea>
</div>
<div class="form-group text-center mt-4">
<button type="button" class="btn btn-primary" id="save_review">Submit</button>
</div>
</div>
</div>
</div>
</div>
<div class="mt-5" id="review_content"></div>
</div>
</body>
</html>
<div id="review_modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Submit Review</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h4 class="text-center mt-2 mb-4">
<i class="fas fa-star star-light submit_star mr-1" id="submit_star_1" data-rating="1"></i>
<i class="fas fa-star star-light submit_star mr-1" id="submit_star_2" data-rating="2"></i>
<i class="fas fa-star star-light submit_star mr-1" id="submit_star_3" data-rating="3"></i>
<i class="fas fa-star star-light submit_star mr-1" id="submit_star_4" data-rating="4"></i>
<i class="fas fa-star star-light submit_star mr-1" id="submit_star_5" data-rating="5"></i>
</h4>
<div class="form-group">
<input type="text" name="user_name" id="user_name" class="form-control" placeholder="Enter Your Name" />
</div>
<div class="form-group">
<textarea name="user_review" id="user_review" class="form-control" placeholder="Type Review Here"></textarea>
</div>
<div class="form-group text-center mt-4">
<button type="button" class="btn btn-primary" id="save_review">Submit</button>
</div>
</div>
</div>
</div>
</div>
<style>
.progress-label-left
{
float: left;
margin-right: 0.5em;
line-height: 1em;
}
.progress-label-right
{
float: right;
margin-left: 0.3em;
line-height: 1em;
}
.star-light
{
color:#e9ecef;
}
</style>
<script>
$(document).ready(function(){
var rating_data = 0;
$('#add_review').click(function(){
$('#review_modal').modal('show');
});
$(document).on('mouseenter', '.submit_star', function(){
var rating = $(this).data('rating');
reset_background();
for(var count = 1; count <= rating; count++)
{
$('#submit_star_'+count).addClass('text-warning');
}
});
function reset_background()
{
for(var count = 1; count <= 5; count++)
{
$('#submit_star_'+count).addClass('star-light');
$('#submit_star_'+count).removeClass('text-warning');
}
}
$(document).on('mouseleave', '.submit_star', function(){
reset_background();
for(var count = 1; count <= rating_data; count++)
{
$('#submit_star_'+count).removeClass('star-light');
$('#submit_star_'+count).addClass('text-warning');
}
});
$(document).on('click', '.submit_star', function(){
rating_data = $(this).data('rating');
});
$('#save_review').click(function(){
var user_name = $('#user_name').val();
var user_review = $('#user_review').val();
if(user_name == '' || user_review == '')
{
alert("Please Fill Both Field");
return false;
}
else
{
$.ajax({
url:"submit_rating.php",
method:"POST",
data:{rating_data:rating_data, user_name:user_name, user_review:user_review},
success:function(data)
{
$('#review_modal').modal('hide');
load_rating_data();
alert(data);
}
})
}
});
load_rating_data();
function load_rating_data()
{
$.ajax({
url:"submit_rating.php",
method:"POST",
data:{action:'load_data'},
dataType:"JSON",
success:function(data)
{
$('#average_rating').text(data.average_rating);
$('#total_review').text(data.total_review);
var count_star = 0;
$('.main_star').each(function(){
count_star++;
if(Math.ceil(data.average_rating) >= count_star)
{
$(this).addClass('text-warning');
$(this).addClass('star-light');
}
});
$('#total_five_star_review').text(data.five_star_review);
$('#total_four_star_review').text(data.four_star_review);
$('#total_three_star_review').text(data.three_star_review);
$('#total_two_star_review').text(data.two_star_review);
$('#total_one_star_review').text(data.one_star_review);
$('#five_star_progress').css('width', (data.five_star_review/data.total_review) * 100 + '%');
$('#four_star_progress').css('width', (data.four_star_review/data.total_review) * 100 + '%');
$('#three_star_progress').css('width', (data.three_star_review/data.total_review) * 100 + '%');
$('#two_star_progress').css('width', (data.two_star_review/data.total_review) * 100 + '%');
$('#one_star_progress').css('width', (data.one_star_review/data.total_review) * 100 + '%');
if(data.review_data.length > 0)
{
var html = '';
for(var count = 0; count < data.review_data.length; count++)
{
html += '<div class="row mb-3">';
html += '<div class="col-sm-1"><div class="rounded-circle bg-danger text-white pt-2 pb-2"><h3 class="text-center">'+data.review_data[count].user_name.charAt(0)+'</h3></div></div>';
html += '<div class="col-sm-11">';
html += '<div class="card">';
html += '<div class="card-header"><b>'+data.review_data[count].user_name+'</b></div>';
html += '<div class="card-body">';
for(var star = 1; star <= 5; star++)
{
var class_name = '';
if(data.review_data[count].rating >= star)
{
class_name = 'text-warning';
}
else
{
class_name = 'star-light';
}
html += '<i class="fas fa-star '+class_name+' mr-1"></i>';
}
html += '<br />';
html += data.review_data[count].user_review;
html += '</div>';
html += '<div class="card-footer text-right">On '+data.review_data[count].datetime+'</div>';
html += '</div>';
html += '</div>';
html += '</div>';
}
$('#review_content').html(html);
}
}
})
}
});
</script>
create php file
file name :submit_rating.php
<?php
//submit_rating.php
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
if(isset($_POST["rating_data"]))
{
$data = array(
':user_name' => $_POST["user_name"],
':user_rating' => $_POST["rating_data"],
':user_review' => $_POST["user_review"],
':datetime' => time()
);
$query = "
INSERT INTO review_table
(user_name, user_rating, user_review, datetime)
VALUES (:user_name, :user_rating, :user_review, :datetime)
";
$statement = $connect->prepare($query);
$statement->execute($data);
echo "Your Review & Rating Successfully Submitted";
}
if(isset($_POST["action"]))
{
$average_rating = 0;
$total_review = 0;
$five_star_review = 0;
$four_star_review = 0;
$three_star_review = 0;
$two_star_review = 0;
$one_star_review = 0;
$total_user_rating = 0;
$review_content = array();
$query = "
SELECT * FROM review_table
ORDER BY review_id DESC
";
$result = $connect->query($query, PDO::FETCH_ASSOC);
foreach($result as $row)
{
$review_content[] = array(
'user_name' => $row["user_name"],
'user_review' => $row["user_review"],
'rating' => $row["user_rating"],
'datetime' => date('l jS, F Y h:i:s A', $row["datetime"])
);
if($row["user_rating"] == '5')
{
$five_star_review++;
}
if($row["user_rating"] == '4')
{
$four_star_review++;
}
if($row["user_rating"] == '3')
{
$three_star_review++;
}
if($row["user_rating"] == '2')
{
$two_star_review++;
}
if($row["user_rating"] == '1')
{
$one_star_review++;
}
$total_review++;
$total_user_rating = $total_user_rating + $row["user_rating"];
}
$average_rating = $total_user_rating / $total_review;
$output = array(
'average_rating' => number_format($average_rating, 1),
'total_review' => $total_review,
'five_star_review' => $five_star_review,
'four_star_review' => $four_star_review,
'three_star_review' => $three_star_review,
'two_star_review' => $two_star_review,
'one_star_review' => $one_star_review,
'review_data' => $review_content
);
echo json_encode($output);
}
?> 
