(구버전) 스프링 게시판 만들기 #8. 페이지 유지 기능 구현

'(구버전) 스프링 게시판 만들기'는 내용이 부족하다고 판단하여
스프링 게시판 만들기를 새로 작성하였습니다.

링크 및 참조용으로 현재 게시물은 남겨두겠지만,
가급적이면 새로운 스프링 게시판 만들기를 참조해주시기 바랍니다.

페이지 번호와 검색정보를 유지하는 기능을 구현하겠습니다.

30 페이지 쯤에서 찾던 게시물을 발견하고 조회한 뒤, 목록 버튼을 눌렀는데 1 페이지로 돌아면 불편하겠죠. 조회 페이지에서 이전에 보던 목록으로, 수정 페이지와 삭제 페이지에서 이전 조회 목록으로 이동할 수 있는 기능이 필요합니다.

목록의 게시물 링크를 보면 글 번호(bno)만 있습니다.

페이지 번호(page), 페이지당 게시물 갯수(perPageNum), 검색타입(searchType), 검색어(keyword) 이렇게 4가지가 추가되어야 합니다.

컨트롤러의 getRead메서드에서 SearchCritreria를 사용하기 위해, 매개변수에 파라미터를 통해 값을 받고 model을 이용해 scri를 보내줍니다.

read.jsp에서 scri값을 보관할 <input>태그를 작성합니다. 타입은 숨김(hidden)으로 되어있어서 실제로 화면에 표시되지 않습니다.

목록으로 이동하는 버튼의 스크립트를 수정합니다.

read.jsp는 scri를 받아서 사용할 준비가 다 되었는데, 안타깝게도 아무도 read.jsp에게 scri을 주지 않고 있습니다.

조회 페이지는 목록 페이지에서 이동하므로, 목록 페이지에서 조회 페이지로 이동하는 링크를 수정하여 모든 값을 줄 수 있도록 수정합니다.

컨트롤러의 postModify와 postDelete의 매개변수에 @ModelAttribute("scri") SearchCriteria scri, RedirectAttributes rttr를 추가하고, 코드도 추가합니다.

rttr.addAttribute("page", scri.getPage());
rttr.addAttribute("perPageNum", scri.getPerPageNum());
rttr.addAttribute("searchType", scri.getSearchType());
rttr.addAttribute("keyword", scri.getKeyword());

RedirectAttributes는 리다이렉트(페이지 이동) 직전 값을 저장한뒤 리다이렉트된곳에 값을 넘겨주는 역할을 합니다.

프로젝트를 실행하고, 임의의 검색어로 검색한뒤 다른 페이지로 이동한 상태입니다. 브라우저의 주소창에 여기에 대한 값이 나와있습니다.

조회 페이지로 이동했습니다.

주소에도 모든 값이 잘 나와있으며, 크롬의 개발자모드(F12)에서 확인해보니 숨겨진 <input> 에도 값이 잘 지정되어있습니다.

수정 페이지로 이동한 상태입니다. 게시물을 수정한뒤, 수정 버튼을 클릭합니다.

저장이 잘 되었으며, 해당 게시물이 있던 페이지로 이동되어있습니다.

이번엔 게시물을 삭제해보겠습니다.

게시물 삭제 후, 이전에 있던 페이지로 이동되는것을 확인할 수 있습니다.

다음은 수정 페이지와 삭제 페이지에서 조회 페이지로 돌아가는 부분을 수정해야합니다.

getModify와 getDelete에 매개변수 @ModelAttribute("scri") SearchCriteria scri 를 추가하고, model.addAttribute("scri", scri); 코드를 추가합니다.

수정 페이지의 취소 버튼의 코드를 수정합니다.

self.location = "/board/read?bno=${modify.bno}"
   + "&page=${scri.page}"
   + "&perPageNum=${scri.perPageNum}"
   + "&searchType=${scri.searchType}"
   + "&keyword=${scri.keyword}";

마찬가지로 삭제 페이지 취소 버튼의 코드를 수정합니다.

self.location = "/board/read?bno=${delete.bno}"
   + "&page=${scri.page}"
   + "&perPageNum=${scri.perPageNum}"
   + "&searchType=${scri.searchType}"
   + "&keyword=${scri.keyword}";

수정 페이지 또는 삭제 페이지에 취소 버튼의 코드를 보면 조회 페이지에 필요한 정보들이 잘 표기되어있으며, 취소 버튼을 클릭하면 정상적으로 조회 페이지로 이동되며 페이지에 필요한 모든 값이 잘 유지된것을 확인할 수 있습니다.

melonpeach12/19/2018
Delete부분에 취소버튼누르면 그냥 삭제되버려요
답글삭제
답글
Unknown2/21/2019
삭제 페이지의 취소 버튼을 수정했더니 ${delete.bno}가 접근이 안 된다며 500번 에러가 뜨네요. EL 표현을 ${delete}로 수정해줬더니 정상작동했습니다. modify는 DB의 데이터를 VO를 통해 받아와서 modify.bno로 접근이 가능하지만, delete는 Model에 delete로만 추가해놓아서 그런 거 같습니다.
답글삭제
답글
영이3/13/2019
안녕하세요

여기까지 잘따라왓는데요 ,

이제 url 주소값 기준 board/listSearch로 들어가면
다 잘되는데 1페이지에서만 selectbox , inputbox 검색버튼 이 보이고
2페이지나 다음버튼 등으로 움직이면 이것들이 없어져버리네요
어떤식으로 해결할수있을까요??
답글삭제
답글
ㅎㅎㅎㅎ7/16/2019
안녕하세요 혹시 formObj는 언제 사용하나요?
답글삭제
답글
웹개발고수가 되자4/16/2020
질문이있습니다. 보고 검색까지 만들었는데 검색후 나온 내용을 2페이지에서 검색하려고 2페이지를 누르게되면 검색조건들이 리셋되어 검색단어가 아닌 글들도 2페이지에 나오게 되는데 이런문제는 어찌 해결하나요?
답글삭제
답글
윤쨩5/11/2020
작성자가 댓글을 삭제했습니다.
답글삭제
답글

댓글 추가