bank app - 화면 구현(2) :: 민우의 개발블로그

bank app - 화면 구현(2)

섹시꽃남민우 2023. 4. 17. 17:51

2023. 4. 17. 17:51

1. UserController 생성 
2. 회원 가입, 로그인 화면 구현하기 
3. AccountController 생성 
4. 계좌목록,출금,입금,계좌생성,계좌상세보기 페지이 만들기

UserController 파일 생성

package com.tenco.bank.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import com.tenco.bank.dto.SignInFormDto;
import com.tenco.bank.dto.SignUpFormDto;

@Controller
@RequestMapping("/user")
public class UserController {
	
	// http://localhost:8080/user/sign-up
	@GetMapping("/sign-up")
	public String signUp() {
		// prefix 
		// subfix 
		return "/user/signUp";
	}
	

	/**
	 * 회원 가입 처리 
	 * @param signUpFormDto
	 * @return 리다이렉트 로그인 페이지
	 */
	@PostMapping("/sign-up")
	public String signUpProc(SignUpFormDto signUpFormDto) {
		
		return "redirect:/user/sign-in";
	}
	
	/**
	 * 로그인 폼
	 * @return 로그인 페이지 
	 */
	@GetMapping("/sign-in")
	public String signIn() {
		
		return "/user/signIn";
	}
	
	/**
	 * 로그인 처리 
	 * @param signInFormDto
	 * @return 메인 페이지 이동 (수정 예정)
	 */
	@PostMapping("/sign-in")
	public String signInProc(SignInFormDto signInFormDto) {
		
		// todo 변경 예정 
		return "/test/main";
	}
	

}

회원 가입 화면 구현 (signUp.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/layout/header.jsp"%>

<!-- todo main 영역으로 지정 예정  -->
<div class="col-sm-8">
	<h2>회원 가입</h2>
	<h5>어서오세요 환영합니다</h5>
	<div class="bg-light p-md-5 h-75">
		<form action="/user/sign-up" method="post">
			<div class="form-group">
				<label for="username">User name:</label>
				<input type="text" class="form-control" placeholder="Enter username" id="username" name="username">
			</div>
			<div class="form-group">
				<label for="password">Password:</label>
				<input type="password" class="form-control" placeholder="Enter password" id="password" name="password">
			</div>
			<div class="form-group">
				<label for="fullname">Fullname:</label>
				<input type="text" class="form-control" placeholder="Enter fullname" id="fullname" name="fullname">
			</div>
			<button type="submit" class="btn btn-primary">Submit</button>
		</form>
	</div>
	<br>
</div>

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

로그인 화면 구현 처리 (signIn.jsp )

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/layout/header.jsp"%>

<div class="col-sm-8">
	<h2>로그인 </h2>
	<h5>어서오세요 환영합니다</h5>
	<div class="bg-light p-md-5 h-75">
		<form action="/user/sign-in" method="post">
			<div class="form-group">
				<label for="username">User name:</label>
				<input type="text" class="form-control" placeholder="Enter username" id="username" name="username">
			</div>
			<div class="form-group">
				<label for="password">Password:</label>
				<input type="password" class="form-control" placeholder="Enter password" id="password" name="password">
			</div>
			<button type="submit" class="btn btn-primary">Submit</button>
		</form>
	</div>
	<br>
</div>

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

AccountController 파일 생성

package com.tenco.bank.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/account")
public class AccountController {

	/**
	 * 계좌 목록 페이지 
	 * @return 목록 페이지 이동
	 */
	@GetMapping({"/list", "/"})
	public String list() {
		return "/account/list";
	}
	
	// 출금 페이지 
	@GetMapping("/withdraw")
	public String withdraw() {
		return "/account/withdrawForm";
	}
	
	
	// 입금 페이지
	@GetMapping("/deposit")
	public String deposit() {
		return "/account/depositForm";
	}
	
	// 이체 페이지 
	@GetMapping("/transfer")
	public String transfer() {
		return "/account/transferForm";
	}
	
	// 계좌 생성 페이지 
	@GetMapping("/save")
	public String save() {
		return "/account/saveForm";
	}
	
	// 계좌 상세 보기 페이지 
	@GetMapping("/detail")
	public String detail() {
		return "";
	}
	
	
}

계좌 목록 페이지 구성 (list.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/layout/header.jsp"%>

<div class="col-sm-8">
	<h2>나의 계좌 목록 </h2>
	<h5>어서오세요 환영합니다</h5>
	<div class="bg-light p-md-5 h-75">
		<table class="table">
			<thead>
				<tr>
					<th>계좌 번호</th>
					<th>잔액</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1111</td>
					<td>500원</td>
				</tr>
				<tr>
					<td>2222</td>
					<td>200원</td>
				</tr>
			</tbody>
		</table>
	</div>
	<br>
</div>

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

출금 계좌 화면 구현 (withdraw.jsp)

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

<%@ include file="/WEB-INF/view/layout/header.jsp"%>
<!-- todo main 영역으로 지정 예정 -->
<div class="col-sm-8">
	<h2>출금 페이지(인증)</h2>
	<h5>어서오세요 환영합니다.</h5>
	<div class="bg-light p-md-5 h-75">
		<form action="#" method="post">
			<div class="form-group">
				<label for="amount">출금 금액:</label> 
				<input type="text" class="form-control" placeholder="출금 금액을 입력하시오" id="amount" name="amount">
			</div>
			<div class="form-group">
				<label for="wAccountNumber">출금 계좌 번호:</label> 
				<input type="text" class="form-control" placeholder="출금 계좌번호" id="wAccountNumber" name="wAccountNumber">
			</div>				
			<div class="form-group">
				<label for="wAccountPassword">출금 계좌 비밀번호:</label> 
				<input type="password" class="form-control" placeholder="출금 계좌비밀번호" id="wAccountPassword" name="wAccountPassword">
			</div>				
			<button type="submit" class="btn btn-primary">출금</button>
		</form>
	</div>
	<br>
	<br>
</div>

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

입금 계좌 화면 구성(depositForm.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/layout/header.jsp"%>

<div class="col-sm-8">
	<h2>계좌 생성 페이지(인증)</h2>
	<h5>어서오세요 환영합니다</h5>
		<div class="bg-light p-md-5 h-75">
		<form action="#" method="post">
			<div class="form-group">
				<label for="number">계좌 번호:</label>
				<input type="text" class="form-control" placeholder="생성 계좌 번호 입력" id="number" name="number">
			</div>
			<div class="form-group">
				<label for="password">계좌 비밀번호:</label>
				<input type="password" class="form-control" placeholder="계좌 비밀번호 입력" id="password" name="password">
			</div>
			<div class="form-group">
				<label for="balance">입금 금액:</label>
				<input type="text" class="form-control" placeholder="출금계좌비밀번호" id="balance" name="balance">
			</div>
			
			<button type="submit" class="btn btn-primary">계좌 생성</button>
		</form>
	</div>
	<br>
</div>

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

이체 계좌 화면 구성 (transferForm.jsp )

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

<%@ include file="/WEB-INF/view/layout/header.jsp"%>
<!-- todo main 영역으로 지정 예정 -->
<div class="col-sm-8">
	<h2>이체 페이지(인증)</h2>
	<h5>어서오세요 환영합니다.</h5>
	<div class="bg-light p-md-5 h-75">
		<form action="#" method="post">
			<div class="form-group">
				<label for="amount">이체 금액:</label> 
				<input type="text" class="form-control" placeholder="이체 금액을 입력하시오" id="amount" name="amount">
			</div>
			<div class="form-group">
				<label for="wAccountNumber">출금 계좌 번호:</label> 
				<input type="text" class="form-control" placeholder="출금 계좌번호" id="wAccountNumber" name="wAccountNumber">
			</div>				
			<div class="form-group">
				<label for="dAccountNumber">이체할 계좌 번호:</label> 
				<input type="text" class="form-control" placeholder="이체 계좌번호" id="dAccountNumber" name="dAccountNumber">
			</div>				
			<div class="form-group">
				<label for="wAccountPassword">출금 계좌 비밀번호:</label> 
				<input type="password" class="form-control" placeholder="출금 계좌비밀번호" id="wAccountPassword" name="wAccountPassword">
			</div>				
			<button type="submit" class="btn btn-primary">이체</button>
		</form>
	</div>
	<br>
	<br>
</div>

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

계좌 생성(saveForm.jsp)

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

<%@ include file="/WEB-INF/view/layout/header.jsp"%>
<!-- todo main 영역으로 지정 예정 -->
<div class="col-sm-8">
	<h2>계좌 생성 페이지(인증)</h2>
	<h5>어서오세요 환영합니다.</h5>
	<div class="bg-light p-md-5 h-75">
		<form action="#" method="post">
			<div class="form-group">
				<label for="number">계좌 번호:</label> 
				<input type="text" class="form-control" placeholder="생성할 계좌 번호 입력" id="number" name="number">
			</div>
			<div class="form-group">
				<label for="password">계좌 비밀번호:</label> 
				<input type="password" class="form-control" placeholder="계좌 비밀번호 입력" id="password" name="password">
			</div>				
			<div class="form-group">
				<label for="balance">입금 금액:</label> 
				<input type="text" class="form-control" placeholder="입금 금액" id="balance" name="balance">
			</div>				
			<button type="submit" class="btn btn-primary">계좌 생성</button>
		</form>
	</div>
	<br>
	<br>
</div>

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

header.jsp 주소 연결

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html lang="en">
<head>
<title>My Bank</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="/css/styles.css">
<style>

</style>
</head>
<body>

	<div class="jumbotron text-center banner--img" style="margin-bottom: 0">
		<h1 class="m--title">My Bank</h1>
		<img alt="sample" src="https://picsum.photos/300/200">
	</div>

	<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
		<a class="navbar-brand" href="#">MENU</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse"
			data-target="#collapsibleNavbar">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="collapsibleNavbar">
			<ul class="navbar-nav">
				<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
				<li class="nav-item"><a class="nav-link" href="/user/sign-in">로그인</a></li>
				<li class="nav-item"><a class="nav-link" href="/user/sign-up">회원가입</a></li>
			</ul>
		</div>
	</nav>

	<div class="container" style="margin-top: 30px">
		<div class="row">
			<div class="col-sm-4">
				<h2>About Me</h2>
				<h5>Photo of me:</h5>
				<div class="m--profile"></div>
				<p style="padding: 8px 0">자라나는 코린이에 은행 관리 시스템 입니다</p>
				<h3>Some Links</h3>
				<p>Lorem ipsum dolor sit ame.</p>
				<ul class="nav nav-pills flex-column">
					<li class="nav-item"><a class="nav-link" href="/account/save">계좌생성</a></li>
					<li class="nav-item"><a class="nav-link"  href="/account/list">계좌목록</a></li>
					<li class="nav-item"><a class="nav-link" href="/account/withdraw">출금</a></li>
					<li class="nav-item"><a class="nav-link" href="/account/deposit">입금</a></li>
					<li class="nav-item"><a class="nav-link" href="/account/transfer">이체</a></li>
					<li class="nav-item"><a class="nav-link disabled" href="#">My Info</a>
					</li>
				</ul>
				<hr class="d-sm-none">
			</div>

'Spring boot > spring boot 앱 만들어 보기 2 단원' 카테고리의 다른 글

bank app - 회원가입(트랜잭션처리) (0)	2023.04.19
bank app - Exception Handler (0)	2023.04.18
bank app 화면 구현(1) (0)	2023.04.17
bank app MyBatis 설정 (0)	2023.04.17
bank app - h2 db 초기 값 설정 (0)	2023.04.17

민우의 개발블로그

bank app - 화면 구현(2)

'Spring boot > spring boot 앱 만들어 보기 2 단원' 카테고리의 다른 글

+ Recent posts

티스토리툴바