[코드로 배우는 스프링 웹 프로젝트] ch14 페이징 화면 처리 2(script, get, modify)

https://bobo12.tistory.com/309

 

4. 조회 페이지로 이동

   ▷ 원하는 페이지로 이동하지만 3페이지에 있는 게시글을 클릭한 후 다시 목록(List 클릭)으로 이동하면

        무조건 1페이지 목록 페이지로 이동함

   ▷ <form> 태그에 추가로 게시물의 번호를 같이 전송하고, action 값을 조정해서 처리 가능

 

◎ list.jsp 일부 수정(move 클래스 추가)

<%--
	<td><a href='/board/get?bno=<c:out value="${board.bno}"/>' ><c:out value="${board.title}" /></a></td>
--%>
<td><a class='move' href='<c:out value="${board.bno}"/>'>
	<c:out value="${board.title}" />
</a></td>

◎ Script부 게시물 조회를 위한 이벤트 처리 추가

$(".move").on("click",function(e) {

	e.preventDefault();
	actionForm.append("<input type='hidden' name='bno' value='"
	+ $(this).attr("href")+ "'>");
    actionForm.attr("action","/board/get");
	actionForm.submit();
	
});

 

해당 게시물 제목에 마우스를 올리면 아래와 같은 번호가 나타납니다.

게시물 제목을 클릭하면 <form>태그에 추가로 bno 값을 전송하기 위해 <input> 태그를 만들어 추가함
또한, pageNum과 amount 파라미터가 추가되는 것을 볼 수 있습니다.

 

 

(1) 조회 페이지에서 다시 목록 페이지로 이동(페이지 번호 유지)

   ▷ BoardController의 get() 메소드는 원래 게시물의 번호만 받도록 처리 되어있지만, Criteria를 파라미터로 추가해서 받고 전달

 

◎ BoardController.java 수정

...(생략)...
	@GetMapping({"/get","/modify"})
	public void get(@RequestParam("bno") Long bno, 
			@ModelAttribute("cri") Criteria cri,Model model) {
		
		log.info("/get or modify");
		model.addAttribute("board", service.get(bno));
	}
...(생략)...

@ModelAttribute를 사용하지 않아도 Controller에서 화면으로 파라미터 된 객체는 전달 되지만, 좀 더 명시적으로 이름 지정하기 위해 사용

 

◎ src/main/webapp/WEB-INF/views/board → get.jsp 수정

<form id='operForm' action="/board/modify" method="get">
	<input type='hidden' id='bno' name='bno' value='<c:out value="${board.bno}"/>'>
	<input type='hidden' name='pageNum' value='<c:out value="${cri.pageNum}"/>'>
	<input type='hidden' name='amount' value='<c:out value="${cri.amount}"/>'>
</form>

▷ openForm이라는 id를 가진 <form> 태그를 이미 이용했으므로 cri라는 이름으로 전달된 Criteria 객체를 이용해 pageNum과 amount 값을 태그로 구성하고 버튼을 클릭했을 때 정상적으로 목록 페이지로 이동합니다.

▷ 위의 내용들을 작성했다면 게시물 선택 후 List 버튼을 누르면 원래 페이지로 돌아옵니다.

 

(2) 조회 페이지에서 수정/삭제 페이지로 이동

   ▷ 'Modify' 버튼을 통해 수정/삭제 페이지로 이동

   ▷ BoardController에서는 get() 메소드에서 '/get', '/modify'를 같이 처리하므로 별도 추가적인 처리 없이 Criteria를 

       Model에 cri라는 이름으로 담아서 전달

 

 

 

5. 수정과 삭제 처리

   ▷ modify,jsp에서는 <form> 태그를 이용해 데이터 처리합니다.

   ▷ pageNum, amount 값이 존재하므로 <form> 태그 내에서 같이 전송할 수 있게 수정해야 함

 

◎ modify.jsp

<!-- /.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 }"/>'>

Criteria를 Model에서 사용하므로 form 태그 전송에 포함

 

(1) 수정/삭제 처리 후 이동

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

 

◎ src/main/java/org.codehows.controller → BoardController.java 수정

1. 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";
	}
...(생략)...​

2. 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";
	}
...(생략)...​

http://localhost:8080/board/list?pageNum=5&amount=10

아래와 같이 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)해서 보관해 두고,
<from> 태그 내의 모든 내용은 지움, 이후 다시 필요한 태그들만 추가해서 '/board/list'를 호출

 

 

6. MyBatis에서 전체 데이터 개수 처리

   ▷ 데이터베이스 실제 모든 게시물의 수(total)을 구해서 PageDTO 구성할 때 전달해야 함

   ▷ BoardMapper 인터페이스에 getTotalCount() 메소드를 정의하고 XML을 이용해서 SQL 처리

 

◎ BoardMapper 인터페이스 수정(메소드 추가)

public int getTotalCount(Criteria cri);

 

◎ BoardMapper.xml 일부 수정

 

...(생략)...
<select id="getTotalCount" resultType="int">
	select count(*) from tbl_board where bno > 0
</select>
...(생략)...

 

 

◎ BoardService, BoardServiceImpl에 메소드 추가

   ▷ BoardMapper의 getTotalCount() 호출

1. BoardService 인터페이스 메소드 추가

// 추가
public int getTotal(Criteria cri);​

2. BoardServiceImpl 클래스 메소드 추가

...(생략)...
	@Override
	public int getTotal(Criteria cri) {
		log.info("get total count");
		return mapper.getTotalCount(cri);
	}
...(생략)...​

 

 

◎ BoardController 내용 수정

   ▷ BoardService 인터페이스를 통해 getTotal() 호출

...(생략)...
	@GetMapping("/list")
	public void list(Criteria cri, Model model) {
		
		log.info("list : " + cri);
		model.addAttribute("list", service.getList(cri));
		model.addAttribute("pageMaker", new PageDTO(cri, 123));
		
		int total = service.getTotal(cri);
		
		log.info("total: " + total);
		
		model.addAttribute("pageMaker", new PageDTO(cri, total));
	}
...(생략)...

게시물의 등록, 수정, 삭제, 조회, 페이징 처리가 모두 완료 됨

 

해당 게시물을 클릭하고 list로 복귀했을 때 원래의 리스트 페이지로 넘어가는 것, 수정, 삭제 처리 후 리스트 복귀시 원래 리스트 페이지로 돌아오는 것 등을 java script를 통해 처리해보았습니다!

 

하나 하나 모두 구현해주어야 한다는 것이 좀 신기하기도 하고 재미있네요!!

 

다음은 검색 기능까지 구현할 수 있도록 해보겠습니다!!

 

많은 분들의 피드백은 언제나 환영합니다!  많은 댓글 부탁드려요~~