Java - 게시판 프로젝트(3)

2023.03.28

 

게시판 프로젝트 (3)
댓글 수정 기능 만들기

---

1. 댓글 수정 기능 추가

댓글 추가 기능과 댓글 삭제 기능을 추가한 뒤, 댓글 수정 기능을 추가하였다. 

 

<게시판>

내가 생각한 수정 기능은 다음과 같다.

 

1. 댓글 옆에 있는 버튼 중, 수정 버튼을 클릭한다.

2. 위에 댓글 입력하는 곳 밑에 등록 버튼과 취소 버튼 옆에 수정 버튼이 생긴다.

3. 댓글이 그대로 댓글 입력 칸에 들어가고 그 댓글을 수정한다.

4. 생성된 수정 버튼을 클릭한다.

5. 해당 댓글이 수정되고, 수정 버튼은 다시 사라진다.

 

해당 기능을 수행하기 위해 CommentController.java에 댓글을 수정하는 메서드를 추가하였다.

 

//댓글을 수정하는 메서드
@PatchMapping("/comment/{cno}")   // /ch4/comments/70   PATCH
public ResponseEntity<String> modify(@PathVariable Integer cno, @RequestBody CommentDto dto, HttpSession session) {
    String commenter = (String) session.getAttribute("id");
    dto.setCommenter(commenter);
    dto.setCno(cno);
    System.out.println("dto = " + dto);
    try {
        if(service.modify(dto) != 1)
            throw new Exception("Modify failed.");
        return new ResponseEntity<>("MDDC_OK", HttpStatus.OK);
    } catch (Exception e) {
        e.printStackTrace();
        return new ResponseEntity<String>("MDDC_ERR", HttpStatus.BAD_REQUEST);
    }
}

@PatchMapping을 사용하였다. 다음 블로그 글은 @DeleteMapping, @PostMapping, @PatchMapping에 대해 다룰 것이다.(아직도 나도 이해를 덜 함 ㅠ)

 

그리고 board.jsp에 맨 처음 댓글에 있는 수정 버튼을 눌렀을 때와 댓글 수정 후 적용하기 위해 수정 버튼을 누르는 두 가지 과정을 추가하였다. 추가된 과정은 다음과 같다.

 

1. 첫 번째 수정 버튼 클릭 시, 댓글의 댓글 번호와 댓글에 적혀있는 내용을 가져오도록 하였다.

2. 댓글 내용을 댓글 입력창(input)에 뿌려주었고, 댓글 번호(cno)를 전달하였다.

2. 마지막으로 최종적으로 누를 수정버튼이 나타나도록 하였다.

 

해당 내용은 간단한 부분이므로 추가 설명은 하지 않겠다. 다음은 최종 수정 버튼을 눌렀을 때 과정이다.

 

1. 댓글 번호(cno)와 댓글 내용(comment)을 가져왔다. 댓글 내용이 비어있다면, 입력해 달라는 메시지를 출력한다.

2. ajax를 통해 댓글 번호와 댓글 내용을 전달해, 수정하도록 하였다.

3. 수정할 때는 update를 이용하여 댓글 번호와 댓글 작성자가 일치하다면 수정할 수 있도록 하였다. (게시글 번호까지 추가하여 비교할 수 있도록 추가할 예정)

4. 수정 되었다면 댓글 입력창은 비우고, 수정 버튼은 사라지게 하였다.

 

$.ajax({
    type:'PATCH',       // 요청 메서드
    url: '/ch4/comment/'+cno,  // 요청 URI // /ch4/comment/70   POST
    headers : { "content-type": "application/json"}, // 요청 헤더
    data : JSON.stringify({cno:cno, comment:comment}),  // 서버로 전송할 데이터. stringify()로 직렬화 필요.
    success : function(result){
        showList(bno);
        $("input[name=comment]").val('');
    },
    error   : function(){ alert("error") } // 에러가 발생했을 때, 호출될 함수
}); // $.ajax()

 

 

항상 느끼지만 ajax와 Controller 작성하는 부분이 제일 어려운 것 같다. ㅠㅠ 앞으로 기능들을 추가하면서 제대로 공부해 볼 생각이다. 

마지막으로 css를 수정하며 깔끔하게 보일 수 있도록 하였다. css 작업이 더 어려운 거 같기도.. ㅋㅋ