[작성일: 2023. 05. 16]
회원 웹 기능 - 홈 화면 추가
HomeController
- localhost:8080을 입력하면 home.html을 보여준다.
- 기존에 있던 static의 index.html은 무시된다.
@Controller
public class HomeController {
@GetMapping("/")
public String home() {
return "home";
}
}
home.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
<div>
<h1>Hello Spring</h1>
<p>회원 기능</p>
<p>
<a href="/members/new">회원 가입</a>
<a href="/members">회원 목록</a>
</p>
</div>
</div> <!-- /container -->
</body>
</html>
회원 웹 기능 - 등록
회원 등록 폼 개발
MemberController
- 기존의 컨트롤러에 아래의 코드를 추가해준다.
@GetMapping("/members/new")
public String createForm() {
return "members/createMemberForm";
}
createMemberForm.html
- 경로 : resources/templates/members/createMembersForm
- 이름을 spring이라고 입력하면 서버로 spring이라는 이름이 넘어간다.
- name = "name"이 key가 된다.
- 등록을 누르면 members/new의 post방식으로 넘어온다. (MemberController에 작성해둔 PostMapping.)
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<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> <!-- /container -->
</body>
</html>
MemberForm
public class MemberForm {
private String name; // 이 name에 form에서 입력한 name이 들어온다.
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
MemberController
- 맨 아래 부분에 코드를 추가한다.
- 데이터를 form에 넣어서 전달할 때 PostMapping, GetMapping은 보통 조회할 때 사용한다.
- 회원가입 Test를 해보면 확인 후 홈화면으로 돌아가는 것을 확인할 수 있다.
- 혹시나 데이터가 잘 넘어오는지 확인하고 싶다면 println(member.getName());을 사용하면 인텔리제이에서 확인할 수 있다.
@PostMapping("/members/new")
public String create(MemberForm form) {
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/"; // 회원가입 후 홈 화면으로 돌려보낸다.
}
회원 웹 기능 - 조회
MemberController
- 기존에 있던 컨트롤러에 아래의 코드를 추가한다.
@GetMapping("/members")
public String list(Model model){
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}
memberList.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
<div>
<table>
<thead>
<tr>
<th>#</th>
<th>이름</th>
</tr>
</thead>
<tbody>
<tr th:each="member : ${members}">
<td th:text="${member.id}"></td>
<td th:text="${member.name}"></td>
</tr>
</tbody>
</table>
</div>
</div> <!-- /container -->
</body>
</html>
- 회원가입 후 회원 목록을 확인하면 2개가 등록된 것을 확인할 수 있다.
- 페이지 소스를 확인하면 템플릿 언어에서 members를 읽고, 루프를 돌며 로직을 실행한다.
🐣 출처: 인프런 김영한님 강의
이 글은 인프런의 김영한님 스프링 강의를 보고 작성한 글입니다.
강의를 들으면서 정리한 글이므로 틀린 내용이나 오타가 있을 수 있습니다.