본문 바로가기

JSP/기본다지기

[JSP] 페이징(Paging) ③ [11월28일]

앞서 만들어 본 쿼리문을

MemberDao.java의 selectAllMember() 메소드에

적용시켜 보겠습니다.


MemberDao.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
public List<Member> selectAllMember(int page){
        //1번 페이지 1~10
        //2번 페이지 11~20        
        int startNum = (page-1)*10+1;
        int endNum = page*10;
        String sql = "SELECT * FROM ("
                + "SELECT * FROM ("
                + "SELECT ROWNUM row_num, member2.* FROM member2"
                + ") WHERE row_num >= ?"
                + ") WHERE row_num <= ?";
        List<Member> list = new ArrayList<Member>();
        try{
            conn = DBManager.getConnection();
            pstmt = conn.prepareStatement(sql);
            pstmt.setInt(1, startNum);
            pstmt.setInt(2, endNum);
            rs = pstmt.executeQuery();
            while(rs.next()){
                Member vo = new Member();
                vo.setNum(rs.getInt("num"));
                vo.setId(rs.getString("id"));
                vo.setPwd(rs.getString("pwd"));
                vo.setName(rs.getString("name"));
                vo.setEmail(rs.getString("email"));
                vo.setPhone(rs.getString("phone"));
                vo.setIndate(rs.getString("indate"));
                vo.setAdmin(rs.getInt("admin"));
                list.add(vo);
            }
        }catch(SQLException e){
            e.printStackTrace();
        }finally{
            DBManager.Close(rs, stmt, conn);
        }
        return list;
    }
cs


우선, 메소드의 인자로

클라이언트가 요청한 페이지번호인 page를 받아야 합니다.

페이지에 따라 10개의 결과만 출력하는 쿼리문으로 바뀌었기 때문입니다.


그 다음 원래 형태에서 startNum과 endNum 변수를 추가해줍니다.


시작번호와 끝번호. 즉, beginPage와 endPage에 해당하는 변수입니다.


쿼리문은 이전에 만든 쿼리문으로 바꾸어 입력해주고


단순한 쿼리문에서 물음표(?)가 들어간 쿼리문으로 바뀌었으니


stmt가 아닌 pstmt를 사용해야 합니다.


첫 번째 물음표에는 startNum

두 번째 물음표에는 endNum

을 넣어주면 수정은 끝입니다.


이렇게 하면 DAO에서 페이징을 하기위한 준비가

모두 끝났습니다.


그러면 메소드를 호출하는 장소인 ListController를 수정해 보겠습니다.


MemberListController.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
package com.model2.controller;
 
import java.io.IOException;
import java.util.List;
 
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import com.model2.dao.MemberDao;
import com.model2.vo.Member;
import com.model2.vo.Paging;
 
@SuppressWarnings("serial")
@WebServlet("/memList.do")
public class MemberListController extends HttpServlet{
    protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
        MemberDao dao = MemberDao.getInstance();
        
        int page = 1;
        
        if(req.getParameter("page")!=null){
            page = Integer.parseInt(req.getParameter("page"));
        }
        Paging paging = new Paging();
        paging.setPage(page);
        paging.setTotalCount(351);
        
        List<Member> list = dao.selectAllMember(page);
        req.setAttribute("memList", list);
        req.setAttribute("paging", paging);
        
        RequestDispatcher dispatcher = req.getRequestDispatcher("./member/MemberList.jsp");
        dispatcher.forward(req, res);
    }
}
 
cs


23행

우선 가장 처음 게시판에 들어왔을 때

 1페이지를 보여줘야하기 때문에 1로 설정.


25~27행

클라이언트가 요청한 page 파라미터가 null값이 아니라면

page변수에 클라이언트가 요청한 파라미터 값을 지정하겠다.


28행

앞서 만들어 둔 paging.java의 객체를 생성해준다.


29행

paging.java의 page변수를

26행에서 받아온 파라미터 변수로 set 해주겠다.


30행

(나중에 추가해야 할 부분

여기서는 임의로 351이라고 주었다.)

전체 레코드의 갯수를 set해주는 부분.

paging.java의 setTotalCount 메소드를

다시 살펴보면 떠오르겠지만,

여기에서 우리가 만든 paging() 메소드를

호출하고 있기 때문에 나머지 변수는 

paging()메소드가 setting해준다.


34행

"paging"이라는 이름으로

paging객체의 파라미터값을 설정해주어

MemberList로 보내주기 위한 준비를 한다.



여기에서 MemberList.jsp로 가기 전에

먼저 paging.jsp를 살펴보도록 하겠다.


paging.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
    text-align:center;
}
#paging{
    font-size: 22pt;
}
</style>
</head>
<body>
<div id="paging">
<!-- 1~10까지 있는 페이지의 페이징 -->
<c:url var="action" value="/memList.do"/>
<c:if test="${param.prev}">
    <a href="${action}?page=${param.beginPage-1}">prev</a>
</c:if>
<c:forEach begin="${param.beginPage}" end="${param.endPage}" step="1" var="index">
    <c:choose>
        <c:when test="${param.page==index}">
            ${index}
        </c:when>
        <c:otherwise>
            <a href="${action}?page=${index}">${index}</a>
        </c:otherwise>
    </c:choose>
</c:forEach>
<c:if test="${param.next}">
    <a href="${action}?page=${param.endPage+1}">next</a>
</c:if>
</div>
</body>
</html>
cs


core태그를 배웠으니

어느정도 이해할 수 있을 것이라고 생각한다..


는 개뿔 설명하겠다.


여기에서 ${param.~~~}라고 된 부분은

MemberList.jsp에서 세팅해준 파라미터를 받아오겠다는 뜻이다.

(아직 세팅하지 않았으니 가벼운 마음으로 보면된다.)


우선 잊어버릴 뻔 한 그림을 다시 소환하겠다.

21행

/memList.do라는 url 경로를 action이라는 변수명으로 세팅한다



22~24행

prev라는 파라미터가 true라면

prev를 표시하겠다.

그리고 prev를 클릭하면


${action}?page=${param.beginPage-1}

(/memList.do?page=beginPage-1)와 같음 


로 이동시키겠다.



35~37행

next를 표시할지 말지.

next를 누르면 어디로 이동시킬지

로직은 prev와 같다.



25행~

beginPage에서부터 endPage까지 반복문을 돌며 표시하겠다.

위 그림 처럼 1~10까지 10번 반복문을 돌며 표시하는 부분.



27~29행

현재 보고 있는 페이지는

링크를 삭제하고 단순히 숫자만 표시하겠다.


(내가 지금 보고있는 페이지를 

굳이 또 눌러서 이동할 필요가 없기 때문)


위 그림은 1페이지를 보고 있을 때의 페이지 표시이며

1페이지의 링크가 삭제된것을 볼 수 있음.


30행~32행

현재 보고 있는 페이지가 아니면 링크를 살리겠다.



그럼 이제 MemberList.jsp의 변경된 부분을 살펴보겠다.


1
2
3
4
5
6
7
<jsp:include page="/paging/paging.jsp">
    <jsp:param value="${paging.page}" name="page"/>
    <jsp:param value="${paging.beginPage}" name="beginPage"/>
    <jsp:param value="${paging.endPage}" name="endPage"/>
    <jsp:param value="${paging.prev}" name="prev"/>
    <jsp:param value="${paging.next}" name="next"/>
</jsp:include>
cs


<table>태그가 끝나는 부분과

회원가입 사이에 위 코드를 추가해준다.


예전에 header와 footer 처럼

paging.jsp를 MemberList 페이지에 include해주는 것이다.


여기서 파라미터를 세팅해 줄 수가 있는데,

위의 컨트롤러에서 넘겨준

        req.setAttribute("paging", paging);

를 paging.jsp에도 넘겨주겠다는 의미이다.


value에 ${paging.page}

그리고 name은 page로 설정해 주면

${paging.page}에 들어있는 값을

paging.jsp에서 

${param.page}로 받을 수 있다.


이렇게 설정해줌으로써

각각의 파일들을 연결하여

페이징을 표시하는 대부분의 작업이

완료되었다.


단지 읽어보는 것으로 이해가 될 수가 없는

부분이기 때문에 나중에 꼭 직접 예제를

작성해 보면서 알아가기를 바란다..


11월 30일 수업에서는

MemberListController.java의 30번 행에 있는

setTotalCount()메소드에 인자로 전달해 줄 변수를 

MemberDao.java에 메소드를 추가하여

DB에서 가져와 넣어주는 부분을

추가해보도록 하겠다.


마지막으로 전체적인 페이지를

다시 보면서 글을 마무리하겠다..


1~10페이지 부분


11~20페이지 부분


31~ 마지막 페이지 부분!