Bagaimana untuk melaksanakan ulasan bintang lima mata dalam PHP (langkah)

Hari ini, kita akan belajar cara menggunakan PHP untuk melaksanakan sistem ulasan bintang lima mata. Sistem ini biasanya digunakan untuk membolehkan pengguna menilai produk, artikel atau perkhidmatan dan memaparkan skor purata.

Langkah 1: Buat borang HTML

Kita perlu mencipta borang HTML terlebih dahulu yang membolehkan pengguna memilih item untuk dinilai dan memberi mereka markah:

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

Langkah 2: Memproses data borang

Dalam fail submit.php, kita perlu memproses data borang yang dihantar oleh pengguna dan menyimpannya dalam pangkalan data. Pertama, kami akan menyemak sama ada pengguna telah memilih item penilaian dan memaparkan mesej ralat jika tidak.

Seterusnya, kami akan membuat sambungan pangkalan data dan melakukan pertanyaan INSERT untuk menambah data penilaian ke pangkalan data. Kami juga akan mengira purata semua penilaian dan menyimpannya dalam jadual pangkalan data lain.

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

Langkah 3: Paparkan purata skor

Akhir sekali, kami akan memaparkan purata semua penilaian kepada pengguna. Kami akan mendapatkan semula nilai ini daripada pangkalan data dan memaparkannya pada halaman 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>

Langkah 4: Laksanakan penarafan bintang lima mata

Kini, kami telah dapat mengumpul dan memaparkan penilaian, tetapi kami mahu memberikan pengalaman visual yang lebih baik kepada pengguna . Oleh itu, kami akan menggunakan bintang berbucu lima dan bukannya butang radio asal.

Untuk melakukan ini, kami akan menggunakan HTML, CSS dan JavaScript untuk mencipta bintang berbucu lima dan PHP untuk memproses data borang yang diserahkan pengguna. Kami akan menggunakan CSS untuk menjadikan bintang berbucu lima berwarna kelabu, dan menggunakan JavaScript untuk mewarna bintang kuning apabila pengguna menuding di atasnya.

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

Kini apabila pengguna melayang di atas bintang, mereka akan diwarnakan kuning dan nilai rating yang sepadan akan dimasukkan ke dalam data borang.

Akhir sekali, kami menggantikan butang radio dalam kod untuk pengendalian penyerahan PHP dengan input borang tersembunyi. Input akan diisi secara automatik dalam 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>

Di sini kita boleh menetapkan nama butang radio kepada "rating" dan menetapkan atribut "diperlukan" padanya untuk memastikan pengguna memilih item.

Kami kini telah berjaya melaksanakan sistem semakan bintang lima mata yang membolehkan pengguna mengaitkan penilaian dengan tapak web, produk atau artikel dan memaparkan skor purata kepada pengguna lain. Sistem ini ialah ciri interaktif yang mudah tetapi berguna yang meningkatkan pengalaman pengguna dan membantu pemilik tapak web lebih memahami khalayak mereka.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan ulasan bintang lima mata dalam PHP (langkah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!