티스토리 뷰

JavaProject/Spring Boot

Spring Boot(로그인, 회원가입 페이지 생성, footer/header)

devel0per 2022. 9. 14. 15:07

우리 블로그의 홈화면과 로그인, 회원가입 페이지를 만들어보도록 하겠습니다.

# 1

기본적으로 http://localhost:8080/blog 로 접속했을 때 우리의 home 화면을 보여줘야 하므로, 컨트롤러를 하나 생성하도록 하겠다.

BoradController.java 클래스를 생성하고 return 값으로 "index"를 주면 yml의 설정때문에 /WEB-INF/views/index.jsp를 서칭하게 되므로 views 밑에 index.jsp를 만들어둔 후 index.jsp에 기본적인 세팅을 해주면 된다. 부트스트랩을 활용하여 적당한 템플릿을 가져와 줍니다. (footer와 header 파일은 따로 생성했습니다)

 

BoardController.java

@Controller
public class BoardController {
	
	@GetMapping({"","/"})
	public String index() {
		// WEB-INF/views/index.jsp
		return "index";
	}
}

/WEB-INF/views/index.jsp

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

<%@ include file="layout/header.jsp" %>

<div class="container">

	<div class="card m-2">
		<img class="card-img-top">
		<div class="card-body">
			<h4 class="card-title">제목 적는 부분</h4>
			<p class="card-text">내용 적는 부분</p>
			<a href="#" class="btn btn-primary">상세보기</a>
		</div>
	</div>

</div>

<%@ include file="layout/footer.jsp" %>

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<br />
<div class="jumbotron text-center" style="margin-bottom: 0">
	<p>&#9997; Created by DEV</p>
	<p>&#128140; 010-2278-2357</p>
	<p>&#128168; 용인 기흥구 영덕동</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/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.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Blog</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.1/dist/css/bootstrap.min.css">
</head>
<body>

	<nav class="navbar navbar-expand-md bg-dark navbar-dark">
		<a class="navbar-brand" href="/blog">DEV</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="/blog/user/loginForm">로그인</a></li>
				<li class="nav-item"><a class="nav-link" href="/blog/user/joinForm">회원가입</a></li>
			</ul>
		</div>
	</nav>
	<br>

홈페이지(http://localhost:8080/blog)

# 2

홈 화면은 구성했으니 로그인 페이지와 회원가입 페이지를 구현해야겠습니다.

그러기 위해서는 HEADER에 존재하는 로그인, 회원가입 버튼을 누르면 각 폼으로 이동할 수 있는 컨트롤러를 먼저 만들어야겠죠?

controller 패키지속에 UserController를 생성하고 각각 폼으로 이동할 수 있게 return 해줍니다.

# (Header.jsp 파일을 보시면 로그인 태그에 href="/blog/user/loginform  회원가입 태그에 href="/blog/user/joinform으로 이동하게 만들어 놨습니다.)

로그인 폼에서도 회원가입 폼에서도 header와 footer는 존재해야된다는점 명심해주세요~~

 

loginForm.jsp

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

<%@ include file="../layout/header.jsp"%>

<div class="container">
	<form action="/action_page.php">
		<div class="form-group">
			<label for="username">Username</label> <input type="text" class="form-control" placeholder="Enter Username" id="username">
		</div>



		<div class="form-group">
			<label for="password">Password</label> <input type="password" class="form-control" placeholder="Enter password" id="password">
		</div>
		<div class="form-group form-check">

			<label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me
			</label>
		</div>
		<button type="submit" class="btn btn-primary">로그인</button>
	</form>
</div>

<%@ include file="../layout/footer.jsp"%>

joinForm.jsp

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

<%@ include file="../layout/header.jsp"%>

<div class="container">
	<form action="/action_page.php">
		<div class="form-group">
			<label for="username">Username</label> <input type="text" class="form-control" placeholder="Enter Username" id="username">
		</div>
		
		<div class="form-group">
			<label for="email">Email</label> <input type="email" class="form-control" placeholder="Enter email" id="email">
		</div>
		
		
		<div class="form-group">
			<label for="password">Password</label> <input type="password" class="form-control" placeholder="Enter password" id="password">
		</div>
		<button type="submit" class="btn btn-primary">회원가입완료</button>
	</form>
</div>

<%@ include file="../layout/footer.jsp"%>

로그인화면(localhost:8080/blog/user/loginForm)

로그인 화면

회원가입화면(localhost:8080/blog/user/joinForm)

회원가입 화면

 

'JavaProject > Spring Boot' 카테고리의 다른 글

Spring Boot(전통적인 로그인 구현)  (0) 2022.09.18
Spring Boot(회원가입을 위한 기초 세팅)  (0) 2022.09.18
Spring Boot(JPA 영속성 컨텍스트, 더티 체킹, Update)  (0) 2022.09.12
Spring Boot(data select, paging 해보기)  (1) 2022.09.10
Spring Boot(JPA dummy 데이터로 insert 테스트하기)  (0) 2022.09.09
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
링크