본문 바로가기
공부기록/실습

6월 2일 (2) Spring - movieinfo 3

by project100 2023. 6. 2.

detail

<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Movie - detail</title>
    <link rel="stylesheet" th:href="@{css/style.css}">
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script th:inline="javascript">
        $(function () {
            let m = [[${msg}]]; // msg가 없으면 null
            if (m != null) {
                alert(m);
            }
        });
    </script>
<body>
<div class="wrap">
    <th:block th:insert="~{header.html}"></th:block>
    <div class="content">
        <div class="detail-form">
            <h2 class="form-header">상세 보기</h2>
            <div class="detail">
                <div class="detail-sub">
                    <div class="detail-title">포스터</div>
                    <div class="detail-content">
                        <th:block th:if="${movie.msysname} == null">
                            <img th:src="@{images/no_image.jpg}" class="poster">
                        </th:block>
                        <th:block th:unless="${movie.msysname} == null">
                            <img th:src="@{upload/}+${movie.msysname}" class="poster">
                        </th:block>
                    </div>
                </div>
            </div>
            <div class="detail">
                <div class="detail-sub">
                    <div class="detail-title">제목</div>
                    <div class="detail-content" th:text="${movie.mname}"></div>
                </div>
                <div class="detail-sub">
                    <div class="detail-title">개봉</div>
                    <div class="detail-content" th:text="${movie.mopen}"></div>
                </div>
                <div class="detail-sub">
                    <div class="detail-title">장르</div>
                    <div class="detail-content" th:text="${movie.mgenre}"></div>
                </div>
                <div class="detail-sub">
                    <div class="detail-title">국가</div>
                    <div class="detail-content" th:text="${movie.mnation}"></div>
                </div>
                <div class="detail-sub">
                    <div class="detail-title">감독</div>
                    <div class="detail-content" th:text="${movie.mdirector}"></div>
                </div>
                <div class="detail-sub">
                    <div class="detail-title">주연</div>
                    <div class="detail-content" th:text="${movie.mactor}"></div>
                </div>
            </div>
            <div class="detail">
                <div class="detail-sub">
                    <div class="synopsis-title">영화 개요</div>
                    <div class="synopsis-content" th:text="${movie.msynopsis}"></div>
                </div>
            </div>
            <div class="btn-area">
                <button class="btn-write" id="upbtn">U</button>
                <button class="btn-write" id="delbtn">D</button>
                <button class="btn-sub" id="backbtn">B</button>
            </div>
        </div>
    </div>
    <th:block th:insert="~{footer.html}"></th:block>
</div>
</body>
<script th:inline="javascript">
    $("#backbtn").click(function (){
       let pn =[[${session.pageNum}]];
       if(pn == null){
           pn = 1;
       }
       location.href = "/?pageNum=" + pn;
    });
    
    $("#upbtn").click(function (){
          location.href = "updateForm?mcode=" + [[${movie.mcode}]];
       });
</script>
</html>

 

controller

    @GetMapping("detail")
    public ModelAndView detail(Long mcode){
        log.info("detail()");
        mv = mServ.getMovie(mcode);
        mv.setViewName("detail");
        return mv;
    }

service

  public ModelAndView getMovie(Long mcode) {
        log.info("getMovie()");
        mv = new ModelAndView();
        Movieinfo movie = mRepo.findById(mcode).get();
        mv.addObject("movie", movie);
        return mv;
    }

 

wirteForm

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Movie - update</title>
    <link rel="stylesheet" th:href="@{css/style.css}">
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"
            integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
    <script th:inline="javascript">
        $(function () {
            let m = [[${msg}]]; // msg가 없으면 null
            if (m != null) {
                alert(m);
            }
        })
    </script>
</head>
<body>
<div class="wrap">
    <th:block th:insert="~{header.html}"></th:block>
    <div class="content">
        <form th:action="@{updateProc}" method="post" class="write-form" enctype="multipart/form-data" th:object="${movie}">
            <h2 class="form-header">영화 정보 수정</h2>
            <input type="hidden" name="mcode" th:value="*{mcode}">
            <input type="text" class="write-input" th:value="*{mname}" name="mname" autofocus placeholder="영화 제목 입력"
                   required>
            <input type="date" class="write-input" th:value="*{mopen}" name="mopen" placeholder="개봉일 입력" required>
            <input type="text" class="write-input" th:value="*{mgenre}" name="mgenre" placeholder="장르 입력" required>
            <input type="text" class="write-input" th:value="*{mnation}" name="mnation" placeholder="국가 입력" required>
            <input type="text" class="write-input" th:value="*{mdirector}" name="mdirector" placeholder="감독 입력" required>
            <input type="text" class="write-input" th:value="*{mactor}" name="mactor" placeholder="주연배우 입력" required>
            <textarea rows="5" class="write-input ta" th:text="*{msynopsis}" name="msynopsis" placeholder="영화 개요 입력"></textarea>
            <input type="hidden" th:value="*{moriname}" name="moriname">
            <input type="hidden" th:value="*{msysname}" name="msysname">
            <div class="filebox">
                <div class="t_content p-15 file_h">포스터</div>
                <div class="d_content p-85 file_h">
                    <th:block th:if="${movie.msysname} == null">
                        <img th:src="@{imgaes/no_image.jpg}" class="poster">
                    </th:block>
                    <th:block th:unless="${movie.msysname} == null">
                        <img th:src="@{upload/}+${movie.msysname}" class="poster">
                    </th:block>
                </div>
                <!-- 새 파일 업로드 -->
                <label for="file">업로드</label>
                <input type="file" id="file" name="files">
                <input type="text" class="upload-name" value="파일선택" readonly>
            </div>
            <div class="btn-area">
                <input type="submit" class="btn-write" value="U">
                <input type="reset" class="btn-write" value="R">
                <input type="button" class="btn-write" value="B" id="backbtn">
            </div>
        </form>
    </div>
    <th:block th:insert="~{footer.html}"></th:block>
</div>
</body>
<script th:inline="javascript">
    $("#backbtn").click(function (){
       location.href = "detail?mcode=" + [[${movie.mcode}]];
    });

    // 파일 업로드 처리 시 선택한 파일명 출력
    $("#file").on("change", function (){
        // 하나여도 무조건 배열형태
        let files = $("#file")[0].files;
        // 취소될 수도 있기 때문에 빈 문자열로 만들기
        let fileName = "";
        if(files.length == 1){
            fileName = files[0].name;
        } else {
            // 파일 선택창에서 '취소'버튼 클릭
            fileName = "파일선택"; // 원래 이름으로 복원
        }
        $(".upload-name").val(fileName);
    });
</script>
</html>

controller

    @GetMapping("updateForm")
    public ModelAndView updateForm(Long mcode) {
        log.info("updateForm()");
        mv = mServ.getMovie(mcode);
        mv.setViewName("updateForm");
        return mv;
    }

    @PostMapping("updateProc")
    public String updateProc(@RequestPart List<MultipartFile> files, Movieinfo movie, HttpSession session, RedirectAttributes rttr){
        log.info("updateProc()");
        String view = mServ.updateMovie(files, movie, session, rttr);
        return  view;
    }

service

  public ModelAndView getMovie(Long mcode) {
        log.info("getMovie()");
        mv = new ModelAndView();
        Movieinfo movie = mRepo.findById(mcode).get();
        mv.addObject("movie", movie);
        return mv;
    }

    public String updateMovie(List<MultipartFile> files, Movieinfo movie, HttpSession session, RedirectAttributes rttr) {
        log.info("updateMovie()");
        String view = null;
        String msg = null;
        String upFile = files.get(0).getOriginalFilename();
        String poster = movie.getMsysname(); // 원래 있던 sysname을 가져옴

        try {
            if (!upFile.equals("")) {
                fileUpload(files, session, movie);
            }
            mRepo.save(movie);
            // 기존 파일 삭제
            if(poster != null && !upFile.equals("")){
                 // 기존 파일이 있고, 새 파일이 들어왔을 때만 삭제
                fileDelete(poster, session);
            }
            view = "redirect:detail?mcode=" + movie.getMcode();
            msg = "수정 성공";
        } catch (Exception e) {
            e.printStackTrace();
            view = "redirect:updateForm?mcode=" + movie.getMcode();
            msg = "수정 실패";
        }
        rttr.addFlashAttribute("msg", msg);
        return view;
    }

    private void fileDelete(String poster, HttpSession session) throws Exception{
        log.info("fileDelete()");
        String realPath = session.getServletContext().getRealPath("/");
        realPath += "upload/" + poster;
        File file = new File(realPath);

        if(file.exists()){
            file.delete();
        }
    }
저작자표시 비영리 변경금지

'공부기록 > 실습' 카테고리의 다른 글

10월 22일 과제  (0) 2023.10.25
6월 5일 Spring - movieinfo 4  (0) 2023.06.05
6월 2일 (1) Spring - movieinfo 2  (0) 2023.06.02
6월 1일 Spring - movieinfo 1  (0) 2023.06.01
5월 2일 과자 제품 관리 프로그램 프로젝트 보고서 작성  (0) 2023.05.02

관련글

티스토리툴바