Comment implémenter des commentaires en étoile à cinq branches en PHP (étapes)

Aujourd'hui, nous allons apprendre à implémenter un système de commentaires en étoile à cinq branches en utilisant PHP. Ce système est généralement utilisé pour permettre aux utilisateurs d'évaluer un produit, un article ou un service et d'afficher la note moyenne.

Étape 1 : Créer un formulaire HTML

Nous devons d'abord créer un formulaire HTML qui permet à l'utilisateur de sélectionner les éléments à évaluer et de leur attribuer une note :

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

Étape 2 : Traiter les données du formulaire

Dans le fichier submit.php fichier, nous devons traiter les données du formulaire soumises par l'utilisateur et les stocker dans une base de données. Tout d’abord, nous vérifierons si l’utilisateur a sélectionné un élément d’évaluation et afficherons un message d’erreur dans le cas contraire.

Ensuite, nous allons créer une connexion à la base de données et effectuer une requête INSERT pour ajouter les données de notation à la base de données. Nous calculerons également la moyenne de toutes les notes et la stockerons dans une autre table de base de données.

<?php
 if(empty($_POST[&#39;rating&#39;])) {
   echo "请选择评分项";
 } else {
   $rating = $_POST[&#39;rating&#39;];
   $conn = mysqli_connect("localhost", "username", "password", "database");
   $query = "INSERT INTO ratings (rating) VALUES (&#39;$rating&#39;)";
   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[&#39;average&#39;];

   $avg_insert = "INSERT INTO average_rating (average) VALUES ($average)";
   mysqli_query($conn, $avg_insert);

   echo "感谢您的评分！";
 }
?>

Étape 3 : Afficher le score moyen

Enfin, nous afficherons la moyenne de toutes les notes à l'utilisateur. Nous récupérerons cette valeur de la base de données et l'afficherons sur la page Web.

<?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[&#39;average&#39;], 1);
?>

<p>平均得分： <?php echo $average ?>/5</p>

Étape 4 : Mettre en œuvre le classement par étoiles à cinq branches

Maintenant, nous avons pu collecter et afficher les notes, mais nous souhaitons offrir une meilleure expérience visuelle à l'utilisateur. Par conséquent, nous utiliserons une étoile à cinq branches au lieu du bouton radio d’origine.

Pour ce faire, nous utiliserons HTML, CSS et JavaScript pour créer l'étoile à cinq branches, et PHP pour traiter les données du formulaire soumis par l'utilisateur. Nous utiliserons CSS pour rendre l'étoile à cinq branches grise et utiliserons JavaScript pour colorer l'étoile en jaune lorsque l'utilisateur la survole.

<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=&#39;fa fa-star&#39; data-value=&#39;$i&#39;></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=&#39;rating&#39;]").value = clicked;
 }
</script>

Désormais, lorsque l'utilisateur survole les étoiles, elles seront colorées en jaune et la valeur de note correspondante sera mise dans les données du formulaire.

Enfin, nous remplaçons les boutons radio dans le code pour la gestion des soumissions PHP par des entrées de formulaire masquées. L'entrée sera automatiquement renseignée en JavaScript.

<span id="rating" class="unchecked" onclick="rate(this)">
 <?php
   for($i = 1; $i <= 5; $i++) {
     echo "<i class=&#39;fa fa-star&#39; data-value=&#39;$i&#39;></i>";
   }
 ?>
</span>

<input type="hidden" name="rating" value="" required>

Ici, nous pouvons définir le nom du bouton radio sur « note » et y définir l'attribut « requis » pour garantir que l'utilisateur sélectionne un élément.

Nous avons désormais mis en œuvre avec succès un système d'évaluation par étoiles à cinq branches qui permet aux utilisateurs d'associer des notes à un site Web, un produit ou un article et d'afficher la note moyenne aux autres utilisateurs. Ce système est une fonctionnalité interactive simple mais utile qui améliore l'expérience utilisateur et aide les propriétaires de sites Web à mieux comprendre leur public.

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!