How to implement five-pointed star comments in PHP (steps)

Today, we will learn how to use PHP to implement a five-pointed star comment system. This system is typically used to allow users to rate a product, article or service and display the average score.

Step 1: Create an HTML form

We first need to create an HTML form that lets users select items to rate and give them a score:

 

请对产品进行评分：

 1分  2分  3分  4分  5分  
 

Step 2: Processing form data

In the submit.php file, we need to process the form data submitted by the user and store them in the database. First, we will check if the user has selected a rating item and display an error message if not.

Next, we will create a database connection and perform an INSERT query to add the rating data to the database. We will also calculate the average of all ratings and store it in another database table.

<?php  if(empty($_POST[&#39;rating&#39;])) {
   echo "请选择评分项";
 } else {
   $rating = $_POST[&#39;rating&#39;];
   $conn = mysqli_connect("localhost", "username", "password", "database");
   $query = "INSERT INTO ratings (rating) VALUES (&#39;$rating&#39;)";
   mysqli_query($conn, $query);

   $avg_query = "SELECT AVG(rating) as average FROM ratings";
   $result = mysqli_query($conn, $avg_query);
   $row = mysqli_fetch_assoc($result);
   $average = $row[&#39;average&#39;];

   $avg_insert = "INSERT INTO average_rating (average) VALUES ($average)";
   mysqli_query($conn, $avg_insert);

   echo "感谢您的评分！";
 }
?>

Step 3: Display the average score

Finally, we will display the average of all ratings to the user. We will retrieve this value from the database and display it on the web page.

<?php  $conn = mysqli_connect("localhost", "username", "password", "database");
 $avg_query = "SELECT AVG(average) as average FROM average_rating";
 $result = mysqli_query($conn, $avg_query);
 $row = mysqli_fetch_assoc($result);
 $average = round($row[&#39;average&#39;], 1);
?>

<p>平均得分： <?php  echo $average ?>/5</p>

Step 4: Implement the five-pointed star rating

Now, we have been able to collect and display the ratings, but we want to provide a better visual experience to the user. Therefore, we will use a five-pointed star instead of the original radio button.

To do this, we will use HTML, CSS, and JavaScript to create the five-pointed star, and PHP to process the user-submitted form data. We'll use CSS to make the five-pointed star gray, and use JavaScript to color the star yellow when the user hovers over it.

<style>
 .unchecked {
   color: grey;
 }
 .checked {
   color: yellow;
   cursor: pointer;
 }
</style>

<span>
 <?php    for($i = 1; $i <= 5; $i++) {
     echo "<i class=&#39;fa fa-star&#39; data-value=&#39;$i&#39;>";
   }
 ?>
</span>

<script>
 function rate(element) {
   var stars = element.getElementsByTagName("i");
   for(var i = 0; i < stars.length; i++) {
     stars[i].classList.remove("checked");
     stars[i].classList.add("unchecked");
   }

   var clicked = event.target.dataset.value;
   for(var i = 0; i < clicked; i++) {
     stars[i].classList.remove("unchecked");
     stars[i].classList.add("checked");
   }

   document.querySelector("input[name=&#39;rating&#39;]").value = clicked;
 }
</script>

Now when the user hovers over the stars, they will be colored yellow and the corresponding rating value will be put into the form data.

Finally, we replace the radio buttons in the code for PHP submission handling with hidden form inputs. The input will be automatically populated in JavaScript.

<span>
 <?php    for($i = 1; $i <= 5; $i++) {
     echo "<i class=&#39;fa fa-star&#39; data-value=&#39;$i&#39;>";
   }
 ?>
</span>

<input>

Here we can set the name of the radio button to "rating" and set the "required" attribute on it to ensure that the user selects an item.

We have now successfully implemented a five-pointed star review system that allows users to associate ratings with a website, product, or article and display the average score to other users. This system is a simple yet useful interactive feature that improves user experience and helps website owners better understand their audience.

The above is the detailed content of How to implement five-pointed star comments in PHP (steps). For more information, please follow other related articles on the PHP Chinese website!