今天，我们将学习如何使用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”属性以确保用户选择一个项。
现在，我们已经成功地实现了一个五角星评论系统，可以让用户将评分与网站、产品或文章关联，并向其他用户显示平均得分。这种系统是一种简单而有用的交互功能，可以提高用户体验，并帮助网站所有者更好地了解其受众。
