User Rating with Review System in PHP Mysql Using Ajax
Sep 29, 2021
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://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<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;
}
.bg-danger {
background-color: #25b311 !important;
}
.btn-primary {
color: #fff;
background-color: #004cff;
border-color: #004cff;
outline: none !important;
border-radius: 0 !important;
}
.btn-primary:hover {
color: #fff;
background-color: white;
color: #004cff;
outline: none !important;
}
.card-header {
background-color: rgba(253, 229, 137, 0.86);
border-radius: 0 !important;
}
.card {
border: 1px solid rgba(253, 232, 153, 0.4);
}
.text-success {
color: #95ee6c !important;
}
.bg-success {
background-color: #95ee6c !important;
}
.card-footer {
padding: .75rem 1.25rem;
background-color: rgba(253, 232, 153, 0.13);
border-top: 1px solid rgba(253, 232, 153, 0.4);
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="card">
<div class="card-header">Review</div>
<div class="card-body">
<div class="row">
<div class="col-sm-4 text-center">
<h1 class="text-success 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-success"></i></div>
<div class="progress-label-right">(<span id="total_five_star_review">0</span>)</div>
<div class="progress">
<div class="progress-bar bg-success" 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-success"></i></div>
<div class="progress-label-right">(<span id="total_four_star_review">0</span>)</div>
<div class="progress">
<div class="progress-bar bg-success" 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-success"></i></di>
<div class="progress-label-right">(<span id="total_three_star_review">0</span>)</div>
<div class="progress">
<div class="progress-bar bg-success" 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-success"></i></div>
<div class="progress-label-right">(<span id="total_two_star_review">0</span>)</div>
<div class="progress">
<div class="progress-bar bg-success" 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-success"></i>
</div>
<div class="progress-label-right">(<span id="total_one_star_review">0</span>)</div>
<div class="progress">
<div class="progress-bar bg-success" 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 shadow-none">Review</button>
</div>
</div>
</div>
</div>
<div class="mt-5" id="review_content"></div>
</div>
</body>
</html>
<div id="review_modal" class="modal fade" 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 btn-block shadow-none" id="save_review">Submit</button>
</div>
</div>
</div>
</div>
</div>
<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-success');
}
});
function reset_background() {
for (var count = 1; count <= 5; count++) {
$('#submit_star_' + count).addClass('star-light');
$('#submit_star_' + count).removeClass('text-success');
}
}
$(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-success');
}
});
$(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-success');
$(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-2 col-sm-1 col-md-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-10 col-md-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-success';
} 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>submit_rating.php
<?php
$connect = new PDO("mysql:host=localhost;dbname=rating-system", "root", "");
if(isset($_POST["rating_data"]))
{
$data = array(
':user_name' => $_POST["user_name"],
':user_rating' => $_POST["rating_data"],
':user_review' => $_POST["user_review"],
);
$query = "
INSERT INTO reviews
(user_name, user_rating, user_review)
VALUES (:user_name, :user_rating, :user_review)";
$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 reviews
ORDER BY 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($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);
}
?>