Spring boot기반 Web Application 개발[15] - 회원 등록
이전 포스팅에서 간단한 홈 화면을 구축했다. 이어서 Form을 이용해 회원등록을 진행해보자.
회원 웹 기능 - 등록
회원 등록 폼 컨트롤러
controller 폴더에 MemberController.java 파일을 추가하고, 아래 코드를 작성하자.
파일명 : MemberController.java
위치 : \main\hello.hellospring\controller\MemberController.java
package hello.hellospring.controller;
import hello.hellospring.domain.Member;
import hello.hellospring.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";
}
}
members/new라는url요청이 들어오면members/createMemberForm화면을 렌더링 한다.url요청은@GetMapping인 Get 방식으로 이루어진다는 점을 기억하자.
회원 등록 폼 HTML
templtes 폴더 아래 members 폴더를 생성하자. 그리고 createMemberForm.html 파일을 생성하고 아래 코드를 작성하자.
파일명 : createMemberForm.html
위치 : \main\resources\templates\members\createMemberForm.html
<!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>
웹 등록 화면에서 데이터를 전달 받을 폼 객체
controller 폴더에 MemberForm.java 파일을 추가하고, 아래 코드를 작성하자. Form 데이터를 담기위한 객체를 생성하는 것이다.
파일명 : MemberForm.java
위치 : \main\hello.hellospring\controller\MemberForm.java
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
회원 컨트롤러에서 회원을 실제 등록하는 기능
controller 폴더에 MemberController.java 파일을 추가하고, @PostMapping애노테이션 코드를 추가해주자.
파일명 : MemberController.java
위치 : \main\hello.hellospring\controller\MemberController.java
package hello.hellospring.controller;
import hello.hellospring.domain.Member;
import hello.hellospring.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(MemberForm form){
Member member=new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}
}
@GetMapping과@PostMapping의 mapping이 겹치지만, mapping 애노테이션의 타입이 다르기 때문에 가능하다.- 주로
@GetMapping은 요청할 떄,@PostMapping은 데이터를 전달할 때 사용한다. createMemberForm.html파일에서<form action="/members/new" method="post">form 데이터 전송 형식이post이기 때문에@PostMapping이 요청을 가로챈다.
동작 과정
1) 홈 화면
localhost:8000 에 접속하면 홈 화면이 렌더링된다.
2) 등록 폼 화면
회원가입 버튼을 클릭하면, 등록 폼 화면으로 이동한다. @GetMapping애노테이션이 요청을 가로챈다.
3) form.getName()
등록 버튼을 누른 후 console 창에 name을 print() 해보자. from에 입력한 이름과 일치하는 것을 확인할 수 있다. 이때, 브라우저는 홈 화면으로 redirect 된다.
이 포스팅은 인프런 김영한님의 스프링 입문 - 코드로 배우는 스프링 부트 강의를 토대로 작성되었습니다.
Leave a comment