오늘은 페이징 내비게이션 페이징 처리에 대해 배웠다.
위의 사진처럼 1~10번 페이지까지 표시되어 있는 페이지를 보기 좋게
정해진 페이지까지만 표시가 되게 수정하는 방법을 배웠다.
페이지 내비게이션 페이징 처리하기
1. 한 화면에 표시할 페이지번호 개수 결정하기
int pages = 5; // 현재 한 화면에 보이는 10페이지 대신 5페이지만 나타낸다.
2. 총 페이지블록 개수를 계산하기
int totalPageBlocks = (int) Math.ceil( (double) totalPages/pages );
3. 현재 페이지블록을 계산하기
int currentPageBlock = (int) Math.ceil( (double) currentPage/pages );
// 현재 페이지가 맞는 범위의 페이지들을 보여주기 위함이다.
// (현재 페이지가 3페이지라면 1~3페이지까지,
현재 페이지가 7페이지라면 6~10페이지를 보여준다.)
4. 현재 페이지블록에 맞는 시작페이지번호와 끝페이지번호를 계산하기
int beginPage = (currentPageBlock – 1)*pages + 1;
int endPage = currentPageBlock*pages;
if (currentPageBlock == totalPageBlocks) {
endPage = totalPages; // endPage와 totalPage가 같아지면 끝낸다.
}Ex) currentPage = 3
totalPages = 8
totalPageBlock = 8.0/5 -> ceil(1.6) -> 2
currentPageBlock = 3.0/5 -> ceil(0.6) -> 1
beginPage = (1-1)*5 + 1 -> 1
endPage = 1*5 -> 5
총 데이터 개수 : 132
총 페이지 개수 : 14
총 블록 개수 : 3
현재페이지번호 현재블록번호 시작페이지번호 끝페이지번호
1 1 1 5
2 1 1 5
3 1 1 5
4 1 1 5
5 1 1 5
6 2 6 10
7 2 6 10
8 2 6 10
9 2 6 10
10 2 6 10
11 3 11 14
12 3 11 14
13 3 11 14
14 3 11 14
----- > 끝 페이지가 14이므로 <%
// 페이지 내비게이션 표시
// 1. 한 화면에 표시할 페이지번호 개수를 결정한다.
int pages = 5;
// 2. 전체 책 갯수를 조회한다.
int totalRows = bookDao.getTotalRows();
// 3. 전체 페이지 갯수를 조회한다.
int totalPages = (int) Math.ceil((double) totalRows/rows);
// 4. 전체 페이지 블록 갯수를 계산한다.
int totalPageBlocks = (int) Math.ceil( (double) totalPages/pages);
// 5. 현재 페이지가 속한 페이지 블록을 계산하기
int currentPageBlock = (int) Math.ceil( (double) currentPage/pages);
// 6. 현재 페이지블록의 시작페이지번호와 끝 페이지번호를 계산하기
int beginPage = (currentPageBlock - 1)*pages + 1;
int endPage = currentPageBlock == totalPageBlocks ? totalPages : currentPageBlock*pages;
%>
<%
for (int number = beginPage; number <= endPage; number++) {
%>
<li class="page-item <%=currentPage == number ? "active" : ""%>">
<a class="page-link" href="list.jsp?page=<%=number %>"><%=number %></a>
</li>
<%
}
%>
<li class="page-item <%=currentPage >= totalPages ? "disabled" : "" %>">
<a class="page-link" href="list.jsp?page=<%=currentPage + 1 %>">다음</a>
</li>
- 5페이지 단위로 화면에 출력되는 기능을 구현했다. - < 게시판 만들기 >- 테이블 생성 및 시퀀스 생성
CREATE TABLE SAMPLE_BOARDS (
BOARD_NO NUMBER(5) CONSTRAINT BOARD_NO_PK PRIMARY KEY,
BOARD_TITLE VARCHAR2(255) NOT NULL,
BOARD_WRITER VARCHAR2(100) NOT NULL,
BOARD_READ_COUNT NUMBER(5) DEFAULT 0,
BOARD_REVIEW_COUNT NUMBER(5) DEFAULT 0,
BOARD_CONTENT VARCHAR2(200) NOT NULL,
BOARD_DELETED CHAR(1) DEFAULT 'N',
BOARD_CREATED_DATE DATE DEFAULT SYSDATE,
BOARD_UPDATED_DATE DATE DEFAULT SYSDATE
);
CREATE TABLE SAMPLE_BOARD_REVIEWS (
REVIEW_NO NUMBER(5) CONSTRAINT BOARD_REVIEW_NO_PK PRIMARY KEY,
REVIEW_WRITER VARCHAR2(100) NOT NULL,
REVIEW_CONTENT VARCHAR2(1000) NOT NULL,
REVIEW_CREATED_DATE DATE DEFAULT SYSDATE,
BOARD_NO NUMBER(5) CONSTRAINT REVIEW_BOARD_NO_FK REFERENCES SAMPLE_BOARDS (BOARD_NO)
);
CREATE SEQUENCE SAMPLE_BOARDS_SEQ START WITH 10000 NOCACHE;
CREATE SEQUENCE SAMPLE_REVIEWS_SEQ START WITH 10000 NOCACHE;
- 환경 세팅
2-1. 라이브러리 파일을 src/main/webapp/WEB-INF/lib 폴더에 추가한다.
ojdbc11.jar
ibatis-2.3.4.726.jar
2-2. ibatis 환경설정
src/main/resources "소스폴더"를 추가한다.
src/main/resources "소스폴더"에 META-INF/ibatis/mappers "폴더"를 추가한다.
src/main/resources/META-INF/ibatis/mappers 폴더에 매퍼파일을 추가한다.
boards.xml, reviews.xml
src/main/resources/META-INF/ibatis 폴더에 ibatis-config.xml 파일을 추가한다.
ibatis-config.xml 파일에 boards.xml과 reviews.xml 파일을 등록한다.
2-3. 패키지 생성 및 유틸리티 클래스 추가
com.sample.util 패키지를 추가한다.
com.sample.util 패키지에 SqlMapper.java와 StringUtils.java를 추가한다.
com.sample.vo 패키지를 추가한다.
Board.java와 Review.java를 추가한다.
com.sample.dao 패키지를 추가한다.
BoardDao.java와 ReviewDao.java를 추가한다.
2-4. JSP 구현하기
src/main/webapp 폴더에 jsp 파일을 추가한다.
home.jsp
list.jsp
form.jsp
register.jsp
detail.jsp, [리뷰 : addReview.jsp, deleteReview.jsp]
delete.jsp
modifyform.jsp
update.jsp
오후에는 강사님께서 이 게시판의 기본 form들을 주셔서 배웠던 것들을 스스로 해보았다.
주말에는 이 게시판 만들기를 수행해보며 복습해보려고 한다.
