jQuery, AJAX 및 PHP를 사용하여 별 5개 등급 시스템 구축

웹사이트의 별점 시스템을 통해 사용자는 쉽게 피드백을 제공하고 다른 사람의 선택을 도울 수 있습니다. 고객이 제품을 어떻게 좋아하는지에 대한 피드백을 기업에 제공합니다. 별점은 웹사이트와 해당 제품에 대한 신뢰를 구축하는 데도 도움이 됩니다.

모든 주요 전자상거래 웹사이트에서는 등급을 사용하여 구매자에게 제품에서 기대할 수 있는 품질을 알립니다.

이 튜토리얼에서는 자신만의 별 5개 등급 시스템을 구축하는 방법을 보여 드리겠습니다.

구조를 위한 HTML 및 CSS 작성

별점 시스템 구축 과정의 첫 번째 단계는 페이지에 표시하려는 요소에 따라 마크업을 작성하는 것입니다.

우리는 평가 위젯에 영화 이름을 꼭 포함하고 싶습니다. 또한 사용자가 클릭하여 투표할 수 있는 위젯 내에 별 5개를 표시해야 합니다. 사용자가 투표한 후에는 투표 데이터도 표시됩니다.

다음 HTML은 이 모든 것을 달성합니다:

으아악

별표를 추가하기 위해 Font Awesome 라이브러리를 사용하고 있습니다. 기본적으로 별에 검정색 선이 있고 채우기가 없기를 원합니다. fa-regular 수업은 우리를 위해 이것을 합니다.

또한 사용자가 별 위로 마우스를 가져가면 별의 색상이 연한 노란색으로 바뀌고 사용자가 별을 클릭하면 등급이 기록되었음을 나타내기 위해 주황색으로 바뀌기를 원합니다. 다음 CSS가 모든 작업을 수행합니다.

으아악

jQuery를 작성하여 상호작용 구현

이제 일부 jQuery를 사용하여 사용자 이벤트에 응답하겠습니다. 우리 별에서 추적하고 싶은 두 가지 이벤트가 있습니다.

우리의 떠다니는 별과 이전의 모든 형제들을 노란색으로 바꾸는 mouseover 이벤트부터 시작하겠습니다. 그러나 이는 사용자가 투표 등록을 위해 별표를 클릭하지 않은 경우에만 발생합니다. Font Awesome 별표 아이콘의 클래스를 조작하여 이 작업을 수행하겠습니다.

우리에게 필요한 코드는 다음과 같습니다:

으아악

우리는 if 语句来检查我们当前悬停的明星是否有任何兄弟姐妹，并且附加了 vote-recorded 클래스를 사용합니다. 그러한 요소가 있으면 투표가 기록되었음을 나타냅니다. 이 경우 우리는 어떤 클래스 조작도 하지 않습니다.

그러나 투표가 아직 기록되지 않은 경우 현재 요소와 그 이전의 모든 형제 항목을 가져오고 여기에 fa-solid 和 yellow 클래스를 추가합니다. 또한 현재 요소 뒤에 오는 모든 형제 요소에서 이러한 클래스를 제거합니다.

이제 올바른 영화에 등급을 추가하기 위한 핸들러click 事件的 jQuery 代码。每当用户点击第四颗星时，我们就知道他们想给电影评分为四颗星。所以我们记录之前兄弟的数量并加一得到 rating。我们还记录 movie_id를 작성하겠습니다.

으아악

해당 영화에 대한 투표가 기록되었는지 다시 확인합니다. 투표가 아직 기록되지 않은 경우 현재 클릭한 요소와 이전의 모든 형제 항목에 vote-recorded 클래스를 추가합니다.

또한 jQuery post() 메서드를 사용하여 POST 요청을 통해 투표 데이터를 백엔드로 보냅니다. 첫 번째 매개변수는 요청을 처리할 PHP 스크립트의 URL이고, 두 번째 매개변수는 처리하려는 데이터입니다.

또한 요청을 성공적으로 처리한 후 서버에서 전송된 데이터를 추가로 처리하기 위해 done()에서 콜백을 제공합니다.

다음 CodePen 데모는 평가 시스템의 프런트 엔드가 어떤 모습인지 보여줍니다.

PHP를 작성하여 투표 기록

백엔드에 투표 기록을 저장하기 위해 MySQL 데이터베이스를 사용할 것입니다. 원하는 애플리케이션을 사용하여 데이터베이스를 관리할 수 있습니다. 저는 phpMyAdmin을 사용하고 있습니다. 여기서 첫 번째 단계는 rating_test。现在，我们将在数据库中创建一个名为 movie_ ratings의 테이블이라는 이름을 붙인 데이터베이스를 만드는 것입니다. 데이터베이스에서 다음 SQL 쿼리를 실행하여 테이블을 만듭니다.

으아악

위 명령문을 실행하면 4개의 서로 다른 열이 있는 movie_ ratings라는 테이블이 생성됩니다.

첫 번째는 자동 증가id，它作为我们添加到表中的每条记录的主键。第二个是 movie_id，它将标识一部电影，最多可以包含 128 个字符。第三个是 average_ rating 来存储迄今为止所有投票的平均值。第四个，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 중국어 웹사이트의 기타 관련 기사를 참조하세요!