Bank App 만들기 ( deployment ) - 계좌 상세보기 페이징 처리

 

 

사전 기반 지식

 

부트스트랩의 그리드 시스템

• 개념 : 부트스트랩은 화면을 12개의 컬럼으로 나누어 레이아웃을 구성할 수 있도록 돕는 그리드 시스템을 제공한다. col-sm-8은 작은 화면에서 8개의 컬럼을 차지하는 레이아웃을 의미한다.
• 사용방법 : col-sm-8, col-md-6 등의 클래스를 사용해 반응형 레이아웃을 쉽게 구성할 수 있다.
• 예제 : col-sm-8은 12개의 그리드 중 8개를 차지하며, 이는 전체 화면의 약 66.67% 이다.

플렉스박스 (Flexbox)와 중앙정렬

• 개념 : 플렉스박스는 CSS의 레이아웃 모델로, 요소를 쉽게 정렬하고 배치하는데 사용된다. 부트스트랩의 d-flex와 justify-content-center 는 플렉스박스를 활용해 자식 요소를 수평 중앙에 정렬하는데 사용된다.
• 사용방법 : d-flex를 부모 요소에 적용하고, justify-content-center를 추가하여 자식 요소를 중앙에 배치한다.

페이징 (Pagination) 구현

• 개념 : 페이징은 많은 양의 데이터를 여러 페이지로 나누어 보여주는 기법이다. 사용자가 한 페이지에 표시할 데이터의 수를 지정하고, 나머지 데이터는 다음 페이지로 넘긴다.
• 사용방법 : 현재 페이지 번호(currentPage)와 전체 페이지 수(totalPages)를 기반으로 페이징 링크를 생성한다. 부트스트랩의 pagination 클래스를 사용해 시작적으로 구성한다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!-- header.jsp  -->
<%@ include file="/WEB-INF/view/layout/header.jsp"%>

<!-- start of content.jsp(xxx.jsp)   -->
<div class="col-sm-8">
	<h2>계좌 상세 보기(인증)</h2>
	<h5>Bank App에 오신걸 환영합니다</h5>
	
	<div class="bg-light p-md-5">
		<div class="user--box">
			${principal.username}님 계좌<br> 계좌번호 : ${account.number}<br> 잔액 : ${account.formatKoreanWon(account.balance)} 
		</div>
		<br>
		<div>
			<a href="/account/detail/${account.id}?type=all" class="btn btn-outline-primary" >전체</a>&nbsp;
			<a href="/account/detail/${account.id}?type=deposit" class="btn btn-outline-primary" >입금</a>&nbsp;
			<a href="/account/detail/${account.id}?type=withdrawal" class="btn btn-outline-primary" >출금</a>&nbsp;
		</div>
		<br>
		<table class="table table-striped">
			<thead>
				<tr>
					<th>날짜</th>
					<th>보낸이</th>
					<th>받은이</th>
					<th>입출금 금액</th>
					<th>계좌잔액</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach var="historyAccount" items="${historyList}">
				<tr>
					<th>${historyAccount.timestampToString(historyAccount.createdAt)}</th>
					<th>${historyAccount.sender}</th>
					<th>${historyAccount.receiver}</th>
					<th>${historyAccount.formatKoreanWon(historyAccount.amount)}</th>
					<th>${historyAccount.formatKoreanWon(historyAccount.balance)}</th>
				</tr>
				
				</c:forEach>
			</tbody>
		</table>
		<br>
		<!-- Pagination -->
		<div class="d-flex justify-content-center" >
			<ul class="pagination">
				<!-- Previous Page Link -->
				<li class="page-item  <c:if test='${currentPage == 1}'>disabled</c:if>">
					<a class="page-link" href="?type=${type}&page=${currentPage - 1}&size=${size}" >Previous</a>
				</li>
				
				<!-- Page Numbers -->
				<!-- [Previous]  1 2 3 4 5 6 7 8   [Next] -->
				<c:forEach begin="1" end="${totalPages}"  var="page" >
				<li class="page-item  <c:if test='${page == currentPage}'>active </c:if>">
					<a class="page-link"  href="?type=${type}&page=${page}&size=${size}" >${page}</a>
				</li>
				</c:forEach>
				
				<!-- Next Page Link  -->	
				<li class="page-item <c:if test='${currentPage == totalPages}'>disabled</c:if>" >
					<a class="page-link" href="?type=${type}&page=${currentPage + 1}&size=${size}" >Next</a>
				</li>
			</ul>
			
		</div>
	</div>
	
</div>
<!-- end of col-sm-8  -->
</div>
</div>
<!-- end of content.jsp(xxx.jsp)   -->

<!-- footer.jsp  -->
<%@ include file="/WEB-INF/view/layout/footer.jsp"%>

 

 

 

 

history.xml - 쿼리 수정 및 추가

<select id="findByAccountIdAndTypeOfHistory" resultType="com.tenco.bank.repository.model.HistoryAccount">
		<if test="type == 'all'">
			select h.id, h.amount,
				case
					when h.w_account_id = #{accountId} then (h.w_balance) 
			        when h.d_account_id = #{accountId} then (h.d_balance)
			    end  as balance,
			    coalesce(cast(wa.number as char(10)), 'ATM') as sender, 
			    coalesce(cast(da.number as char(10)), 'ATM') as receiver,
			    h.created_at
			from history_tb as h 
			left join account_tb as wa on h.w_account_id = wa.id
			left join account_tb as da on h.d_account_id = da.id  
			where h.w_account_id = #{accountId} OR h.d_account_id = #{accountId}
			limit #{limit} offset #{offset}
		</if>
		<if test="type == 'deposit'">
			select h.id, h.amount, h.d_balance as balance, h.created_at, 
				coalesce(CAST(wa.number as CHAR(10)) , 'ATM') as sender, 
			    da.number as receiver
			from history_tb as h 
			left join account_tb as wa on wa.id = h.w_account_id
			left join account_tb as da on da.id = h.d_account_id 
			where h.d_account_id = #{accountId}
			limit #{limit} offset #{offset}
		</if>
		
		<if test="type == 'withdrawal'">
			select h.id, h.amount, h.w_balance AS balance, h.created_at, 
				   coalesce(cast(da.number as CHAR(10)), 'ATM')  as receiver, 
			       wa.number as sender 
			from history_tb as h 
			left join account_tb as wa on wa.id = h.w_account_id
			left join account_tb as da on da.id = h.d_account_id 
			where h.w_account_id = #{accountId}
			limit #{limit} offset #{offset}
		</if>
	</select>
	
	
	<select id="countByAccountIdAndType" resultType="int">
		<if test="type == 'all'">
			select count(*)
			from history_tb as h 
			where h.w_account_id = #{accountId} OR h.d_account_id = #{accountId}
		</if>
		<if test="type == 'deposit'">
			select count(*)
			from history_tb as h 
			where h.d_account_id = #{accountId}
		</if>
		
		<if test="type == 'withdrawal'">
			select count(*)
			from history_tb as h 
			where h.w_account_id = #{accountId}
		</if>
	</select>