jQuery、AJAX、PHP を使用して 5 つ星評価システムを構築する

Web サイトの星評価システムにより、ユーザーは簡単にフィードバックを提供し、他のユーザーの選択を支援できます。顧客が自社製品をどのように気に入っているかに関するフィードバックを企業に提供します。星による評価は、Web サイトとその製品に対する信頼を築くのにも役立ちます。

すべての主要な電子商取引サイトは、購入者に製品に期待できる品質を知らせるために評価を使用しています。

このチュートリアルでは、独自の 5 つ星評価システムを構築する方法を説明します。

構造用のHTMLとCSSの記述

星評価システムを構築するプロセスの最初のステップは、ページに表示する要素に応じてマークアップを作成することです。

評価ウィジェットには必ず映画の名前を含めたいと考えています。また、ユーザーがクリックして投票できるウィジェット内に 5 つの星を表示する必要もあります。ユーザーが投票した後、投票データも表示されます。

次の HTML はこれをすべて実現します:

リーリー

私は Font Awesome ライブラリを使用して星を追加しています。デフォルトでは、星には黒いストロークがあり、塗りつぶされないようにします。 fa-normal クラスがこれを行います。

また、ユーザーが星の上にマウスを置くと星の色が薄黄色に変わり、ユーザーが星をクリックすると、評価が記録されたことを示すオレンジ色に変わります。次の CSS がすべてを行ってくれます:

リーリー

jQuery を記述してインタラクションを実装する

jQuery を使用してユーザー イベントに応答します。私たちの星で追跡したいイベントが 2 つあります。

mouseover イベントから始めましょう。これにより、ホバリング スターとその前のすべての兄弟が黄色に変わります。ただし、これはユーザーが星をクリックして投票登録を行っていない場合にのみ発生します。これを行うには、Font Awesome スター アイコンのクラスを操作します。

これは必要なコードです:

リーリー

if ステートメントを使用して、現在ホバリングしている星に兄弟があるかどうかを確認し、vote-recorded クラスをアタッチします。このような要素が存在する場合は、投票が記録されたことを示します。この場合、クラス操作は行いません。

ただし、投票がまだ記録されていない場合は、現在の要素とその前のすべての兄弟要素を取得し、それらに fa-solid クラスと yellow クラスを追加します。また、現在の要素に続くすべての兄弟要素からこれらのクラスを削除します。

次に、click イベントを処理する jQuery コードを作成します。ユーザーが 4 つ星をクリックするたびに、映画を 4 つ星で評価したいと考えていることがわかります。したがって、以前の兄弟の数を記録し、1 を追加して 評価 を取得します。また、正しい映画に評価を追加するために、movie_id も記録します。

リーリー

その特定の映画に対して投票が記録されているかどうかを再確認してみましょう。投票がまだ記録されていない場合は、現在クリックされている要素とその以前のすべての兄弟に vote-recorded クラスを追加します。

また、jQuery post() メソッドを使用して、POST リクエスト経由で投票データをバックエンドに送信します。最初のパラメータはリクエストを処理する PHP スクリプトの URL で、2 番目のパラメータは処理するデータです。

また、リクエストが正常に処理された後にサーバーから送信されたデータをさらに処理するために、done() でコールバックも提供します。

次の CodePen デモは、評価システムのフロントエンドがどのようになるかを示しています:

投票を記録するための PHP の作成

MySQL データベースを使用して、投票記録をバックエンドに保存します。データベースの管理には任意のアプリケーションを使用できます。 phpMyAdminを使用しています。ここでの最初のステップは、データベースを作成することです。データベースに Rating_test という名前を付けます。ここで、データベースに movie_ ratings という名前のテーブルを作成します。データベースに対して次の SQL クエリを実行してテーブルを作成します:

リーリー

上記のステートメントを実行すると、movie_ ratings という名前のテーブルが作成され、4 つの異なる列が含まれます。

最初の値は自動インクリメントされる id で、テーブルに追加するすべてのレコードの主キーとして機能します。 2 番目は movie_id で、映画を識別し、最大 128 文字を含めることができます。 3 つ目は、これまでに投じられたすべての投票の平均を保存する average_ ratings です。 4 番目の total_votes は、投じられた投票の総数を追跡するために使用されます。

前のセクションの post() メソッドの最初のパラメーターを確認してみましょう。文字列 update_atings.php が表示されます。これが今作成する必要があるファイルです。このファイルには、映画の評価を更新および記録する PHP コードが含まれます。

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

以上がjQuery、AJAX、PHP を使用して 5 つ星評価システムを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。