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

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

기본이 된 자료는 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로 변환하면서, 이곳저곳을 찾아보니 그누보드에도 제가 배포했었던 스킨을 컨버팅한 자료들이 많이 있었네요 ㅎㅎ

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