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