PHP에서 다섯개 별표 주석을 구현하는 방법(단계)-PHP 문제-php.cn

PHP에서 다섯개 별표 주석을 구현하는 방법(단계)

PHPz

풀어 주다： 2023-04-11 13:47:48

원래의

833명이 탐색했습니다.

오늘은 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단계: 평균 점수 표시

마지막으로 사용자에게 모든 평가의 평균이 표시됩니다. 데이터베이스에서 이 값을 검색하여 웹 페이지에 표시합니다.

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

로그인 후 복사

여기서 라디오 버튼의 이름을 "등급"으로 설정하고 사용자가 항목을 선택할 수 있도록 "필수" 속성을 설정할 수 있습니다.

이제 우리는 사용자가 웹사이트, 제품 또는 기사에 대한 평가를 연관시키고 평균 점수를 다른 사용자에게 표시할 수 있는 5개 별표 리뷰 시스템을 성공적으로 구현했습니다. 이 시스템은 사용자 경험을 향상시키고 웹사이트 소유자가 청중을 더 잘 이해할 수 있도록 돕는 간단하면서도 유용한 대화형 기능입니다.

위 내용은 PHP에서 다섯개 별표 주석을 구현하는 방법(단계)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!