09009

[Spring Boot] 회원 + 게시판 연습 (5) - 게시글 수정 및 삭제 본문

Back-End/Spring
[Spring Boot] 회원 + 게시판 연습 (5) - 게시글 수정 및 삭제
09009

게시글 수정

detail.html

    <div class="row mt-5">
        <div class="col text-center">
            <button class="btn btn-primary" onclick="listReq()">목록으로</button>
            <button th:if="${session.memberDTO != null and session.memberDTO.id == board.memberId}"
                    class="btn btn-primary" onclick="updateReq()"> 수정 </button>
            <button th:if="${session.memberDTO != null and session.memberDTO.id == board.memberId}"
                    class="btn btn-primary" onclick="deleteReq()"> 삭제 </button>
        </div>
    </div>
<script th:inline="javascript">

    const updateReq = () => {
        const id = [[${board.id}]];
        location.href = "/board/update/" + id;
    }
</script>

 

BoardController

    // 게시글 수정 페이지
    @GetMapping("/update/{id}")
    public String updateForm(@PathVariable Long id, Model model, HttpSession session) {
        MemberDTO sessionUser = (MemberDTO) session.getAttribute("memberDTO");
        if (sessionUser != null) {
            BoardDTO boardDTO = boardService.findById(id);
            model.addAttribute("boardUpdate", boardDTO);
            return "board/update";
        } else {
            return "user/loginPage";
        }
    }

 

게시글 수정 폼

update.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>글 수정하기</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
    <style>
        .orangeButton {
            background: #ff6f0f;
            font-weight: bold;
            color: white;
        }
        .boardTh {
            width: 25%;
            background-color : #f4f4f4!important;
        }
    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<body>
<div class="container">
    <div th:include="common/header :: header"></div>
    <div class="row mt-5">
        <div class="col"></div>
        <div class="col-10">

            <div class="row mt-2">
                <div class="col">

                    <div class="row fs-4 fw-bold text-center">
                        <div class="col">
                            게시글 수정하기
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col">
                            <form action="/board/update" method="post">
                                <input type="hidden" name="id" th:value="${boardUpdate.id}">
                                <div class="row mt-4 justify-content-center">
                                    <div class="col-10">
                                        <table class="table">
                                            <tr>
                                                <th class="boardTh text-center">제목</th>
                                                <td>
                                                    <div class="row">
                                                        <div class="col text-start ms-2">
                                                            <input type="text" class="form-control"
                                                                   name="title" th:value="${boardUpdate.title}">
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="boardTh text-center">내용</th>
                                                <td>
                                                    <div class="row">
                                                        <div class="col text-start ms-2">
                                                            <textarea class="form-control" rows="5"
                                                                      name="content" th:text="${boardUpdate.content}"></textarea>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>

                                <div class="row justify-content-center">
                                    <div class="col-10 text-end">
                                        <a class="btn btn-primary" th:href="@{|/|}" th:text="목록으로"></a>
                                        <a class="btn btn-primary" href="javascript:history.back();">뒤로가기</a>
                                        <button class="btn orangeButton"> 수정하기
                                            <i class="bi bi-pencil-square"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col"></div>
    </div>
</div>

<script th:inline="javascript">


</script>
</body>
</html>

 

BoardController

    // 게시글 수정
    @PostMapping("/update")
    public String update(@ModelAttribute BoardDTO boardDTO, Model model) {

        BoardDTO board = boardService.update(boardDTO);
        // 게시글 상세보기랑 model attributename 값 같게 해야함
        model.addAttribute("board", board);
        return "board/detail";
    }

 

BoardService

    // 게시글 수정
    @Transactional
    public BoardDTO update(BoardDTO boardDTO) {
        boardRepository.updateBoard(boardDTO.getTitle(),
                boardDTO.getContent(),
                boardDTO.getId());
        BoardEntity boardEntity = boardRepository.findById(boardDTO.getId()).get();
        return BoardDTO.toBoardDTO(boardEntity);
    }

 

BoardRepository

  // update board_table set title = ?, content = ? where id = ?
    @Modifying
    @Query(value = "update BoardEntity b set b.title = :title, b.content = :content where b.id = :id")
    void updateBoard(@Param("title") String title, @Param("content") String content, @Param("id") Long id);

 

게시글 삭제

detail.html

    <div class="row mt-5">
        <div class="col text-center">
            <button class="btn btn-primary" onclick="listReq()">목록으로</button>
            <button th:if="${session.memberDTO != null and session.memberDTO.id == board.memberId}"
                    class="btn btn-primary" onclick="updateReq()"> 수정 </button>
            <button th:if="${session.memberDTO != null and session.memberDTO.id == board.memberId}"
                    class="btn btn-primary" onclick="deleteReq()"> 삭제 </button>
        </div>
    </div>

 

게시글 삭제를 다시 한 번 묻는 모달 창

<!-- 게시글 삭제 alert -->
<div class="modal" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-light">
                <h5 class="modal-title">게시글 삭제</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <div class="row text-center">
                    <div class="col">
                        게시글을 삭제하시겠습니까?
                    </div>
                </div>

            </div>

            <div class="modal-footer">
                <input type="button" class="btn btn-primary" value="확인" onclick="deleteBoard()">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">취소</button>
            </div>

        </div>
    </div>
</div>
<!-- 게시글 삭제 alert -->

<script th:inline="javascript">

    const listReq = () => {
        location.href = "/";
    }

    const updateReq = () => {
        const id = [[${board.id}]];
        location.href = "/board/update/" + id;
    }

    const deleteReq = () => {
        const sessionId = [[${session.memberDTO.id}]];
        if (sessionId == null) {
            location.href = "/user/loginPage";
            return;
        } else {
            const deleteModal = bootstrap.Modal.getOrCreateInstance("#deleteModal");
            deleteModal.show();
        }
    }

    // 게시글 삭제
    const deleteBoard = () => {
         const sessionId = [[${session.memberDTO.id}]];
         if (sessionId == null) {
            location.href = "/user/loginPage";
            return;
        } else {
            const deleteModal = bootstrap.Modal.getOrCreateInstance("#deleteModal");
            deleteModal.hide();
            location.href = "/board/delete/" + [[${board.id}]];
       }
    }

 

 

BoardController

   // 게시글 삭제
    @GetMapping("/delete/{id}")
    public String delete(@PathVariable Long id) {
        boardService.deleteById(id);
        return "redirect:/";
    }

 

BoardService

  // 게시글 삭제
    public void deleteById(Long id) {
        boardRepository.deleteById(id);
    }
 

'Back-End > Spring' 카테고리의 다른 글

[토이 프로젝트] 카테고리 테이블 DDL  (0) 2024.02.20
[Spring Boot] 회원 + 게시판 연습 (6) - 댓글 작성  (0) 2024.02.05
[Spring Boot] 회원 + 게시판 연습 (4) - 게시글 상세 조회  (0) 2024.02.05
[Spring Boot] 회원 + 게시판 연습 (3) - 게시글 작성 및 목록 조회  (0) 2024.02.04
[Spring Boot] 회원 + 게시판 연습 (2) - 로그인, 회원정보 수정, 로그아웃  (0) 2024.02.04
'Back-End/Spring' Related Articles more
Comments