댓글에 별점기능(마우스 호버 효과)을 적용하여 게시글 평가하기 정보
댓글에 별점기능(마우스 호버 효과)을 적용하여 게시글 평가하기
관련링크
첨부파일
본문
이곳 팁자료실과 스킨자료실에 유사한 기능을 갖는 자료들이 많이 올라와 있지만, 제가 사용하고자 했던 기능들은 없는 것 같아서 이 곳에 올려봅니다. (스킨자료실에 올리기에는 수정내용이 많지 않습니다.)
기본이 된 자료는 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로 변환하면서, 이곳저곳을 찾아보니 그누보드에도 제가 배포했었던 스킨을 컨버팅한 자료들이 많이 있었네요 ㅎㅎ
잠시나마 옛 추억이 떠오릅니다^^;
추천
7
7
댓글 13개
팁 감사 합니다.
좋은 자료 고맙습니다.
꼼꼼이 살펴보고 적용해보겠습니다.^^
꼼꼼이 살펴보고 적용해보겠습니다.^^
평점이 10점 만점으로 되어있는데요. 별갯수와 맞추기위해서 5점 만점으로 바꾸려면 어떻게 해야할까요?
write.comment.update.skin의
// 별점평가_점수
$rating2 = (int)$_POST['rating2'];
IF ( $rating2 > 0 && $rating2 < 11 )
{
에서 11을 6으로 바꾸니까 별표시에 마우스후버효과가 적용되지 않습니다.
감사합니다.
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); ?>%">
로 수정합니다.
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";
}
를
■ 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 )
으로 수정합니다.
한번 적용해보시고, 다시 글 남겨주세요^^
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
그리고 댓글 수 제한은 아래 글을 참고하시면 될 것 같습니다^^
https://sir.kr/qa/119707
