(웹개발) Paging

Paging이란?

많은 양의 게시글이 있다고 가정한다. 많은 양의 글을 한 페이지에 보여주기 힘들다.

1. 쿼리를 가져오는데 시간이 많이 걸림

2. 많은 양의 메모리가 필요하다. (많은 양)

*가장 최신의 것을 가져와서 한페이지에 보여주도록한다.

ex) 1000개의 게시글이 있을 때 10개씩 묶으면 100개의 페이지가 만들어진다.

페이지의 묶음을 그룹이라고 부르고 1번~10번 페이지를 1번 그룹으로 묶으면

페이지를 탐색할 때 쉬워진다. 100개의 페이지, 10개의 그룹

*전체 게시글이 몇개냐?

rownum정보를 받아와야 한다.

정렬이 되지 않은 형태로 나온다. (뒤죽박죽)

INLINE VIEW로 실행

Inline View (From절 Subquery)란?

FROM절에 오는 Subquery이다.

FROM절에서 원하는 데이터를 조회하여 가상의 집합을 만들어 조인을 수행하거나 가상의 집합을 다시 조회 할 때 사용한다.

Inlivew View 안에 또 다른 Inline View가 올 수 있다.

빨간박스이 결과를 SELECT하겠다.

ROWNUM을 정렬한 후 INLINE VIEW에 넣고 

A는 alias를 준다.

RONUM을 RNUM으로 이름 짓는다.

1페이지 (1~10)일때 ROWNUM보다 10보다 작은 것들을 가져와라.

2페이지

다시한번 INLINEVIEW로 감싼다.

SELECT  *
FROM    (
            SELECT  ROWNUM RNUM
                    , A.*
            FROM    (
                        SELECT  BOARD_ID
                                , SUBJECT
                                , WRITE_DATE
                                , VIEW_COUNT
                                , LIKE_COUNT
                                , DISLIKE_COUNT
                                , CONTENT
                                , ID
                        FROM    BOARD
                        ORDER   BY WRITE_DATE DESC
                                , BOARD_ID DESC
                    ) A
            WHERE   ROWNUM <= 20
        )
WHERE   RNUM >= 11
;

간편하게 사용하기 위해서

paging.xml파일을 만들고

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  <mapper namespace="Paging">
  
      <sql id= "header">
          SELECT     *
          FROM     (
                      SELECT     ROWNUM RNUM
                              , A.*
                      FROM (
      </sql>
      <sql id= "footer">
                          ) A
                    WHERE     ROWNUM <![CDATA[<=]]> #{endNumber}
                )
        WHERE     RNUM >  #{startNumber}
      </sql>
  
  </mapper>

mybatis.xml파일에 mapper를 추가한다.

<mapper resource="paging.xml" />

boardDao.xml에 추가한다.

<include refid="Paging.header" />

<include refid="Paging.footer" />

 -----------내용-------------

                          ) A
                    WHERE     ROWNUM <![CDATA[<=]]> 끝번호
                )
        WHERE     RNUM > 시작번호

 

(PageNo x 10) +1 = 시작번호

(PageNo x 10) + 10 = 끝번호

번호를 새기 위한 selectAllBoardCount 쿼리 추가

<select id="selectAllBoardCount" parameterType="BoardSearchVO" resultType="_int">
 
          SELECT    COUNT(1)
        FROM    BOARD B
                , MEMBER M
        WHERE     B.ID = M.ID
        <if test="searchKeyword != null and searchKeyword !=''">
            <if test="searchType ==1"> <!-- 다이나믹쿼리 -->
            AND        B.SUBJECT LIKE '%' || #{searchKeyword} || '%'
            </if>
            <if test="searchType == 2">
            AND        B.CONTENT LIKE '%' || #{searchKeyword} || '%'
            </if>
            <if test="searchType == 3">
            AND        (B.SUBJECT LIKE '%' || #{searchKeyword} || '%'
            OR         B.CONTENT LIKE '%' || #{searchKeyword} || '%')
            </if>
            <if test="searchType == 4">
            </if>    
            <if test="searchType == 5">
            AND        M.NAME LIKE '%' || #{searchKeyword} || '%'
            </if>    
            <if test="searchType == 6">
            AND        M.NICK_NAME LIKE '%' || #{searchKeyword} || '%'
            </if>
            <if test="searchType == 7">
            AND        M.ID LIKE '%' || #{searchKeyword} || '%'
            </if>
        </if>
      </select>

boarddao 추가

public int selectAllBoardCount(BoardSearchVO boardSearchVO);

boarddaoImpl 추가

    @Override
    public int selectAllBoardCount(BoardSearchVO boardSearchVO) {
        
        return getSqlSession().selectOne("BoardDao.selectAllBoardCount", boardSearchVO);
    }

Pager-master.zip

src/main/java에 패키지 2개 추가

BoardListVO 클래스 생성

package com.ktds.board.vo;
 
import java.util.List;
 
import io.github.seccoding.web.pager.Pager;
 
public class BoardListVO {
    
    private List<BoardVO> boardListVO;
    private Pager pager;
    
    
    public List<BoardVO> getBoardListVO() {
        return boardListVO;
    }
    public void setBoardListVO(List<BoardVO> boardListVO) {
        this.boardListVO = boardListVO;
    }
    public Pager getPager() {
        return pager;
    }
    public void setPager(Pager pager) {
        this.pager = pager;
    } 
 
}

Alt + S + R // getter setter 생성

BoardService 클래스 변경

BoardServiceImpl 변경

@Override
    public BoardListVO readAllBoard(BoardSearchVO boardSearchVO) {
        
        BoardListVO boardListVO = new BoardListVO();
        
        Pager pager = PagerFactory.getPager(true);
        
        int boardCount = boardDao.selectAllBoardCount(boardSearchVO);
        
        pager.setTotalArticleCount(boardCount);
        pager.setPageNumber(boardSearchVO.getPageNo());
        
        boardSearchVO.setStartNumber( pager.getStartArticleNumber() );
        boardSearchVO.setEndNumber( pager.getEndArticleNumber() );
        
        boardListVO.setPager( pager );
        boardListVO.setBoardListVO (boardDao.selectAllBoard(boardSearchVO));
        
        return boardListVO;
    }

@RequestMapping("/board/list")
    public ModelAndView viewListPage(BoardSearchVO boardSearchVO , HttpSession session) {
        
        if (boardSearchVO.getPageNo() == null || 
                boardSearchVO.getPageNo().length() == 0) {
            boardSearchVO = (BoardSearchVO) session.getAttribute("_SEARCH_");
            
            if( boardSearchVO == null ) {
                boardSearchVO = new BoardSearchVO();
            }
        }
    
        BoardListVO boardList = boardService.readAllBoard(boardSearchVO);
        
        PageExplorer pagenation = new ClassicPageExplorer( boardList.getPager());
        String pager = pagenation.getPagingList("pageNo", "[@]" , "이전", "다음" , "searchForm");
 
        ModelAndView view = new ModelAndView();
        view.setViewName("board/list");
        view.addObject("boardList", boardList.getBoardListVO());
        view.addObject("boardSearchVO", boardSearchVO);
        view.addObject("pager", pager);
        
        session.setAttribute("_SEARCH_", boardSearchVO);  
                                //session의 _SEARCH_ 값에  boardSearchVO 저장
        
        return view;
    }

list.jsp

추가

<div class="footerBar">
    <form id= "searchForm">
        <input type="text" name="searchKeyword" 
                value="${boardSearchVO.searchKeyword}"
                onkeyup= "goSubmit(event)" /> 
        <select name="searchType">
            <option value="1" ${boardSearchVO.searchType == '1' ? "selected" : ""}>제목</option>
            <option value="2" ${boardSearchVO.searchType == '2' ? "selected" : ""}>내용</option>
            <option value="3" ${boardSearchVO.searchType == '3' ? "selected" : ""}>제목+내용</option>
            <option value="4" ${boardSearchVO.searchType == '4' ? "selected" : ""}>댓글</option>
            <option value="5" ${boardSearchVO.searchType == '5' ? "selected" : ""}>이름</option>
            <option value="6" ${boardSearchVO.searchType == '6' ? "selected" : ""}>닉네임</option>
            <option value="7" ${boardSearchVO.searchType == '7' ? "selected" : ""}>아이디</option>
            <option value="8" ${boardSearchVO.searchType == '8' ? "selected" : ""}>태그</option>
        </select>
        <input type="text" style= "display: none;" />
            
        ${pager}
    </form>
    
    <a href="<c:url value="/board/write" />">쓰기</a>
</div>