반응형
🤍영화 목록 처리 구현하기
1. 이번에도 역시 전에 만들어둔 PageRequestDTO, PageResultDTO를 그대로 가져와서 사용한다.
2. MovieService 코드 작성
- JPA를 통해 나오는 엔티티 객체들과 Double, Long 등의 값을 MovieDTO로 변환하는 entitiesToDto 추가
3. MovieServiceImpl 코드 작성
4. 목록 화면 list.html 작성
- 페이징 코드는 기존과 동일하므로 생략한다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:replace="~{/layout/basic::setContent(~{this::content})}">
<th:block th:fragment="content">
<h1 class="mt-4">Movie List Page
<span>
<a th:href="@{/movie/register}">
<button type="button" class="btn btn-outline-primary">REGISTER</button>
</a>
</span>
</h1>
<form action="/movie/list" method="get" id="searchForm">
<input type="hidden" name="page" value="1">
</form>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Title & Picture</th>
<th scope="col">Review Count</th>
<th scope="col">AVG Rating</th>
<th scope="col">Regdate</th>
</tr>
</thead>
<tbody>
<tr th:each="dto : ${result.dtoList}">
<th scope="row">
<a th:href="@{/movie/read(mno = ${dto.mno}, page=${result.page})}">
[[${dto.mno}]]
</a>
</th>
<td><img th:if="${dto.imageDTOList.size()>0 && dto.imageDTOList[0].path !=null}"
th:src="|/display?fileName=${dto.imageDTOList[0].getThumbnailURL()}|">
[[${dto.title}]]
</td>
<td><b>[[${dto.reviewCnt}]]</b></td>
<td><b>[[${dto.avg}]]</b></td>
<td>[[${#temporals.format(dto.regDate, 'yyyy/MM/dd')}]]</td>
</tr>
</tbody>
</table>
5. 컨트롤러 코드 작성
6. 데이터 뿌린 뒤 실행 화면
페이징도 잘 된다.
🤍영화 상세 조회 구현하기
1. MovieService, MovieServiceImpl 코드 작성
- 특정한 영화 번호를 이용해서 MovieDTO를 반환하도록 구현한다.
2. MovieController 클래스 작성
3. 영화 조회 화면 read.html 작성
- 포스터 이미지 업로드 부분
<div class="uploadResult">
<ul>
<li th:each="movieImage : ${dto.imageDTOList}" th:data-file="${movieImage.getThumbnailURL()}">
<img th:if="${movieImage.path != null}" th:src="|/display?fileName=${movieImage.getThumbnailURL()}|">
</li>
</ul>
</div>
🤍영화 리뷰 처리
1. ReviewDTO 작성
2. ReviewService 작성
- 특정 영화 모든 리뷰를 가져오는 기능
- 새로운 영화 리뷰 등록 기능
- 특정 영화 리뷰 수정 기능
- 특정 영화 리뷰 삭제 기능
3. ReviewServiceImpl 작성
4. ReviewController 작성
- Ajax로 동작하기 때문에 @RestController로 설계
5. read.html에서 리뷰 처리
- 이번에도 역시 모달창으로 구현한다.
- 별점 처리 작업은 starrr 라이브러리로 처리한다.
- reviewModal 화면에 띄우기
$(document).ready(function (e){
var grade = 0;
var mno = [[${dto.mno}]];
$('.starrr').starrr({
rating: grade,
change: function (e,value){
if(value){
console.log(value);
grade = value;
}
}
});
//$(".reviewModal").modal("show"); //미리보기 용- 구현 화면
6. 리뷰 등록
- reviewSaveBtn을 클릭하면 회원의 아이디(mid), 점수(grade), 내용(text)을 JSON 데이터로 만들어서 전송.
7. 리뷰 리스트 보여주기
8. 특정 리뷰 선택하기
9. 영화 포스터 원본 보기
- 화면에서 썸네일이 포함된 <li>를 클릭하면 data-file 속성값을 가져와서 imageModal창에 이미지 태그로 추가함.
- 이때 size 파라미터값을 이용해서 원본 이미지를 가져오게함.
$(".uploadResult li").click(function() {
var file = $(this).data('file');
console.log(file);
$('.imageModal .modal-body').html("<img style='width:100%' src='/display?fileName="+file+"&size=1' >")
$(".imageModal").modal("show");
});
반응형
'💻 my code archive > 🏷️JAVA & Spring(Boot)' 카테고리의 다른 글
| 스프링부트 공부기록(31) - 스프링 시큐리티 구글 로그인 구현하기 (0) | 2022.03.21 |
|---|---|
| 스프링부트 공부기록(30) - 스프링 시큐리티(Spring Security) 연동, 인증, 인가, 커스터마이징 (0) | 2022.03.21 |
| 스프링부트 공부기록(28) - 영화 리뷰 프로젝트 :: 영화 등록 구현하기 (0) | 2022.03.20 |
| 스프링부트 공부기록(27) - 영화 리뷰 프로젝트 :: 파일 업로드 처리, 영화 포스터 업로드 구현하기 (0) | 2022.03.20 |
| 스프링부트 공부기록(26) - 영화 리뷰 프로젝트 :: 다대다 관계 설계 (0) | 2022.03.20 |
