별점 입력은 거의 vue위주로 많이 올라와서 있어서 자료를 찾는게 쉽지가 않았다ㅠㅜ
후기 입력폼
로그인한 사람만 댓글을 쓸 수 있어서 댓글은 작성하지 못했지만, 귀중한 자료를 올려주셔서 감사합니다!
[22/03/05] 리뷰 별점 기능 구현하기
예쁜 별 완성!
velog.io
참고 자료
21 리뷰 별점 주기 | CloudStudying
# 리뷰 별점주기 ## 목차 1. 요구사항 분석 2. 흐름 설계 3. 화면 설계 4. 직접 구현 - DB - VO - View - Controller - Mapper 5. 플러그인 활용 ## 학습목표 + 클릭이벤트를 통한 별점 주기 기능 구현 + JS(jQuery)를
cloudstudying.kr
DB는 후기 테이블에 별점 항목을 만들면 된다.
타임리프 - HTML
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.7.0.min.js"></script>
<title>ReviewList</title>
</head>
<body>
<h2>이용 후기</h2>
<th:block th:if="${#lists.isEmpty(reList)}">
등록된 후기가 없습니다.
</th:block>
<th:block th:unless="${#lists.isEmpty(reList)}">
<th:block th:each="ritem:${reList}">
<div class="container">
<div class="blog-left">
<div class="blog-profile">
<th:block th:if="${ritem.msysname} == null">
<img class="blog-profile_image" th:src="@{images/review-icon.png}">
</th:block>
<th:block th:unless="${ritem.msysname} == null">
<img class="star-ratings-fill space-x-2 text-lg" th:src="@{'upload/'ritem.gsysname}">
</th:block>
<div class="blog-profile_text">
<h4 class="blog-nickname" th:text="${ritem.mnickname}"></h4>
<img class="blog-pay" th:src="@{images/pay.png}">
<div class="star-ratings-fill" th:text="${ritem.ratingOptions}"></div>
<div class="time" th:text="${#dates.format(ritem.reviewdate, 'yyyy.MM.dd')}"></div>
</div>
</div>
<br>
<div class="blog-content">
<div th:text="${ritem.reviewcontents}"></div>
</div>
</div>
</div>
</th:block>
</th:block>
<div class="paging-area">
<div class="paging" th:utext="${paging}"></div>
</div>
</body>
</html>Controller
@GetMapping("gymReviewList")
public ModelAndView rvList(SearchDto search, Integer gymnum){
log.info("rvList()");
mv = mServ.rvList(search, gymnum);
return mv;
}Service
private int listCnt = 5;
// 후기 목록
public ModelAndView rvList(SearchDto search, Integer gymnum) {
log.info("rvList()");
mv = new ModelAndView();
int num = search.getPageNum();
if (search.getListCnt() == 0) {
search.setListCnt(listCnt);
}
if(num == 0) num = 1;
search.setPageNum((num - 1) * search.getListCnt());
List<ReviewDto> reList = mDao.rvList(gymnum, search);
for (ReviewDto re : reList) {
int reviewStar = re.getReviewstar();
re.setRatingOptions(getRatingOption(reviewStar));
}
mv.addObject("reList", reList);
search.setPageNum(num);
String pageHtml = getPaging(search);
mv.addObject("paging", pageHtml);
mv.setViewName("gymReviewList");
return mv;
}
// 별 평점
private String getRatingOption(int reviewStar) {
switch (reviewStar) {
case 0:
return "☆☆☆☆☆";
case 1:
return "★☆☆☆☆";
case 2:
return "★★☆☆☆";
case 3:
return "★★★☆☆";
case 4:
return "★★★★☆";
case 5:
return "★★★★★";
default:
return "";
}
}
// 패이징처리
private String getPaging(SearchDto search) {
log.info("getPaging()");
String pageHtml = null;
int maxNum = mDao.selectReviewCnt(search);
int pageCnt = 5;
String listName = "gymReviewList";
PaginUtil paging = new PaginUtil(maxNum, search.getPageNum(), search.getListCnt(), pageCnt, listName);
pageHtml = paging.makePaging();
return pageHtml;
}Dao
List<ReviewDto> rvList(int gnum, SearchDto search);Mybatis
<select id="rvList" resultType="ReviewDto" parameterType="Integer">
SELECT * FROM relist WHERE gymnum=#{gymnum};
</select>'실습기록' 카테고리의 다른 글
| 7월 15일 project - 데이터베이스 더미데이터 사이트 모음 (0) | 2023.07.16 |
|---|---|
| 7월 14일 project - 중복데이터 잡기, DeduplicationUtils (0) | 2023.07.16 |
| 7월 12일 project - 찜/찜 취소 기능 구현 (0) | 2023.07.12 |
| 7월 11일 project - 하트 이미지 변경 토글 (0) | 2023.07.11 |
| 7월 10일 project - paging (0) | 2023.07.11 |