今天，我們將學習如何使用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：處理表單資料
在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中文網其他相關文章！
