PHP で五芒星のコメントを実装する方法 (手順)

今日は、PHP を使用して五芒星のコメント システムを実装する方法を学びます。このシステムは通常、ユーザーが製品、記事、またはサービスを評価し、平均スコアを表示できるようにするために使用されます。

ステップ 1: HTML フォームを作成する

最初に、ユーザーが評価する項目を選択してスコアを付けることができる HTML フォームを作成する必要があります:

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

ステップ 2:フォーム データの処理

submit.php ファイルでは、ユーザーが送信したフォーム データを処理し、データベースに保存する必要があります。まず、ユーザーが評価項目を選択したかどうかを確認し、選択していない場合はエラー メッセージを表示します。

次に、データベース接続を作成し、INSERT クエリを実行して評価データをデータベースに追加します。また、すべての評価の平均を計算し、別のデータベース テーブルに保存します。

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

ステップ 3: 平均スコアの表示

最後に、すべての評価の平均をユーザーに表示します。この値をデータベースから取得し、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>

ステップ 4: 5 つ星の評価を実装する

これで、評価を収集して表示することができましたが、ユーザーにより良い視覚体験を提供したいと考えています。したがって、元のラジオ ボタンの代わりに五芒星を使用します。

これを行うには、HTML、CSS、JavaScript を使用して五芒星を作成し、PHP を使用してユーザーが送信したフォーム データを処理します。 CSS を使用して五芒星を灰色にし、JavaScript を使用してユーザーが星の上にマウスを置いたときに星を黄色にします。

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

ユーザーが星の上にマウスを置くと、星が黄色になり、対応する評価値がフォーム データに入力されます。

最後に、PHP 送信処理のコード内のラジオ ボタンを非表示のフォーム入力に置き換えます。入力は 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>

ここでは、ラジオ ボタンの名前を「評価」に設定し、それに「必須」属性を設定して、ユーザーが確実に項目を選択できるようにします。

現在、ユーザーが Web サイト、製品、または記事に評価を関連付け、平均スコアを他のユーザーに表示できる 5 つ星レビュー システムの実装に成功しました。このシステムは、ユーザー エクスペリエンスを向上させ、Web サイト所有者が視聴者をより深く理解できるようにする、シンプルでありながら便利なインタラクティブな機能です。

以上がPHP で五芒星のコメントを実装する方法 (手順)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。