웹프로젝트_ [1] 회원가입 화면 만들기

 

 

 

[1] 회원가입 화면 만들기 

---

 

 

(1) HTML , CSS , javaScript 디자인 폼 만들기 

 

 

 

form 에 

action =" 전송할 URL 지정 또는 디폴트 자기자신 

method = "Get 또는 Post  또는 디폴트 Get 

설정해줘야한다 

 

(2) JSP 를 설정하여 값을 전송받아 출력하게 만든다 

 

(3) 전송방식을 Post로 수정한다 

입력하지 않으면 자동으로 GET으로 적용된다

 

주소에 요청메세지에 넣은 값이 보여지지 않는다 

(4) SNS 배열로 받아오도록 정보를 수정하자 

 

SNS = facebook&kakaotalk&instagram 으로 동시에 같은 값을 가지고 있는데

 

JSP 파일에 sns 값을 하나만 가져오도록 설정했기 때문에 배열로 선택한 전부 출력되도록 바꾸자 

String[] snsArr = reguest.getParameterValues("SNS")

이거나 EL 표현식으로는 ${paramvaules.sns[0]} 으로 출력하자 

 

 

(4) 전송할때 폼 항목중에 문제가 있는 정보를 검열한다 

onsubmit 전송할때 true일때 폼 전송을 받아오고 false일때 폼 전송을 실패한다 

 

formCheck 이벤트 함수를 만들었다. 

해당 내용에 id는 어떻게 할건지 , pwd 어떻게 할건지 등등을 상세 등록을 하고 

실제 클라이언트가 해당하는 조건으로 입력하지 않을때 오류가 뜨게 만든다 

 

아이디에 공란으로 회원가입을 누르니

오류 멘트가 뜬다 

 

커서 깜빡거리게 하는 방법 : autofocus를 넣는다 

 

오류 발생 후 어떤 부분이 오류인지 표시한다 

 

[2] 스프링 전환 

---

(1) html 파일을 jsp로 바꾼다 

 

다른 jsp에서 연결태그를 붙여 넣는다 

 

 

(2) 컨트롤러 클래스를 만든다 

 

 

인코딩이 맞지 않아 한글이 깨졌다 

인코딩이 안맞은 이유는 html을 강제로 jsp파일로 입력해서 변환했기 때문에 

파일을 jsp로 만들어서 내부 코딩은 복사 붙여넣기로 하면 인코딩 문제가 생기지 않는다. 

인코딩시 파일 utf-8로 되어있는지도 확인하자 

 

(3) 템플릿 리터럴을 EL로 수정한다. 

 

자바스크립트 ES6의 템플릿 리터럴 Template literals이란 내장된 표현식을 허용하는 문자열 릴터럴로 브라우저에서 실행되는 것이다.

브라우저는 서버에서 실행후 브라우저를 조회하는 것이기 때문에 템플릿 리터럴로 파악을 못하고 서버에서 EL로 잘못 인식하여 실행이 되지 않았다. 

해당하는 부분을 EL로 만들어 조회하게 만든다 

${' '} 로 만들어 EL로 감싼다 

 

(4) <c:url 방식 수정 

<c:url 방식을 사용했을때

1. context root를 자동으로 추가한다 (ch2경로)

2. seccion id를 자동으로 추가한다 

으로 인해 수정한다

 

<c url 방식은 쿠키에 세션 ID를 추가해서 보내고 , url 뒤에도 세션id를 추가해서 보내기 때문에

클라이언트의 브라우저가 쿠키를 허용하지 않아 쿠키를 받지 못하더라도

url 뒤에 있는 세션 ID를 추가할수 있기 때문에  2번의 목적으로 <c url 방식을 사용하자

 

 

 

[2] 다음화면 

---

(1) 회원 가입후 다음 화면 만들기 

다음화면으로 사용할 registerInfo.jsp 를 views에 넣는다 

컨트롤러에 추가한다 

(2) Get 방식으로 변경할수 없도록 차단하기 

POST만 설정하는 방법1 

반대로 Get, post 둘다 사용하려면 

@RequestMapping(value="/register/save",method={RequestMethod.GET , RequestMethod.POST})

 

 

POST만 설정하는 방법2

반대로 Get만 사용하는 방법은 @GetMapping("/register/add") 로 사용할수 있다.  

 

(3) 뷰를 뷰 컨트롤러에 등록한다 

회원가입화면은 정보를 받아서 만들어지는 화면이 아니기 때문에 Get 방식으로 하는 뷰를 뷰 컨트롤러에 등록한다 

Servlet-context.xml 에서 뷰 컨트롤러 등록 

컨트롤러 클래스에 회원가입화면을 넣을 필요가 없다 

이 경우 GET 방식으로 할때만 적용한다 

 

(4) 받아온 값을 객체화하여 클래스로 통합 

param을 user 로 변경

 

 

 

(5) 유효성 검사 

방법1 

클라이언트가 잘못입력하였을때 오류가 난것을 msg 항목 위치에 표시하자 

URL재작성 = rewriting 이라고 하며 이를 사용할경우 브라우저 인코딩을 해야한다

 

브라우저 인코딩 URLEncoder.encode()를 입력한다 

회원가입화면에 있는 msg 항목도 브라우저 인코딩을 해야한다 

방법2

모델에 넣어서 값을 출력하는 방법