[스프링 게시판][6] 페이징 기능 구현(페이지 이동 인터페이스) -2

Git 주소 : github.com/sjinjin7/Blog_BoardProject

목표

 

페이지 이동 인터페이스 구현 보완

 

 저번 포스팅에서 페이징에 대한 구현은 완성되었습니다. 하지만 한 가지 보완하고 싶은 점이 있습니다. 현 시점에서 '조회 화면(get.jsp)'와 '수정 화면(modify.jsp)'에서 '목록 화면(list.jsp)'로 이동할 수 있는 버튼을 누르면 무조건 "1페이지"로 이동이 됩니다. 예를 들어서 7 페이지에서 '조회, 수정 페이지'를 이동을 하였다가 '목록 페이지' 이동 버튼을 누르면 1페이지로 이동이 됩니다. 무조건 1페이지가 아닌 '조회, 수정 화면' 들어가기 전에 페이지로 이동할 수 있도록 구현하는 것이 목표입니다.

 

 

 

순서

1. 계획

2. 조회 화면(get.jsp) => 목록 화면(list.jsp)

3. 수정화면(modify.jsp) => 목록화면(list.jsp)

 

 

1. 계획

 '조회 화면(get.jsp)', '수정 화면(modify.jsp)'에서 '목록 페이지 이동' 버튼을 누르는 행위는 "board/list" url 매핑 메소드를 호출하는 행위입니다. 해당 메소드는 pageNum(현재 페이지)과 amount(표시수)에 대한 정보만 있다면 내부적 처리를 통해 해당 페이지로 이동할 수 있도록 이미 저번 포스팅들에서 작성하였습니다. 따라서 우리가 해주어야 할 점은 '목록 페이지 이동' 버튼을 누를 때 pageNum, amount 데이터를 같이 보내는 것입니다.

 

 이를 위해 '목록 화면(list.jsp)' =>  '조회 화면(get.jsp)', '조회 화면(get.jsp)' =>  '수정 화면(modify.jsp)'으로 이동 할때 '목록 화면(list.jsp)'가 현재 저장하고 있는 pageNum, amount 정보를 서버에 전달하고, 서버에서 다시 해당화면(조회, 수정)으로 전송하여 해당화면이 해당 데이터를 저장하고 있어야 합니다. 그래야 '목록 페이지 이동' 버튼을 눌렀을대 해당 정보들을 같이 전송할 수 있기 때문입니다.

 

그림 1-1

 

  따라서 3가지의 작업을 해주어야합니다. '목록 화면(list.jsp)'에서 '조회 화면(get.jsp)' 이동을 서버에 요청할 때 pageNum, amount 데이터를 같이 보낼 수 있도록 <form> 태그 사용 및 해당 <input> 태그 추가하는 작업, 서버에서 해당 데이터를 받아들일 수 있도록 파라미터 추가와 다음 화면에 데이터를 보낼 수 있도록 model을 사용하는 작업, 서버로부터 전달받은 데이터를 '목록 페이지 이동' 버튼 사용 시 같이 서버에 데이터를 보낼 수 있도록 <form> 태그 안의 <input> 태그에 데이터를 저장하는 작업입니다.

 

 

 

2. 조회 화면(get.jsp) => 목록 화면(list.jsp)

목록 화면(list.jsp)

 

그림 2-1

 

 위 스크린샷에서 표시한 부분은 서버에 '조회 화면(get.jsp)' 이동을 요청하는 Javascript 코드입니다. id속성명이 moveForm인 <form> 태그를 통해 "/board/get" 매핑 메소드를 요청하도록 되어있습니다. 따라서 해당 <form> 태그에 pageNum과 amount정보를 저장하는 <input> 태그를 작성하여야 하는데 저번 포스팅에서 이미 작성을 해두었습니다.

 

그림 2-2

 

 

 

BoardController

 

 "/board/get" 매핑 매서드에 뷰(view)에서 전송하는 pageNum, amount 데이터를 사용 할수 있도록 파라미터를 추가해야 합니다. pageNum과 amount는 Criteria 클래스에 정의되어 있는 변수들이기 때문에, 두 데이터를 같이 가져오기 위해 Criteria 클래스를 파라미터로 부여합니다.

 

그림 2-3

 

 addAttribute 메소드를 호출하여 "cri" 속성명에 속성값으로 뷰(view)로부터 전달받은 Criteria 인스턴스를 저장합니다.

 

그림 2-4

 

 

조회 화면(get.jsp)

 

그림 2-5

 

 '수정 페이지 이동' 버튼, '목록 페이지 이동' 버튼 모드 id속성값이 "infoForm"인 <form> 태그를 이용하고 있습니다. '수정 페이지 이동', '목록 페이지 이동' 매핑 메소드 모두 pageNum, amount 데이터가 필요로 하기 때문에 해당 <form> 태그에 데이터를 저장하는 <input> 태그를 추가합니다.

 

그림 2-6

 

테스트

 

 '조회 페이지'에서 기존 '목록 페이지'로 이동이 되는지 테스트합니다.

 

그림 2-7

 

그림 2-8

 

그림 2-9

 

 

 

3. 수정화면(modify.jsp) => 목록화면(list.jsp)

BoardController.java

 

 '조회 화면(get.jsp)'에서 '수정 화면(mdoify.jsp)'으로 pageNum, amount 데이터를 보내기 위해 <input> 태그를 추가해주는 작업은 앞 순서에서 추가해준 <input> 태그가 그 역할을 해주기 때문에 생략합니다.

 

 "/board/modify" url 매핑 메소드가 '조회 화면(get.jsp)'에서 전송한 pageNum, amount 데이터를 수집할 수 있도록 Criteria 클래스를 파라미터로 추가합니다. 그리고 전달받은 데이터를 다시 '수정 화면(modify.jsp)'에 전송하도록 addAttribute메소드를 사용하여 "cri" 속성명에 Criteria 인스턴스를 저장합니다.

 

그림 3-1

 

수정화면(modify.jsp)

 

그림 3-2

 

 '목록 페이지 이동'에 사용되는 <form> 태그에 pageNum, amount 데이터를 저장하는 <input> 태그를 추가합니다.

 

그림 3-3

 

 

테스트

 

 기존 '목록 화면(list.jsp)'로 이동하는지 테스트합니다.

 

그림 3-4

 

그림 3-5

 

그림 3-6

 

그림 3-7

 

 

 

REFERENCE

 

 

DATE

• 2020.03.02