AR삽질러

JSP 개인프로젝트(11) - 게시판만들기(페이징처리) 본문

JAVA/JSP

JSP 개인프로젝트(11) - 게시판만들기(페이징처리)

아랑팡팡 2023. 3. 7. 18:09
728x90

https://arang95.tistory.com/59

 

JSP 개인프로젝트(10) - 게시판만들기(게시글수정, 삭제)

https://arang95.tistory.com/58 JSP 개인프로젝트(9) - 게시판만들기(게시글내용보기) https://arang95.tistory.com/57 JSP 개인프로젝트(8) - 게시판만들기(게시글목록) https://arang95.tistory.com/56 JSP 개인프로젝트(7) - s

arang95.tistory.com

지난시간에는 게시판만들기에서 게시판의 수정, 삭제를 구현해보았다. 이번시간에는 게시판 페이징을 활용하여 원하는 페이지 수만큼 사용자에게 보여줄 수 있도록 구현해 보겠다.

 

JSP(JSP - Java Server Pages) 페이징 기법은 데이터를 여러 페이지로 분할하여 화면에 출력하는 방법으로 페이징 기법은 대량의 데이터를 가지고 있는 웹 사이트에서 페이지를 나누어 보여줌으로써 사용자들이 데이터를 효과적으로 검색할 수 있도록 도와준다.

JSP 페이징 기법의 단계

  1. 전체 데이터 개수 구하기
  2. 한 페이지에 보여줄 데이터 개수 결정
  3. 전체 페이지 수 계산
  4. 현재 페이지 번호 계산
  5. 현재 페이지에 해당하는 데이터 추출
  6. 페이지 링크 출력

위 단계를 거쳐 사용자는 페이지 번호를 클릭하거나 다음 페이지 버튼을 클릭하여 다음 페이지를 볼 수 있습니다.

JSP 페이징 기법은 대부분의 웹 프레임워크에서 제공되며, 데이터베이스 쿼리 결과를 페이징하여 보여주는 기능을 쉽게 구현할 수 있습니다. 페이징 기법을 통해 사용자는 대량의 데이터를 효과적으로 관리할 수 있고, 웹 페이지의 속도와 성능을 향상시킬 수 있습니다.

 

1. DAO

public List<BoardVO> getArticles(int start, int end){
	    Connection conn = null;
	    PreparedStatement pstmt = null;
	    ResultSet rs = null;
	    List<BoardVO> articleList = new ArrayList<>();
	    try{
	        conn = ConnUtil.getcConnection();
	        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<=?");
	        pstmt.setInt(1, start);
	        pstmt.setInt(2, end);
	        rs = pstmt.executeQuery();
	        while(rs.next()) {
	            BoardVO article = new BoardVO();
	            article.setNum(rs.getInt("num"));
	            article.setWriter(rs.getString("writer"));
	            article.setEmail(rs.getString("email"));
	            article.setSubject(rs.getString("subject"));
	            article.setPass(rs.getString("pass"));
	            article.setRegdate(rs.getTimestamp("regdate"));
	            article.setRef(rs.getInt("ref"));
	            article.setStep(rs.getInt("step"));
	            article.setDepth(rs.getInt("depth"));
	            article.setContent(rs.getString("content"));
	            article.setIp(rs.getString("ip"));
	            articleList.add(article);
	        }
	    }catch(Exception e) {
	        e.printStackTrace();
	    }finally {
	        if(rs != null) try {rs.close();} catch(SQLException e) {}
	        if(pstmt != null) try {pstmt.close();} catch(SQLException e) {}
	        if(conn != null) try {conn.close();} catch(SQLException e) {}
	    }
	    return articleList;
	}

 

2. list.jsp

<%
	int pageSize = 5; // 한페이지에서 볼수 있는 글수
	SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm");
%>
<%
	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;
	int count = 0;
	int number = 0; 
	List<BoardVO> articleList = null;
	BoardDAO dbPro = BoardDAO.getInstance();
	count = dbPro.getArticleCount();
	if(count > 0){
		articleList = dbPro.getArticles(startRow, endRow);
	}
	number = count-(currentPage-1)*pageSize;
%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../css/bootstrap.css">
	<link rel="stylesheet" href="../css/custom.css">
	<title>메인페이지</title>
	<script type="text/javascript" src="script.js"></script>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="../js/bootstrap.js"></script>
</head>
<body>
	<%
		String id = (String)session.getAttribute("id");
	%>
	<nav class="navbar navbar-default">
	 <div class="navbar-header">
	  <button type="button" class="navbar-toggle collapsed"
	  	data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
	  	aria-expanded="false">
		 	<span class="icon-bar"></span>
		 	<span class="icon-bar"></span>
		 	<span class="icon-bar"></span>
		 </button>
		 <a class="navbar-brand" href="../memberone/main.jsp">AR 웹페이지</a>
		</div>
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		 <ul class="nav navbar-nav">
		  <li class="active"><a href="../memberone/main.jsp">메인</a>
		   <li class="active"><a href="list.jsp">게시판</a>
		 </ul>
		 <%
		 	if(id == null){
		 %>
		 <ul class="nav navbar-nav navbar-right">
		  <li class="dropdown">
		   <a href="#" class="dropdown-toggle"
		   	data-toggle="dropdown" role="button" aria-haspopup="true"
		   	aria-expanded="false">접속하기<span class="caret"></span>
		   </a>
		   <ul class="dropdown-menu">
		   	<li><a href="../memberone/login.jsp">로그인</a></li>
		   	<li><a href="../memberone/regForm.jsp">회원가입</a></li>
		   </ul>
		  </li>
		 </ul>
		 <%
		 	}else{
		 %>
		 <ul class="nav navbar-nav navbar-right">
		  <li class="dropdown">
		   <a href="#" class="dropdown-toggle"
		   	data-toggle="dropdown" role="button" aria-haspopup="true"
		   	aria-expanded="false"><%=id %>님 환영합니다.<span class="caret"></span>
		   </a>
		   <ul class="dropdown-menu">
		   	<li><a href="logoutAction.jsp">로그아웃</a></li>
		   	<li><a href="modifyForm.jsp">회원정보수정</a></li>
		   	<li><a href="deleteForm.jsp">회원탈퇴</a></li>
		   </ul>
		  </li>
		 </ul>
		 <%
		 	}
		 %>
		</div>
	</nav>

<div class="container">
	  <table class="table table-bordered table-hover" style="text-align: center; border: 1px solid #ddddddd">
	   <thead>
	    <tr>
	     <th colspan="6"><h4>글목록(전체 글 : <%=count %>)</h4></th>
	    </tr>
	    <tr>
  		 <td colspan="6" align="right">
  		 <a href="writeForm.jsp"><h5>글쓰기</h5></a>
  	    </td>
	<%
		if(count == 0){
	%>
	<tbody>
     <tr>
      <td align="center"><h5>게시판에 저장된 글이 없습니다.</h5></td>
     </tr>
	</tbody>
	<%}else{ %>
	<tbody>
	     <tr>
	      <td align="center" style="width:50px;"><h5>번 호</h5></td>
	      <td align="center" style="width:250px;" width="250"><h5>제 목</h5></td>
  		  <td align="center" style="width:100px;" width="100"><h5>작성자</h5></td>
  		  <td align="center" style="width:150px;" width="150"><h5>작성일</h5></td>
  		  <td align="center" style="width:50px;" width="50"><h5>조회수</h5></td>
	     </tr>
	<%
		for(int i =0; i < articleList.size(); i++){
			BoardVO article = (BoardVO)articleList.get(i);
	%>
	<tr height="20">
      <td align="center" style="width:40px;"><h5><%=number--%></h5></td>
      <td width="200">
	 <!-- 5 -->
	 <%
	 	int wid=0;
	 	if(article.getDepth()>0){
	 		wid = 5 * (article.getDepth());
	 %>
		<img src="images/level.gif" width="<%=wid%>" height="16">
	 	<img src="images/re.gif">
	 <%}else{ %>
	 	<img src="images/level.gif" width="<%=wid%>" height="16">
	 <%} %>
	  <a href="content.jsp?num=<%=article.getNum()%>&pageNum=<%=currentPage%>">
	 <%=article.getSubject()%></a>
	 <%if(article.getReadcount()>=10){ %>
	 	<img src="images/hot.gif"  border="0" height="16"><%}%></td>
	 <td align="center" width="100">
	 	<a href="mailto:<h5><%=article.getEmail()%>"></h5><h5><%=article.getWriter() %></h5></a></td>
	 <td align="center" width="150"><h5><%= sdf.format(article.getRegdate())%></h5></td>
	 <td align="center" width="50"><h5><%=article.getReadcount() %></h5></td>
	</tr>
		<%}%>
</tbody>
<%}%>
<tfoot>
<%
	if(count > 0){%>
		<tr>
        <td colspan="5" align="center">
        <%
		int pageBlock = 3;
		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>
		<%} %>
		</td>
		</tr>
<%
	}
%>		
</tfoot>
</div>	      
</body>
</html>

 

구현이미지

728x90
반응형
LIST