728x90
MemberController
@Controller
@RequiredArgsConstructor
public class MemberController {
private final MemberService memberService;
@GetMapping("/members/new")
public String createForm(Model model){
model.addAttribute("memberForm",new MemberForm());
return "members/createMemberForm";
}
@PostMapping("/members/new")
public String create(@Valid MemberForm form, BindingResult result){
if(result.hasErrors()){
return "members/createMemberForm";
}
Address address = new Address(form.getCity(),form.getStreet(),form.getZipcode());
Member member = new Member();
member.setName(form.getName());
member.setAddress(address);
memberService.join(member);
return "redirect:/";//첫번째 페이지로 이동
}
}createMemberForm.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<style>
.fieldError {
border-color: #bd2130;
}
</style>
<body>
<div class="container">
<div th:replace="fragments/bodyHeader :: bodyHeader"/>
<form role="form" action="/members/new" th:object="${memberForm}"
method="post">
<div class="form-group">
<label th:for="name">이름</label>
<input type="text" th:field="*{name}" class="form-control"
placeholder="이름을 입력하세요"
th:class="${#fields.hasErrors('name')}? 'form-control
fieldError' : 'form-control'">
<p th:if="${#fields.hasErrors('name')}"
th:errors="*{name}" >Incorrect date</p>
</div>
<div class="form-group">
<label th:for="city">도시</label>
<input type="text" th:field="*{city}" class="form-control"
placeholder="도시를 입력하세요">
</div>
<div class="form-group">
<label th:for="street">거리</label>
<input type="text" th:field="*{street}" class="form-control"
placeholder="거리를 입력하세요">
</div>
<div class="form-group">
<label th:for="zipcode">우편번호</label>
<input type="text" th:field="*{zipcode}" class="form-control"
placeholder="우편번호를 입력하세요">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<br/>
<div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>- MemberController 연결하기
- createForm 메서드
- 회원가입을 눌렀을 때 보여주는 form을 렌더링 한다.
- thymeleaf 문법을 사용하여 폼을 렌더링 한다.
- create 메서드
- form에서 submit 버튼을 누르게 되면 실행되는 함수이다.
- Validation이 가능한 MemberForm, 에러를 잡는 BindingResult를 파라미터로 받는다
MemberForm VO
- 이름은 필수 값이기 때문에 NotEmpty를 사용해서 에러를 처리
- Member를 통해 받아 올 수도 있지만 도메인과, 화면에서 입력받는 처리는 다를 수 있기 때문에 따로 클래스를 만들어서 해야 된다(validation 처리 등을 위해서도 이 방식이 좋다)
- BindingResult
- MemberForm에서 Validation이 잡히거나 하면 해당 BindingResult로 에러가 잡히게 되고 코드가 멈추는 것이 아니라 흘러간다.
- 따라서, 에러가 존재할 경우를 잡아주는 분기가 필요하다.
- 에러가 있다면 다시 form화면으로...
- form 화면으로 다시 돌아가게 되면, 아래의 코드에서 화면에 오류 메시지를 뿌린다.
- <input type="text" th:field="*{name}" class="form-control"
placeholder="이름을 입력하세요"
th:class="${#fields.hasErrors('name')}? 'form-control
fieldError' : 'form-control'">
<p th:if="${#fields.hasErrors('name')}"
th:errors="*{name}" > Incorrect date </p> - name filed에 에러가 있다면 class를 form-controlfieldError로 변경해 주고, p태그로 에러 내용을 뿌려준다.
- 없다면 /(root 페이지)로 리다이렉트 한다.
728x90
'실전! 스프링 부트와 JPA 활용1(웹 애플리케이션 개발)' 카테고리의 다른 글
| Ch07. 웹 계층 개발 - 상품 등록, 상품 목록 (0) | 2021.12.07 |
|---|---|
| Ch07. 웹 계층 개발 - 회원 목록 조회 (0) | 2021.12.07 |
| Ch07. 웹 계층 개발 - 홈 화면과 레이아웃 (0) | 2021.12.07 |
| Ch06. 상품 도메인 개발 - 주문 검색 기능 개발 (0) | 2021.12.06 |
| Ch06. 상품 도메인 개발 - 주문 기능 테스트 (0) | 2021.12.06 |