使用 jQuery、AJAX 和 PHP 建立 5 星級評級系統

網站上的星級評級系統使用戶可以輕鬆提供回饋並幫助其他人做出選擇。它為企業提供有關客戶如何喜歡其產品的回饋。星級評級也有助於建立對網站及其產品的信任。

所有主要電子商務網站都使用評級來讓買家了解他們對產品的期望品質。

在本教程中，我將向您展示如何建立自己的五星級評級系統。

為結構寫 HTML 與 CSS

建立星級評級系統過程的第一步是編寫標記，這取決於我們想要在頁面上顯示的元素。

我們絕對希望將電影的名稱包含在我們的評級小部件中。我們還需要在小部件內顯示五顆星，用戶可以點擊這些星來投票。用戶投票後，我們也會向他們顯示投票數據。

以下 HTML 實作了這一切：

<div class="rating-wrapper" data-id="raiders">
  <h2>Raiders of the Lost Ark</h2>
  <div class="star-wrapper">
    <i class="fa-regular fa-star"></i>
    <i class="fa-regular fa-star"></i>
    <i class="fa-regular fa-star"></i>
    <i class="fa-regular fa-star"></i>
    <i class="fa-regular fa-star"></i>
  </div>
  <p class="v-data">Voting Data</p>
</div>

我正在使用 Font Awesome 庫來添加星星。預設情況下，我們希望星星具有黑色描邊且無填充。 fa-regular 類別為我們做這件事。

我們還希望當使用者將滑鼠懸停在星星上時，將星星的顏色更改為淡黃色；當使用者點擊星星時，將星星的顏色更改為橙色，以表明他們的評分已被記錄。以下 CSS 為我們完成了這一切：

div.rating-wrapper {
  display: flex;
  align-items: first baseline;
  flex-direction: column;
  margin: 5rem;
  font-size: 1.5rem;
}

div.star-wrapper {
  font-size: 2rem;
}

div.star-wrapper i {
  cursor: pointer;
}

div.star-wrapper i.yellow {
  color: #FDD835;
}

div.star-wrapper i.vote-recorded {
  color: #F57C00;
}

p.v-data {
  background: #ccc;
  padding: 0.5rem;
}

編寫 jQuery 實作互動

我們現在將使用一些 jQuery 來回應使用者事件。我們想要在我們的星星上跟踪兩個事件。

讓我們從 mouseover 事件開始，這將使我們懸停的恆星及其之前的所有兄弟變成黃色。然而，只有當用戶尚未點擊星星登記投票時才會發生這種情況。我們將透過操作 Font Awesome 星形圖示的類別來實現此目的。

這是我們需要的程式碼：

$("div.star-wrapper i").on("mouseover", function () {
  if ($(this).siblings("i.vote-recorded").length == 0) {
    $(this).prevAll().addBack().addClass("fa-solid yellow").removeClass("fa-regular");  
    $(this).nextAll().removeClass("fa-solid yellow").addClass("fa-regular");
  }
});

我們使用 if 語句來檢查我們目前懸停的明星是否有任何兄弟姐妹，並且附加了 vote-recorded 類別。任何此類元素的存在都表明投票已被記錄。在這種情況下，我們不進行任何類別操作。

但是，如果投票尚未記錄，我們將獲取當前元素以及該元素之前的所有同級元素，並向其中添加 fa-solid 和 yellow 類別。我們也從目前元素後面的所有同級元素中刪除這些類別。

現在，我們將編寫處理 click 事件的 jQuery 程式碼。每當用戶點擊第四顆星時，我們就知道他們想給電影評分為四顆星。所以我們記錄之前兄弟的數量並加一得到 rating。我們還記錄 movie_id 以將評級新增至正確的電影。

$("div.star-wrapper i").on("click", function () {
  let rating = $(this).prevAll().length + 1;
  let movie_id = $(this).closest("div.rating-wrapper").data("id");
  
  if ($(this).siblings("i.vote-recorded").length == 0) {
    
    $(this).prevAll().addBack().addClass("vote-recorded");
    $.post("update_ratings.php", { movie_id: movie_id, user_rating: rating }).done(
      function (data) {
        parent_div.find("p.v-data").text(data);
      }
    );
    
  }
});

我們再次檢查是否已為該特定電影記錄了投票。如果尚未記錄投票，我們將 vote-recorded 類別新增到目前點擊的元素及其所有先前的同級元素中。

我們也使用 jQuery post() 方法透過 POST 請求將投票資料傳送到後端。第一個參數是將處理我們的請求的 PHP 腳本的 URL，而第二個參數是我們要處理的資料。

我們也在 done() 中提供回調，以進一步處理成功處理我們的請求後從伺服器發送給我們的資料。

以下 CodePen 示範展示了我們的評級系統的前端外觀：

編寫PHP記錄投票

我們將使用 MySQL 資料庫在後端儲存我們的投票記錄。您可以使用您喜歡的任何應用程式來管理資料庫。我正在使用 phpMyAdmin。這裡的第一步是建立一個資料庫，我將其命名為 rating_test。現在，我們將在資料庫中建立一個名為 movie_ ratings 的表。在資料庫上執行以下 SQL 查詢來建立表格：

CREATE TABLE `movie_ratings`(
    `id` INT(11) NOT NULL AUTO_INCREMENT,
    `movie_id` VARCHAR(128) NOT NULL DEFAULT '',
    `average_rating` DOUBLE NOT NULL DEFAULT 0,
    `total_votes` DOUBLE NOT NULL DEFAULT 0,
    PRIMARY KEY(`id`)
) ENGINE = InnoDB DEFAULT CHARSET = utf8;

執行上述語句將建立一個名為 movie_ ratings 的表，其中包含四個不同的欄位。

第一個是自動遞增的 id，它作為我們新增到表中的每筆記錄的主鍵。第二個是 movie_id，它將標識一部電影，最多可以包含 128 個字元。第三個是 average_ rating 來儲存迄今為止所有投票的平均值。第四個，total_votes，用於追蹤已投票總數。

再回顧一下上一節中post()方法的第一個參數。您將看到字串 update_atings.php，這是我們現在需要建立的檔案。該文件將包含更新和記錄電影評級的 PHP 程式碼。

$movie_id = $_POST['movie_id'];
$user_rating = $_POST['user_rating'];

$mysqli = new mysqli('localhost', 'root', '', 'rating_test');

if ($mysqli->connect_errno) {
    die("Error while connecting: " . $mysqli->connect_error);
}

我们首先使用 $_POST 获取 POST 数据，然后创建一个新的 mysqli 对象来建立与数据库的连接。然后我们检查 connect_errno 的值，看看我们的数据库连接调用期间是否出现错误。

$rating_query = $mysqli->query("SELECT * from `movie_ratings` WHERE `movie_id` = '$movie_id'");
$rating_query_rows = mysqli_num_rows($rating_query);

if($rating_query_rows == 0) {
    $mysqli->query("INSERT INTO `movie_ratings` (`movie_id`, `average_rating`, `total_votes`) VALUES ('$movie_id', $user_rating, 1)");

    echo "Average Rating: $user_rating Total Votes: 1";
} else {

    $rating_data = $rating_query->fetch_array(MYSQLI_ASSOC);

    $total_votes = $rating_data['total_votes'];
    $average_rating = $rating_data['average_rating'];

    $rating_sum = $average_rating*$total_votes + $user_rating;

    $total_votes += 1;
    $new_average_rating = round($rating_sum/($total_votes), 2);

    $mysqli->query("UPDATE `movie_ratings` SET `average_rating` = $new_average_rating, `total_votes` = $total_votes  WHERE `movie_id` = '$movie_id'");

    echo "Average Rating: $new_average_rating Total Votes: $total_votes";
}

建立连接后，我们运行第一个查询来查看是否已存在要更新其评分的电影的行。

如果没有这样的电影，我们运行另一个查询以将电影插入表中。由于这是该电影的第一次投票，因此我们将总票数设置为 1。

但是，如果表中已经有一行包含我们传递的 movie_id，我们将从该行获取电影的总票数和当前平均评分。之后，我们计算新的评分并相应更新数据库。

最后，我们回显平均评分和总票数的新值以将其显示给用户。

最终想法

为了简单起见，这不是 100% 完整的解决方案。为了扩展这个项目，我们应该存储一个 cookie 以确保人们只投票一次，甚至记录 IP 地址。然而，这是一个很好的开始，并且非常适合跟踪对您网站上的博客文章、评论和图像等项目的投票。

以上是使用 jQuery、AJAX 和 PHP 建立 5 星級評級系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！