Dev.GA

[spring/게시판] #6 게시판 페이징 처리하기 본문

Dev.Project/project1-spring게시판

[spring/게시판] #6 게시판 페이징 처리하기

Dev.GA 2018. 2. 23. 14:30



개발환경

Server OS : Windows10

Language : JAVA 1.6

Framework : Spring 3.1.1

WEB Server : Apache 

WAS Server : Tomcat 7

build tool : maven 2.5.1

DB : MySQL 5.7.16

ORM : mybatis 3.2.7


6. 게시판 페이징 처리하기



게시판이 하나씩 뼈대를 잡어가고 있다.


오늘은 게시판을 관리하는데 중요한 페이징 처리를 진행해 보겠다.


우선, 페이징에는 다양한 방법이 있고 표현하는 방법도 다양하다. 오늘은 Java에서 모든 페이징을 처리하도록 하겠다.


가장 기본적인 페이징을 할 것이다.


페이징을 처리/담당하는 Pagination을 만들것인데, 페이징 처리에 필요한 요소부터 살펴보자.


Pagination.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
public class Pagination {
    
    /** 한 페이지당 게시글 수 **/
    private int pageSize = 10;
    
    /** 한 블럭(range)당 페이지 수 **/
    private int rangeSize = 10;
    
    /** 현재 페이지 **/
    private int curPage = 1;
    
    /** 현재 블럭(range) **/
    private int curRange = 1;
    
    /** 총 게시글 수 **/
    private int listCnt;
    
    /** 총 페이지 수 **/
    private int pageCnt;
    
    /** 총 블럭(range) 수 **/
    private int rangeCnt;
    
    /** 시작 페이지 **/
    private int startPage = 1;
    
    /** 끝 페이지 **/
    private int endPage = 1;
    
    /** 시작 index **/
    private int startIndex = 0;
    
    /** 이전 페이지 **/
    private int prevPage;
    
    /** 다음 페이지 **/
    private int nextPage;
 
}

cs



우선 줄인 코드인데도 90라인이다... 포스팅하기엔 너무 길어서 기본 get/set 메소드들은 생략하였다.

제일 먼저 페이징에서 정해야 할 부분이 한 페이지에 몇개의 게시물을 나타낼 것인지 그리고 하나의 블럭(range)에 몇 개의
페이지를 나타낼 것인지를 정해야한다.
이를 제일 상단에 pageSize와 rangeSize로 설정하였다. 

처음으로 Controller에서 현재 페이지와 총 게시물 수를 받아 Pagination을 통해 페이징 처리를 하기 때문에 Controller를 살펴보자.

BoardController.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
@Controller
public class BoardController {
 
    @Autowired
    private BoardService boardServiceImpl;
    
    /**
     * 게시판 조회
     * @param boardVO
     * @param model
     * @return
     * @throws Exception
     */
    @RequestMapping(value="/board/boardList.do")
    @NoLoginCheck
    public String boardList(@ModelAttribute("boardVO") BoardVO boardVO,
            @RequestParam(defaultValue="1"int curPage,
            HttpServletRequest request,
            Model model) throws Exception{
        
        HttpSession session = request.getSession();
        LoginVO loginVO = (LoginVO)session.getAttribute("loginVO");
 
        // 전체리스트 개수
        int listCnt = boardServiceImpl.selectBoardListCnt(boardVO);
        
        Pagination pagination = new Pagination(listCnt, curPage);
        
        boardVO.setStartIndex(pagination.getStartIndex());
        boardVO.setCntPerPage(pagination.getPageSize());
        // 전체리스트 출력
        List<BoardVO> list = boardServiceImpl.selectBoardList(boardVO);
                
        model.addAttribute("list", list);
        model.addAttribute("listCnt", listCnt);
        model.addAttribute("loginVO", loginVO);
        
        model.addAttribute("pagination", pagination);
        
        return "board/boardList";
    }
    
//...생략...//
}
cs


17번째 라인) 우선 현재 사용자가 보는 페이지(현재 페이지)를 RequestParam으로 가져온다. ( 첫 로딩시 디폴트 값 1)

25번째 라인) 다음으로 전체 리스트 개수(게시물 수)를 받아온다.


이 2가지 값으로 Pagination을 호출하여 페이징에 관련된 값들을 설정/처리하는 것이다.

다시 Pagination으로 가보자.


Pagination.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
    public Pagination(int listCnt, int curPage){
        
        /**
         * 페이징 처리 순서
         * 1. 총 페이지수
         * 2. 총 블럭(range)수
         * 3. range setting
         */
        
        // 총 게시물 수와 현재 페이지를 Controller로 부터 받아온다.
        /** 현재페이지 **/
        setCurPage(curPage);
        /** 총 게시물 수 **/
        setListCnt(listCnt);
        
        /** 1. 총 페이지 수 **/
        setPageCnt(listCnt);
        /** 2. 총 블럭(range)수 **/
        setRangeCnt(pageCnt);
        /** 3. 블럭(range) setting **/
        rangeSetting(curPage);
        
        /** DB 질의를 위한 startIndex 설정 **/
        setStartIndex(curPage);
    }
 
    public void setPageCnt(int listCnt) {
        this.pageCnt = (int) Math.ceil(listCnt*1.0/pageSize);
    }
    public void setRangeCnt(int pageCnt) {
        this.rangeCnt = (int) Math.ceil(pageCnt*1.0/rangeSize);
    }
    public void rangeSetting(int curPage){
        
        setCurRange(curPage);        
        this.startPage = (curRange - 1* rangeSize + 1;
        this.endPage = startPage + rangeSize - 1;
        
        if(endPage > pageCnt){
            this.endPage = pageCnt;
        }
        
        this.prevPage = curPage - 1;
        this.nextPage = curPage + 1;
    }
    public void setCurRange(int curPage) {
        this.curRange = (int)((curPage-1)/rangeSize) + 1;
    }
    public void setStartIndex(int curPage) {
        this.startIndex = (curPage-1* pageSize;
    }
 
cs


Pagination 클래스에서 페이징을 처리하는 메소드들만 모아 놓았다.


Pagination()메소드는 Controller에서 curPage(현재페이지), listCnt(총 게시물 수)를 받아와 페이징 처리를 한다.

Pagination()에서는 페이징 처리할 순서를 3번째 라인)에 적어두었다.



1. 총 페이지수, 총 블럭(range)수 구하기


맨 위에 설정한 pageSize(한 페이지에 들어갈 게시물 수)와 rangeSize(한 블럭에 들어갈 페이지 수)를 기준으로

28번째 라인)30번째 라인)에서 각각 전체 페이지수와 블럭(range)수를 계산한다.


2. 블럭(range) 설정


블럭(range) 설정을 해준다. rangeSetting() 메소드에서 처리해주는데, 먼저 curPage(현재페이지)를 기준으로 현재 블럭(range)를 구해준다.


다음으로, 게시판에서 표현할 페이징을 출력하는데 필요한 데이터를 설정한다.

36,37번째 라인)에서 startPage와 endPage를 계산하는데 이는 현재 출력되는 블럭(range)의 시작 페이지와 끝 페이지가 되겠다.



위에서 처럼 1부터 10까지가 하나의 블럭(range)가 되며, 1이 startPage, 10이 endPage가 되는 것이다.

startPage는 최소값이 무조건 1이 되지만 endPage는 전체 페이지 수에 따라서 마지막 end가 결정되기 때문에 39번째 라인)처럼 총 페이지 수 보다 커질 수 없도록 하였다.


다음으로, prevPage와 nextPage를 설정하는데 이는 [이전], [다음] 같은 버튼으로 이동할때 사용된다. 전체블럭(range)에서 첫 페이지와 마지막 페이지일 경우 [이전], [다음] 버튼을 보여주지 않을 것이기 때문에 따로 조건없이 현재페이지에서 1씩 더하고 빼는 걸로 계산하였다.


3. startIndex 설정


마지막으로, DB에서 데이터를 질의할때 사용될 offset값을 설정한다.

현재 페이지에 보여줄 실 게시물 데이터를 위한 offset값으로 현재페이지와 pageSize(한 페이지에 들어갈 게시물 수)로 계산해준다.


boardList.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
                <div>
                    <c:if test="${pagination.curRange ne 1 }">
                        <a href="#" onClick="fn_paging(1)">[처음]</a
                    </c:if>
                    <c:if test="${pagination.curPage ne 1}">
                        <a href="#" onClick="fn_paging('${pagination.prevPage }')">[이전]</a
                    </c:if>
                    <c:forEach var="pageNum" begin="${pagination.startPage }" end="${pagination.endPage }">
                        <c:choose>
                            <c:when test="${pageNum eq  pagination.curPage}">
                                <span style="font-weight: bold;"><a href="#" onClick="fn_paging('${pageNum }')">${pageNum }</a></span
                            </c:when>
                            <c:otherwise>
                                <a href="#" onClick="fn_paging('${pageNum }')">${pageNum }</a
                            </c:otherwise>
                        </c:choose>
                    </c:forEach>
                    <c:if test="${pagination.curPage ne pagination.pageCnt && pagination.pageCnt > 0}">
                        <a href="#" onClick="fn_paging('${pagination.nextPage }')">[다음]</a
                    </c:if>
                    <c:if test="${pagination.curRange ne pagination.rangeCnt && pagination.rangeCnt > 0}">
                        <a href="#" onClick="fn_paging('${pagination.pageCnt }')">[끝]</a
                    </c:if>
                </div>
                
                <div>
                    총 게시글 수 : ${pagination.listCnt } /    총 페이지 수 : ${pagination.pageCnt } / 현재 페이지 : ${pagination.curPage } / 현재 블럭 : ${pagination.curRange } / 총 블럭 수 : ${pagination.rangeCnt }
                </div>
cs


게시판 화면에서 하단 페이징 처리 부분만 가져왔다.

페이징 밑으로 현재 상황을 볼 수 있게 데이터 들을 뿌려주면서 확인하였다.


웹에서 직접 테스트 결과 페이징 처리가 잘 되었음을 알 수 있다.


이렇게 간단하게 spring게시판 페이징 처리를 끝냈다.


다음 포스팅으로는 아마도 계층형 게시판(답글reply)을 포스팅할 예정이다.

Comments