PHP如何實作五角星評論(步驟)

PHPz
發布: 2023-04-11 13:47:48
原創
800 人瀏覽過

今天,我們將學習如何使用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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板