5.2.1 회원 웹 기능 - 등록 화면 작성
앞선 MemberController 에 다음과 같은 코드를 추가로 작성한다.
@GetMapping("/members/new")
public String createForm(){
return "members/createMemberForm";
}
@GetMapping("/members/new")
- http://localhost:8080/members/new 로 url에 직접 작성하면 get 방식으로 mapping
return "members/createMemberForm"
- createMemberForm.html 로 이동
나중에 작성할 createMemberForm.html 에서 post 방식으로 값을 넘겨받기 위해,
PostMapping 할 수 있는 메소드를 추가로 작성한다.
@PostMapping("/members/new")
public String create(MemberForm form){
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}
@PostMapping
- html 에서 post 방식으로 값을 받음
memberService.join(member)
- 회원가입을 위해, member 객체를 memberService 회원가입 메소드에 넣음
return "redirect:/"
- redirect를 사용하여, 회원가입이 끝나면 home 화면으로 이동하도록 설계
다음으로, html 코드를 작성해보자.
src > main > resources > template 패키지에 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>
</body>
</html>
form method = "post"
- form 태그를 사용하여, 웹 페이지에서 값을 입력받을 수 있음.
- post 방식을사용하여, 이후 PostMapping 이 선택됨.
input type name = "name"
- 사용자가 입력한 이름의 key 와 value 값이 spring에게 넘어간다.
다음으로,
src > main > java > hello.hellospring > controller 패키지에
MemberForm 클래스를 만들고, 다음과 같이 코드를 작성한다.
Getter and Setter 를 사용하여 메소드를 자동으로 생성할 수 있다.
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
private String name
- createMemberForm.html 의 name 과 값이 매칭되면서 들어옴
Getter and Setter
- name 은 private 필드로, 직접 접근할 수 없으므로, 메소드를 통해 간접적으로 저장
main 메소드를 실행시키면, 다음과 같은 화면이 나타난다.
이름을 입력받은 후, 등록 할 수 있는 창이 나타난다.
5.2.2 회원 웹 기능 - 등록 화면 동작 순서
1) Home 화면에서 회원가입 버튼을 클릭 -> members/new 로 들어감
2) url 에 직접 작성하는 get 방식으로 들어옴
3) createForm() 으로 mapping 후, createMemberForm.html 로 이동
4) viewResolver 에 의해 화면에 되고, thymeleaf 가 렌더링
5) form 태그를 통해 name 값이 post 방식으로 서버에 넘어옴
6) @PostMapping 을 찾고, name 값에 사용자가 입력한 값이 저장됨
김영한 '스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술' 강의를 기반으로 작성하였습니다.
'SPRING 입문 [ 코드로 배우는 스프링 부트 ]' 카테고리의 다른 글
| [스프링 입문] 섹션 6.1 스프링 DB 접근 기술 (H2 데이터베이스 설치) (0) | 2023.01.17 |
|---|---|
| [스프링 입문] 섹션 5.3 웹 MVC 개발 (회원 웹 기능 - 조회) (0) | 2023.01.10 |
| [스프링 입문] 섹션 5.1 웹 MVC 개발 (회원 웹 기능 - 홈 화면 추가) (0) | 2023.01.10 |
| [스프링 입문] 섹션 4.2 스프링 빈과 의존관계 (자바 코드로 직접 스프링 빈 등록하기) (0) | 2023.01.10 |
| [스프링 입문] 섹션 4.1 스프링 빈과 의존관계 (컴포넌트 스캔과 자동 의존관계 설정) (0) | 2023.01.10 |