Part 14. 페이징 화면 처리

14.5 수정과 삭제 처리

• modify.jsp에서는 < form > 태그를 이용해 데이터를 처리한다.
• 거의 입력과 비슷한 방식으로 구현되는데, 이제 pageNum과 amount라는 값이 존재하므로 < form > 태그 내에서 같이 전송할 수 있게 수정해야 한다.

< views/board/modify.jsp >
<div class="panel-heading">Board Modify Page </div>
   <!-- /.panel-heading -->
   <div class="panel-body">
   <form role="form" action="/board/modify" method="post">
   <!-- 추가 -->
   <input type='hidden' name='pageNum' value='<c:out value="${cri.pageNum }"/>'>
   <input type='hidden' name='amount' value='<c:out value="${cri.amount }"/>'>

• modify.jsp 역시 Criteria를 Model에서 사용하기 때문에 위와 같이 태그를 만들어 < form > 태그 전송에 포함한다.

14.5.1 수정/삭제 처리 후 이동

• POST 방식으로 진행하는 수정과 삭제 처리는 BoardController에서 각각의 메서드 형태로 구현되어 있으므로 페이지 관련 파라미터들을 처리하기 위해서는 변경해 줄 필요가 있다.

< BoardController의 modify() >
	// 게시글 수정
	@PostMapping("/modify")
	public String modify(BoardVO board, @ModelAttribute("cri") Criteria cri, RedirectAttributes rttr) {
		log.info("modify: " + board);
		if(service.modify(board)) {
			rttr.addFlashAttribute("result", "success");
		}
		rttr.addAttribute("pageNum", cri.getPageNum());
		rttr.addAttribute("amount", cri.getAmount());
		return "redirect:/board/list";
	}

• 메서드의 파라미터에는 Criteria가 추가된 형태로 변경되고, RedirectAttributes 역시 URL 뒤에 원래의 페이지로 이동하기 위해 pageNum과 amount 값을 가지고 이동하게 수정한다.

• 삭제 처리 역시 동일하게 Criteria를 받아들이는 방식으로 수정한다.

< org.zerock.controller.BoardController의 remove() >
	// 게시글 삭제
	@PostMapping("/remove")
	public String remove(@RequestParam("bno") Long bno, @ModelAttribute("cri") Criteria cri, RedirectAttributes rttr) {
		log.info("remove..." + bno);
		if(service.remove(bno)) {
			rttr.addFlashAttribute("result", "success");
		}
		rttr.addAttribute("pageNum", cri.getPageNum());
		rttr.addAttribute("amount", cri.getAmount());
		return "redirect:/board/list";
	}

• 위와 같은 방식을 이용하면 수정/삭제 후 기존 사용자가 보던 페이지로 이동하는 것을 볼 수 있다.
  

• 수정과 달리 삭제는 처리 후 1페이지로 이동해도 무방하지만, 이왕이면 사용자들에게 자신이 보던 정보를 이어 볼 수 있게 조치해 주는 방식 역시 어렵지 않다.

14.5.2 수정/삭제 페이지에서 목록 페이지로 이동

• 페이지의 이동의 마지막은 수정/삭제를 취소하고 다시 목록 페이지로 이동하는 것이다.
• 목록 페이지는 오직 pageNum과 amount만을 사용하므로 < form > 태그의 다른 내용들은 삭제하고 필요한 내용만을 다시 추가하는 형태가 편리하다.

< modify.jsp의 JavaScript 부분 >
<script type="text/javascript">
 			$(document).ready(function() {
 				var formObj = $("form");
 				$('button').on("click", function(e){
 					e.preventDefault();
 					var operation = $(this).data("oper");
 					console.log(operation);
 					if(operation === 'remove'){
 						formObj.attr("action", "/board/remove");
 					}else if(operation === 'list'){
 						// move to list
 							formObj.attr("action", "/board/list").attr("method", "get");
 							var pageNumTag = $("input[name='pageNum']").clone();
 							var amountTag = $("input[name='amount']").clone();
 							formObj.empty();
 							formObj.append(pageNumTag);
 							formObj.append(amountTag);
 					}
 					formObj.submit();
 					});
 			});
 			</script>

• 만일 사용자가 'List' 버튼을 클릭한다면 < form > 태그에서 필요한 부분만 잠시 복사(clone)해서 보관해 두고, < form > 태그 내의 모든 내용은 지워버린다(empty).
• 이후에 다시 필요한 태그들만 추가해서 '/board/list'를 호출하는 형태를 이용한다.