Créez un système de notation 5 étoiles en utilisant jQuery, AJAX et PHP

Le système de notation par étoiles sur le site Web permet aux utilisateurs de fournir facilement des commentaires et d'aider les autres à faire leurs choix. Il fournit aux entreprises des commentaires sur la façon dont les clients apprécient leurs produits. Les notes par étoiles contribuent également à renforcer la confiance dans un site Web et ses produits.

Tous les principaux sites de commerce électronique utilisent des évaluations pour informer les acheteurs de la qualité qu'ils peuvent attendre des produits.

Dans ce tutoriel, je vais vous montrer comment créer votre propre système de notation cinq étoiles.

Écrivez du HTML et du CSS pour la structure

La première étape du processus de création d'un système de notation par étoiles consiste à rédiger le balisage, qui dépend des éléments que nous souhaitons afficher sur la page.

Nous souhaitons absolument inclure le nom du film dans notre widget de classement. Nous devons également afficher cinq étoiles dans le widget sur lesquelles les utilisateurs peuvent cliquer pour voter. Après le vote des utilisateurs, nous leur afficherons également les données de vote.

Le HTML suivant réalise tout cela :

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

J'utilise la bibliothèque Font Awesome pour ajouter les étoiles. Par défaut, nous voulons que les étoiles aient un trait noir et aucun remplissage. fa-regular Les cours font ça pour nous.

Nous souhaitons également que la couleur de l'étoile passe au jaune clair lorsque l'utilisateur la survole et à l'orange lorsque l'utilisateur clique dessus pour indiquer que sa note a été enregistrée. Le CSS suivant fait tout pour nous :

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

Écrivez jQuery pour implémenter l'interaction

Nous allons maintenant utiliser du jQuery pour répondre aux événements des utilisateurs. Il y a deux événements que nous voulons suivre sur notre étoile.

Commençons par l'événement mouseover, qui fera jaunir notre étoile planante et tous ses frères précédents. Toutefois, cela ne se produit que si l'utilisateur n'a pas cliqué sur l'étoile pour s'inscrire sur les listes électorales. Nous ferons cela en manipulant la classe de l’icône étoile Font Awesome.

Voici le code dont nous avons besoin :

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

Nous utilisons la classe if 语句来检查我们当前悬停的明星是否有任何兄弟姐妹，并且附加了 vote-recorded. La présence d'un tel élément indique que le vote a été enregistré. Dans ce cas, nous ne faisons aucune manipulation de classe.

Cependant, si le vote n'a pas encore été enregistré, nous obtiendrons l'élément actuel et tous les frères et sœurs qui le précèdent et leur ajouterons la classe fa-solid 和 yellow. Nous supprimons également ces classes de tous les éléments frères qui suivent l'élément actuel.

Nous allons maintenant écrire au gestionnaire click 事件的 jQuery 代码。每当用户点击第四颗星时，我们就知道他们想给电影评分为四颗星。所以我们记录之前兄弟的数量并加一得到 rating。我们还记录 movie_id pour ajouter la note au bon film.

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

Nous vérifions si des votes ont été enregistrés pour ce film en particulier. Si le vote n'a pas encore été enregistré, nous ajoutons la classe vote-recorded à l'élément actuellement cliqué et à tous ses frères et sœurs précédents.

Nous utilisons également la méthode jQuery post() pour envoyer les données de vote au backend via une requête POST. Le premier paramètre est l'URL du script PHP qui traitera notre requête, tandis que le deuxième paramètre est les données que nous souhaitons traiter.

Nous fournissons également des rappels dans done() pour traiter davantage les données qui nous sont envoyées par le serveur après avoir traité avec succès notre demande.

La démo CodePen suivante montre à quoi ressemble le front-end de notre système de notation :

Écrivez PHP pour enregistrer les votes

Nous utiliserons une base de données MySQL pour stocker nos enregistrements de vote sur le backend. Vous pouvez utiliser n'importe quelle application de votre choix pour gérer la base de données. J'utilise phpMyAdmin. La première étape ici consiste à créer une base de données, que j'ai nommée la table de rating_test。现在，我们将在数据库中创建一个名为 movie_ ratings. Exécutez la requête SQL suivante sur la base de données pour créer la table :

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;

L'exécution de l'instruction ci-dessus créera un tableau nommé movie_ ratings avec quatre colonnes différentes.

Le premier est auto-incrémenté id，它作为我们添加到表中的每条记录的主键。第二个是 movie_id，它将标识一部电影，最多可以包含 128 个字符。第三个是 average_ rating 来存储迄今为止所有投票的平均值。第四个，total_votes et est utilisé pour suivre le nombre total de votes exprimés.

Rappelez le premier paramètre de la méthode post() de la section précédente. Vous verrez la chaîne update_atings.php, qui est le fichier que nous devons créer maintenant. Ce fichier contiendra le code PHP qui met à jour et enregistre la note du film.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!