How to display star ratings from the database in PHP and MySQL

Star rating is frequently 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 one column for rating. In the rating field, we will display stars and the caption for each rating with the appropriate color as shown below:

how to display star rating in php and mysql

Folders and Files

Below is a screenshot of the folder structure and files we will use:

display star rating in php and mysql

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 MySQL database. Table structure is given below:

how to display star rating in php and mysql

This table has 5 columns.

  1. id - Primary key and auto incremented
  2. hotel_name - Name of the hotel
  3. description - Description of the hotel
  4. rating - Rating of the hotel, it is an integer, values 0 - 5
  5. date_modified - Date of modification, default current date

hotels.sql


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 below php code to connect to the database.

dbconnect.php


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

  1. server - it is localhost
  2. userid - root user
  3. password - no password for the user root
  4. 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)

Rating for each hotel will be displayed as 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 color code, like for One Star it will be red and for Five Star it will be green. If no rating is given, default rating will be zero and it will denote Not-Rated as shown below:

how to display star rating in php and mysql

Let us now see the code for index.php

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 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 stars with highlighted color.

Add CSS (style.css)

Let us add below styles. We have already added style.css in index.php.

style.css


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 class 'selected' is added along with other simple styles. Keep this style.css in your css folder.

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

display star rating page in php and mysql

You can see the stars are showing with color for specific rating. If there is no rating it means rating is 0, then it displays Not-Rated and no star is colored.

download source code to display star rating in php and mysqlDownload Source Code

You can download the source code by clicking on the Download button below.

how to display star rating in php and mysqlConclusion

In this topic, we have given example for the hotels; it can be the rating for a product or feedback as well. You can change it to meet your requirements using the similar structure and concept. Hope it will be useful to you.