[스프링부트] 글 수정하기

[익명 게시글을 쓰는 블로그 만들기 14]

detail.mustache 파일 - 글 상세보기 View

• 수정 버튼을 추가하고 form 태그로 감쌈

• form의 action 속성에 주소값을 설정하고, method는 GET으로 설정

{{> layout/header}}

<section>
    <form action="/board/{{model.id}}/delete" method="post">
        <button type="submit">삭제</button>
    </form>
    <form action="/board/{{model.id}}/update" method="get">
        <button type="submit">수정</button>
    </form>
    <div>
        번호: {{model.id}}<br>
        제목: {{model.title}}<br>
        내용: {{model.content}}<br>
        작성일: {{model.createdAt}}<br>
    </div>
</section>

</body>
</html>

update-form.mustache 파일 - 글 수정하기 View

• 모든 input 태그를 form 태그로 감싸서 데이터를 한번에 전송할 수 있도록 함

• form태그의 action, method, enctype을 설정
• Spring을 연습하기 위해 JavaScript 없이 HTML 1.0 버전으로 연습
• GET과 POST만 사용할 수 있으므로 주소에 update를 추가

• id와 createdAt 필드는 수정할 수 없으므로 readonly 속성을 추가

{{> layout/header}}

<section>
    <form action="/board/{{model.id}}/update" method="post" enctype="application/x-www-form-urlencoded">
        <input type="number" value="{{model.id}}" readonly><br>
        <input type="text" name="title" placeholder="제목" value="{{model.title}}"><br>
        <input type="text" name="content" placeholder="내용" value="{{model.content}}"><br>
        <input type="text" value="{{model.createdAt}}" readonly><br>
        <button type="submit">수정</button>
    </form>
</section>

</body>
</html>

BoardRepository 클래스

• BoardRepository에 update 메서드를 구현하여, id를 기준으로 title과 content를 DB에서 수정

@RequiredArgsConstructor
@Repository
public class BoardRepository {
    private final EntityManager entityManager;

    public void update(int id, String title, String content) {
        Query q = entityManager.createNativeQuery("update board_tb set title=?, content=? where id=?");
        q.setParameter(1, title);
        q.setParameter(2, content);
        q.setParameter(3, id);
        q.executeUpdate();
    }
}

BoardRepositoryTest 클래스 - 테스트 클래스

• BoardRepository에서 구현한 update 메서드를 테스트

• given
• 테스트를 위한 입력 값을 설정
• DB에서 수정할 게시글의 id, title, content를 설정

• when
• 테스트할 메서드를 실행
• boardRepository.update() 메서드를 호출하여 DB에서 게시글을 수정

• then
• 결과 검증 ⇒ 출력으로 결과 검증하는 방식 채택

@Import(BoardRepository.class)
@DataJpaTest
public class BoardRepositoryTest {
    @Autowired
    BoardRepository boardRepository;

    @Test
    public void update_test() {
        // given
        int id = 1;
        String title = "제목1수정";
        String content = "내용1수정";

        // when
        boardRepository.update(id, title, content);

        // then(eye)
        Board board = boardRepository.findById(id);
        System.out.println(board.getTitle());
        System.out.println(board.getContent());
    }
}

BoardController 클래스

• update() 메서드
• @PostMapping을 통해 /board/{id}/update 경로로 들어오는 POST 요청을 update 메서드에서 처리
• @PathVariable("id") 어노테이션을 사용하여 수정할 게시글의 id를 받아오고, 수정할 내용은 BoardRequest.UpdateDTO 객체로 폼 데이터를 입력 받음
• boardService에서 게시글수정 메서드를 호출하여 id에 해당하는 게시글을 updateDTO의 정보로 DB에서 수정
• "redirect:/board/" + id 값을 반환하여 상세보기 페이지로 리다이렉트

• updateForm() 메서드
• @GetMapping을 통해 /board/{id}/update 경로로 들어오는 GET 요청을 updateForm 메서드에서 처리
• @PathVariable("id") 어노테이션을 사용하여 받아온 id를 사용해 boardService의 게시글수정화면보기() 메서드를 호출하여 게시글 정보를 UpdateFormDTO 형태로 받아오고, 이를 model에 저장
• updateForm 메서드는 "update-form" 뷰를 반환하고, model에 저장된 정보로 뷰를 렌더링

@RequiredArgsConstructor
@Controller
public class BoardController {
    private final BoardService boardService;

    @PostMapping("/board/{id}/update")
    public String update(@PathVariable int id, BoardRequest.UpdateDTO updateDTO) {
        boardService.게시글수정(id,updateDTO);
        return "redirect:/board/" + id;
    }

    @GetMapping("/board/{id}/update")
    public String updateForm(@PathVariable int id, Model model) {
        BoardResponse.UpdateFormDTO updateFormDTO = boardService.게시글수정화면보기(id);
        model.addAttribute("model", updateFormDTO);
        return "update-form";
    }
}

BoardResponse 클래스 - UpdateFormDTO 클래스

• 수정 폼에 입력할 데이터를 저장하기 위한 객체 UpdateFormDTO를 정의

public class BoardResponse {
    @Data
    public static class UpdateFormDTO {
        private int id;
        private String title;
        private String content;
        private String createdAt;

        public UpdateFormDTO(Board board) {
            this.id = board.getId();
            this.title = board.getTitle();
            this.content = board.getContent();
            this.createdAt = MyDate.formatToStr(board.getCreatedAt());
        }
    }
}

BoardRequest 클래스 - UpdateDTO 클래스

• 수정 폼에서 입력받은 데이터를 저장하기 위한 객체 UpdateDTO를 정의

public class BoardRequest {
    @Data
    public class UpdateDTO {
        private String title;
        private String content;
    }
}

BoardService 클래스

• 게시글수정 메서드
• id와 updateDTO 데이터를 boardRepository의 update 메서드를 사용하여 DB의 내용을 수정

• 게시글수정화면보기 메서드
• id에 해당하는 게시글의 정보를 UpdateFormDTO로 반환

• @Transactional 어노테이션
• DB 트랜잭션 관리

@RequiredArgsConstructor
@Service
public class BoardService {
    private final BoardRepository boardRepository;

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

    public BoardResponse.UpdateFormDTO 게시글수정화면보기(int id) {
        Board board = boardRepository.findById(id);
        return new BoardResponse.UpdateFormDTO(board);
    }
}

웹 실행해서 글 수정 테스트

• 상세보기 화면에서 수정 버튼을 클릭하여 수정 페이지 이동

• 제목과 내용을 수정한 후 수정 버튼을 클릭하여 수정 요청

• 수정 후 올바르게 리다이렉트되었는지 확인

• 게시글이 제대로 수정되었는지 확인