2. Navbar 선택
3. Collapsing The Navigaion Bar 코드 긁어오기
4. Basic Template 선택
5. Footer 코드는 이곳에서 긁어오기
6. 폴더 구조를 이렇게 만들어 주고 Index.jsp 파일에 아까 Navbar에서 긁어온 코드를 복사한다.
7. 그리고 Index.jsp 내용 중 헤더에 해당하는 코드, 푸터에 해당하는 코드를 분리해서 footer.jsp, header.jsp를 생성한다.
- footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<br />
<div class="jumbotron text-center" style="margin-bottom: 0">
<p>🤍Created by archive</p>
<p>☎010-1234-5678</p>
<p>인천광역시</p>
</div>
</body>
</html>- header.jsp
<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">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.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>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="/blog/">홈</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 />
</body>
</html>- Index.jsp : 분리한 헤더, 푸터를 include 해준다.
<%@ 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">
<div class="card-body">
<h4 class="card-title">제목 적는 부분</h4>
<a href="#" class="btn btn-primary">상세 보기</a>
</div>
</div>
<div class="card m-2">
<div class="card-body">
<h4 class="card-title">제목 적는 부분</h4>
<a href="#" class="btn btn-primary">상세 보기</a>
</div>
</div>
<div class="card m-2">
<div class="card-body">
<h4 class="card-title">제목 적는 부분</h4>
<a href="#" class="btn btn-primary">상세 보기</a>
</div>
</div>
</div>
<%@include file="layout/footer.jsp"%>
8. 완성된 화면
9. 로그인폼, 회원가입 폼은 부트스트랩 Form 선택해서 긁어온다.
10. 맨 위에 있는 이 친구를 데려오면 된다!
- 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>
<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">
<label for="email">Email: </label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
</div>
<button id="btn-save" class="btn btn-primary">회원가입완료</button>
</form>
</div>
<script src="/blog/js/user.js"></script>
<%@include file="../layout/footer.jsp"%>
11. 마지막으로 로그인, 회원가입을 클릭했을 때 각각 폼 화면으로 이동할 수 있도록 컨트롤러 코드를 작성해 준다.
@Controller
public class UserController {
@GetMapping("/user/joinForm")
public String joinForm() {
return "user/joinForm";
}
@GetMapping("/user/loginForm")
public String loginForm() {
return "user/loginForm";
}
}'Springboot > Springboot Blog Project' 카테고리의 다른 글
| Ajax를 사용하는 이유 - 메타코딩 유튜브 요약 (0) | 2022.09.24 |
|---|---|
| ajax 통신, 회원가입 구현하기 (0) | 2022.09.24 |
| Springboot 동작원리! (0) | 2022.09.24 |
| Json 데이터 통신하기 (0) | 2022.09.24 |
| [스프링부트 블로그 만들기] 테이블 생성하고 CRUD 테스트 하기 (0) | 2022.09.21 |
