8. 게시글 수정 구현

1. 페이지 구성(수정 버튼 추가)

• 기존 게시글 상세 페이지의 내용에서 빨간 네모의 내용을 추가하여 수정 버튼을 구현

수정 페이지 구성

{{> 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>

2. Controller

1. 게시글 상세페이지에서 수정 버튼을 눌렀을 때 > 수정 화면(update-form.mustache)으로 이동시키는 메서드.
• 수정할 게시글의 기본적인 값을 함께 전달하기 위해 기존의 게시글수정화면보기 메서드를 활용하여 model에 담아둔 뒤, view로 전환 (게시글상세보기 메서드와 내용은 동일)
• UpdateFomeDTO 도 기존의 DetailDTO와 내용은 동일.
• 위와 같이 뷰에 전달하는 객체들은 내용이 같더라도 이름을 다르게 하여 분리 시키는 것이 유지 보수에 유리.

2. 수정 페이지에서 수정할 제목과 내용을 모두 입력하고 제출 버튼을 눌렀을 때 동작하는 메서드 입니다.
• UpdateDTO(기존의 SaveDTO 객체와 내용은 동일) 로 파싱한 객체와 경로 변수 id를 매개변수로 사용.
• 새로 작성한 service 객체의 게시글수정 메서드를 통해 받은 자료들을 전달.
• 작업이 완료되면 ‘/’ 경로로 새 요청을 진행.

3. Service

• 해당 메소드 또한 없는 아이디 값을 강제로 수정하려고 하면 당연히 수정에 실패할 것. 이에 대한 예외 처리를 진행하는 것이 옳은 방식이지만 해당 예제에서는 생략.

@Transactional
public void 게시글수정(int id, BoardRequest.UpdateDTO updateDTO) {
		boardRepository.update(id, updateDTO.getTitle(), updateDTO.getContent());
}

4. Repository

• 이전에 작성한 코드에서 쿼리문을 update 문으로 작성, 물음표에 알맞은 값들을 set 한 뒤, update를 실행.

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();
}

5. 작성 내용 테스트하기