[스프링부트] 개발 전 회원 관리 예제- 웹 MVC 개발 07
안녕하세요 jju_developer입니다.
이제 회원을 조회하고 등록하는 것을 해보도록 하겠습니다.
아주 단순한 회원을 등록을 해보겠습니다.
1. HomeController
먼저 컨트롤러에서 단순하게 홈컨트롤러를 만들어 보겠습니다.
@GetMapping("/")
-> 여기서 / 는 웹상의 주소에 첫 부분이겠죠?
package org.project.whipping.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("/")
public String home(){
return "home";
}
}
2. Home.html
<!DOCTYPE html>
<html xmlns:th="htt[://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>jju Test</title>
</head>
<body>
<!--컨테이너 시작-->
<div class="container">
<div>
<h1>테스트 jju 공부용</h1>
<p>회원 기능</p>
<p>
<a href="/members/new">회원 가입</a>
<a href="/members">회원 목록</a>
</p>
</div>
<!--컨테이너 끝-->
</div>
</body>
</html>
여기서 단순하게 회원가입을 누르면 저 링크 (현재 만들지 않음)로 가게 됩니다.
그렇다면 이제 저 링크 부분에 아무것도 없으니, 만들어서 실행이 되도록 해야겠죠?
여기서는 MVC 패턴을 이해하고자 아주 간단히 작성되었으니,
작동 원리만 봐주시면 됩니다!
회원 웹 기능 구현
3. MemberController
package org.project.whipping.controller;
import org.project.whipping.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class MemberController {
private final MemberService memberService;
@Autowired
public MemberController(MemberService memberService) {
this.memberService = memberService;
}
@GetMapping("/members/new")
public String createForm() {
return "members/createMemberForm";
}
}
회원 컨트롤러에다가 위에 html에서 가고자 했던 회원가입 부분으로 맵핑이 되야겠죠?
모든지 화면을 가려면 젤 첫 번째로 컨트롤러로 가야 한다고 했던 거 기억하시죠?
그렇기 때문에 회원가입 폼으로 이동을 하기 위해서는 회원컨트롤러에 맵핑되도록 회원가입을 눌렀을 때
여기 컨트롤러가 돌도록 설정을 해주는 것이고 return값은 members/createMemberForm으로 해주었기 때문에
templates에다가 새로운 폴더를 생성해 주겠습니다.
members에 / 가 있으니까 members 안에 createMemberForm이 있어야겠죠?
4. Members -> createMemberForm.html
<!DOCTYPE html>
<html xmlns:th="htt[://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>jju Test</title>
</head>
<body>
<!--컨테이너 시작꾸-->
<div class="container">
<form action="/members/new" method="post">
<div class="form-group">
<lable for="name">이름</lable>
<input type="text" id="name" name="name" placeholder="이름을 입력하세요"
</div>
<button type="submit">등록하기</button>
</form>
</div>
<!--컨테이너 끝!!!-->
</body>
</html>이렇게 간단하게 구현을 해보았습니다.
딱 처음 화면은 보시다시피
홈컨트롤러가 돌면서 홈.html에 있는 화면을 보여줍니다.
그다음에, 회원 가입을 누르게 된다면?
회원컨트롤러가 돌면서 @GetMapping("/members/new") 이렇게 맵핑을 해주었던 곳으로 가겠죠?
위에 URL을 보시면 http://localhost:8080/members/new
우리가 컨트롤러에서 이름을 설정한 members/new로 맵핑이 되고
그 url은 우리가 리턴을 하기로 마음먹은 members/createMemberForm 이곳으로 가게 됩니다.
@GetMapping("/members/new")
public String createForm() {
return "members/createMemberForm";
}
}
즉!! 방금 만들었던 members의 폴더 안에 createMemberForm.html이 돌면서
저런 화면이 보이는 것입니다.
어떠세요? 조금은 감이 잡히시나요?
<input type="text" id="name" name="name" placeholder="이름을 입력하세요"
이름 등록을 jju라고 한다면 여기서 input tag에
name이라는 키와 jju라는 벨류값이 이동을 하게 됩니다.
그렇다면, 회원을 등록하는 껍데기는 만들었으니, 회원을 등록하는 컨트롤을 만들도록 하겠습니다.
5. JoinController
JoinController으로 만들 예정입니다.
자 여기서 집중!!! 집중!!!!
아까 회원 가입 폼에서 지정한 name부분에 들어가는 값이
joinController에 필드로 있어야 합니다!
package org.project.whipping.controller;
public class JoinController {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
그러면 여기서 만드는 private String name; 이 부분이랑 매칭이 되어 값이 저장되는 것입니다.
아주 재미있죠?
매칭이 딱 되면 아주 기분이 좋습니다~꺄르륵...
이제 컨트롤러에 Postmapping을 통해서 폼에서 얻어지는 이름을 회원에 setName 할 수 있도록 해야 합니다!!!
회원가입이 끝나면 홈 화면으로 돌려줄 것입니다.
JoinController 코드로 보겠습니다~
6. MemberController
package org.project.whipping.controller;
import org.project.whipping.domain.Member;
import org.project.whipping.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
@Controller
public class MemberController {
private final MemberService memberService;
@Autowired
public MemberController(MemberService memberService) {
this.memberService = memberService;
}
@GetMapping("/members/new")
public String createForm() {
return "members/createMemberForm";
}
@PostMapping("/members/new")
public String create(JoinController form){
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}
} @PostMapping("/members/new")
public String create(JoinController form){
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}
요기 부분이 추가가 된 것입니다.
그렇다면 여기서 의문점이 아니 /members/new 이 부분이 두 개인데
뭐가 어떨 때 mapping이 되는지 모르실 수 있으니 설명을 드리겠습니다.
회원 가입을 할 때에 이 부분은 직접 url을 치니가 겟 방식입니다.
그럴 때에는 getmapping이 돌면서 실행을 하겠죠?
@GetMapping("/members/new")
public String createForm() {
return "members/createMemberForm";
}얘는 단순히 html을 뿌려주는 역할을 하고
해당 html을 가보면
폼에 액션이 /members/new 인 것을 보셨을 겁니다.
input에다가 네임이 서버에 올라갈 때에 키가 될 부분입니다.
등록 버튼 submit이 되면 members에 new에 포스트로 넘어가게 되는 것입니다!!!!!!!!
MemberController에 있는 포스트 방식의 해당 유알엘이 실행이 되는 것이죠!!!!
그래서 컨트롤러에 get과 post 멥핑을 다르게 지정을 해준 것입니다.
데이터를 보통 등록할 때에는 post방식을 사용하고 조회를 할때에는 get방식을 사용합니다.
자, 이제 회원가입에 이름을 jju로 주면 MemberForm에 setName이라는 세터를 통해서 이름을 저장해 주게 되었고,
저장된 이름을 getName으로 controller에서 꺼내준 것입니다.
여기까지 따라오시느라 수고 많으셨습니다~
다음시간에는 회원 웹 기능에 지정해 놓았던 회원 조회 기능에 대해
구현해 보도록 하겠습니다,
🌸봄나들이를 포기하면서 열심히 공부하고 계신 모두 모두 파이팅입니다!
다음주가 벚꽃 만개라고 하니... 그전까지 바짝!!!!
열공하자구요!