스프링 게시판 만들기 #16. 댓글 수정 구현 : kuzuro

다음 글 : -
이전 글 : 스프링 게시판 만들기 #15. 댓글 작성 구현

스프링 게시판 만들기 #1~16 깃허브 링크
스프링 게시판 만들기 (전체) 깃허브 링크

댓글을 작성하는걸 구현했으니, 댓글을 수정하고 삭제하는 기능이 필요해졌습니다. 그중에서도 수정하는 기능을 먼저 구현하겠습니다.

수정 및 삭제 기능을 사용할 수 있도록, 코드를 추가합니다.

수정과 삭제 링크의 href속성에는 아직 들어갈 URL이 없으니 비워둡니다.

<p>
	<a href="">수정</a> / <a href="">삭제</a>
</p>
			
<hr />

게시물 조회 화면의 댓글란에 입력해둔 링크가 잘 나오는걸 확인할 수 있습니다.

댓글 수정용 화면을 만들기 전, 폴더로 구분하기 위해 폴더를 새로 생성합니다.

지나가는 개발자를 붙잡고 물어보더라도 "아 이건 댓글 관련된 폴더네요"라고 말할 수 있도록
reply 라는 이름으로 폴더를 만듭니다.

board 폴더에 있는 view.jsp파일을 reply 폴더로 복사합니다.

게시판 작성 및 수정과 마찬가지로, 댓글 작성 및 수정은 동일한 구조로 되어 있기 때문에 굳이 새로 만들 필요는 없습니다.

이 화면은 조회가 아니라 수정용이므로, 파일명을 view.jsp 에서 modify.jsp로 변경합니다.

개명(...)한 modify.jsp 파일을 열어보면 에러가 나고 있습니다.
board폴더 하위에 있는 파일이다보니 경로에 대한 문제가 있어서 그렇습니다.

'게시물 수정'이 아니라 '댓글 수정'이니 타이틀(title)은 바꿔야하고...
<body> 내부에도 불필요한 코드가 있습니다.

아랫 부분에서도 이 부분은 불필요합니다.
댓글 작성에 필요한 폼(form) 정도만 필요하겠군요.

불필요한걸 잘라내니 정말로 폼(form)만 남았습니다.
타이틀(title)의 '게시물 수정'도 '댓글 수정'으로 고쳐야했으나.. 깜빡하고 수정을 안 했네요..(...)

필요한 부분을 수정해줍니다.

폼(form)의 액션을 /reply/write에서 /reply/modify로 변경했고
댓글 작성자는 수정할 수 없도록 readonly 속성을 넣어줬고
현재 수정하고 있는 댓글이 어떤 댓글인지 구분할 수 있도록 ${view.rno}를 넣었습니다.
그리고 타이틀(title)에서는 깜빡했지만 버튼의 텍스트도 수정했습니다.

<form method="post" action="/reply/modify">
	
	<p>
		<label>댓글 작성자</label> <input type="text" name="writer" readonly="readonly">
	</p>
	<p>
		<textarea rows="5" cols="50" name="content"></textarea>
	</p>
	<p>
		<input type="hidden" name="bno" value="${view.bno}">
		<input type="hidden" name="rno" value="${view.rno}">
		
		<button type="submit">댓글 수정</button>
	</p>
</form>

기존에 작성된 댓글을 불러오는 쿼리를 작성하고, 실행해봅니다.

작성했던 쿼리를 매퍼에 입력합니다.

<!-- 단일 댓글 조회 -->
<select id="replySelect" parameterType="com.board.domain.ReplyVO" resultType="com.board.domain.ReplyVO">
	select
		rno, bno, writer, content, regDate
	from tbl_reply
		where bno = #{bno}
		and rno = #{rno}					
</select>

스크린샷의 7번째 라인에 있는 댓글 조회와 아주 유사한 쿼리입니다.
댓글 번호인 rno의 유무를 if 조건으로 구분하면 하나의 쿼리로 처리할 수 있을것 같지만
그건 나중의 복선으로 남기고, 지금은 따로 만들어서 진행합니다.

ReaplyDAO와 ReaplyDAOImpl에 코드를 추가합니다.

// 단일 댓글 조회
public ReplyVO replySelect(ReplyVO vo) throws Exception;

// 단일 댓글 조회
@Override
public ReplyVO replySelect(ReplyVO vo) throws Exception {
	
	return sql.selectOne(namespace + ".replySelect", vo);
}

ReplyService와 ReaplyServiceImpl에 코드를 추가합니다.

// 단일 댓글 조회
public ReplyVO replySelect(ReplyVO vo) throws Exception;

// 단일 댓글 조회
@Override
public ReplyVO replySelect(ReplyVO vo) throws Exception {
	return dao.replySelect(vo);
}

ReplyController에 코드를 추가합니다.

// 댓글 단일 조회 (수정 페이지)
@RequestMapping(value = "/modify", method = RequestMethod.GET)
public void getMofidy(@RequestParam("bno") int bno, @RequestParam("rno") int rno, Model model) throws Exception {
	
	ReplyVO vo = new ReplyVO();
	vo.setBno(bno);
	vo.setRno(rno);
	
	ReplyVO reply = replyService.replySelect(vo);
		 
	model.addAttribute("reply", reply);
}

bno와 rno를 받으면 그 데이터를 RepltVO에 넣어서 위에서 작성한 쿼리까지 데이터를 전달하여 댓글을 조회합니다.

이전 게시물에서 'posttWirte'라고 잘못 적었던 메서드명을 수정했습니다.

이전 게시물에서 'posttWirte'라고 잘못 적었던 메서드명을 수정했습니다.(2)

별거 없는 부분에서도 오타가..;

ReplyController에서 ReplyVO를 reply라는 이름의 모델에 넣어 jsp에 전달해주는걸 확인할 수 있습니다. 그에 맞게 jsp에서도 모델에서 받는 데이터명을 view에서 reply로 교체합니다.

또한, 작성자 이름과 댓글 내용을 넣어주었습니다.

<form method="post" action="/reply/modify">

	<p>
		<label>댓글 작성자</label> <input type="text" name="writer" readonly="readonly" value="${reply.writer}">
	</p>
	<p>
		<textarea rows="5" cols="50" name="content">${reply.content}</textarea>
	</p>
	<p>
		<input type="hidden" name="bno" value="${reply.bno}">
		<input type="hidden" name="rno" value="${reply.rno}">

		<button type="submit">댓글 수정</button>
	</p>
</form>

board폴더의 view.jsp 파일에 코드를 추가합니다. 처음에 넣었던 href속성이 비어있는 앵커(a)태그인데, 이제는 수정 페이지로 이동할 수 있도록 URL을 만들어 줍니다.

<a href="/reply/modify?bno=${view.bno}&rno=${reply.rno}">수정</a>

'수정' 링크에 마우스를 가져가면, 우리가 의도한 대로 URL이 입력된걸 확인할 수 있습니다.

링크를 클릭하면 선택했던 댓글만 보이는 화면으로 이동 됩니다.

관리자 도구를 이용하여 숨어있는 요소를 보면, 글번호인 bno와 댓글 번호인 rno가 잘 들어가 있는걸 확인할 수 있습니다.

이번엔 수정(update)하는 쿼리를 작성하고 실행해봅니다.

이전 게시물(#14. 댓글 기본 설정 및 조회 구현)에서 기본적인 쿼리는 미리 만들어 두었기 때문에 확인만 하면 됩니다.

<!-- 댓글 수정 -->
<update id="replyModify" parameterType="com.board.domain.ReplyVO">
	update tbl_reply set
		writer = #{writer},
		content = #{content}
	where rno = #{rno}
		and bno = #{bno}	
</update>

ReplyDAO와 ReplyDAOImpl, ReplyService와 ReplyServiceImpl도 이전에 만들었으니 확인만 하면 됩니다.

// 댓글 수정
public void modify(ReplyVO vo) throws Exception;

// 댓글 수정
@Override
public void modify(ReplyVO vo) throws Exception {
	sql.update(namespace + ".replyModify", vo);
}

// 댓글 수정
public void modify(ReplyVO vo) throws Exception;

// 댓글 수정
@Override
public void modify(ReplyVO vo) throws Exception {
	dao.modify(vo);
}

이전 게시물에서 댓글 수정 메서드는 작성하지 않았으니 코드를 추가해줍니다.

// 댓글 수정
@RequestMapping(value = "/modify", method = RequestMethod.POST)
public String postModify(ReplyVO vo) throws Exception {

	replyService.modify(vo);

	return "redirect:/board/view?bno=" + vo.getBno();
}

/reply/modify로 post 요청과 함께 ReplyVO형태의 데이터를 받았으면, 미리 작성해둔 service와 DAO를 통해 매퍼로 전달되어 데이터를 수정합니다.
그리고 return에는 게시물 번호인 bno를 이용하여 bno에 해당되는 페이지로 이동하게 됩니다.

댓글 수정 페이지에서 수정되었는지 구분할 수 있는 텍스트를 입력한 뒤, 댓글 수정 버튼을 클릭합니다.

댓글 수정 페이지에서 게시물 조회 페이지로 이상없이 이동했으며, 댓글 내용 또한 수정된걸 확인할 수 있습니다.

당연히 다른 댓글도 잘 수정됩니다.

다음 글 : -
이전 글 : 스프링 게시판 만들기 #15. 댓글 작성 구현

스프링 게시판 만들기 #1~16 깃허브 링크
스프링 게시판 만들기 (전체) 깃허브 링크