13. 회원 웹 기능 기능 - 등록

Bummy·2023년 4월 28일
0
post-thumbnail

등록을 위한 html 페이지와 컨트롤러를 작성해준다.

MemberController.java

package hello.hellospring.controller;

import hello.hellospring.domain.Member;
import hello.hellospring.sevice.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("/members/new")
    public String createForm() {
        return "members/createMemberForm";
    }
  • 클라이언트가 회원가입을 눌렀을 때 회원등록 페이지로 이동할 수 있도록 이전에 생성해놓았던 MemberController에 코드를 추가해준다.
  • GET 방식으로 /members/new가 들어왔을 때 createFrom() 메소드가 실행되고 createMemberForm.html 이 브라우저로 전달된다.

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>

</body>
</html>
  • createMemberForm은 form을 통해 클라이언트가 작성한 데이터를 POST 방식으로 보내게된다.

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;
    }
}
  • 회원 이름을 전달 받을 폼 객체를 생성해준다.

POST 방식으로 보낸 form 데이터를 처리할 수 있도록 MemberController쪽에 POSTMappig으로 코드를 작성해준다.

@PostMapping("/members/new")
    public String create(MemberForm form){
        Member member = new Member();
        member.setName(form.getName());

        memberService.join(member);

        return "redirect:/";
   
  • POST 방식으로 넘어온 요청 파라미터 이름 name으로 MemberForm 객체의 프로터피를 찾는다. 그리고 해당 프로퍼티의 Setter를 호출해서 파라미터의 값을 입력(바인딩)한다.
  • 회원 객체를 새로 생성하고 값이 입력된 폼 객체에서 이름을 꺼내와 회원 객체에 입력해준다.
  • 마지막으로 join() 메소드를 통해 회원가입을 완료하고 시작페이지로 다시 넘어가준다.

실행화면

0개의 댓글