회원등록
-현재 회원가입 버튼을 누르면 주소창에 members/new처럼 이동 한다.
*<a href = ...>
-a라는 태그가 href라는 속성을 가지고 있다.
-href는 hypertext reference의 줄임말이다.
1.memberForm 만들기(입력란 만들기)
-여기에서 members/new 회원가입 폼화면이 나와야 한다.
-회원가입 폼화면이 나올 때를 위해 폼객체를 만든다.
사진1(실제는 이름만 필수항목 적용)
public class MemberForm {
@NotEmpty -> javax.validation.constraints
값이 비어있으면 오류메시지를 보여주는 기능
}
private final MemberService memberService
Controller가 서비스(MemberService)를 사용한다.
*Model model이란?
model.addAttribute(“정보”)
-> controller로 뷰로 넘어갈 때 데이터를 실어서 정보를 넘긴다.
return "members/createMemberForm“
->여기로 화면이 출력이 된다.
createMemberForm을 위한 html을 만들어야 한다.
controller가 화면을 이동할 때 빈 memberForm을 가지고 간다,.
validation같은 역할을 해주기 때문에 빈 memberForm을 가지고 가도록 한다.
데이터가 넘어가니 데이터의 화면출력을 위한 createMemberForm.html 생성이 필요하다.
2.templates내에 members 디렉터리생성 및 createMemberForm.html 파일생성을 한다.
구문사진
화면사진
html 구문 설명
첫구문
a.<head> include style로 작성
b.form 태그가 존재한다.
-action ="members/new"로 넘어간다.
-앞서 작성한 @GetMapping members/new로 get방식으로 오면
-controller에 있는 createform 구문을 통해 createform html이 열린다.
-열려서 렌더링이 된다. 렌더링이 될 때 model addAttribute의 membeform을 넘겼다.
때문에 화면에서 이 객체(new member())에 접근할 수 있게 된다.
-이 객체는 createMemberForm.html 파일 내에
<form ~~~~~~th:object="${memberForm}" 과 연결 되어 form내에서는
memberForm 객체를 사용하겠다는 타임리프의 문법적용이 된다.
c.th:field=*{name}
-*가 있는 경우는 object(memberform)를 참고하게 되고
MemberController의 createform구문의 memberform을 참고하게 되고
memberform은 memberform 클래스를 참고하여 해당 필드인 name을 참고하게 된다.
회원가입작성시 흐름
th:field=*{필드항목}
->th:object="${객체}
->MemberController클래스의 memberform 객체
->memberform 클래스의 해당 필드 private ~필드
d.필드항목 구문
-input type 텍스트
-input후 클래스와 placeholder로 넘어간다.
-필드항목 작성시 id랑 name을 각각 항목내용을 똑같은 이름으로 처리 해준다.
-다 작성후 폼 데이터가 button submit을 누르면
members/new의 method가 post로 넘어간다.
e. 회원가입 클릭 및 필드항목작성후 첫화면으로 돌아가도록 구문 작성
*@NotEmpty 어노테이션으로 인하여 회원이름을 빈칸으로 작성시 에러페이지가 나온다.
구문작성
설명
controller의 서버사이드에서 validation을 했는데 필수항목입니다 메시지가 뜬다.
MemberForm에 작성된 메시지임을 확인할 수 있다.
MemberFormController 흐름정리
-서버사이드에서 validation을 하고 문제가 생겨서 BindingResult의 데이터가 하나 들어왔다.
result.를 보면 에러에 대한 데이터를 찾아 낼 수 있는 메서드가 많다.
에러가 있으면 다시 createMemberForm으로 보낸다.
타임리프와 스프링부트가 integration이 되어 있기도 하고, 스프링이 바인딩 result를 기본
적으로 createMemberform에 긁어 와서 사용할 수 있도록 작동한다.
createformmember.html 흐름정리
th:class="${#fields.hasErrors('name')}? 'form-control fieldError' : 'form-control'">
<p th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Incorrect date</p>
-createMemberform.html의 fields.hasError에서 name에 에러가 있으면 css를 빨간 테두리(form-control fieldError)로 변경하게 해준다.
-fields.haserrors의 이름이 있으면 네임필드에 대해서 에러메세지를 출력해준다.
그래서 필수항목이라는 메시지가 렌더링이 된다.
사진
*회원이름을 작성안해서 에러가 있더라도 다른항목란에 값을 입력했다면 값을 그대로 가지고 온다.
*javax.validation 개념 구글링 통해 공부 필요
*thymleaf도 홈페이지를 통해 공부가능
'신입개발자로 취업하기까지 > JPA쇼핑몰기능구축' 카테고리의 다른 글
| 20200603 웹계층개발_상품등록 (0) | 2020.07.10 |
|---|---|
| 20200602 웹계층개발_회원목록조회 (0) | 2020.07.10 |
| 20200601 웹계층개발_홈화면 레이아웃 (0) | 2020.07.09 |
| 20200529 회원도메인개발_회원기능테스트 (0) | 2020.06.30 |
| 20200529 회원도메인개발_회원서비스 (0) | 2020.06.23 |
