Star rating is widely used to display ratings, reviews, or feedback on a product or service. For example, you can show a list of hotels with their star ratings (from 1 star to 5 stars) by developing an application in PHP and MySQL.
We will take a simple example of a database table that stores hotel details. Each hotel has a rating field which is a number and can have values between 0 and 5. We have added '0' also for not rated hotels. Each number has a caption, 0 - Not Rated, 1- One Star, 2 - Two Star, 3 - Three Star, 4 - Four Star, 5 - Five Star.
We will display the details of the hotels in an html table and in this table, there will be a column for rating. In the rating field, we will display stars and the caption for each rating with the appropriate color as shown below:

Folders and Files
The folder structure and the files we will use:
We have created a folder called 'star_rating' under 'xampp/htdocs'.
Folder 'cfg' - We have kept dbconnect.php
in this folder, this is for database connection.
Folder 'css' - Custom stylesheet is in this folder
index.php
is the main program that displays a list of hotels with star ratings.
Create a database table to store hotel details
We will create a table named 'hotels' in a MySQL database. The table structure is given below:
This table has 5 columns.
- id - Primary key and auto incremented
- hotel_name - Name of the hotel
- description - Description of the hotel
- rating - Rating of the hotel, it is an integer, values 0 - 5
- date_modified - Date of modification, default is current date
CREATE TABLE `hotels` (
`id` int(11) NOT NULL,
`hotel_name` varchar(200) NOT NULL,
`description` varchar(500) NOT NULL,
`rating` tinyint(4) NOT NULL,
`date_modified` date NOT NULL DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `hotels` (`id`, `hotel_name`, `description`, `rating`, `date_modified`) VALUES
(1, 'NJoyNEat', 'For your delicious foods and enjoy all kinds of ride', 1, '2021-12-01'),
(2, 'New Guest House', 'All kinds of modern facilities available with free Wi-Fi', 5, '2021-02-11'),
(3, 'Hotel Sonali', 'Sea facing rooms for your holiday leisures, now book online and get 10% discount', 4, '2021-12-01'),
(4, 'Hotel Express', 'New Hotel for all your modern amenities', 2, '2021-12-01'),
(5, 'Resort and Inn', 'Your perfect holiday stay', 0, '2021-12-01');
ALTER TABLE `hotels`
ADD PRIMARY KEY (`id`);
ALTER TABLE `hotels`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
Connect to MySQL database (dbconnect.php)
Use the below php code to connect to the database.
<?php
$server="localhost";
$userid="root";
$pwd="";
$dbname="test";
$conn = mysqli_connect($server, $userid, $pwd, $dbname);
//Check connection
if (!$conn)
die("Connection Error: " . mysqli_connect_error());
we are using mysqli_connect()
function with the below parameters.
- server - it is localhost
- userid - root user
- password - no password for the user root
- database name - test database in our case.
You can also read the topic How to Connect to MySQL Database in PHP using MySQLi and PDO.
Write a PHP program to display a list of hotels with star ratings (index.php)
The rating for each hotel will be displayed as a star symbol and depending on the rating, one or more star symbols will be highlighted. Also, a description of the rating will be displayed with a color code, like for One Star it will be red and for Five Star it will be green. If no rating is given, the default rating will be zero and it will denote Not-Rated as shown below:

Let us now see the code for index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Star Rating</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h2>Hotels</h2>
<table class="tbl-hotel">
<thead>
<tr><th>Sr No.</th><th>Hotel Name</th><th>Description</th><th>Rating</th></tr>
</thead>
<tbody>
<?php
include "cfg/dbconnect.php";
$sql = "select * from hotels order by hotel_name";
$result = mysqli_query($conn,$sql);
if(mysqli_num_rows($result) > 0) { // if hotel exists
$i=0; $counter = 0;
foreach ($result as $hotel) {
$counter++;
$rating = $hotel["rating"];
switch ($rating) {
case 0:
$rating = "Not Rated";
$label = "label-default";
break;
case 1:
$rating = "One Star";
$label = "label-danger";
break;
case 2:
$rating = "Two Star";
$label = "label-warning";
break;
case 3:
$rating = "Three Star";
$label = "label-info";
break;
case 4:
$rating = "Four Star";
$label = "label-primary";
break;
case 5:
$rating = "Five Star";
$label = "label-success";
break;
}?>
<tr>
<td><?= $counter.".";?></td>
<td><div class="hotel"><?=$hotel["hotel_name"]; ?></div></td>
<td><div><?= $hotel["description"]; ?></div></td>
<td>
<div class="hotel-rating">
<ul>
<?php
for($i=1;$i<=5;$i++) {
if ($i <= $hotel["rating"])
$class = "selected";
else
$class = "";
?>
<li class='<?php echo $class; ?>'>★</li>
<?php } ?>
</ul>
</div>
<span class="label <?= $label?>"><?=$rating;?></span>
</td>
</tr>
<?php
}
}
else { ?>
<tr><td colspan="5">No Hotels available to display</td></tr>
<?php } ?>
</tbody>
</table>
</div>
</body>
</html>
We have a simple html table with three fields. For rating, we have a number, but we need to display stars and highlight the number of stars based on the rating value.
Using a for loop, star symbols are displayed. All stars with values less than or equal to the rating are being added with a class called 'selected'. This class is defined in the style.css and it is used to show the stars with the highlighted color.
Add CSS (style.css)
Let us add the below styles. We have already added style.css
in index.php
.
body{
font-size: 18px;
}
h2 {
text-align: center;
}
.tbl-hotel {
width: 100%;
border-spacing: initial;
line-height:26px;
word-break: break-word;
margin: auto;
}
.tbl-hotel th {
background-color: #2982b6ed;
color:#fff;
padding: 4px;
}
.tbl-hotel td {
border-bottom: #f0f0f0 1px solid;
padding: 4px;
}
.tbl-hotel td div.hotel{
text-decoration: none;
color:#4685bc;
font-weight:bold;
}
.tbl-hotel ul{
margin:0;
padding:0;
}
.tbl-hotel li{
cursor:pointer;
display: inline-block;
text-shadow: 0 0 1px #666666;
color: #aaa;
font-size:20px;
}
.tbl-hotel .selected {
color:#F4B30A;
text-shadow: 0 0 1px #F48F0A;
}
.label{
font-size: 95%;
}
.tbl-hotel .hotel-rating{
display:inline-block;
padding-right: 14px;
}
You can see the class 'selected' is added along with other simple styles. Keep this style.css
in your css folder.
Test the Application
Check that Apache and MySQL services are running in the XAMPP control panel. Run localhost/star_rating in the browser. You will see the below page displayed:

You can see the stars are showing with color for specific ratings. If there is no rating it means the rating is 0, then it displays “Not-Rated” and no stars are highlighted.
Post a Comment