thymeleaf를 spring boot에서 이용해 다루는 법을 지난번에 테스트 해봤으니, 이번에는 진짜 내가 쓸 form까지 만들어보자.
우선, 전과 같이 controller 패키지에 loginController.java를 추가한다.
"localhost:8080/main" 에 접속하면 웹사이트의 메인 페이지가 뜨고,
"localhost:8080/login" 에 접속하면 로그인 창이 뜨게 된다.
(디자인은 크게 신경쓰지 않고 만들었다는 점...!)
1. Main Page, Login Page Controller
main으로 접속하면
위와 같이 메인 페이지로 접속된다.
여기서 login 버튼을 만들어 login page로 넘어가게 만들 예정이다.
2. Login button(page 이동)
로그인 버튼을 만들기 위해서, <button> 태그를 사용하였다.
<button type="button" onClick="location.href='./login'">로그인</button>이렇게 코드를 작성하면, 다음과 같이 main page가 바뀌게 되고,
로그인 버튼을 누르면
로그인 페이지로 넘어갈 수 있다.
(디자인은 아직 진짜 신경쓰지 말자....언젠가 고칠 예정...)
3. ID, PW 입력 form
로그인 페이지에서는 데이터(아이디, 비밀번호)를 입력받아 검증해야 한다.
우선은 단순하게 아이디, 비밀번호가 맞는지 체크하는것만(db에 있는지 체크) 만들도록 하겠다.
그래서 지금 할 작업은 id, pw 입력창을 만드는 것!
여러 방법이 있겠지만, thymeleaf를 사용한김에 thymeleaf의 form 기능을 사용해봤다.
우선, controller를 수정한다.
Model을 사용해, 빈 객체를 넘겨줄 수 있도록 한다.
// connect to login page
@GetMapping("/login")
public String connectToLoginPage(Model model) {
model.addAttribute("loginForm", new LoginFormDto());
return "loginPage";
}
addAttribute를 이용해 model에 등록할 수 있는데, loginForm 이라는 이름의 attribute이고, 형식은 LoginFormDto 객체로 지정하였다.
LoginFormDto는 다음과 같다.
package com.example.loginserver.dto;
import lombok.Setter;
import lombok.Getter;
@Getter
@Setter
public class LoginFormDto {
private String id;
private String pw;
}
이제 html 코드를 작성해보자.
우선, thymeleaf에서는 이 model로 넘겨준 빈 객체를 {attribute name}으로 참조해 값을 지정할 수 있다.
여기서는 {loginForm}으로 사용하게 된다.
th:object="${loginForm}"으로 빈 객체를 전달받을 수 있고,
th:field를 통해 객체의 필드에 접근할 수 있다.
예를 들어, 여기서는 id를 원한다면, th:field="*{id}"로 loginForm 객체의 id 필드에 접근할 수 있다.
이렇게 작성한 html 코드는 다음과 같다.(기존 loginPage.html 파일 수정)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"></script>
</head>
<body>
<h1>Login Page</h1>
<form th:action th:object="${loginForm}" method="post">
<div>
<label for="id"> ID를 입력하세요 : </label>
<input type="text" id="id" th:field="*{id}">
</div>
<div>
<label for="pw"> PW를 입력하세요 : </label>
<input type="text" id="pw" th:field="*{pw}">
</div>
<button type="submit">로그인하기</button>
</form>
</body>
</html>POST 방식으로 loginForm 객체의 id와 pw를 입력받아 서버에 보내게 된다.
화면은 다음과 같이 구성된다.
Login Page
html로 하는 부분은 여기까지이고, 다음 글에서 컨트롤러 작성까지 이어가도록 하겠다..
참고자료 :
'개발 > Spring Boot' 카테고리의 다른 글
| [로그인 기능 만들기] 8. JPA를 사용한 DB 구현(2) (0) | 2024.05.27 |
|---|---|
| [로그인 기능 만들기] 7. website login-form 만들기(3) (1) | 2024.05.24 |
| [로그인 기능 만들기] 5. website login-form 만들기(1) (0) | 2024.05.23 |
| [로그인 기능 만들기] 4. JPA를 사용한 DB 구현(1) (1) | 2024.05.09 |
| [로그인 기능 만들기] 3. 비즈니스 로직 (0) | 2024.05.03 |