Skip to Content
PHPCODE
Code Star Rating System with Ajax, PHP and MySQL
php code / September 7, 2018

Step By Step Code Here:

Step 1 : Created Database.Database name phpinfo

Step 2 : Created Table This is SQL Code

CREATE TABLE `item_rating` (
`ratingId` int(11) NOT NULL,
`itemId` int(11) NOT NULL,
`userId` int(11) NOT NULL,
`ratingNumber` int(11) NOT NULL,
`title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`comments` 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 (`ratingId`);

ALTER TABLE `item_rating`
MODIFY `ratingId` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
COMMIT;

Step 3 :- Created header.php This is code

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
<!– jQuery –>

Step 4 : Created footer.php
<div class=”insert-post-ads1″ style=”margin-top:20px;”>
</div>
</div>
</body></html>
Step 5 :- Created container.php
</head>
<body class=””>
<div role=”navigation” class=”navbar navbar-default navbar-static-top”>
      <div class=”container”>
        <div class=”navbar-header”>
          <button data-target=”.navbar-collapse” data-toggle=”collapse” class=”navbar-toggle” type=”button”>
            <span class=”sr-only”>Toggle navigation</span>
            <span class=”icon-bar”></span>
            <span class=”icon-bar”></span>
            <span class=”icon-bar”></span>
          </button>
          <a href=”https://phpcodeinfomation.blogspot.com/p/php-script.html” class=”navbar-brand”>PHPCODE</a>
        </div>
        <div class=”navbar-collapse collapse”>
          <ul class=”nav navbar-nav”>
            <li class=”active”><a href=”https://phpcodeinfomation.blogspot.com/p/php-script.html”>Home</a></li>
          </ul>
        </div><!–/.nav-collapse –>
      </div>
    </div>
<div class=”container” style=”min-height:500px;”>
<div class=”>
</div>
 
Step 6 :Created style.css File
.btn-grey{
    background-color:#D8D8D8;
color:#FFF;
}
.rating-block{
background-color:#FAFAFA;
border:1px solid #EFEFEF;
padding:15px 15px 20px 15px;
border-radius:3px;
}
.bold{
font-weight:700;
}
.padding-bottom-7{
padding-bottom:7px;
}
.review-block{
background-color:#FAFAFA;
border:1px solid #EFEFEF;
padding:15px;
border-radius:3px;
margin-bottom:15px;
}
.review-block-name{
font-size:12px;
margin:10px 0;
}
.review-block-date{
font-size:12px;
}
.review-block-rate{
font-size:13px;
margin-bottom:15px;
}
.review-block-title{
font-size:15px;
font-weight:700;
margin-bottom:10px;
}
.review-block-description{
font-size:13px;
}
Step 7 :Created db_connect.php File
<?php
/* Database connection start */
$servername = “localhost”;
$username = “root”;
$password = “”;
$dbname = “phpinfo”;
$conn = mysqli_connect($servername, $username, $password, $dbname) or die(“Connection failed: ” . mysqli_connect_error());
if (mysqli_connect_errno()) {
    printf(“Connect failed: %sn”, mysqli_connect_error());
    exit();
}
?>
Step 8 : Created index.php File
<?php include(‘header.php’); ?>
<title>PHPCODE : Demo Star Rating System with Ajax, PHP and MySQL</title>
<script src=”rating.js”></script>
<link rel=”stylesheet” href=”style.css”>
<?php include(‘container.php’);?>
<div class=”container”>
<h2>Example: Star Rating System with Ajax, PHP and MySQL</h2>
<?php
include_once(“db_connect.php”);
$ratingDetails = “SELECT ratingNumber FROM item_rating”;
$rateResult = mysqli_query($conn, $ratingDetails) or die(“database error:”. mysqli_error($conn));
$ratingNumber = 0;
$count = 0;
$fiveStarRating = 0;
$fourStarRating = 0;
$threeStarRating = 0;
$twoStarRating = 0;
$oneStarRating = 0;
while($rate = mysqli_fetch_assoc($rateResult)) {
$ratingNumber+= $rate[‘ratingNumber’];
$count += 1;
if($rate[‘ratingNumber’] == 5) {
$fiveStarRating +=1;
} else if($rate[‘ratingNumber’] == 4) {
$fourStarRating +=1;
} else if($rate[‘ratingNumber’] == 3) {
$threeStarRating +=1;
} else if($rate[‘ratingNumber’] == 2) {
$twoStarRating +=1;
} else if($rate[‘ratingNumber’] == 1) {
$oneStarRating +=1;
}
}
$average = 0;
if($ratingNumber && $count) {
$average = $ratingNumber/$count;
}
?>
<br>
<div id=”ratingDetails”>
<div class=”row”>
<div class=”col-sm-3″>
<h4>Rating and Reviews</h4>
<h2 class=”bold padding-bottom-7″><?php printf(‘%.1f’, $average); ?> <small>/ 5</small></h2>
<?php
$averageRating = round($average, 0);
for ($i = 1; $i <= 5; $i++) {
$ratingClass = “btn-default btn-grey”;
if($i <= $averageRating) {
$ratingClass = “btn-warning”;
}
?>
<button type=”button” class=”btn btn-sm <?php echo $ratingClass; ?>” aria-label=”Left Align”>
  <span class=”glyphicon glyphicon-star” aria-hidden=”true”></span>
</button>
<?php } ?>
</div>
<div class=”col-sm-3″>
<?php
$fiveStarRatingPercent = round(($fiveStarRating/5)*100);
$fiveStarRatingPercent = !empty($fiveStarRatingPercent)?$fiveStarRatingPercent.’%’:’0%’;
$fourStarRatingPercent = round(($fourStarRating/5)*100);
$fourStarRatingPercent = !empty($fourStarRatingPercent)?$fourStarRatingPercent.’%’:’0%’;
$threeStarRatingPercent = round(($threeStarRating/5)*100);
$threeStarRatingPercent = !empty($threeStarRatingPercent)?$threeStarRatingPercent.’%’:’0%’;
$twoStarRatingPercent = round(($twoStarRating/5)*100);
$twoStarRatingPercent = !empty($twoStarRatingPercent)?$twoStarRatingPercent.’%’:’0%’;
$oneStarRatingPercent = round(($oneStarRating/5)*100);
$oneStarRatingPercent = !empty($oneStarRatingPercent)?$oneStarRatingPercent.’%’:’0%’;
?>
<div class=”pull-left”>
<div class=”pull-left” style=”width:35px; line-height:1;”>
<div style=”height:9px; margin:5px 0;”>5 <span class=”glyphicon glyphicon-star”></span></div>
</div>
<div class=”pull-left” style=”width:180px;”>
<div class=”progress” style=”height:9px; margin:8px 0;”>
  <div class=”progress-bar progress-bar-success” role=”progressbar” aria-valuenow=”5″ aria-valuemin=”0″ aria-valuemax=”5″ style=”width: <?php echo $fiveStarRatingPercent; ?>”>
<span class=”sr-only”><?php echo $fiveStarRatingPercent; ?></span>
  </div>
</div>
</div>
<div class=”pull-right” style=”margin-left:10px;”><?php echo $fiveStarRating; ?></div>
</div>
<div class=”pull-left”>
<div class=”pull-left” style=”width:35px; line-height:1;”>
<div style=”height:9px; margin:5px 0;”>4 <span class=”glyphicon glyphicon-star”></span></div>
</div>
<div class=”pull-left” style=”width:180px;”>
<div class=”progress” style=”height:9px; margin:8px 0;”>
  <div class=”progress-bar progress-bar-primary” role=”progressbar” aria-valuenow=”4″ aria-valuemin=”0″ aria-valuemax=”5″ style=”width: <?php echo $fourStarRatingPercent; ?>”>
<span class=”sr-only”><?php echo $fourStarRatingPercent; ?></span>
  </div>
</div>
</div>
<div class=”pull-right” style=”margin-left:10px;”><?php echo $fourStarRating; ?></div>
</div>
<div class=”pull-left”>
<div class=”pull-left” style=”width:35px; line-height:1;”>
<div style=”height:9px; margin:5px 0;”>3 <span class=”glyphicon glyphicon-star”></span></div>
</div>
<div class=”pull-left” style=”width:180px;”>
<div class=”progress” style=”height:9px; margin:8px 0;”>
  <div class=”progress-bar progress-bar-info” role=”progressbar” aria-valuenow=”3″ aria-valuemin=”0″ aria-valuemax=”5″ style=”width: <?php echo $threeStarRatingPercent; ?>”>
<span class=”sr-only”><?php echo $threeStarRatingPercent; ?></span>
  </div>
</div>
</div>
<div class=”pull-right” style=”margin-left:10px;”><?php echo $threeStarRating; ?></div>
</div>
<div class=”pull-left”>
<div class=”pull-left” style=”width:35px; line-height:1;”>
<div style=”height:9px; margin:5px 0;”>2 <span class=”glyphicon glyphicon-star”></span></div>
</div>
<div class=”pull-left” style=”width:180px;”>
<div class=”progress” style=”height:9px; margin:8px 0;”>
  <div class=”progress-bar progress-bar-warning” role=”progressbar” aria-valuenow=”2″ aria-valuemin=”0″ aria-valuemax=”5″ style=”width: <?php echo $twoStarRatingPercent; ?>”>
<span class=”sr-only”><?php echo $twoStarRatingPercent; ?></span>
  </div>
</div>
</div>
<div class=”pull-right” style=”margin-left:10px;”><?php echo $twoStarRating; ?></div>
</div>
<div class=”pull-left”>
<div class=”pull-left” style=”width:35px; line-height:1;”>
<div style=”height:9px; margin:5px 0;”>1 <span class=”glyphicon glyphicon-star”></span></div>
</div>
<div class=”pull-left” style=”width:180px;”>
<div class=”progress” style=”height:9px; margin:8px 0;”>
  <div class=”progress-bar progress-bar-danger” role=”progressbar” aria-valuenow=”1″ aria-valuemin=”0″ aria-valuemax=”5″ style=”width: <?php echo $oneStarRatingPercent; ?>”>
<span class=”sr-only”><?php echo $oneStarRatingPercent; ?></span>
  </div>
</div>
</div>
<div class=”pull-right” style=”margin-left:10px;”><?php echo $oneStarRating; ?></div>
</div>
</div>
<div class=”col-sm-3″>
<button type=”button” id=”rateProduct” class=”btn btn-default”>Rate this product</button>
</div>
</div>
<div class=”row”>
<div class=”col-sm-7″>
<hr/>
<div class=”review-block”>
<?php
$ratinguery = “SELECT ratingId, itemId, userId, ratingNumber, title, comments, created, modified FROM item_rating”;
$ratingResult = mysqli_query($conn, $ratinguery) or die(“database error:”. mysqli_error($conn));
while($rating = mysqli_fetch_assoc($ratingResult)){
$date=date_create($rating[‘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=”#”>phpcode</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++) {
$ratingClass = “btn-default btn-grey”;
if($i <= $rating[‘ratingNumber’]) {
$ratingClass = “btn-warning”;
}
?>
<button type=”button” class=”btn btn-xs <?php echo $ratingClass; ?>” aria-label=”Left Align”>
  <span class=”glyphicon glyphicon-star” aria-hidden=”true”></span>
</button>
<?php } ?>
</div>
<div class=”review-block-title”><?php echo $rating[‘title’]; ?></div>
<div class=”review-block-description”><?php echo $rating[‘comments’]; ?></div>
</div>
</div>
<hr/>
<?php } ?>
</div>
</div>
</div>
</div>
<div id=”ratingSection” style=”display:none;”>
<div class=”row”>
<div class=”col-sm-12″>
<form id=”ratingForm” method=”POST”>
<div class=”form-group”>
<h4>Rate this product</h4>
<button type=”button” class=”btn btn-warning btn-sm rateButton” aria-label=”Left Align”>
  <span class=”glyphicon glyphicon-star” aria-hidden=”true”></span>
</button>
<button type=”button” class=”btn btn-default btn-grey btn-sm rateButton” aria-label=”Left Align”>
  <span class=”glyphicon glyphicon-star” aria-hidden=”true”></span>
</button>
<button type=”button” class=”btn btn-default btn-grey btn-sm rateButton” aria-label=”Left Align”>
  <span class=”glyphicon glyphicon-star” aria-hidden=”true”></span>
</button>
<button type=”button” class=”btn btn-default btn-grey btn-sm rateButton” aria-label=”Left Align”>
  <span class=”glyphicon glyphicon-star” aria-hidden=”true”></span>
</button>
<button type=”button” class=”btn btn-default btn-grey btn-sm rateButton” aria-label=”Left Align”>
  <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=”itemId” name=”itemId” value=”12345678″>
</div>
<div class=”form-group”>
<label for=”usr”>Title*</label>
<input type=”text” class=”form-control” id=”title” name=”title” required>
</div>
<div class=”form-group”>
<label for=”comment”>Comment*</label>
<textarea class=”form-control” rows=”5″ id=”comment” name=”comment” required></textarea>
</div>
<div class=”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>
</div>
<div style=”margin:50px 0px 0px 0px;”>
<a class=”btn btn-default read-more” style=”background:#3399ff;color:white” href=”https://phpcodeinfomation.blogspot.com/p/php-script.html”>Back</a>
</div>
</div>
<?php include(‘footer.php’);?>
Step 9 : Created saveRating.php File
<?php
include_once(“db_connect.php”);
if(!empty($_POST[‘rating’]) && !empty($_POST[‘itemId’])){
$itemId = $_POST[‘itemId’];
$userID = 1234567;
$insertRating = “INSERT INTO item_rating (itemId, userId, ratingNumber, title, comments, created, modified) VALUES (‘”.$itemId.”‘, ‘”.$userID.”‘, ‘”.$_POST[‘rating’].”‘, ‘”.$_POST[‘title’].”‘, ‘”.$_POST[“comment”].”‘, ‘”.date(“Y-m-d H:i:s”).”‘, ‘”.date(“Y-m-d H:i:s”).”‘)”;
mysqli_query($conn, $insertRating) or die(“database error: “. mysqli_error($conn));
echo “rating saved!”;
}
?>
Step 10 : Created rating.js File
$(function() {
// rating form hide/show
  $( “#rateProduct” ).click(function() {
$(“#ratingDetails”).hide();
$(“#ratingSection”).show();
});
$( “#cancelReview” ).click(function() {
$(“#ratingSection”).hide();
$(“#ratingDetails”).show();
});
// implement start rating select/deselect
$( “.rateButton” ).click(function() {
if($(this).hasClass(‘btn-grey’)) {
$(this).removeClass(‘btn-grey btn-default’).addClass(‘btn-warning star-selected’);
$(this).prevAll(‘.rateButton’).removeClass(‘btn-grey btn-default’).addClass(‘btn-warning star-selected’);
$(this).nextAll(‘.rateButton’).removeClass(‘btn-warning star-selected’).addClass(‘btn-grey btn-default’);
} else {
$(this).nextAll(‘.rateButton’).removeClass(‘btn-warning star-selected’).addClass(‘btn-grey btn-default’);
}
$(“#rating”).val($(‘.star-selected’).length);
});
// save review using Ajax
$(‘#ratingForm’).on(‘submit’, function(event){
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
type : ‘POST’,
url : ‘saveRating.php’,
data : formData,
success:function(response){
$(“#ratingForm”)[0].reset();
window.setTimeout(function(){window.location.reload()},3000)
}
});
});
});
Step 11 :Image Show

 

PHPCODE © 2024