PHP Star Rating System with MySQL

In many web application, Star rating can be found. Star Rating system is a standard rating scale that’s being used by popular marketplace sites. Star rating is a valuable metric that tells peoples that which individual products, websites and so on are much popular. Usually in a star rating system there are maximum number of five stars. Next star indicates how much popular.

In this post, I have created star rating system for multiple restaurant management system. In which the users of this system can submit their own review. After submitting the reviews will be stored in the database. Your given review will be displayed in the particular places and the visitors can easily view the review and make a sense which product or things is much more better. In my project i am showing the average review of the users. Because in my project there are many users and they have individual review and also view this individual reviews the individual users like restaurant, drivers and admin. Admin can manage review management like which review should be displayed and which not displayed in particular places. Admin also responsible to calculate the review process. I have described all the procedure in this post. Here I have used five star rating system. When you are going to give review the star will be colorful. Suppose directly if you want to click third star then previous two star will be colorful also according to this project. The number of highest star indicates much more popularity or something best.

In this project, I have used simple implementation of code with PHP, MySQL, CSS and HTML. There are three separate file which are style.css, index.php and php file with database design. Separately i have written code design in three files. Anyone can easily understand that code sample and also easily create rating system as like this project.

To create review system as star rating system using PHP, MySQL, CSS and HTML you have to follow the following code sample.

Note: Remember that, always use unique attribute "id" and unique "label".

SOURCE CODE OF CSS FILE (style.css) :

<style> 

*{

    margin: 0;

    padding: 0;

}

.rate {

    border: 1px solid #cccccc;

    float: left;

    height: 46px;

    padding: 0 10px;

}

.rate:not(:checked) > input {

    position:absolute;

    top:-9999px;

}

.rate:not(:checked) > label {

    float:right;

    width:1em;

    overflow:hidden;

    white-space:nowrap;

    cursor:pointer;

    font-size:30px;

    color:#ccc;

}

.rate:not(:checked) > label:before {

    content: '★ ';

}

.rate > input:checked ~ label {

    color: #ffc700;    

}

.rate:not(:checked) > label:hover,

.rate:not(:checked) > label:hover ~ label {

    color: #deb217;  

}

.rate > input:checked + label:hover,

.rate > input:checked + label:hover ~ label,

.rate > input:checked ~ label:hover,

.rate > input:checked ~ label:hover ~ label,

.rate > label:hover ~ input:checked ~ label {

    color: #c59b08;

}

/*rate one*/

.rate_one {

    border: 1px solid #cccccc;

    float: left;

    height: 46px;

    padding: 0 10px;

}

.rate_one:not(:checked) > input {

    position:absolute;

    top:-9999px;

}

.rate_one:not(:checked) > label {

    float:right;

    width:1em;

    overflow:hidden;

    white-space:nowrap;

    cursor:pointer;

    font-size:30px;

    color:#ccc;

}

.rate_one:not(:checked) > label:before {

    content: '★ ';

}

.rate_one > input:checked ~ label {

    color: #ffc700;    

}

.rate_one:not(:checked) > label:hover,

.rate_one:not(:checked) > label:hover ~ label {

    color: #deb217;  

}

.rate_one > input:checked + label:hover,

.rate_one > input:checked + label:hover ~ label,

.rate_one > input:checked ~ label:hover,

.rate_one > input:checked ~ label:hover ~ label,

.rate_one > label:hover ~ input:checked ~ label {

    color: #c59b08;

}

/*rate two*/

.rate_two {

    border: 1px solid #cccccc;

    float: left;

    height: 46px;

    padding: 0 10px;

}

.rate_two:not(:checked) > input {

    position:absolute;

    top:-9999px;

}

.rate_two:not(:checked) > label {

    float:right;

    width:1em;

    overflow:hidden;

    white-space:nowrap;

    cursor:pointer;

    font-size:30px;

    color:#ccc;

}

.rate_two:not(:checked) > label:before {

    content: '★ ';

}

.rate_two > input:checked ~ label {

    color: #ffc700;    

}

.rate_two:not(:checked) > label:hover,

.rate_two:not(:checked) > label:hover ~ label {

    color: #deb217;  

}

.rate_two > input:checked + label:hover,

.rate_two > input:checked + label:hover ~ label,

.rate_two > input:checked ~ label:hover,

.rate_two > input:checked ~ label:hover ~ label,

.rate_two > label:hover ~ input:checked ~ label {

    color: #c59b08;

}

</style>

Source Code of Form Design (index.html) :

<div class="container-fluid">

<form method="POST" autocomplete="off">

<div class="row">

<div class="col-md-5">

<h5 style="line-height: 50px;">Food Review</h5>

</div>

<div class="col-md-7">

<div class="form-group">

<div class="rate">

<input type="radio" id="star5" name="food_review" value="5" /><label for="star5" title="text">5 stars</label>

<input type="radio" id="star4" name="food_review" value="4" /><label for="star4" title="text">4 stars</label>

<input type="radio" id="star3" name="food_review" value="3" /><label for="star3" title="text">3 stars</label>

<input type="radio" id="star2" name="food_review" value="2" /><label for="star2" title="text">2 stars</label>

<input type="radio" id="star1" name="food_review" value="1" /><label for="star1" title="text">1 star</label>

</div>

</div>

</div>

</div>

<div class="row">

<div class="col-md-5">

<h5 style="line-height: 50px;">Restaurant Review</h5>

</div>

<div class="col-md-7">

<div class="form-group">

<div class="rate_one">

<input type="radio" id="star05" name="restaurant_review" value="5" /><label for="star05" title="text">5 stars</label>

<input type="radio" id="star04" name="restaurant_review" value="4" /><label for="star04" title="text">4 stars</label>

<input type="radio" id="star03" name="restaurant_review" value="3" /><label for="star03" title="text">3 stars</label>

<input type="radio" id="star02" name="restaurant_review" value="2" /><label for="star02" title="text">2 stars</label>

<input type="radio" id="star01" name="restaurant_review" value="1" /><label for="star01" title="text">1 star</label>

</div>

</div>

</div>

</div> 

<div class="row">

<div class="col-md-5">

<h5 style="line-height: 50px;">Driver Review</h5>

</div>

<div class="col-md-7">

<div class="form-group">

<div class="rate_two">

<input type="radio" id="star005" name="driver_review" value="5" /><label for="star005" title="text">5 stars</label>

<input type="radio" id="star004" name="driver_review" value="4" /><label for="star004" title="text">4 stars</label>

<input type="radio" id="star003" name="driver_review" value="3" /><label for="star003" title="text">3 stars</label>

<input type="radio" id="star002" name="driver_review" value="2" /><label for="star002" title="text">2 stars</label>

<input type="radio" id="star001" name="driver_review" value="1" /><label for="star001" title="text">1 star</label>

</div>

</div>

</div>

</div> 

<div class="row">

<div class="col-md-12">

<h5 style="line-height: 50px;">Comment</h5>

</div>

<div class="col-md-12">

<div class="form-group">

<textarea name="user_comment" class="form-control"></textarea>

</div>

</div>

</div> 

</div> 

</div>

<div class="modal-footer">    

<input type="submit" class="btn btn-success" name="save" value="Submit">

</div>

</form>

Database Table Design (user_review):

SOURCE CODE OF PHP FILE:

if(isset($_POST["save"])){

$food_review = $_POST["food_review"];
$restaurant_review = $_POST["restaurant_review"];
$driver_review = $_POST["driver_review"];
$user_comment = $_POST["user_comment"];

$order_id = $_POST["order_id"];
$shop_id = $_POST["shop_id"];
$driver_id = $_POST["driver_id"];
$userid = $_SESSION["userid"];

$reviewSql = $con->query("INSERT INTO user_review (food_review,restaurant_review,driver_review,client_id,user_comment,status,order_id,shop_id,driver_id) VALUES ('$food_review','$restaurant_review','$driver_review', '$userid','$user_comment','Pending', '$order_id','$shop_id','$driver_id')");

if($reviewSql){
echo '<script>
$(function () {
toastr.success("Review Submission Done.","Thanks for your review!!!");
});            
</script>';
}else{
echo '<script>
$(function () {
toastr.error("Review Submission Error.","Sorry!!!");
});            
</script>';
}
}

By implementing three files of code sample anyone can easily create review system like star rating system.

It is a complete guideline to create review system as star rating system using PHP, MySQL, CSS and HTML. There are many project post in this site. you can search your desire post from this site. Thanks for viewing my post.