-
4. 블로그 프로젝트프로그래밍 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에서 값을 렌더링하도록 하여 자바스크립트에서 사용할 수 있도록 하였다.
반응형'프로그래밍' 카테고리의 다른 글
6. 블로그 프로젝트 (0) 2022.07.19 5. 블로그 프로젝트 (0) 2022.07.17 3. 블로그 프로젝트 (0) 2022.07.06 2. 블로그 프로젝트 (0) 2022.07.05 1. 블로그 프로젝트 (0) 2022.07.02