So implementieren Sie fünfzackige Sternkommentare in PHP (Schritte)

Heute lernen wir, wie man mit PHP ein Fünf-Stern-Kommentarsystem implementiert. Dieses System wird normalerweise verwendet, um Benutzern die Möglichkeit zu geben, ein Produkt, einen Artikel oder eine Dienstleistung zu bewerten und die durchschnittliche Punktzahl anzuzeigen.

Schritt 1: Erstellen Sie ein HTML-Formular

Wir müssen zunächst ein HTML-Formular erstellen, mit dem der Benutzer Elemente zum Bewerten auswählen und ihnen eine Bewertung geben kann:

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

Schritt 2: Verarbeiten Sie die Formulardaten

In der Datei „submit.php“. Datei: Wir müssen vom Benutzer übermittelte Formulardaten verarbeiten und in einer Datenbank speichern. Zunächst prüfen wir, ob der Benutzer einen Bewertungspunkt ausgewählt hat, und zeigen andernfalls eine Fehlermeldung an.

Als nächstes erstellen wir eine Datenbankverbindung und führen eine INSERT-Abfrage durch, um die Bewertungsdaten zur Datenbank hinzuzufügen. Außerdem berechnen wir den Durchschnitt aller Bewertungen und speichern ihn in einer anderen Datenbanktabelle.

<?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 "感谢您的评分！";
 }
?>

Schritt 3: Durchschnittspunktzahl anzeigen

Abschließend zeigen wir dem Benutzer den Durchschnitt aller Bewertungen an. Wir rufen diesen Wert aus der Datenbank ab und zeigen ihn auf der Webseite an.

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

Schritt 4: Implementieren Sie die Fünf-Sterne-Bewertung

Jetzt konnten wir die Bewertungen sammeln und anzeigen, aber wir möchten dem Benutzer ein besseres visuelles Erlebnis bieten. Daher verwenden wir anstelle des ursprünglichen Optionsfelds einen fünfzackigen Stern.

Dazu verwenden wir HTML, CSS und JavaScript, um den fünfzackigen Stern zu erstellen, und PHP, um die vom Benutzer übermittelten Formulardaten zu verarbeiten. Wir verwenden CSS, um den fünfzackigen Stern grau zu machen, und verwenden JavaScript, um den Stern gelb zu färben, wenn der Benutzer mit der Maus darüber fährt.

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

Wenn der Benutzer nun mit der Maus über die Sterne fährt, werden diese gelb gefärbt und der entsprechende Bewertungswert wird in die Formulardaten eingefügt.

Abschließend ersetzen wir die Optionsfelder im Code für die Verarbeitung von PHP-Einreichungen durch versteckte Formulareingaben. Die Eingabe wird automatisch in JavaScript ausgefüllt.

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

Hier können wir den Namen des Optionsfelds auf „Bewertung“ setzen und das Attribut „erforderlich“ darauf setzen, um sicherzustellen, dass der Benutzer einen Artikel auswählt.

Jetzt haben wir erfolgreich ein Fünf-Sterne-Bewertungssystem implementiert, das es Benutzern ermöglicht, Bewertungen mit einer Website, einem Produkt oder einem Artikel zu verknüpfen und die durchschnittliche Punktzahl anderen Benutzern anzuzeigen. Bei diesem System handelt es sich um eine einfache, aber nützliche interaktive Funktion, die das Benutzererlebnis verbessert und Websitebesitzern hilft, ihre Zielgruppe besser zu verstehen.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie fünfzackige Sternkommentare in PHP (Schritte). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!