PHP如何实现五角星评论（步骤）-PHP问题-PHP中文网

PHP如何实现五角星评论（步骤）

PHPz

发布： 2023-04-11 10:41:33

原创

1044人浏览过

今天，我们将学习如何使用php实现五角星评论系统。这种系统通常用于让用户对某个产品、文章或服务进行评分，并显示平均得分。

步骤1：创建HTML表单

我们首先需要创建一个HTML表单，让用户选择要评分的项目，并给它们一个分数：

<form action="submit.php" method="post">
 <p>请对产品进行评分：</p>
 <input type="radio" name="rating" value="1">1分
 <input type="radio" name="rating" value="2">2分
 <input type="radio" name="rating" value="3">3分
 <input type="radio" name="rating" value="4">4分
 <input type="radio" name="rating" value="5">5分
 <br>
 <input type="submit" value="提交">
</form>

登录后复制

步骤2：处理表单数据

立即学习“PHP免费学习笔记（深入）”；

在submit.php文件中，我们需要处理用户提交的表单数据并将它们存储到数据库中。首先，我们将检查用户是否选择了一个评分项，如果未选择，则显示错误消息。

接下来，我们将创建一个数据库连接并执行INSERT查询，以将评分数据添加到数据库中。我们还将计算所有评分的平均值，并将其存储在另一个数据库表中。

<?php
 if(empty($_POST['rating'])) {
   echo "请选择评分项";
 } else {
   $rating = $_POST['rating'];
   $conn = mysqli_connect("localhost", "username", "password", "database");
   $query = "INSERT INTO ratings (rating) VALUES ('$rating')";
   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['average'];

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

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

登录后复制

步骤3：显示平均得分

最后，我们将向用户显示所有评分的平均值。我们将从数据库中检索此值，并将其显示在网页上。

<?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['average'], 1);
?>

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

登录后复制

步骤4：实现五角星评分

现在，我们已经能够收集并显示评分，但是我们想要向用户提供更好的视觉体验。因此，我们将使用五角星代替原始的单选按钮。

为此，我们将使用HTML、CSS和JavaScript来创建五角星，并用PHP来处理用户提交的表单数据。我们将用CSS将五角星设置为灰色，并使用JavaScript在用户将鼠标悬停在星星上时将其着色为黄色。

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

<span id="rating" class="unchecked" onclick="rate(this)">
 <?php
   for($i = 1; $i <= 5; $i++) {
     echo "<i class='fa fa-star' data-value='$i'></i>";
   }
 ?>
</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='rating']").value = clicked;
 }
</script>

登录后复制

现在，当用户悬停在星星上时，它们将着色为黄色，并且对应的评分值将放入表单数据中。

最后，我们将PHP提交处理的代码中的单选按钮替换为隐藏的表单输入。该输入将在JavaScript中自动填充。

<span id="rating" class="unchecked" onclick="rate(this)">
 <?php
   for($i = 1; $i <= 5; $i++) {
     echo "<i class='fa fa-star' data-value='$i'></i>";
   }
 ?>
</span>

<input type="hidden" name="rating" value="" required>

登录后复制

在这里，我们可以将单选按钮的名称设置为“rating”，并为其设置“required”属性以确保用户选择一个项。

现在，我们已经成功地实现了一个五角星评论系统，可以让用户将评分与网站、产品或文章关联，并向其他用户显示平均得分。这种系统是一种简单而有用的交互功能，可以提高用户体验，并帮助网站所有者更好地了解其受众。

以上就是PHP如何实现五角星评论（步骤）的详细内容，更多请关注php中文网其它相关文章！