Bina sistem penarafan 5 bintang menggunakan jQuery, AJAX dan PHP

Sistem penarafan bintang di tapak web memudahkan pengguna memberikan maklum balas dan membantu orang lain membuat pilihan mereka. Ia menyediakan maklum balas kepada perniagaan tentang cara pelanggan menyukai produk mereka. Penarafan bintang juga membantu membina kepercayaan pada tapak web dan produknya.

Semua tapak web e-dagang utama menggunakan penilaian untuk memberitahu pembeli tentang kualiti yang mereka boleh jangkakan daripada produk.

Dalam tutorial ini, saya akan menunjukkan kepada anda cara membina sistem penilaian lima bintang anda sendiri.

Tulis HTML dan CSS untuk struktur

Langkah pertama dalam proses membina sistem penarafan bintang ialah menulis markup, yang bergantung pada elemen yang ingin kami paparkan pada halaman.

Kami pasti mahu memasukkan nama filem dalam widget penilaian kami. Kami juga perlu memaparkan lima bintang dalam widget yang pengguna boleh klik untuk mengundi. Selepas pengguna mengundi, kami juga akan memaparkan data pengundian kepada mereka.

HTML berikut mencapai semua ini:

<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>

Saya menggunakan perpustakaan Font Awesome untuk menambah bintang. Secara lalai, kami mahu bintang mempunyai strok hitam dan tiada isi. Kelas fa-regular melakukan ini untuk kami. 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() Kami juga mahu warna bintang bertukar kepada kuning muda apabila pengguna menuding di atasnya dan kepada oren apabila pengguna mengklik padanya untuk menunjukkan bahawa rating mereka telah direkodkan . CSS berikut melakukan semuanya untuk kita:

$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);
}

Menulis jQuery untuk mencapai interaksi 🎜Kami kini akan menggunakan beberapa jQuery untuk bertindak balas kepada acara pengguna. Terdapat dua acara yang ingin kami jejaki pada bintang kami. 🎜 🎜Mari kita mulakan dengan acara mouseover, yang akan menjadikan bintang melayang kami dan semua adik-beradiknya yang terdahulu menjadi kuning. Walau bagaimanapun, ini hanya berlaku jika pengguna belum mengklik pada bintang untuk mendaftar mengundi. Kami akan melakukan ini dengan memanipulasi kelas ikon bintang Font Awesome. 🎜 🎜Ini adalah kod yang kami perlukan: 🎜

$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";
}

🎜Kami menggunakan pernyataan if untuk menyemak sama ada bintang kami yang sedang berlegar mempunyai adik-beradik, dan melampirkan kelas rekod undian. Kehadiran mana-mana elemen sedemikian menunjukkan bahawa undian telah direkodkan. Dalam kes ini kami tidak melakukan sebarang manipulasi kelas. 🎜 🎜Namun, jika undian belum direkodkan, kami akan mendapatkan elemen semasa dan semua adik-beradik sebelum itu dan menambah kelas fa-solid dan kuning kepada mereka. Kami juga mengalih keluar kelas ini daripada semua elemen adik-beradik yang mengikut elemen semasa. 🎜 🎜Sekarang, kami akan menulis kod jQuery yang mengendalikan acara klik. Setiap kali pengguna mengklik pada bintang keempat, kami tahu mereka mahu menilai filem itu empat bintang. Jadi kami merekodkan bilangan saudara terdahulu dan menambah seorang untuk mendapatkan rating. Kami juga log movie_id untuk menambah rating pada filem yang betul. 🎜 rrreee 🎜Kami menyemak semula sama ada undian telah direkodkan untuk filem tersebut. Jika undian belum direkodkan lagi, kami menambah kelas rekod undi pada elemen yang sedang diklik dan semua adik-beradiknya yang terdahulu. 🎜 🎜Kami juga menggunakan kaedah post() jQuery untuk menghantar data undian ke bahagian belakang melalui permintaan POST. Parameter pertama ialah URL skrip PHP yang akan mengendalikan permintaan kami, manakala parameter kedua ialah data yang ingin kami proses. 🎜 🎜Kami juga menyediakan panggilan balik dalam done() untuk memproses selanjutnya data yang dihantar kepada kami daripada pelayan selepas berjaya memproses permintaan kami. 🎜 🎜Demo CodePen berikut menunjukkan rupa bahagian hadapan sistem penilaian kami: 🎜 🎜🎜

Menulis PHP untuk merekod pengundian🎜 🎜Kami akan menggunakan pangkalan data MySQL untuk menyimpan rekod pengundian kami di bahagian belakang. Anda boleh menggunakan mana-mana aplikasi yang anda suka untuk menguruskan pangkalan data. Saya menggunakan phpMyAdmin. Langkah pertama di sini ialah mencipta pangkalan data, yang saya namakan rating_test. Sekarang, kami akan membuat jadual yang dipanggil penilaian_ filem dalam pangkalan data. Jalankan pertanyaan SQL berikut pada pangkalan data untuk mencipta jadual: 🎜 rrreee 🎜Melaksanakan pernyataan di atas akan membuat jadual bernama penilaian_filem dengan empat lajur berbeza. 🎜 🎜Yang pertama ialah id peningkatan automatik yang berfungsi sebagai kunci utama untuk setiap rekod yang kami tambahkan pada jadual. Yang kedua ialah movie_id, yang akan mengenal pasti filem dan boleh mengandungi sehingga 128 aksara. Yang ketiga ialah average_ rating untuk menyimpan purata semua undian setakat ini. Yang keempat, total_votes, menjejaki jumlah undian yang diberikan. 🎜 🎜Semak parameter pertama kaedah post() dalam bahagian sebelumnya. Anda akan melihat rentetan 🎜update_atings.php🎜, iaitu fail yang perlu kami buat sekarang. Fail ini akan mengandungi kod PHP yang mengemas kini dan merekodkan rating filem. 🎜

$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 地址。然而，这是一个很好的开始，并且非常适合跟踪对您网站上的博客文章、评论和图像等项目的投票。

Atas ialah kandungan terperinci Bina sistem penarafan 5 bintang menggunakan jQuery, AJAX dan PHP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!