# 리뷰 별점주기 ## 목차 1. 요구사항 분석 2. 흐름 설계 3. 화면 설계 4. 직접 구현 - DB - VO - View - Controller - Mapper 5. 플러그인 활용 ## 학습목표 + 클릭이벤트를 통한 별점 주기 기능 구현 + JS(jQuery)를 사용한 이벤트 처리 ## 요구사항 분석 리뷰 작성시, 별점(0~5)을 작성하도록 하자.  ## 흐름 설계 1. 평점 입력 2. 평점 출력 ## 화면 설계 입력 화면  출력 화면  ## 직접 구현 ### 평점 입력 #### DB: 테이블 변경 ``` ALTER TABLE reviews ADD COLUMN rating INT NOT NULL DEFAULT 0; ``` #### 뷰: views/books/show.jsp ``` <f:form modelAttribute="review" action="${ reviewsPath }" method="post"> <c:forEach var="error" items="${ fieldErrors }"> <div class="alert alert-warning"> <strong>${ error.getField() }</strong>: ${ error.getDefaultMessage() } </div> </c:forEach> <f:textarea path="text" cssClass="form-control" rows="5" /> <!-- 평점 선택창 --> <f:label path="rating">평점: </f:label> <f:select path="rating"> <f:options items="${ ratingOptions }"/> </f:select> <f:hidden path="bookId" /> <f:hidden path="userId" /> <button class="btn btn-block btn-primary" type="submit">리뷰 등록</button> </f:form> ``` #### VO: Review.java ``` public class Review { Integer id; @NotEmpty @Size(min = 5) String text; @NotNull Integer rating; // 평점을 위한 필드추가 @NotNull Integer bookId; Integer userId; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getText() { return text; } public void setText(String text) { this.text = text; } public Integer getRating() { return rating; } public void setRating(Integer rating) { this.rating = rating; } public Integer getBookId() { return bookId; } public void setBookId(Integer bookId) { this.bookId = bookId; } public Integer getUserId() { return userId; } public void setUserId(Integer userId) { this.userId = userId; } @Override public String toString() { return "Review [id=" + id + ", text=" + text + ", rating=" + rating + ", bookId=" + bookId + ", userId=" + userId + "]"; } } ``` #### 컨트롤러: BooksController.java ``` // 평점 옵션 Map ratingOptions = new HashMap(); ratingOptions.put(0, "☆☆☆☆☆"); ratingOptions.put(1, "★☆☆☆☆"); ratingOptions.put(2, "★★☆☆☆"); ratingOptions.put(3, "★★★☆☆"); ratingOptions.put(4, "★★★★☆"); ratingOptions.put(5, "★★★★★"); model.addAttribute("ratingOptions", ratingOptions); ``` #### Mapper: ReviewMapper.java ``` @Insert("INSERT INTO reviews (text, book_id, user_id, rating) VALUES (#{text}, #{bookId}, #{userId}, #{rating})") void create(Review review); ``` ### 평점 출력: views/books/show.jsp ``` <table class="table table-stripped" id="reviews"> <thead> <tr> <th>Rating</th> <!-- 평점 --> <th>User</th> <th>Text</th> </tr> </thead> <tbody> <c:forEach var="review" items="${ reviews }" varStatus="status"> <!-- 평점 기준 별표시 출력 --> <tr> <td><c:forEach var="rating" items="${ ratingOptions }" varStatus="status" begin="1" end="${ review.rating }">★</c:forEach></td> <td>익명</td> <td>${ review.text }</td> </tr> </c:forEach> </tbody> </table> ``` ## 플러그인 구현  ### 셋팅 #### 플러그인 다운로드 Star Rating JS ([다운로드 링크](https://www.jqueryscript.net/download/Simple-jQuery-Star-Rating-System-For-Bootstrap-3.zip)) #### CSS ``` // Bootstrap 4 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> // Start Rating <link href="css/star-rating.css" media="all" rel="stylesheet" type="text/css" /> ``` #### JS ``` // jQuery <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"> // Bootstrap 4 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" // Star Rating <script src="js/star-rating.js" type="text/javascript"> ``` ### 사용 #### input ``` <input name="rating" id="rating-system" type="text" class="rating rating-loading" data-size="xs"> ``` #### output ``` <input type="text" class="rating rating-loading" value="${ review.rating }" data-size="xs"> ``` ## Ref. 1. 스프링 레퍼런스 뷰 기술(https://blog.outsider.ne.kr/912) 2. 스프링 form 태그(https://goo.gl/ruWJaA) 3. 스프링 form: modelAttribute(http://giyatto.tistory.com/70) 4. Simple jQuery Star Rating System (http://plugins.krajee.com/star-rating) 5. CSS Star Rating had never been a piece of cake!(https://goo.gl/urfoyk) 6. Simple jQuery Star Rating for Bootstrap3/4 (https://goo.gl/rbek96)