[Springboot] 22. 계좌 상세 보기 기능(2단계-화면 생성)

[Springboot] 22. 계좌 상세 보기 기능(2단계-화면 생성)

 

*[계좌 상세 보기] 기능은 [계좌 목록] 밑에 들어가는 기능이다.

 

 

1. list.jsp

-리스트 항목별 주소를 달기 위해 @PathVariable 방식을 사용한다.

-@PathVariable로 넘겨줄 항목은 account-id (통장 계좌의 primary key)

<%@ 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">
			길동님 계좌 <br> 계좌 번호 : xxxxxx <br> 잔액 : xxxxx 원
		</div>
		<br>
		
		<table class="table table-striped">
			<thead>
				<tr>
					<th>날짜</th>
					<th>보낸 이</th> <%--sender --%>
					<th>받은 이</th> <%--receiver --%>
					<th>입출금 금액</th> <%--amount --%>
					<th>계좌 잔액</th> <%--balance --%>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>yyyy-mm-dd 11:20:11</th> <%--연-월-일 시:분:초 --%>
					<th>ATM</th> <%--보낸 이 --%>
					<th>1111</th> <%--받은 이 --%>
					<th>10,000</th> <%--입출금 금액 --%>
					<th>5,000,000</th> <%--현재 계좌 잔액 --%>
				</tr>
			</tbody>
		</table>
		
	</div>
	
</div>
<!-- end of col-sm-8  -->
</div>
</div>

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

 

 

2. AccountController.jsp -> detail() 

***@Requestparam, @PathVariable을 사용할 때는 꼭 name 속성을 명시해주어야 한다.

***만약 required 속성이 false라면, name을 명시하지 않아도 오류가 나지 않는다. (required 속성에서 미리 필터링된다...)

	/**
	 * 계좌 상세 보기 페이지
	 * 주소 설계 : http://localhost:800/account/detail/${1}?type=all, deposit, withdraw
	 * @return
	 */
	@GetMapping("/detail/{accountId}")
	public String detail(@PathVariable(name="accountId") Integer accountId, @RequestParam(required=false, name="type") String type) {
		
		// 인증 검사 추후 추가
		
		System.out.println("@PathVariable : "+accountId); 
		System.out.println("@@RequestParam : "+type); 
		return "account/detail";
	}

 

 

3. 타입별 입출금 내역 보기(입출금/입금/출금)

 

(1) detail.jsp

<%@ 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">
			길동님 계좌 <br> 계좌 번호 : xxxxxx <br> 잔액 : xxxxx 원
		</div>
		<br>
		
		<div>
			<a href="/account/detail/1?type=all>" class="btn btn-outline-primary">전체</a>&nbsp;
			<a href="/account/detail/1?type=deposit>" class="btn btn-outline-primary">입금</a>&nbsp;
			<a href="/account/detail/1?type=withdraw>" class="btn btn-outline-primary">출금</a>&nbsp;
		</div>
		
		<table class="table table-striped">
			<thead>
				<tr>
					<th>날짜</th>
					<th>보낸 이</th> <%--sender --%>
					<th>받은 이</th> <%--receiver --%>
					<th>입출금 금액</th> <%--amount --%>
					<th>계좌 잔액</th> <%--balance --%>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>yyyy-mm-dd 11:20:11</th> <%--연-월-일 시:분:초 --%>
					<th>ATM</th> <%--보낸 이 --%>
					<th>1111</th> <%--받은 이 --%>
					<th>10,000</th> <%--입출금 금액 --%>
					<th>5,000,000</th> <%--현재 계좌 잔액 --%>
				</tr>
			</tbody>
		</table>
		
	</div>
	
</div>
<!-- end of col-sm-8  -->
</div>
</div>

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