페이지 구성(수정 버튼 추가) :
기존 게시글 상세 페이지의 내용에서 빨간 네모의 내용을 추가하여 수정 버튼을 구현하였습니다.
http 1.0 방식으로 진행하고 있기에 (연습용) insert, update, delete 모두 method 방식을 post로 작성하였으며,
세가지 역할을 모두 post로 통합하였기 때문에 추가로 어떤 행동을 진행하여야 할지를
‘/board/id값/update’ 와 같이 작성하여 컨트롤러에서 구분할 수 있도록 작성하였습니다. (옛날 방식)
수정 페이지 구성:
{{> layout/header}}
<section>
<form action="/board/{{model.id}}/update" method="post">
<div>
번호 : <input value="{{model.id}}" readonly><br>
제목 : <input type="text" name="title" value="{{model.title}}"><br>
내용 : <input type="text" name="content" value="{{model.content}}"><br>
작성일 : <input value="{{model.createdAt}}" readonly><br>
<button type="submit">수정하기</button>
</div>
</form>
</section>
</body>
</html>Controller :
- 게시글 상세페이지에서 수정 버튼을 눌렀을 때 > 수정 화면(update-form.mustache)으로 이동시키는 메서드입니다.
- 수정할 게시글의 기본적인 값을 함께 전달하기 위해 기존의 게시글수정화면보기 메서드를 활용하여 model에 담아둔 뒤, view로 전환하고 있습니다. (게시글상세보기 메서드와 내용은 동일)
- UpdateFomeDTO 도 기존의 DetailDTO와 내용은 같습니다. 다만 위와 같이 뷰에 전달하는 객체들은 내용이 같더라도 이름을 다르게 하여 분리 시키는 것이 유지 보수에 유리합니다.
- 수정 페이지에서 수정할 제목과 내용을 모두 입력하고 제출 버튼을 눌렀을 때 동작하는 메서드 입니다.
- UpdateDTO(기존의 SaveDTO 객체와 내용은 동일) 로 파싱한 객체와 경로 변수 id를 매개변수로 받습니다.
- 새로 작성한 service 객체의 게시글수정 메서드를 통해 받은 자료들을 전달합니다.
- 작업이 완료되면 ‘/’ 경로로 새 요청을 진행합니다.
Service :
@Transactional
public void 게시글수정(int id, BoardRequest.UpdateDTO updateDTO) {
boardRepository.update(id, updateDTO.getTitle(), updateDTO.getContent());
}해당 메소드 또한 없는 아이디 값을 강제로 수정하려고 하면 당연히 수정에 실패할 것이며, 이에 대한 예외 처리를 진행하는 것이 옳은 방식이지만 해당 예제에서는 생략하였습니다.
Repository :
public void update(int id, String title, String content) {
Query q = em.createNativeQuery("update board_tb set title = ?, content = ? where id = ?");
q.setParameter(1, title);
q.setParameter(2, content);
q.setParameter(3, id);
q.executeUpdate();
}이전에 작성한 코드에서 쿼리문을 update 문으로 작성하고, 물음표에 알맞은 값들을 set 한 뒤, update를 실행합니다.
작성 내용 테스트하기
- 5번 게시글의 상세 페이지에서 수정 버튼을 클릭합니다.
- 내용은 그대로 두고, 제목만 ‘수정한 제목’ 으로 변경한 뒤 수정하기 버튼을 클릭합니다.
- 메인 화면에서 수정한 5번 게시글의 제목을 확인할 수 있습니다.
3-1. 게시글 상세 페이지에서 제목만 변경된 것을 디테일하게 확인할 수 있습니다.
Share article