75일차: Model 2 게시판(3): 댓글 작성 / 글 수정_ 2021.10.01

 

목차

1.     댓글 작성

2.     글 수정

 

 

1. 댓글 작성

 

1) 뷰 페이지(qna_board_view.jsp)

- 상세 페이지에서 하단의 ‘댓글’ 버튼을 클릭하면 해당 글에 댓글을 달 수 있도록 한다.

- 이때, 클릭을 하면서 click 이벤트가 발생하므로 ‘onClick’ 이벤트로 처리하고, location 객체로 이동할 페이지를 지정한다.

- 페이지를 이동할 때 해당 글의 번호 값(board_num)과 해당 글이 속한 페이지 값(page)를 get 방식으로 전달해야 한다.

- qna_board_view.jsp → BoardFrontController.java

 

<tr>
    <td colspan=2 align=center>
        <input type="button" value="댓글" 
onClick="location.href='./BoardReplyAction.do?board_num=${board.board_num}&page=${page}'">
    
        <input type="button" value="수정"
onClick="location.href='./BoardModifyAction.do?board_num=${board.board_num}&page=${page}'">
    
        <input type="button" value="삭제">
            
        <input type="button" value="목록" 
            onClick="location.href='./BoardListAction.do?page=${page}'">
    </td>        
</tr>    
 

 

 

2) 컨트롤러 클래스(BoardFrontController.java)

- 상세 페이지(qna_board_view.jsp)에서 “/BoardReplyAction.do”로 요청한 값을 받아 처리한다.

- 서비스 클래스인 BoardReplyAction.java의 객체를 생성하고 execute() 메소드를 호출한다.

- 서비스 클래스(BoardReplyAction.java)로부터 forward 값을 리턴받으면 뷰 페이지로 포워딩한다.

- BoardFrontController.java → BoardReplyAction.java

 

3) 서비스 클래스(BoardReplyAction.java)

- 상세 페이지(qna_board.view.jsp)에서 '댓글' 버튼을 클릭하면서 전달한 값을 받는다.(board_num, page)

- DAO 객체를 생성해서 상세 정보를 구하는 getDetail() 메소드를 호출한다.

- page 값과 getDetail() 메소드로 호출한 DTO 값을 request로 공유 설정한다.

- ActionForward 객체를 생성하고 전송 방식과 경로를 설정한 후 리턴한다.

- request 객체로 공유한 값을 포워딩된 페이지에서 사용하기 위해서는 전송 방식이 dispatcher 방식으로 설정되어야 한다.

- BoardReplyAction.java → BoardFrontController.java

 

4) 컨트롤러 클래스(BoardFrontController.java)

- 서비스 클래스(BoardReplyAction.java)로부터 forward 값을 리턴받으면 dispatcher 방식으로 뷰 페이지(qna_board_reply.jsp)로 포워딩한다.

- BoardFrontController.java → qna_board_reply.jsp

 

5) 뷰 페이지(qna_board_reply.jsp)

- 게시글 작성 양식과 비슷하지만 파일 첨부 기능은 없는 양식으로 만든다.

- 사용자가 입력하는 값(ex. 글쓴이: board_name, 비밀번호: board_pass, 제목: board_subject, 내용: board_content) 외에도, ‘hidden’으로 넘겨주어야 하는 값들이 있다.

- hidden 속성으로 넘기는 값: ① board_num / ② board_re_ref / ③ board_re_lev / ④ board_re_seq / ⑤ page

- 이때 서비스 클래스(BoardReplyAction.java)에서 request로 공유 설정한 값은 EL 태그로 가져올 수 있다. (ex. ${board.board_num} )

- ‘댓글’ 버튼을 누르면 <form> 태그에서 action으로 지정된 “/BoardReply.do”로 컨트롤러를 호출한다.

- qna_board_reply.jsp → BoardFrontController.java

 

6) 컨트롤러 클래스(BoardFrontController.java)

- 뷰 페이지(qna_board_reply.jsp)에서 “/BoardReply.do”로 요청한 값을 받아 처리한다.

- 서비스 클래스인 BoardReply.do 의 객체를 생성하고 execute() 메소드를 호출한다.

- BoardFrontController.java → BoardReply.java

 

7) 서비스 클래스(BoardReply.java)

- 댓글 폼(qna_board_reply.jsp)에서 한글 값이 post 방식으로 넘어오므로 한글 인코딩 처리

 (ex. request.setCharacterEncoding("utf-8"); )

- 댓글 폼(qna_board_reply.jsp)에서 ‘hidden’ 속성으로 전달한 값을 받고, 댓글 폼에서 작성한 값을 받아 DTO 객체에 저장한다.

- DB와 연동하기 위해 DAO 객체를 생성하고, boardReply() 메소드를 호출한다. 이때 매개변수에는 앞서 생성한 DTO 객체를 전달한다.

- ActionForward 객체를 생성하고 전송 방식과 경로를 설정한 후 리턴한다.

- “/BoardListAction.do”로 컨트롤러 클래스를 호출할 때, page 값을 get 방식으로 가지고 간다.

- BoardReply.java → BoardFrontController.java

 

8) 컨트롤러 클래스(BoardFrontController.java)

- 서비스 클래스(BoardReply.java)로부터 forward 값을 리턴받으면 “/BoardListAction.do”로 컨트롤러를 호출하게 되고, 글 목록 페이지(qna_board_list.jsp)로 이동한다.

 

 

• 원문에 댓글을 단 경우

 

 

• 댓글에 댓글(대댓글)을 단 경우

 

 

 

2. 글 수정(Update)

 

1) 뷰 페이지(qna_board_view.jsp)

- 상세 페이지에서 하단의 ‘수정’ 버튼을 클릭하면 해당 글을 수정할 수 있도록 한다.

- 이때, 클릭을 하면서 click 이벤트가 발생하므로 ‘onClick’ 이벤트로 처리하고, location 객체로 이동할 페이지를 지정한다.

- 페이지를 이동할 때 해당 글의 번호 값(board_num)과 해당 글이 속한 페이지 값(page)를 get 방식으로 전달해야 한다.

- “/BoardModifyAction.do”로 컨트롤러 클래스를 호출한다.

- qna_board_view.jsp → BoardFrontController.java

 

<tr>
    <td colspan=2 align=center>
        <input type="button" value="댓글" 
onClick="location.href='./BoardReplyAction.do?board_num=${board.board_num}&page=${page}'">
    
        <input type="button" value="수정"
onClick="location.href='./BoardModifyAction.do?board_num=${board.board_num}&page=${page}'">
    
        <input type="button" value="삭제">
            
        <input type="button" value="목록" 
            onClick="location.href='./BoardListAction.do?page=${page}'">
    </td>        
</tr>    
 

 

 

2) 컨트롤러 클래스(BoardFrontController.java)

- 상세 페이지(qna_board_view.jsp)에서 “/ BoardModifyAction.do”로 요청한 값을 받아 처리한다.

- 서비스 클래스인 BoardModifyAction.java의 객체를 생성하고 execute() 메소드를 호출한다.

 

3) 서비스 클래스(BoardModifyAction.java)

- 상세 페이지(qna_board.view.jsp)에서 '수정' 버튼을 클릭하면서 전달한 값을 받는다.(board_num, page)

- DAO 객체를 생성해서 상세 정보를 구하는 getDetail() 메소드를 호출한다.

- page 값과 getDetail() 메소드로 호출한 DTO 값을 request로 공유 설정한다.

- ActionForward 객체를 생성하고 전송 방식과 경로를 설정한 후 리턴한다.

- request 객체로 공유한 값을 포워딩된 페이지에서 사용하기 위해서는 전송 방식이 dispatcher 방식으로 설정되어야 한다.

- BoardReplyAction.java → BoardFrontController.java

 

4) 컨트롤러 클래스(BoardFrontController.java)

- 서비스 클래스(BoardModifyAction.java)로부터 forward 값을 리턴받으면 글 수정 폼(qna_board_modify.jsp)으로 포워딩한다.

 

5) 뷰 페이지(qna_board_modify.jsp)

- 글 수정 폼은 댓글 작성 폼과 같다.

- 사용자가 입력하는 값(ex. 글쓴이: board_name, 비밀번호: board_pass, 제목: board_subject, 내용: board_content) 외에도, ‘hidden’으로 넘겨주어야 하는 값들이 있다.

- hidden 속성으로 넘기는 값: ① board_num / ② page

- ‘수정’ 버튼을 누르면 <form> 태그에서 action으로 지정된 “/BoardModify.do”로 컨트롤러를 호출한다.

- qna_board_modify.jsp → BoardFrontController.java

 

6) 컨트롤러 클래스(BoardFrontController.java)

- 뷰 페이지(qna_board_modify.jsp)에서 “/ BoardModify.do”로 요청한 값을 받아 처리한다.

- 서비스 클래스인 BoardModify.java의 객체를 생성하고 execute() 메소드를 호출한다.

 

7) 서비스 클래스(BoardModify.java)

- 인코딩 처리를 위한 코드를 추가한다.

- out 객체를 생성한다.

- 수정 폼(qna_board_modify.jsp)에서 'hidden' 속성으로 전달하는 값을 받는다.

- DTO 객체를 생성해서 수정 폼에서 전달한 값을 저장한다.

- DB와 연동하기 위해 DAO 객체를 생성하고, 상세 정보를 구하는 getDetail() 메소드를 호출한다.

- DB에 저장된 비밀번호와 사용자가 수정 폼에서 입력한 비밀번호를 비교한다.

- 비밀번호가 일치하면 수정(update)을 하는 메소드를 호출해서 수정 폼에서 입력한 값을 저장한다.

- 비밀번호가 일치하지 않으면 alert() 메소드로 비밀번호가 일치하지 않는다는 알림창을 띄우고, history 객체를 이용해서 수정 폼으로 돌아가도록 설정한다.

- ActionForward 객체를 생성하고 전송 방식과 경로를 설정한 후 리턴한다.

- “/BoardDetailAction.do”로 컨트롤러 클래스를 호출할 때, 해당 글의 번호 값(board_num)과 해당 글이 속한 페이지 값(page)를 get 방식으로 전달해야 한다.

- BoardModify.java → BoardFrontController.java

 

8) 컨트롤러 클래스(BoardFrontController.java)

- 서비스 클래스(BoardModify.java)로부터 forward 값을 리턴받으면 “/BoardDetailAction.do”로 컨트롤러를 호출하게 되고, 상세 페이지(qna_board_view.jsp)로 이동한다.