회원 등록하는 부분을 등록해보자.
- MemberController.java 구현[1]
@GetMapping("/members/new")
public String createForm() {
return "members/createMemberForm";
}MemberController.java에서 @GetMapping을 보고 해당 메소드로 매핑이 되면
members 폴더 안에 있는 createMemberForm.html로 return이 되도록 코드를 작성한다.
- createMemberForm.html 구현
회원 가입하는 화면 부분을 다음과 같이 구현한다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>회원 가입</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div class="container">
<form action="/members/new" method="post">
<div class="form-group">
<label for="name">이름</label>
<input type="text" id="name" name="name" placeholder="이름을 입력하세요">
</div>
<button type="submit">등록</button>
</form>
</div>
</body>
</html>이 상태에서 구현을 해보면 회원 가입 링크를 눌렀을 때 화면은 다음과 같다.
- MemberForm.java
회원 가입을 할 때 입력한 이름이 데이터에 저장이 되도록 해야한다.
그러면 createMemberForm.html에서 "name"을 입력받았을 때 어딘가에 담겨져서 서버에 전달하는 과정이 있어야한다. 그 과정을 위해 MemberForm.java이 필요하다.
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}- MemberController.java 구현[2]
@PostMapping("/members/new")
public String create(MemberForm form){
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}회원 가입을 할 때 입력한 이름(name)이 MemberForm.java의 form으로 받게되면
스프링은 name을 받아 setName에 저장을 하고, 우리는 getName으로 저장된 이름을 꺼내서 이전에 미리 구현해놓았던 member 가입 기능을 활욜하여 회원가입을 진행한다.
이후에는 홈 화면으로 redirect 할 수 있도록 구현한다.
이러한 과정을 통해 회원 가입을 할 수 있다.
개발에 재미를 붙여보기 :)