게시판 페이징 처리 (pagination) [2] - 원래 있던 페이지 번호로 돌아가기

목표

1. 게시판 List에서 기본 페이지네이션 구현하기 [1]
2. 원래 있던 페이지 번호로 돌아가기 [2]
      - 게시글 상세에서 [목록]버튼 눌렀을 때
      - 게시글 수정 후 [목록]버튼 눌렀을 때
      - 게시글 삭제 후

 

 

게시글을 열람 하고 목록버튼을 눌러 목록으로 돌아 갈 때,

게시글을 수정한 후에 수정한 게시글을 확인하고 목록버튼으로 돌아갈 때,

게시글을 삭제 한 후 목록으로 돌아갈 때

 

기존 코드로는 몇페이지에 있던 게시글이던 간에 무조건 1페이지의 목록으로 돌아가게 된다.

이를 보완하기 위해, 각 화면의 URL마다 기존 페이지번호 파라미터를 실어보내서 원래 있던 페이지번호로 목록을 불러오려고한다. 

 

 

 

---

 

게시글 목록(List.jsp)에서 [제목]을 클릭했을 때

Controller -- ListGET

  @GetMapping("/noticeBoard/noticeList")
  public ModelAndView noticeBoardListGet(ModelAndView mv, Criteria cri) {
    PageMaker pm = new PageMaker();
    cri.setPostsPerPage(5);
    pm.setCriteria(cri);
    pm.setDisplayPageNum(5);   
    int totalCount = boardService.getTotalCount(cri);
    pm.setTotalCount(totalCount);
    pm.calcData();

    ArrayList<PostVO> list = boardService.getBoardList(cri);
    mv.addObject("list", list);  
    mv.addObject("pm", pm);
    mv.setViewName("/template/board/noticeBoard/noticeList");
    
    return mv;
  }

 

 

List.jsp -- 게시글 제목을 클릭하여 상세화면을 불러 올 때

<td class="data-title">                    
	<a href="<%=request.getContextPath()%>/noticeBoard/noticeDetail?post_num=${post.post_num}&page=${pm.criteria.page}">
		<c:out value="${post.post_title}" />
	</a>                    
</td>

<%=request.getContextPath()%>/noticeBoard/noticeDetail?post_num=${post.post_num}&page=${pm.criteria.page}

(pm.criteria.page는 컨트롤러((GET)BoardList)의 mv.addObject("pm", pm);를 이용하여 불러온 것이다.)

게시글 목록에서 열람할 게시글 제목을 클릭하면, ListGet으로 부터 받은

게시글의 정보(post_num, page)를 주소에 담아 DetailGET 컨트롤러로 전송한다. 

 

 

Controller -- DetailGET

  @GetMapping("/noticeBoard/noticeDetail")
  public ModelAndView noticePostDetailGet
  (ModelAndView mv, Integer post_num, HttpServletRequest request, HttpServletResponse response, Criteria cri) 
  	throws IOException {
    
	PostVO post = boardService.getPostDetail(post_num);   

	...
	//예외처리 및 상세코드 중략
	...

	mv.addObject("post", post);
	mv.addObject("cri", cri);
	mv.setViewName("/template/board/noticeBoard/noticeDetail");     
    
    return mv;
  }

• 제목클릭(List.jsp)으로부터 받은 page정보를 처리할 수 있도록 DetailGET 컨트롤러의 매개변수에 Criteria cri 를 추가
• 로직 처리 후, cri 정보를 다시 jsp로 보내줄 수 있도록 mv.addObject("cri", cri); 를 추가

받아온 정보로 DetailGET의 로직이 처리 된 후, 읽어온 상세화면의 url은 다음과 같이 적용된다.

http://localhost:8080/noticeBoard/noticeDetail?post_num=33&page=2

 

 

 

 

게시글 상세(Detail.jsp)에서 [목록]을 클릭했을 때

Detail.jsp -- 상세화면에서 목록 버튼을 클릭했을 때

<button class="btn btn-warning" type="button"
	onclick="location.href='<%=request.getContextPath()%>/noticeBoard/noticeList?page=${cri.page}'">목록</button>

<%=request.getContextPath()%>/noticeBoard/noticeList?page=${cri.page}

상세화면에서 다시 목록버튼을 클릭하면, DetailGET으로 부터 받은

현재 게시글의 페이지 정보(page)를 URL에 실어 ListGET 컨트롤러로 전송한다.

 

그러면 ListGET 컨트롤러에 있는 아래 코드가 해당 페이지의 목록을 불러올 것이다.

pm.setCriteria(cri);

ArrayList<PostVO> list = boardService.getBoardList(cri);

 

그리고 ListGET이 읽어온 URL은 다음과 같다.

http://localhost:8080/noticeBoard/noticeList?page=2

 

 

 

 

게시글 수정 후, 상세화면에서 [목록]버튼 눌렀을 때

게시글 수정버튼을 눌러 글을 수정하고, 수정한 글을 상세화면에서 확인 한 후, 목록버튼을 눌렀을 때

위에서 목록 버튼에 대한 페이지처리를 했으니 간단히 원래 페이지로 돌아올 것 같았지만..

 

1. 수정할 게시글의 페이지 정보 (post_num, page)

2. 수정완료한 게시글의 페이지 정보 (post_num, page)

를 화면마다 넘겨줘야한다.

 

Detail.jsp -- 1.  상세화면에서 수정버튼을 눌렀을 때

<button class="btn btn-warning" type="button"
onclick="location.href='<%=request.getContextPath()%>/noticeBoard/noticeModify?post_num=${post.post_num}&page=${cri.page}'">수정</button>

<%=request.getContextPath()%>/noticeBoard/noticeModify?post_num=${post.post_num}&page=${cri.page}

게시글 상세화면에서 수정 버튼을 클릭하면, DetailGET으로부터 받은

수정할 게시글의 정보를 가지고(page_num, page) 수정화면을 띄운다(ModifyGET).

 

ModifyGET이 읽어온 화면의 URL은 다음과 같다.

http://localhost:8080/noticeBoard/noticeModify?post_num=33&page=2

 

 

Controller -- ModifyGET

  @GetMapping("/noticeBoard/noticeModify")
  public ModelAndView noticePostModifyGet
  (ModelAndView mv, Integer post_num, HttpServletResponse response, Criteria cri)
    	throws IOException {
        
	PostVO post = boardService.getPostDetail(post_num);   
    
	...
	//예외처리 중략
	...
    
	mv.addObject("cri", cri);
	mv.addObject("post", post);
	mv.setViewName("/template/board/noticeBoard/noticeModify");
    return mv;
  }

• 상세화면(Detail.jsp)으로부터 받은 page정보를 처리할 수 있도록 ModifyGET 컨트롤러의 매개변수에 Criteria cri 를 추가
• 로직 처리 후, cri 정보를 다시 jsp로 보내줄 수 있도록 mv.addObject("cri", cri); 를 추가

 

 

Modify.jsp -- 2.  수정화면에서 수정완료버튼을 눌렀을 때

<form class="container notice-modify" method="post" id="notice-modify" name="notice-modify"
	action="<%=request.getContextPath()%>/noticeBoard/noticeModify?post_num=${post.post_num}&page=${cri.page}">
	
	<!--
	...
	중략
	...
	-->
	
    <input class="btn btn-warning notice-modify-btn" type="submit" value="수정">
	<input class="form-control" id="post_num" name="post_num" value="${post.post_num}" />
</form>

<%=request.getContextPath()%>/noticeBoard/noticeModify?post_num=${post.post_num}&page=${cri.page}

게시글 수정완료 버튼을 클릭하면, ModifyGET이 받아왔던 수정할 게시글의 정보를

ModifyPOST 컨트롤러로 전송하여 게시글 수정을 완료한다.

 

 

Controller -- ModifyPOST

  @PostMapping("/noticeBoard/noticeModify")
  public ModelAndView noticePostModifyPost(ModelAndView mv, PostVO post, HttpServletRequest request, Criteria cri) {
	
	...
	//상세코드 중략
	...
   
	mv.addObject("cri", cri);
	mv.setViewName("redirect:/noticeBoard/noticeDetail?post_num="+post.getPost_num()+"&page="+cri.getPage());
    
    return mv;
  }

• 수정할 게시글의 정보를 처리하기 위해 ModifyPOST 매개변수에 Criteria cri를 추가한다.
• 수정 로직을 수행한 후, 수정한 게시글의 상세화면으로 돌아가는데
  이때에도 게시글 정보를 DetailGET컨트롤러에 전달해줘야하므로 setViewName의 redirect:/경로에 직접 변수와 값을 추가해준다.

수정완료 후 돌아온 게시글 상세의 URL은 다음과 같다.

http://localhost:8080/noticeBoard/noticeDetail?post_num=33&page=2

 

 

 

 

게시글 상세(Detail.jsp)에서 [삭제]를 클릭했을 때

삭제된 게시글을 삭제할건지에 대한 확인alert를 띄운 후, 삭제된 게시물이 있던 페이지로 돌아가는 방법에 대해 작성해보자..!

 

Detail.jsp -- 상세화면에서 삭제버튼을 눌렀을 때

<button class="btn btn-danger" type="button" onclick="confirmDelete();">삭제</button>

<!--삭제확인 alert창 메서드-->
<script>
  function confirmDelete(){
    if(confirm("게시글을 삭제하시겠습니까?") == true) {
      location.href='<%=request.getContextPath()%>/noticeBoard/noticeDelete?post_num=${post.post_num}&page=${cri.page}';
    }else {
      return;
    }
  }
</script>

• 버튼에 onclick으로 연결된 메서드 confirmDelete() :
  - 삭제버튼을 누르면, "게시글을 삭제하시겠습니까?" 라는 확인 alert이 발생한다.
  - [확인]을 누르면 DeleteGET 컨트롤러로 연결되고, 취소를 누르면 return 되어 아무일도 일어나지 않는다.
• [확인]을 눌렀을 때 DeleteGET으로 해당 게시글의 정보(post_num, page)를 전달한다.

 

 

Controller -- DeleteGET

  @GetMapping("/noticeBoard/noticeDelete")
  public ModelAndView noticePostDeleteGet
  (ModelAndView mv, Integer post_num, HttpServletRequest request, HttpServletResponse response, Criteria cri)
    	throws IOException {   
 
	UserVO user = userService.getUser(request);
	int result = boardService.deletePost(post_num, user);
    
	...
	//예외처리 중략
	...
    
	mv.setViewName("redirect:/noticeBoard/noticeList?page="+cri.getPage());
  
	mv.addObject("cri", cri);
	return mv;
  }

• 삭제 할 게시글의 정보를 처리하기 위해 DeleteGET 컨트롤러 매개변수에 Criteria cri를 추가한다.
• 삭제 로직을 수행한 후, 삭제된 게시글이 있던 페이지 정보를 DeleteGET 컨트롤러에 전달하여
  그 페이지로 이동할 수 있도록 setViewName의 redirect:/경로에 직접 변수와 값을 추가해준다.

 

 

 

---

 

이렇게 하나하나 글로 늘어놓으면 참 장황하지만,

그림으로 표현하자면 아래처럼 간단히 그릴 수 있다..!

게시글 열람/수정/삭제 후 원래페이지로 돌아가기 기능

 

 

이 간단한 그림으로 정리하기 위해......

얼마나 많이 헷갈리고 머리가 아팠는지 모르겠다..ㅠㅠ

하루 빼곡히 걸림..

난 아직 많이 부족하니꽈..............

 

 

아무튼 정리 끘...!