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.

Read More

How to create custom invoice page?

Create an invoice with custom sizes

What is an Invoice?

An invoice is a commercial/Business document That Includes sale transaction and indicating the products name, product sizes, products quantities, and prices for products/services the seller had provided the buyer. 

An Invoice is a document in which the details of products or services is noted in such a way that is easily understandable to anyone. An invoice is necessary to keep records of products or services. So that it can help in future for any business issue. 

When you are going to create an invoice using html and css. After Creating an invoice, if you are going to print that invoice Then it will be printed with a A4 size page. Now you need to print your invoice with custom page size then this article for you. 

Sometimes we need to create custom invoice page size. For this purpose, we need to design invoice page size with css and html. In this post, i have created a custom invoice page with css and html. This custom invoice page will take one-fourth part of A4 size page. That means by using one A4 size page we can create four invoice. 

In this article, i am going to show custom invoice page with a simple example. After that, I will show a full project with source code.

Code of Custom Invoice Page:

This simple example, I have divided with three different part. First one CSS part, Second one HTML part and Third one is JavaScript Part.

In this CSS part, I am showing how to design the invoice page. Using this css code you can easily design your invoice page. You can also redesign your invoice page using css code. In the following i have given the css code within  opening style tag and ending style tag.

CSS Example:

<style>

body {

 width: 100%;

 height: 100%;

 margin: 0;

 padding: 0;

 background-color: #FAFAFA;

 font: 12pt "Tahoma";

 }

 .page {

 width: 101.6mm;

 min-height: 142.24mm;

 padding: 0 auto;

 margin: 0 auto;

 border: 1px #D3D3D3 solid;    

 background: white;     

 }

 .subpage {

 border: 1px red solid;

 height: 142.24mm;      

 }

    

 @page {

width: 101.6mm;

 height: 142.24mm;

margin: 0;

 }

 @media print {

 html, body {

 width: 101.6mm;

 height: 142.24mm;   

background: white;

 }

 .page {

 margin: 0;

 border-radius: initial;

 width: 101.6mm;

 min-height: 142.24mm;

 background: white;

 }

 }

</style>

In HTML Page:

In this HTML part, You can place your css and javascript code in head section. Html page is started with Opening html tag and end with ending Html tag. You can also use javascript code below of ending html tag and also use external link to add css code.

<html>
<head></head>
<body>
<div class="book"> 

<div class="page"> 

<div class="subpage">Page One</div> 

</div> 

</div>
</body>
</html>

Javascript Example:

In Javascript part, I have given javascript code.

<script>

window.print();

</script>

Using the above three part you can easily create an invoice. But It will show with A4 size page. It's so easy way to create an invoice. 

Now if you need to Custome Invoice page Then you have to follow the following example. In the below example i have given full source code step by step. That;s why by following the below source code anyone can create an custom invoice page.

Full Source Code of Custom Invoice Page:

In this example I have used only one page to create custom invoice page. After running the below code you will get an custome invoice page that is one fourth of A4 page. 

Using One A4 size page you can create four invoice.

<?php 

include('includes/header.php');

include('includes/menu.php');

?>

<div id="page-wrapper" >

<div id="page-inner">

<div class="row">

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

<?php include("head.php")?>

<div class="panel panel-default">

<div class="panel-heading">

Print Page

</div>

<div class="panel-body">

<div class="row">

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

<div id="page">

<div class="subpage">

<?php

$tmp=0;

if(isset($_GET["id"]) && $_GET["id"]!=NULL){

$x=$_GET["slid"];

$qry=mysql_query("SELECT `tble_name`.*, `tble_name`.`col_name` FROM `tble_name`, `tble_name` WHERE `tble_name`='$x' AND `tble_name`.`id`=`tble_name`.`id` ");

$data=mysql_fetch_array($qry);

$fl=mysql_query("SELECT * FROM `tble_name` WHERE `id`= '".$data["col_name"]."'");

$fld=mysql_fetch_array($fl);

$cid = $_GET["id"];

$rid = $_GET["rid"];

$get_rent=mysql_query("SELECT `col_name` FROM `tble_name` WHERE `col_name`='$cid' AND `col_name`='$rid' ");

$get_rent_row=mysql_fetch_array($get_rent);

?>

<style>

#size{

margin: 0;

}

.sl{

width:5%;

text-align:center;

}

.dtl{

width:70%;

text-align:center;

}

.dtl1{

width:70%;

text-align:left;

}

.val{

text-align:center;

}

table {

border-collapse: collapse;

}

table, th, td {

border: 1px solid black;

}

body {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

background-color: #FAFAFA;

font: 12pt "Tahoma";

}

.page {

width: 101.6mm;

min-height: 142.24mm;

padding: 0 auto;

margin: 0 auto;

/* border: 1px #D3D3D3 solid;  */  

background: white;     

}

.subpage {

/* border: 1px red solid;*/

height: 142.24mm;      

}

    

@page {

width: 101.6mm;

height: 142.24mm;

margin: 0;

}

@media print {

html, body {

width: 101.6mm;

height: 142.24mm;   

background: white;

}

.page {

margin: 0;

border-radius: initial;

width: 101.6mm;

min-height: 142.24mm;

background: white;

}

}

</style>

<div id="size">

<center>

<font size=2><b>35/A, AK Tower, New Market</font><br>

<font size=2>Dhaka 1200<br>

Phone: (+880) 17xxxxxxx</font></br>

</br></center>

<span style="font-size:14px;">

<table width="98%" align=center>

<tr>
<td>Serial Number : <?php echo $_GET["slid"];?> </td>
<td>Floor/Shop : <?php echo $fld["f_name"]?>/<?php echo $data["ob_sname"]?></td></tr>

<tr>

<td>

Name : <?php echo $data["c_name"]?></td>

<td>Rent Month: <?php echo $data["ob_bill_month"]?></td>

</tr>

<tr>

<td>Issue Date: <?php echo dfpage($data["ob_issue"])?> </td>

</tr>

</table><br>

<table width="98%" border=1 align=center>

<tr><th class="">Serial Number</th><th class="dtl">Details</th><th  style="text-align:center">Amount</th></tr>

<tr>

<td class="">01</td>

<td class="dtl1">Monthly Rent</td>

<td class="val"><?php echo $get_rent_row["r_mrent"];

$tmp+=$get_rent_row["r_mrent"];?></td>

</tr>

<tr>

<td class="">02</td>

<td class="dtl1">Electricity Bill</td>

<td class="val"><?php echo $data["electric_bill"]; $tmp+=$data["ob_uu_bill"];?></td>

</tr>

<tr>

<td class="">03</td>

<td class="dtl1">Due Bill</td>

<td class="val"><?php echo $data["due_bill"]; $tmp+=$data["ob_mcharge"];?></td>

</tr>

<tr><td class="">04</td>

<td class="dtl1">Service Charge</td>

<td  class="val"><?php echo $data["service_bill"]; $tmp+=$data["ob_vat"];?></td>

</tr>

<tr>

<td class="" colspan="2" align="center" ><b>Total Bill</b></td>

<td width="15%" class="val"><?php echo $tmp = $data["total_bill"];?></td>

</tr>

</table>

</span>

<!-- <span style="margin-left:15px">

Amount : <?php echo convertNumberToWord($tmp);?> Taka Only</span> --><br><br><br>

<span style="margin-left:0px">(Signature)</span>

<span  style="margin-left:0px">(Signature)</span>

<span  style="margin-left:0px">(Owner Signature)</span>

</div>

</div> 

</div>

<?php 

}

?>

</div>

<div class="panel-body">

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

<input type="button" value="Print" onclick="PrintElem2('#page')" class="btn-success" /></div>

</div>

</div>

</div>

</div>

 </div>

</div>

<!-- /. ROW  -->

<hr />                  

</div>

<!-- /. PAGE INNER  -->

 </div>

<!-- /. PAGE WRAPPER  -->

</div>

<?php include('includes/footer.php');?>

<script type="text/javascript">

function PrintElem2(elem)

{

Popup($(elem).html());

}

function Popup(data) 

{

var mywindow = window.open('', 'my div', 'height=595px,width=420px');

var is_chrome = Boolean(mywindow.chrome);

mywindow.document.write('<html><head><title>Binary IT</title><style>a {text-decoration:none;}</style>');

/*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');

mywindow.document.write('</head><body>');

mywindow.document.write(data);

mywindow.document.write('</body></html>');

if (is_chrome) {

setTimeout(function() { // wait until all resources loaded 

mywindow.document.close(); // necessary for IE >= 10

mywindow.focus(); // necessary for IE >= 10

mywindow.print(); // change window to winPrint

mywindow.close(); // change window to winPrint

}, 500);

} else {

mywindow.document.close(); // necessary for IE >= 10

mywindow.focus(); // necessary for IE >= 10

mywindow.print();

mywindow.close();

}

return true;

}

</script>

Read More