댓글에 별점기능(마우스 호버 효과)을 적용하여 게시글 평가하기

관리자 작성
작성일 2022.05.11 18:32

3,535 조회
목록 답변

이곳 팁자료실과 스킨자료실에 유사한 기능을 갖는 자료들이 많이 올라와 있지만, 제가 사용하고자 했던 기능들은 없는 것 같아서 이 곳에 올려봅니다. (스킨자료실에 올리기에는 수정내용이 많지 않습니다.)

기본이 된 자료는 PIREE님의 게시물(그누보드 - p760031 - 댓글로 별점평가 게시판 스킨 > 그누보드5 스킨 (sir.kr))이며, 별점기능(Pure CSS 5-Star Rating (codepen.io), HTML, CSS로 별찍기 (Star Rating) (tistory.com)) 등을 참고하였습니다.

이 곳에는 고수님들이 많으시기에 따로 디자인하지 않고, 기본스킨에 적용하여 올립니다.

혹시나 코드에 문제가 있는 경우 확인부탁드립니다..

게시판 목록에서는 다음과 같습니다.

기본 테이블 레이아웃에서 cell 하나 추가하였습니다.

<게시판 목록>

글 내용을 보는 페이지는 다음과 같습니다.

<게시글 읽기 화면>

별점(평점)이 없는 경우에는 평가자에 포함하지 않고, 평균점수가 계산됩니다.

여분필드를 라디오(radio) 버튼으로 적용하였을 때 댓글 수정모드에서 값을 넘겨서 처리하는 부분이 상당히 골치가 아팠는데(그 전까지는 댓글 수정기능을 차단해놓고 사용했습니다..), 우연히 해결하여 이 글을 올릴 수 있게 되었습니다.

평점은 10점 만점으로 되어있으며, 마우스 hover 효과는 링크1의 테스트 페이지를 참고해주시면 됩니다.

따로 게시판 설정에서 손대실 부분은 스킨 디렉토리 정도이며,

사용하는 여분 필드는

게시글의 경우,

wr_8 : 평가자수

wr_9 : 평점총합

wr_10 : 평점평균

댓글의 경우,

wr_1 : 평가점수

입니다.

기본 스킨에 적용하다보니 모바일향 디자인은 적용되지 않지만, 해당기능은 모바일 페이지에서 동일하게 동작됩니다.

여러 곳에 잘 활용하셨으면 합니다^^ (개인적으로 영화 평점 게시판에 활용하고 있습니다.)

감사합니다 :)

덧) 2003년부터 제로보드4에 적용되는 영화게시판 스킨을 쭈욱 만들어 배포하다가 이번에 그누보드5로 변환하면서, 이곳저곳을 찾아보니 그누보드에도 제가 배포했었던 스킨을 컨버팅한 자료들이 많이 있었네요 ㅎㅎ

잠시나마 옛 추억이 떠오릅니다^^;

별 5점으로 변경시

line은 제가 올린 파일 기준입니다.

1. list.skin.php파일
■ 147 line
<div class="star-ratings-fill" style="width:<?php echo (int)($list[$i]['wr_10']*10); ?>%">
를 아래와 같이 수정합니다.
<div class="star-ratings-fill" style="width:<?php echo (int)($list[$i]['wr_10']*20); ?>%">

2. style.css파일
■ 376-381 line
  /* add padding and positioning to half star labels */
.rating__label--half {
    padding-right: 0;
    margin-right: -0.6em;
    z-index: 2;
  }
위부분을 삭제합니다.

■ 395-401 line
  /* make all stars orange on rating group hover */
.rating-group:hover .rating__label .rating__icon--star,
.rating-group:hover .rating__label--half .rating__icon--star { color: orange; }

  /* make hovered input's following siblings grey on hover */
.rating__input:hover ~ .rating__label .rating__icon--star,
.rating__input:hover ~ .rating__label--half .rating__icon--star {color: #ddd;}
를

  /* make all stars orange on rating group hover */
.rating-group:hover .rating__label .rating__icon--star { color: orange; }

  /* make hovered input's following siblings grey on hover */
.rating__input:hover ~ .rating__label .rating__icon--star {color: #ddd;}
로 수정합니다.

3. view.skin.php파일
■ 105 line
<div class="star-ratings-fill" style="width:<?php echo (int)($view['wr_10']*10); ?>%">
를
<div class="star-ratings-fill" style="width:<?php echo (int)($view['wr_10']*20); ?>%">
로 수정합니다.

■ 112 line
<div class="star-info"><span class="av"><?php echo number_format($view['wr_10'],2) ?></span><span>/10</span> (<?php if($view['wr_8'] > 0) { echo $view['wr_8']."명 평가"; } else { echo "평가자 없음"; } ?>)</div>
에서
<div class="star-info"><span class="av"><?php echo number_format($view['wr_10'],2) ?></span><span>/5</span> (<?php if($view['wr_8'] > 0) { echo $view['wr_8']."명 평가"; } else { echo "평가자 없음"; } ?>)</div>
로 수정합니다.

4. view_comment.skin.php
■ 52 line
<div class="star-ratings-fill" style="width:<?php echo (int)($list[$i]['wr_1']*10); ?>%">
를
<div class="star-ratings-fill" style="width:<?php echo (int)($list[$i]['wr_1']*20); ?>%">
로 수정합니다.

■ 135-160 line
<div id="half-stars-example">
<div class="rating-group">
        <input class="rating__input rating__input--none" checked name="rating2" id="rating2-0" value="0" type="radio">
        <label aria-label="0 stars" class="rating__label" for="rating2-0"></label>
        <label aria-label="0.5 stars" class="rating__label rating__label--half" for="rating2-05"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
        <input class="rating__input" name="rating2" id="rating2-05" value="1" type="radio">
        <label aria-label="1 star" class="rating__label" for="rating2-10"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
        <input class="rating__input" name="rating2" id="rating2-10" value="2" type="radio">
        <label aria-label="1.5 stars" class="rating__label rating__label--half" for="rating2-15"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
        <input class="rating__input" name="rating2" id="rating2-15" value="3" type="radio">
        <label aria-label="2 stars" class="rating__label" for="rating2-20"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
        <input class="rating__input" name="rating2" id="rating2-20" value="4" type="radio">
        <label aria-label="2.5 stars" class="rating__label rating__label--half" for="rating2-25"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
        <input class="rating__input" name="rating2" id="rating2-25" value="5" type="radio">
        <label aria-label="3 stars" class="rating__label" for="rating2-30"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
        <input class="rating__input" name="rating2" id="rating2-30" value="6" type="radio">
        <label aria-label="3.5 stars" class="rating__label rating__label--half" for="rating2-35"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
        <input class="rating__input" name="rating2" id="rating2-35" value="7" type="radio">
        <label aria-label="4 stars" class="rating__label" for="rating2-40"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
        <input class="rating__input" name="rating2" id="rating2-40" value="8" type="radio">
        <label aria-label="4.5 stars" class="rating__label rating__label--half" for="rating2-45"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
        <input class="rating__input" name="rating2" id="rating2-45" value="9" type="radio">
        <label aria-label="5 stars" class="rating__label" for="rating2-50"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
        <input class="rating__input" name="rating2" id="rating2-50" value="10" type="radio">
    </div>
</div>
를
<div id="half-stars-example">
<div class="rating-group">
        <input class="rating__input rating__input--none" checked name="rating2" id="rating2-0" value="0" type="radio">
        <label aria-label="0 stars" class="rating__label" for="rating2-0"></label>
        <label aria-label="1 star" class="rating__label" for="rating2-10"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
        <input class="rating__input" name="rating2" id="rating2-10" value="1" type="radio">
        <label aria-label="2 stars" class="rating__label" for="rating2-20"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
        <input class="rating__input" name="rating2" id="rating2-20" value="2" type="radio">
        <label aria-label="3 stars" class="rating__label" for="rating2-30"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
        <input class="rating__input" name="rating2" id="rating2-30" value="3" type="radio">
        <label aria-label="4 stars" class="rating__label" for="rating2-40"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
        <input class="rating__input" name="rating2" id="rating2-40" value="4" type="radio">
        <label aria-label="5 stars" class="rating__label" for="rating2-50"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
        <input class="rating__input" name="rating2" id="rating2-50" value="5" type="radio">
    </div>
</div>
로 수정합니다.


■ 341-375 line
switch (document.getElementById('save_comment_wr1_' + comment_id).value)
{
case '1':
rated_value = "rating2-05";
break;
case '2':
rated_value = "rating2-10";
break;
case '3':
rated_value = "rating2-15";
break;
case '4':
rated_value = "rating2-20";
break;
case '5':
rated_value = "rating2-25";
break;
case '6':
rated_value = "rating2-30";
break;
case '7':
rated_value = "rating2-35";
break;
case '8':
rated_value = "rating2-40";
break;
case '9':
rated_value = "rating2-45";
break;
case '10':
rated_value = "rating2-50";
break;
default:
rated_value = "rating2-0";
}
를

switch (document.getElementById('save_comment_wr1_' + comment_id).value)
{
case '1':
rated_value = "rating2-10";
break;
case '2':
rated_value = "rating2-20";
break;
case '3':
rated_value = "rating2-30";
break;
case '4':
rated_value = "rating2-40";
break;
case '5':
rated_value = "rating2-50";
break;
default:
rated_value = "rating2-0";
}
로 수정합니다.

5. write_comment_update.skin.php
■ 13 line
IF ( $rating2 > 0 && $rating2 < 11 )
를
IF ( $rating2 > 0 && $rating2 < 6 )
으로 수정합니다.

링크

https://sir.kr/g5_tip/18356 1313 회 연결
첨부

basic_rating.zip 파일크기 (31.0K) 40 회 다운로드

등록일 2022.05.11 18:32
이전

관리자 승인 후 게시글 보이기

작성일 2022.05.26 18:11
다음

아미나 이름 홍** 표시

작성일 2022.05.08 14:45

댓글 0개

등록된 댓글이 없습니다.

비밀

자동등록방지

자동등록방지 숫자를 순서대로 입력하세요.

인기검색어

메뉴
검색
그누보드5

댓글에 별점기능(마우스 호버 효과)을 적용하여 게시글 평가하기

최근글

새댓글

작성자 정보

컨텐츠 정보

본문

관련자료

최근글

새댓글