4. 블로그 프로젝트

프로그래밍

4. 블로그 프로젝트

JJJaewon 2022. 7. 9. 14:50

각 게시물을 세부적으로 보는 detail 페이지와 수정하는 update 페이지를 추가하고 update, delete를 구현하였다.

update.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        
        <title>블로그</title>
    </head>

    <body>
        <div class="container">

            <h1 class="display-3 center-block">재원블로그</h1>
            
            <input id="postID" hidden th:value="${post.id}">

            <p th:text="${post.title}"></p>
            <p th:text="${post.content}"></p>
            <button id="updateButtonClicked" class="btn btn-light">수정</button>
            <button id="deletePost" class="btn btn-light">삭제</button>

        </div>


        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
        <script src="/js/main.js"></script>
    </body>
</html>

update.html를 구성할 때 문제는 id를 어떻게 전달하냐였다. 이를 해결하기 위해서 input의 hidden 속성을 이용하여 화면에는 뜨지 않게 하고, thymeleaf에서 값을 렌더링하도록 하여 자바스크립트에서 사용할 수 있도록 하였다.