[게시판] 9. 페이징 구현

본 게시물은 아래 링크를 정리한 내용입니다.

Coala Spring Study

 

페이징

게시판 글 목록의 갯수를 제한하는 것

 

1. 더미용 데이터 쌓기

쿼리박스에서 아래 코드 실행

insert into mp_board(bno, title, content, writer)
select mp_board_seq.nextval, title, content, writer from mp_board;
commit;

위의 코드를 한 번 실행할 때 마다 현재 데이터의 갯수의 2배로 늘어난다.

 

2. 게시글 10개씩 출력 쿼리

boardMapper.xml의 list 쿼리 코드 아래처럼 수정

list -> listPage

	<select id="listPage" resultType="kr.co.vo.BoardVO" parameterType="kr.co.vo.Criteria">
		SELECT  BNO, 
		        TITLE, 
		        CONTENT,
		        WRITER, 
		        REGDATE
		 FROM ( 
		        SELECT BNO, 
		               TITLE, 
		               CONTENT, 
		               WRITER, 
		               REGDATE, 
		               ROW_NUMBER() OVER(ORDER BY BNO DESC) AS RNUM
		         FROM MP_BOARD 
		                       ) MP
		WHERE RNUM BETWEEN #{rowStart} AND #{rowEnd}
		ORDER BY BNO DESC
	</select>

 

3. kr.co.vo 패키지에 Criteria.java 파일 생성 후 아래 코드 추가

package kr.co.vo;

public class Criteria {
	
	private int page;
	private int perPageNum;
	private int rowStart;
	private int rowEnd;
	
	public Criteria() {
		this.page = 1;
		this.perPageNum = 10;
	}
	
	public void setPage(int page) {
		if (page <= 0) {
			this.page = 1;
			return;
		}
		this.page = page;
	}
	
	public void setPerPageNum(int perPageNum) {
		if (perPageNum <= 0 || perPageNum > 100) {
			this.perPageNum = 10;
			return;
		}
		this.perPageNum = perPageNum;
	}
	
	public int getPage() {
		return page;
	}
	
	public int getPageStart() {
		return (this.page - 1) * perPageNum;
	}
	
	public int getPerPageNum() {
		return this.perPageNum;
	}
	
	public int getRowStart() {
		rowStart = ((page - 1) * perPageNum) + 1;
		return rowStart;
	}
	
	public int getRowEnd() {
		rowEnd = rowStart + perPageNum - 1;
		return rowEnd;
	}

	@Override
	public String toString() {
		return "Criteria [page=" + page + ", perPageNum=" + perPageNum + ", rowStart=" + rowStart + ", rowEnd=" + rowEnd
				+ "]";
	}
}

 

4. BoardDAO.java 파일 수정

게시물 목록 조회 코드 수정 및 게시물 총 갯수 코드 추가

//게시물 목록 조회
public List<BoardVO> list(Criteria cri) throws Exception;
	
//게시물 총 갯수
public int listCount() throws Exception;

 

5. BoardDAOImpl.java 파일 수정

게시물 목록 조회 코드 수정 및 게시물 총 갯수 코드 추가

//게시물 목록 조회
@Override
public List<BoardVO> list(Criteria cri) throws Exception{
	return sqlSession.selectList("boardMapper.listPage",cri);
}

//게시물 총 갯수
@Override
public int listCount() throws Exception{
	return sqlSession.selectOne("boardMapper.listCount");
}

 

6. BoardService.java 파일 수정

게시물 목록 조회 코드 수정 및 게시물 총 갯수 코드 추가

//게시물 목록 조회
public List<BoardVO> list(Criteria cri) throws Exception;

//게시물 총 갯수
public int listCount() throws Exception;

 

7. BoardServiceImpl.java 파일 수정

게시물 목록 조회 코드 수정 및 게시물 총 갯수 코드 추가

//게시물 목록 조회
@Override
public List<BoardVO> list(Criteria cri) throws Exception{
	return dao.list(cri);
}

//게시물 총 갯수
@Override
public int listCount() throws Exception{
	return dao.listCount();
}

 

8. BoardMapper.xml 파일에 아래 코드추가

	<select id="listCount" resultType="int">
	<![CDATA[
		SELECT COUNT(BNO)
		  FROM MP_BOARD
		 WHERE BNO > 0
	]]>
	</select>

 

9. BoardController.java 파일 아래와 같이 수정

	// 게시판 목록 조회
	@RequestMapping(value = "/list", method = RequestMethod.GET)
	public String list(Model model, Criteria cri) throws Exception{
		logger.info("list");
		
		model.addAttribute("list", service.list(cri));
		
		return "board/list";
		
	}

 

10. kr.co.vo 패키지에 PageMaker.java 파일생성 후 아래 코드 추가

package kr.co.vo;

import org.springframework.web.util.UriComponents;
import org.springframework.web.util.UriComponentsBuilder;

public class PageMaker {

	private int totalCount;
	private int startPage;
	private int endPage;
	private boolean prev;
	private boolean next;
	private int displayPageNum = 10;
	private Criteria cri;
	
	public void setCri(Criteria cri) {
		this.cri = cri;
	}
	
	public void setTotalCount(int totalCount) {
		this.totalCount = totalCount;
		calcData();
	}
	
	public int getTotalCount() {
		return totalCount;
	}
	
	public int getStartPage() {
		return startPage;
	}
	
	public int getEndPage() {
		return endPage;
	}
	
	public boolean isPrev() {
		return prev;
	}
	
	public boolean isNext() {
		return next;
	}
	
	public int getDisplayPageNum() {
		return displayPageNum;
	}
	
	public Criteria getCri() {
		return cri;
	}
	 
	private void calcData() {
		endPage = (int) (Math.ceil(cri.getPage() / (double)displayPageNum) * displayPageNum);
		startPage = (endPage - displayPageNum) + 1;
	  
		int tempEndPage = (int) (Math.ceil(totalCount / (double)cri.getPerPageNum()));
		if (endPage > tempEndPage) {
			endPage = tempEndPage;
		}
		prev = startPage == 1 ? false : true;
		next = endPage * cri.getPerPageNum() >= totalCount ? false : true;
	}
	
	public String makeQuery(int page) {
		UriComponents uriComponents =
		UriComponentsBuilder.newInstance()
						    .queryParam("page", page)
							.queryParam("perPageNum", cri.getPerPageNum())
							.build();
		   
		return uriComponents.toUriString();
	}
}

 

11. BoardContoller.java 파일에 아래 코드처럼 수정

위에서 만든 pageMaker 적용

	// 게시판 목록 조회
	@RequestMapping(value = "/list", method = RequestMethod.GET)
	public String list(Model model, Criteria cri) throws Exception{
		logger.info("list");
		
		model.addAttribute("list", service.list(cri));
		
		PageMaker pageMaker = new PageMaker();
		pageMaker.setCri(cri);
		pageMaker.setTotalCount(service.listCount());
		
		model.addAttribute("pageMaker", pageMaker);
		
		return "board/list";
		
	}

 

12. list.jsp 파일에 아래 코드 추가

</table> 태그 밑에 추가

<div>
  <ul>
    <c:if test="${pageMaker.prev}">
    	<li><a href="list${pageMaker.makeQuery(pageMaker.startPage - 1)}">이전</a></li>
    </c:if> 

    <c:forEach begin="${pageMaker.startPage}" end="${pageMaker.endPage}" var="idx">
    	<li><a href="list${pageMaker.makeQuery(idx)}">${idx}</a></li>
    </c:forEach>

    <c:if test="${pageMaker.next && pageMaker.endPage > 0}">
    	<li><a href="list${pageMaker.makeQuery(pageMaker.endPage + 1)}">다음</a></li>
    </c:if> 
  </ul>
</div>

 

13. <li> 태그 가로로 정렬 코드 추가

<head> 태그 안의 <title> 게시판 코드 아래에 추가

페이징을 가로로 정렬해주는 스타일이다.

	 	<style type="text/css">
			li {list-style: none; float: left; padding: 6px;}
		</style>

 

14. 확인하기

1) 서버 실행 및 localhost:8080/board/list 접속

2) 아래와 같이 생성되었는지 확인하기