Erstellen Sie ein 5-Sterne-Bewertungssystem mit jQuery, AJAX und PHP

Das Sternebewertungssystem auf der Website macht es Benutzern leicht, Feedback zu geben und anderen bei ihrer Auswahl zu helfen. Es gibt Unternehmen Feedback darüber, wie Kunden ihre Produkte mögen. Sternebewertungen tragen auch dazu bei, Vertrauen in eine Website und ihre Produkte aufzubauen.

Alle großen E-Commerce-Websites verwenden Bewertungen, um Käufern mitzuteilen, welche Qualität sie von Produkten erwarten können.

In diesem Tutorial zeige ich Ihnen, wie Sie Ihr eigenes Fünf-Sterne-Bewertungssystem erstellen.

Schreiben Sie HTML und CSS für die Struktur

Der erste Schritt beim Aufbau eines Sternebewertungssystems besteht darin, das Markup zu schreiben, das von den Elementen abhängt, die wir auf der Seite anzeigen möchten.

Wir möchten auf jeden Fall den Namen des Films in unser Bewertungs-Widget aufnehmen. Außerdem müssen wir im Widget fünf Sterne anzeigen, auf die Benutzer klicken können, um abzustimmen. Nachdem die Nutzer abgestimmt haben, zeigen wir ihnen auch Abstimmungsdaten an.

Der folgende HTML-Code erreicht all dies:

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

Ich verwende die Font Awesome-Bibliothek, um die Sterne hinzuzufügen. Standardmäßig möchten wir, dass die Sterne einen schwarzen Strich und keine Füllung haben. fa-regular Klassen erledigen das für uns.

Wir möchten außerdem, dass sich die Farbe des Sterns in Hellgelb ändert, wenn der Benutzer mit der Maus darüber fährt, und in Orange, wenn der Benutzer darauf klickt, um anzuzeigen, dass seine Bewertung aufgezeichnet wurde. Das folgende CSS erledigt alles für uns:

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

Schreiben Sie jQuery, um die Interaktion zu implementieren

Wir werden jetzt jQuery verwenden, um auf Benutzerereignisse zu reagieren. Es gibt zwei Ereignisse, die wir auf unserem Stern verfolgen möchten.

Beginnen wir mit dem mouseover-Ereignis, das unseren schwebenden Stern und alle seine vorherigen Brüder gelb färben wird. Dies geschieht jedoch nur, wenn der Nutzer nicht auf den Stern geklickt hat, um sich für die Stimmabgabe zu registrieren. Wir tun dies, indem wir die Klasse des Font Awesome-Sternsymbols manipulieren.

Das ist der Code, den wir brauchen:

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

Wir verwenden die if 语句来检查我们当前悬停的明星是否有任何兄弟姐妹，并且附加了 vote-recorded-Klasse. Das Vorhandensein eines solchen Elements weist darauf hin, dass die Abstimmung aufgezeichnet wurde. In diesem Fall führen wir keine Klassenmanipulation durch.

Wenn die Abstimmung jedoch noch nicht aufgezeichnet wurde, holen wir uns das aktuelle Element und alle Geschwister davor und fügen ihnen die Klasse fa-solid 和 yellow hinzu. Wir entfernen diese Klassen auch aus allen Geschwisterelementen, die dem aktuellen Element folgen.

Jetzt schreiben wir den Handler click 事件的 jQuery 代码。每当用户点击第四颗星时，我们就知道他们想给电影评分为四颗星。所以我们记录之前兄弟的数量并加一得到 rating。我们还记录 movie_id, um die Bewertung dem richtigen Film hinzuzufügen.

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

Wir prüfen noch einmal, ob für diesen bestimmten Film Stimmen aufgezeichnet wurden. Wenn die Abstimmung noch nicht aufgezeichnet wurde, fügen wir die vote-recorded-Klasse dem aktuell angeklickten Element und allen seinen vorherigen Geschwistern hinzu.

Wir verwenden auch die jQuery-Methode post(), um Abstimmungsdaten per POST-Anfrage an das Backend zu senden. Der erste Parameter ist die URL des PHP-Skripts, das unsere Anfrage bearbeiten wird, während der zweite Parameter die Daten sind, die wir verarbeiten möchten.

Wir bieten auch Rückrufe in done() an, um die vom Server an uns gesendeten Daten nach erfolgreicher Bearbeitung unserer Anfrage weiterzuverarbeiten.

Die folgende CodePen-Demo zeigt, wie das Frontend unseres Bewertungssystems aussieht:

Schreiben Sie PHP, um Stimmen aufzuzeichnen

Wir werden eine MySQL-Datenbank verwenden, um unsere Abstimmungsdaten im Backend zu speichern. Zur Verwaltung der Datenbank können Sie jede beliebige Anwendung verwenden. Ich verwende phpMyAdmin. Der erste Schritt hier besteht darin, eine Datenbank zu erstellen, die ich rating_test。现在，我们将在数据库中创建一个名为 movie_ ratingss Tabelle genannt habe. Führen Sie die folgende SQL-Abfrage in der Datenbank aus, um die Tabelle zu erstellen:

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;

Durch Ausführen der obigen Anweisung wird eine Tabelle mit dem Namen movie_ ratings mit vier verschiedenen Spalten erstellt.

Die erste Funktion erhöht sich automatisch id，它作为我们添加到表中的每条记录的主键。第二个是 movie_id，它将标识一部电影，最多可以包含 128 个字符。第三个是 average_ rating 来存储迄今为止所有投票的平均值。第四个，total_votes und wird verwendet, um die Gesamtzahl der abgegebenen Stimmen zu verfolgen.

Erinnern Sie sich an den ersten Parameter der post()-Methode im vorherigen Abschnitt. Sie sehen die Zeichenfolge update_atings.php, die Datei, die wir jetzt erstellen müssen. Diese Datei enthält den PHP-Code, der die Bewertung des Films aktualisiert und aufzeichnet.

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

Das obige ist der detaillierte Inhalt vonErstellen Sie ein 5-Sterne-Bewertungssystem mit jQuery, AJAX und PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!