이번 게시글에서는 로그인과 회원가입을 위한 화면을 구현하도록 하겠습니다.
이전에 사용하던 UserController를 이와 같이 변경시킵니다.
[UserController]
@Controller
public class UserController {
@Autowired
private UserRepository userRepository;
@GetMapping("/user/joinForm")
public String join() {
return "user/joinForm";
}
@GetMapping("/user/loginForm")
public String login() {
return "user/loginForm";
}
}
@Controller 어노테이션으로 변경 후 웹 페이지를 불러 올 @GetMapping 어노테이션으로 로그인과 회원가입 웹 페이지를 불러오도록 설정합니다.
그리고 설정한 경로에 맞게 user 폴더와 joinForm, loginForm html 파일들을 생성합니다.
먼저 회원가입에 해당하는 joinForm.html 을 구성하도록 하겠습니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<header th:replace="layouts/header::header"></header>
<div class="container" style="margin-top:30px">
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Enter password" id="pwd">
</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">Submit</button>
</form>
</div>
<br>
<footer th:replace="layouts/footer::footer"></footer>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/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>
</html>
Header와 Footer를 붙이고 안에 class="container" div 태그 안에 form 태그에 대한 양식은 아래의 링크를 통해 Example을 복사 붙어넣기로 갖고오시면 됩니다.
Bootstrap 4 Forms
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
위와 같은 페이지로 구성이 완료되었습니다. 다만 저희가 설정했던 User 테이블에는 username, password, email로 구성이 되어 있기 때문에 이를 수정하도록 하겠습니다.
[joinForm.html]
<div class="container" style="margin-top:30px">
<form action="/action_page.php">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" placeholder="Enter email" 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 address:</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
</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">Submit</button>
</form>
</div>
완성 된 것을 확인이 되었으면 위의 회원가입 Form을 이용하여 로그인 화면을 구현하도록 하겠습니다.
[loginForm.html]
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<header th:replace="layouts/header::header"></header>
<div class="container" style="margin-top:30px">
<form action="/action_page.php">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" placeholder="Enter email" 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">Login</button>
</form>
</div>
<br>
<footer th:replace="layouts/footer::footer"></footer>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/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>
</html>
버튼의 텍스트를 Login으로 변경하였으며 이메일 input은 지웠습니다.
'개발 > 프로젝트' 카테고리의 다른 글
| [스프링부트 게시판] 16. 로그인 기능 구현 (0) | 2023.01.24 |
|---|---|
| [스프링부트 게시판] 15. 회원가입 기능 구현 (0) | 2023.01.23 |
| [스프링부트 게시판] 13. 페이지 공통 부분 분리 (0) | 2023.01.20 |
| [스프링부트 게시판] 12. 메인화면 만들기 (0) | 2023.01.19 |
| [스프링부트 게시판] 11. JPA DELETE (0) | 2023.01.18 |
