게시판 만들기 2 - 페이지 네이션 구현 — 💻으니의 개발 공부용 블로그💻

728x90

페이지 네이션은 게시글이 늘어날 경우

한 페이지에 모든 게시글을 출력하면 아래와 같이 스크롤이 길어지게된다.

그래서 한 페이지에 출력가능한 게시글 개수를 제한하여 1페이지 2페이지 등 넘어가도록 작동하는 기능

보통 데이터베이스 쿼리문에서 처리하나 Spring MVC은 페이징 처리를 쉽게 할 수 있도록 지원함

#page per board count , pagination count
page.listcnt = 10
page.paginationcnt = 10

게시글 개수와 페이지 개수

BoardController

	//페이지네이션 추가 
	@GetMapping("/main")
	public String main(@RequestParam("info_idx") int info_idx,
			Model model , @RequestParam(value = "page",defaultValue = "1")int page) {
		model.addAttribute("info_idx", info_idx);
		model.addAttribute("boardName",boardService.getBoardName(info_idx));
		model.addAttribute("list", boardService.getContentList(info_idx,page));
		
		return "board/main";
	}

requestParam 추가 page , 디폴트 벨류는 1임

파라미터 page를 받는데 만약 없으면 에러가남

그래서 몇 페이지인지 모를 경우에는 그래서 defaultValue "1"(문자열)

파라미터는 주소창으로 넘어올 때 다 문자열인데 int로 변환 (자동변환 -프레임워크 덕분)

BoardService

	// 프로퍼티에서 가져오는 값
	@Value("${page.listcnt}")
	private int page_listcnt;
	
	@Value("${page.paginationcnt}")
	private int page_paginationcnt;



	// 게시글 목록 출력 (페이지네이션 추가)
	public List<ContentVO> getContentList(int info_idx, int page) {
		//페이지네이션
		//시작인덱스 = ( 페이지번호 - 1 ) * 10
		int start = (page-1)*page_listcnt;
		//마이바티스의 RowBounds 클래스를 사용해 가져올 글시작 번호, 가져올갯수로 설정
		RowBounds rowBounds = new RowBounds(start,page_listcnt);
		//매퍼에서 처리하도록 rowBounds 객체를 매개변수로 추가
		return boardDAO.getContentList(info_idx,rowBounds);
	}

BoardDAO

	//게시글 목록 출력(페이지네이션 추가)
	public List<ContentVO> getContentList(int info_idx, RowBounds rowBounds){
		return sqlTemplate.selectList("board.getBoardList", info_idx, rowBounds);
	}

컨트롤러에서 페이지를 받음

서비스에 페이지가 들어감

페이지 개수를 미리 프로퍼티에서 받아옴

sqltemplate객채에 rowBounds를 넣어주면 자동으로 계산됨

rowBounds에는 시작하는 글 번호랑 , 몇 개씩 들어가는지가 들어감

계산을해서 list로 들고옴 -> boardMapper.xml을 수정할 필요가 없음

테스트하기

현재 자유게시판에 들어가면 page 의 값이 없어서 default인 1이 나옴

그래서

page 2를 넣으면 아래와 같이 2페이지가 나옴

새 글 작성하고 실제로 맞게 출력되는지 확인하기

이제 하단의 페이지를 클릭하면 해당페이지로 이동하도록 할 예정

package com.demo.domain;

public class PageBean {

	// 최소 페이지 번호
	private int min;
	// 최대 페이지 번호
	private int max;
	// 이전 버튼의 페이지 번호
	private int prevPage;
	// 다음 버튼의 페이지 번호
	private int nextPage;
	// 전체 페이지 개수
	private int pageCnt;
	// 현재 페이지 번호
	private int currentPage;
    
    
// contentCnt : 전체글 개수, currentPage : 현재 페이지 번호,
	// contentPageCnt : 페이지당 글의 개수, paginationCnt : 페이지 버튼의 개수
	public PageBean(int contentCnt, int currentPage, int contentPageCnt, int paginationCnt) {

		// 현재 페이지 번호
		this.currentPage = currentPage;
		// 전체 페이지 개수
		pageCnt = contentCnt / contentPageCnt;
		if (contentCnt % contentPageCnt > 0) {
			pageCnt++;
		}
		// 페이지네이션 최소값, 최대값
		min = ((currentPage - 1) / paginationCnt) * paginationCnt + 1;
		max = min + paginationCnt - 1;
		// 최대값이 실제 최대페이지보다 크면 최대페이지로 설정
		if (max > pageCnt) {
			max = pageCnt;
		}
		// 이전 페이지값, 다음페이지값
		prevPage = min - 1;
		nextPage = max + 1;
		// 다음페이지가 최대페이지보다 크면 최대페이지로 설정
		if (nextPage > pageCnt) {
			nextPage = pageCnt;
		}

	}

    

	//게터 생성 
	public int getMin() {
		return min;
	}
	public int getMax() {
		return max;
	}
	public int getPrevPage() {
		return prevPage;
	}
	public int getNextPage() {
		return nextPage;
	}
	public int getPageCnt() {
		return pageCnt;
	}
	public int getCurrentPage() {
		return currentPage;
	}
}

contentPageCnt 와 paginationCnt 값은 이미 정해져 있음

currentPage , contentCnt 만 계산하면 됨

BoardService

	// 페이지네이션 계산
	public PageBean getContentCnt(int info_idx,int currentPage) {
    	//게시판별로 게시글 개수를 가져옴 .
		int content_cnt = boardDAO.getContentCnt(info_idx);
		
		PageBean pageBean = new PageBean(content_cnt, currentPage, page_listcnt, page_paginationcnt);
		
		return pageBean;
	}

boardMapper.xml

	<select id="contentCnt" parameterType="Integer" resultType="Integer" >
		SELECT COUNT(*)
		FROM board
		WHERE info_idx = #{info_idx}
	</select>

BoardDAO

	//페이지네이션 계산(게시판 별 게시글 개수)
	public int getContentCnt(int info_idx) {
		return sqlTemplate.selectOne("board.contentCnt", info_idx);
	}

BoardController

	//페이지네이션 추가 
	@GetMapping("/main")
	public String main(@RequestParam("info_idx") int info_idx,
			Model model , @RequestParam(value = "page",defaultValue = "1")int page) {
		model.addAttribute("info_idx", info_idx);
		model.addAttribute("boardName",boardService.getBoardName(info_idx));
		model.addAttribute("list", boardService.getContentList(info_idx,page));
		//페이지네이션 계산
		PageBean pageBean = boardService.getContentCnt(info_idx, page);
		model.addAttribute("pageBean", pageBean);
		
		return "board/main";
	}

main.jsp수정

				<div class="d-none d-md-block">
					<ul class="pagination justify-content-center">
						<!-- 이전 페이지  -->
						<c:choose>
							<c:when test="${pageBean.prevPage <= 0 }">
								<li class="page-item disabled"><a href="#"
									class="page-link">이전</a></li>
							</c:when>
							<c:otherwise>
								<li class="page-item"><a
									href="${root}/board/main?info_idx=${info_idx}&page=${pageBean.prevPage}"
									class="page-link">이전</a></li>
							</c:otherwise>
						</c:choose>
						<!-- 중간 페이지 번호들 -->
						<c:forEach var="idx" begin="${pageBean.min}"
							end="${pageBean.max}">
							<c:choose>
								<c:when test="${idx == pageBean.currentPage}">
									<li class="page-item active"><a
										href="${root}/board/main?info_idx=${info_idx}&page=${idx}"
										class="page-link">${idx}</a></li>
								</c:when>
								<c:otherwise>
									<li class="page-item"><a
										href="${root}/board/main?info_idx=${info_idx}&page=${idx}"
										class="page-link">${idx}</a></li>
								</c:otherwise>
							</c:choose>
						</c:forEach>
						<!-- 다음 페이지 -->
						<c:choose>
							<c:when test="${pageBean.min >= pageBean.pageCnt}">
								<li class="page-item disabled"><a href="#"
									class="page-link">다음</a></li>
							</c:when>
							<c:otherwise>
								<li class="page-item"><a
									href="${root}/board/main?info_idx=${info_idx}&page=${pageBean.nextPage}"
									class="page-link">다음</a></li>
							</c:otherwise>
						</c:choose>
					</ul>
				</div>

테스트하기

글을 읽고 다시 그 페이지로 이동하기

2페이지에의 게시글을 읽고 다시 목록으로 누르면 해당 페이지로 돌아가기

boardController에서 page 정보 모델에 담기

	//페이지네이션 추가 
	@GetMapping("/main")
	public String main(@RequestParam("info_idx") int info_idx,
			Model model , @RequestParam(value = "page",defaultValue = "1")int page) {
		model.addAttribute("info_idx", info_idx);
		model.addAttribute("boardName",boardService.getBoardName(info_idx));
		model.addAttribute("list", boardService.getContentList(info_idx,page));
		//페이지네이션 계산
		PageBean pageBean = boardService.getContentCnt(info_idx, page);
		model.addAttribute("pageBean", pageBean);
		model.addAttribute("page", page);
		return "board/main";
	}

main.jsp 제목 링크 수정

<td><a href="${root }/board/read?info_idx=${info_idx}&page=${page}&board_idx=${obj.board_idx}">${obj.title}</a></td>

boardController- read에서도 page 정보 모델에 담기

	@GetMapping("/read")
	public String read(@RequestParam("info_idx") int info_idx, 
			@RequestParam("board_idx") int board_idx, 
			@RequestParam(value = "page",defaultValue = "1")int page,
			Model model) {
		model.addAttribute("info_idx", info_idx);//게시판 번호는 유지
		//글번호로 db에서 게시글 읽어오기
		model.addAttribute("content", boardService.getContentDetail(board_idx));
		model.addAttribute("sessionUser",sessionUser); //로그인 된 유저 정보 
		
		model.addAttribute("page", page);
		return "board/read";
	}

read.jsp

						<div class="form-group">
							<div class="text-right">
								<a href="${root}/board/main?info_idx=${info_idx}&page=${page}" class="btn btn-primary">목록보기</a> 
								
								<c:if test="${sessionUser.user_idx == content.writer_idx}">
									<a href="${root}/board/modify?info_idx=${info_idx}&board_idx=${content.board_idx}&page=${page}" class="btn btn-info">수정하기</a> 
									<a href="${root}/board/delete?info_idx=${info_idx}&board_idx=${content.board_idx}" class="btn btn-danger">삭제하기</a>
								</c:if>
								
							</div>
						</div>

테스트하기

아까와 동일하게 2페이지에 있는 게시글 상세보기 누르고 다시 목록으로 이동

2페이지로 돌아옴

그리고 수정 페이지로 위와 같은 방법으로 수정한다.

BoardController

	//게시글 수정
	@GetMapping("/modify")
	public String modify(@RequestParam("info_idx") int info_idx,
						 @RequestParam("board_idx") int board_idx,
						 @RequestParam("page") int page,
						 Model model,
						 @ModelAttribute("modifyContent") BoardVO modifyContent) {
		modifyContent.setInfo_idx(info_idx);
		modifyContent.setBoard_idx(board_idx);
		boardService.getContents(modifyContent);			// 수정 전 정보를 db에서 가져온다
		
		model.addAttribute("modifyContent", modifyContent);	//수정페이지로 전달
		model.addAttribute("info_idx", info_idx);			//게시판번호 전달
		model.addAttribute("page", page);
		return "board/modify";
	}

modify.jsp - 취소버튼에 page 정보 추가 및 form action에도 추가

	<form:form action='${root}/board/modify_pro?page=${page}'

	<a href="${root }/board/read?info_idx=${info_idx}&board_idx=${modifyContent.board_idx}&page=${page}"
	  class="btn btn-info">취소</a>

BoardController- modify_pro수정

	//게시글 수정 처리 
	@PostMapping("/modify_pro")
	public String modify_pro(@Valid @ModelAttribute("modifyContent") BoardVO modifyContent,
							 @RequestParam("page") int page,
						 BindingResult result,Model model) {
		model.addAttribute("page", page);
		
		if(result.hasErrors()) {
			return "board/modify";
		}
		//데이터 수정하기 
		boardService.modifyContent(modifyContent);
		model.addAttribute("info_idx",modifyContent.getInfo_idx());
		model.addAttribute("board_idx",modifyContent.getBoard_idx());
		return "board/modify_success";
	}

modify_success.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="root" value="${pageContext.request.contextPath}" />

<script>
	alert('수정 되었습니다')
	location.href = "${root}/board/read?info_idx=${info_idx}&board_idx=${board_idx}&page=${page}"
</script>

'BACKEND > Spring' 카테고리의 다른 글

게시판 만들기 2 - 기본페이지(index) (0)	2023.11.03
게시판 만들기 2 - 게시글 삭제 처리 (1)	2023.11.03
게시판 만들기 2 - 게시글 수정 처리 (0)	2023.11.02
게시판 만들기 2 - 이미지 업로드 방법 변경 (0)	2023.11.02
게시판 만들기 2 - 게시글은 글쓴이만 수정 가능하게 (0)	2023.11.02

'BACKEND > Spring' 카테고리의 다른 글

티스토리툴바