PHP如何實作五角星評論（步驟）

今天，我們將學習如何使用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[&#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 "感谢您的评分！";
 }
?>

步驟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[&#39;average&#39;], 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=&#39;fa fa-star&#39; data-value=&#39;$i&#39;></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=&#39;rating&#39;]").value = clicked;
 }
</script>

現在，當使用者懸停在星星上時，它們將著色為黃色，並且對應的評分值將放入表單資料中。

最後，我們將PHP提交處理的程式碼中的單選按鈕替換為隱藏的表單輸入。此輸入將在JavaScript中自動填入。

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

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

在這裡，我們可以將單選按鈕的名稱設為“rating”，並為其設定“required”屬性以確保使用者選擇一個項目。

現在，我們已經成功地實現了一個五角星評論系統，可以讓用戶將評分與網站、產品或文章關聯，並向其他用戶顯示平均分數。這種系統是一種簡單而有用的互動功能，可以提高用戶體驗，並幫助網站所有者更好地了解其受眾。

以上是PHP如何實作五角星評論（步驟）的詳細內容。更多資訊請關注PHP中文網其他相關文章！