[Java] SpringBoot 프로젝트 : 리스트 페이징 처리(1) - 페이징 화면에 보여주기

목적

• 게시판 형식 웹사이트 개발 시 DB에서 글 리스트 불러오기 기능 구현
• 리스트 게시판 페이징 처리 받은 코드 리뷰

 

어떤 프로젝트를 진행하든 게시판 형태를 기반으로 하는 웹페이지가 대부분이다.

 

가장 기본적인 게시판 CRUD 중 read에 해당하는 코드들을 정리하고, DB에서 읽어온 데이터들을 페이징 처리하는 과정까지 알아보자.

 

마이페이지 개발 당시 회원이 이용권을 결제하면 일정 비율을 포인트로 전환해 사용할 수 있게 했다.

 

마이페이지 내에서 결제 내역과 적립 포인트 내역을 확인할 수 있는 페이지를 예로 처리과정을 알아보자.

 

[데이터 흐름도]

데이터 흐름도는 다음과 같다.

 

게시판 리스트 데이터 흐름도

 

설명하자면,

 

1. jsp에서 페이징 버튼이 클릭되면, 클릭된 페이지와 검색필드가 GET방식으로 컨트롤러에 전달된다.
2. 컨트롤러는 전달받은 검색필드와 로그인한 회원 번호를 DB에 전달하여 해당 회원번호로 등록된 전체 리스트 개수를 반환한다.
3. 컨트롤러는 PagingUtil 클래스에 검색필드, 요청된 페이지, 전체 리스트 개수, 한 페이지에서 보여줄 게시물 수, 한 페이지에서 보여줄 페이지(번호) 수, 번호 클릭 시 호출될 url주소를 전달한다.
4. PagingUtil 클래스는 전달받은 데이터를 처리하고 해당 페이지의 첫 번호, 마지막 번호, jsp에 보낼 HTML코드를 가지고 있는다.
5. 컨트롤러는 요청 받은 페이지의 첫 번호, 마지막 번호, 검색필드를 다시 DB에 전달하고 DB는 전달 받은 값들에 해당하는 글 리스트를 반환한다.
6. 마지막으로 컨트롤러는 모델에 총 글 개수, DB에서 전달받은 리스트, 페이징 번호 관련 HTML코드를 담고 jsp를 리턴한다.

 

먼저 전체적인 흐름을 정리하고, 페이징 처리를 담당하는 PagingUtil 클래스 내 코드를 보겠다.

 

[JSP]

 

마이페이지 포인트 페이지UI

포인트 페이지 태그

 

포인트 페이지에 접근할 수 있는 UI와 태그는 위와 같다.

 

클릭 시 pointList.do가 호출되도록 했다.

 

페이지 내부 코드를 보자.

<c:if test="${count > 0}">
    <div class = 'align-selectbox'>
        <select name="keyfield" id="keyfield">
            <option value = "1"<c:if test="${param.keyfield == 1}">selected</c:if>>전체내역</option>
            <option value = "2" <c:if test="${param.keyfield == 2}">selected</c:if>>적립내역</option>
            <option value = "3" <c:if test="${param.keyfield == 3}">selected</c:if>>사용내역</option>
        </select>
        <script type="text/javascript">
            $('#keyfield').change(function(){
                location.href = "/mypage/pointList.do?keyfield=" + $(this).val();
            });
        </script>
    </div>
</c:if>

먼저 JSTL 조건문 태그를 사용해 jsp에 전달된 count라는 변수의 값이 0 이상인지 확인했다.

 

만약 컨트롤러에서 전달한 count 값이 1 이상이면 해당 회원의 결제 내역이 있는 것이고, 내역을 필더링해서 볼 수 있게 select option을 이용해 필드를 선택하도록 했다(기본: 전체내역).

 

만약 회원이 적립내역 또는 사용내역만 확인하고 싶을 경우 option값을 변경하게 되는데, 변경할 경우 keyfield 값을 url에 붙여 컨트롤러를 호출했다. 이 과정도 나중에 다룰 것이니 우선 넘어가겠다.

 

아래는 마찬가지로 count 변수가 0 이상일 경우 리스트를 표시하는 부분이다.

<c:if test="${count > 0 }">
    <table class = "point-table">
        <tr>
            <th>날짜</th>
            <th>결제내역</th>
            <th>결제방식</th>
            <th>결제금액</th>
            <th>포인트</th>
        </tr>
        <c:forEach var = "point" items = "${list}">
        <tr>
            <td>${point.pay_date}</td>
            <td>${point.pay_content}</td>
            <td>
            <c:if test="${point.pay_plan == 1 && point.point_point > 0}">
            <span>카카오페이</span>
            </c:if>
            <c:if test="${point.pay_plan == 1 && point.point_point < 0}">
            <span>카카오페이 + 포인트</span>
            </c:if>
            <c:if test="${point.pay_plan == 2 && point.point_point > 0}">
            <span>카드결제</span>
            </c:if>
            <c:if test="${point.pay_plan == 2 && point.point_point < 0}">
            <span>카드결제 + 포인트</span>
            </c:if>
            </td>
            <td><fmt:formatNumber value = "${point.pay_price}"/>원</td>
            <td>
            <c:if test="${point.point_point > 0}">
                <span style = "color : rgba(0,102,51, 1.0); font-weight : bold;">+<fmt:formatNumber value = "${point.point_point}"/></span>
            </c:if>
            <c:if test="${point.point_point < 0}">
                <span style = "color : rgba(200,0,0, 1.0); font-weight : bold;"><fmt:formatNumber value = "${point.point_point}"/></span>
            </c:if>	
            </td>
        </tr>
        </c:forEach>
    </table>
    <div class = "page-button">
    	${page }
    </div>	
</c:if>

여기서는 JSTL의 foreach 태그를 이용해 컨트롤러에서 전달받은 list의 데이터를 하나씩 꺼내 페이지에 표시하도록 했다.

 

변수들을 간단히 보면 다음과 같다.

 

• pay_data: 결제일
• pay_content: 구매 상품
• pay_plan: 카카오페이 결제 or 카드결제
• point_point: 사용 또는 적립 포인트
• pay_price: 결제 금액

 

마지막엔 컨트롤러에서 전달 받은 page처리 HTML코드를 넣어 페이지 번호가 표시되도록 했다.

 

화면은 다음과 같다.

 

포인트 리스트 화면

 

page라는 변수만 할당했는데 어떻게 저렇게 페이지 번호가 표시되는지는 나중에 PagingUtil 클래스를 정리하며 다루겠다.

 

태그만 잠시 보자면 이렇다.

 

페이징처리 태그

 

HTML코드를 java단에서 작성 후 스트링버퍼에 저장하고, 해당 버퍼를 리턴해서 태그들이 그대로 담겨 나오게 한 것이다.

 

해당 버튼을 클릭하면 컨트롤러에 pageNum=2, keyfield=1이라는 값이 전달되고 해당 값들에 맞는 리스트가 리턴되어 두 번째 페이지가 보이는 방식이다.

 

먼저 jsp에서 컨트롤러에 어떻게 요청을 보내는지, 전달 받은 데이터는 어떻게 화면에 표시하는지 간단히 살펴봤다.

 

다음 글에서는 값을 전달받은 컨트롤러가 DB에 데이터를 넘겨주고 DB에 저장된 값을 꺼내오는 과정을 정리해보겠다.