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>

</body></html>

Step 5 :- Created container.php

</head>

<span class=”sr-only”>Toggle navigation</span>

</button>

<a href=”https://phpcodeinfomation.blogspot.com/p/php-script.html” class=”navbar-brand”>PHPCODE</a>

</div>

</ul>

</div><!–/.nav-collapse –>

</div>

</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>

<?php include(‘container.php’);?>

<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>

<h4>Rating and Reviews</h4>

<?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”>

</button>

<?php } ?>

</div>

<?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>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<button type=”button” id=”rateProduct” class=”btn btn-default”>Rate this product</button>

</div>

<hr/>

<?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=”review-block-name”>By <a href=”#”>phpcode</a></div>

</div>

<?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”>

</button>

<?php } ?>

</div>

</div>

<hr/>

<?php } ?>

</div>

<h4>Rate this product</h4>

</button>

</button>

</button>

</button>

</button>

</div>

<label for=”usr”>Title*</label>

</div>

<label for=”comment”>Comment*</label>

</div>

<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>

<?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

Post Views: 236

Comments

No comments yet, take the initiative.

Leave a Reply Cancel reply