(교육자료)게시판에 페이징 처리 및 답글 기능 구현하기 실습

게시판에 페이징 처리하기

 

앞에서 만든 게시판에 페이징 처리를 적용해 보도록 한다.

모든 동작이 문제없다면 이어서 페이징 처리를 진행한다.

(임의의 글을 20개 정도 저장두고 시작 해보자.)
 

 글의 목록이 많아진다면 한 페이지에 모두 보여지는 것이 아니라 일정한 개수로 한 화면에 보여지도록 처리하는 것이 보기 편할 것이다. 글 목록의 개수를 정해 한 페이지에 표현해주고 나머지 목록은 번호를 붙여 처리하는 방식이다.

 앞에서 작성한 코드의 내용 중 [수정<N>]하는 부분을 찾아 다음의 작업을 순서대로 수행하여 페이징 처리까지 완료하도록 한다.

페이징 처리방법은 다양하므로 지금 작성하는 방법 이외의 방법도 찾아보도록 한다.
 
페이징 처리 시작
1. 페이징 처리를 위해 BoardDao.java의 getArticles() 메서드 수정
 A. 수정<1> 부분에 int start, int end 매개변수 추가

 B. 수정<2> 부분에 쿼리문을 아래 내용으로 수정

/* 수정<2> */
//pstmt = conn.prepareStatement("select * from board order by num desc"); 
pstmt = conn.prepareStatement(
    "select * from (select rownum rnum, num, writer, email, subject, pass,"
    + "regdate, readcount, ref, step, depth, content, ip from ("
        + "select * from board order by ref desc, step asc)) where rnum>=? and rnum<=?");
 

 

 C. 수정<3> 부분에 다음 코드 추가

//수정<3>
pstmt.setInt(1, start);
pstmt.setInt(2, end);

 D. 수정<4> 부분을 new ArrayList<BoardDto>(10); 으로 수정    

2. list.jsp 페이지를 페이징 처리가 되도록 수정한다.
 A. 수정<1> 부분에 int pageSize = 10; 코드 추가(한 페이지당 10개의 게시물 표현)

<%!
//수정<1>
int pageSize = 10; //한 페이지에 보여지는 글 수
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm");
%>
 

 B. 수정<2> 부분에 다음 코드 추가 

<%
 //수정<2>
 String pageNum = request.getParameter("pageNum");
 if(pageNum == null){
  pageNum = "1";
 }
 int currentPage = Integer.parseInt(pageNum);
 int startRow = (currentPage - 1) * pageSize + 1;
 int endRow = currentPage * pageSize;
 //추가한 코드
 

 

C. 수정<3> 부분의 getArticles() 메서드를 다음과 같이 수정

articleList = dbPro.getArticles(startRow, endRow); //수정<3> - 매개변수 추가
 

number = count - (currentPage-1) * pageSize; //수정<4>

 

E. 수정<5> 부분에 다음 코드 추가(이미지를 불러오는 코드)

<!-- 수정<5> -->
 <%
 int wid = 0;
 if(article.getDepth() > 0){
  wid = 5 * (article.getDepth());
 %>
  <img src="images/level.gif" width="<%=wid%>">
  <img src="images/re.gif">
 <% } else {%>
  <img src="images/level.gif" width="<%=wid%>">
 <% } %>
 

 

F. 수정<6> 부분의 pageNum=1 부분을 pageNum=<%=currentPage%> 로 수정

<!-- 수정<6> -->  
<a href="content.jsp?num=<%= article.getNum() %>&pageNum=<%=currentPage%>">
 

 

G. 수정<7> 부분에 다음 코드 추가

<!-- 수정<7> -->
<%
 if(count > 0){
  int pageBlock = 5;
  int imsi = count % pageSize == 0 ? 0 : 1;
  int pageCount = count / pageSize + imsi;
  int startPage = (int)((currentPage-1) / pageBlock) * pageBlock + 1;
  int endPage = startPage + pageBlock - 1;
  if( endPage > pageCount) endPage = pageCount;
  if(startPage > pageBlock) { %>
   <a href="list.jsp?pageNum=<%=startPage-pageBlock%>">[이전]</a>
<% 
  }
  for(int i = startPage; i <= endPage; i++){ %>
   <a href="list.jsp?pageNum=<%=i%>">[<%=i%>]</a>
<% 
  }
  if(endPage < pageCount) { %>
   <a href="list.jsp?pageNum=<%=startPage+pageBlock%>">[다음]</a>
<%
  }
 }
%>
 

  
작성 후 페이징 처리 동작을 확인한다.

페이징 처리 확인 후 마지막으로 답글을 처리할 수 있도록 기능을 추가한다.

현재 예제는 writeForm.jsp에서 답글을 위한 코드를 추가 해 놓았다.

그리고 앞의 페이징 처리에서도 답글에 대한 이미지도 추가하였으므로 content.jsp 페이지의 수정<1> 부분에 다음 코드를 추가하여 답글 기능을 구현한다.
WebContent/boardone/content.jsp의 수정<1> 부분에 추가 

<!-- 수정<1> -->
<input type="button" value="답글" 
 onClick="document.location.href=
 'writeForm.jsp?num=<%=num%>&ref=<%=ref%>&step=<%=step%>&depth=<%=depth%>'">

 

답변이 잘 게시되는지 확인

 

이제 전체 동작이 모두 동작하는지 확인하고 소스코드를 분석하여 페이징 동작을 이해하도록 한다.