댓글에 별점기능(마우스 호버 효과)을 적용하여 게시글 평가하기 > 그누보드5 팁자료실

그누보드5 팁자료실

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

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

첨부파일

basic_rating.zip (31.0K) 20회 다운로드 2022-04-21 19:25:50

본문

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

 

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

 

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

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

 

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

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

 

990811339_1650536073.2809.jpg

<게시판 목록>

 

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

 

990811339_1650536145.9248.jpg

<게시글 읽기 화면>

 

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

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

 

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

 

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

사용하는 여분 필드

게시글의 경우,

wr_8 : 평가자수

wr_9 : 평점총합

wr_10 : 평점평균

 

댓글의 경우,

wr_1 : 평가점수

입니다.

 

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

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

감사합니다 :)

 

 

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

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

추천
7

댓글 13개

평점이 10점 만점으로 되어있는데요. 별갯수와 맞추기위해서 5점 만점으로 바꾸려면 어떻게 해야할까요?
write.comment.update.skin의
  // 별점평가_점수
  $rating2 = (int)$_POST['rating2'];

  IF ( $rating2 > 0 && $rating2 < 11 )
  {
에서 11을 6으로 바꾸니까 별표시에 마우스후버효과가 적용되지 않습니다.
감사합니다.

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 )
으로 수정합니다.

한번 적용해보시고, 다시 글 남겨주세요^^

질문에 친절하게 답변해주셔서 고맙습니다.
이제 초보수준을 갓 벗어나서 저는 한 곳만 수정하면 될줄 알았는데 다 수정해야 되네요.
알려주신대로 하니까 평점이 5점만점으로 잘 나옵니다.
정말 대단하십니다.
css에서 별 반개를 나타낸는 코드를 삭제했어니까 댓글에서 입력할때 별에 마우스오버했을 때 별 반개는 표시되지 않는 것이 당연한 것 맞는지요?
별점표시를 저는 책소개 게시판이나 영화소개 게시판에 적용해보려고 하는데요.
별점표시를 영화소개게시판에 사용하고 계신다니 나중에 적용하다가 모르는 것있으면 문의 드려도 될런지 모르겠습니다.
감사합니다.
http://gratia.kr/bbs/board.php?bo_table=basic_rating
네^^ 5점 기준으로 했을 때는 마우스 hover는 별이 한개씩 변화되는게 맞습니다~
언제든지 문의주세요^^
혹시 테스트 게시판에서 테스트해보셨는지요? 아니면 테스트하신 주소가 있을까요? 수정시에도 초기화되지 않습니다만
너무 좋은 기능이네요!! 혹시 글 목록에서 별점 숫자를 확인할 수는 없을까요??
그리고 회원별로 댓글 별점을 한번씩만 줄 수 있도록 변경하는 것도 가능할까요?
스킨의 list.skin.php 파일에서 <?php echo number_format($list[$i]['wr_10'],1) ?> 변수를 입력하시면 목록에서도 점수를 표현하실 수 있습니다.
그리고 댓글 수 제한은 아래 글을 참고하시면 될 것 같습니다^^
https://sir.kr/qa/119707
전체 2,132 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT