스프링부트 공부기록(28) - 영화 리뷰 프로젝트 :: 영화 등록 구현하기

💡구현 목표

• 영화 등록과 수정에는 파일 업로드 기능을 활용해서 영화 포스터 등을 등록하도록 함.
• 회원은 특정 영화 조회 페이지에서 평점과 자신의 감상을 리뷰로 기록할 수 있음.
• 조회 화면에서 회원은 자신이 기록한 리뷰의 내용을 수정, 삭제할 수 있음.

---

🤍영화 등록 처리

1. MovieController 코드 작성

 

2. register.html 작성

 

3. 실행 화면

4. MovieDTO / MovieImageDTO 클래스 작성

• 이미 영화(Movie) 엔티티 클래스가 작성되었으므로 DTO, 서비스 계층만 추가 작업해주면 된다.

 

5. 서비스 계층 추가

• Movie를 JPA로 처리하기 위해서는 MovieDTO를 Movie 객체로 변환 필요.
• 여기에서는 이전 프로젝트와 달리 Movie, MovieImage 객체도 같이 처리해야 하기 때문에 한번에 두 가지 객체를 반환하기 위해 Map 타입을 이용함.

 

6. MovieServiceImpl 코드 작성

7. 첨부파일 업로드 관련 코드 register.html에 작성

$(document).ready(function (e){
                var regex = new RegExp("(.*?)\.(exe|sh|zip|alz|tiff)$");
                var maxSize = 10485760; //10MB

                function checkExtenstion(fileName, fileSize){
                    if(fileSize>=maxSize){
                        alert("파일 사이즈 초과");
                        return false;
                    }
                    if(regex.test(fileName)){
                        alert("해당 종류의 파일은 업로드할 수 없습니다.");
                        return false;
                    }
                    return true;
                }

                $(".custom-file-input").on("change",function (){
                    var fileName = $(this).val().split("\\").pop();
                    $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
                    var formData = new FormData();
                    var inputFile = $(this);
                    var files = inputFile[0].files;
                    var appended = false;
                    for (var i=0; i<files.length; i++){
                        if(!checkExtenstion(files[i].name, files[i].size)){
                            return false;
                        }
                        console.log(files[i]);
                        formData.append("uploadFiles",files[i]);
                        appended = true;
                    }
                    //upload를 하지 않는다.
                    if(!appended){return ;}

                    for (var value of formData.values()){
                        console.log(value);
                    }
                    //실제 업로드 부분
                    //upload ajax
                    $.ajax({
                        url: '/uploadAjax',
                        processData: false,
                        contentType: false,
                        data: formData,
                        type: 'POST',
                        dataType: 'json',
                        success: function (result) {
                            console.log(result);
                            showResult(result);
                        },
                        error: function (jqXHR, textStatus, errorThrown){
                            console.log(textStatus);
                        }
                    });
                });

 

8. 업로드 후 화면 결과

9. 이미지 파일 삭제와 Submit 처리

 

submit 버튼을 클릭하면

• 각 이미지 <li> 태그의 'data' 속성을 읽어냄.
• 읽어낸 속성값을 이용해서 <form> 태그에 <input type='hidden'> 태그를 생성함.
• 히든 태그에는 imageDTOList[0]과 같이 인덱스 번호를 붙여서 처리함.

 

10. 삭제 구현 완료

11. submit 구현 완료