#16 로그인, 회원가입 화면 만들기

 

header.jsp와 footer.jsp 생성 및 적용

 

우선 index.jsp에서 해당 스크립트를 내려서 </body>에 붙인다.

 

이렇게 body가 끝나는 지점에 붙이는 이유는 

자바스크립트는 인터프리터 언어(위에서 한줄한줄 실행)이기 때문이다.

 

그리고 이제 index.jsp에 있는 header부분과 footer부분을 각각 header.jsp와 footer.jsp로 만들 것이다.

왜냐하면 header와 footer가 페이지마다 반복될텐데,

그 때 마다 모든 페이지에 header와 footer 코드를 작성하는 것은 비효율적이기 때문이다.

따라서 각각의 파일을 만들어주는 것이다.

 

 

그 다음 views 폴더 안에 layout 폴더를 생성하고 그 안에 footer.jsp와 header.jsp를 생성한다.

 

index.jsp에서 해당 부분을 잘라내기(ctrl+x) 한다.

index.jsp

그리고 header.jsp에 다음 부분에 붙여넣기한다.

 

header.jsp

 

footer도 비슷하게 하면 된다.

index.jsp

index.jsp에서 footer에 해당하는 이 코드를 잘라내기하고

 

footer.jsp

footer.jsp에 다음과 같이 붙여넣어 작성하면 된다.

(ctrl+shift+f로 정렬 한번씩 해주자)

 

 

만약 이대로 실행한다면

 

실행결과 :

이런 결과가 나올 것이다. 왜냐면 아직 footer.jsp와 header.jsp를 include하지 않았기 때문이다.

그럼 이제 include해주자

 

index.jsp의 위쪽에서 header.jsp를 include하고,

 

index.jsp의 아래쪽에서 footer.jsp를 include했다.

경로는 상대경로로 설정한 것이다.

만약 앞에 "/"를 붙이고 시작하면 절대경로이다. 최상단 디렉토리로 이동해서 찾는 것이기 때문이다.

 

실행결과 :

성공적으로 header.jsp와 footer.jsp가 적용되었다.

 

 

 

회원가입 화면 생성

 

이제 회원가입 화면을 생성하자.

 

우선, header.jsp에서 작성했었던 href를 다음과 같이 수정하자

 

그리고 UserController.java를 작성한다.

 

UserController.java

 

UserController.java에서 다음과 같이 코드를 작성하자.

그리고 이제 user/joinForm 파일을 만들면 된다.

 

 

joinForm.jsp에서 header.jsp와 footer.jsp를 include하기 위해선 경로에 ../를 앞에 추가해야한다.

 

그리고 이와 같이 container안의 내용을 다 지운다.

여기다가 이제 회원가입 폼을 작성해주면 된다.

부트스트랩을 이용해서 작성해보자

 

혹시나 까먹었을까봐 링크!

https://www.w3schools.com/bootstrap4/bootstrap_forms.asp

Bootstrap 4 Forms

 

해당 사이트에서 왼쪽 메뉴에서 Forms를 찾는다.

이 Form의 Example에 있는 코드를 복사한다.

 

joinForm.jsp

 

실행결과 :

회원가입 버튼을 누르면 이 페이지로 이동한다.

 

화면이 성공적으로 뜨는 것을 확인했으니 이제 joinForm을 내 사이트에 맞게 변경해주자

 

 

joinForm.jsp

 

joinForm의 컨테이너 안을 이렇게 변경해준다.

 

 

실행결과 :

성공적으로 폼이 작성되었다.

 

로그인 폼도 같은 원리로 작성하면 된다.

joinForm.jsp의 코드 내용을 loginForm.jsp에 복사 붙여넣기해서

간단하게 수정하는 것으로 loginForm.jsp를 작성해보자

 

loginForm.jsp

joinForm에서 email부분을 지우면 바로 loginForm이 완성된다.

 

그리고 UserController.java에서 로그인폼에 대한 처리도 추가해주자

 

Whilelabel Error Page 해결

 

실행결과 (결점발견) :

홈에서 로그인이나 회원가입을 누르면 창이 잘 뜨는데,

이렇게 로그인폼일때 회원가입을 누르거나, 회원가입폼일때 로그인을 누르면

 

이렇게 /user/user가 되어버려 오류가 발생하게 된다.

앞으로도 이런 문제가 많이 발생할 것 같으니

href에서 상대경로말고 절대경로를 사용하는게 좋다고 판단했다.

 

header.jsp

기존 user/loginForm , user/joinForm 앞에 /blog/를 붙여 절대 경로로 바꿔주었다.

 

 

실행결과 :

로그인과 회원가입을 번갈아서 클릭해도 문제없이 해당 링크들을 띄운다.

앞으로 href로 링크를 걸 때 절대경로로 걸어주어야겠다.

 

 

참고자료 : https://youtu.be/7uz311JqQKI