[블로그 만들기] DB 데이터 활용하기 - 회원가입

UserController 자바 클래스와 loginForm, registForm 이름의 로그인 회원가입 화면을 구성할 jsp 파일을 만듭니다.

 

GetMapping으로 로그인/회원가입 화면에 하는 메서드를 만듭니다.

회원가입 기능을 할 메서드를 만들고 return 값을 로그인 페이지로 해줍니다.

이때 바로 loginForm.jsp로 가지 않고 redirect 해서 주소로 찾아가는 이유는 loginForm() 메서드에서 loginForm.jsp로 가기 전 처리해야 할 로직이 있다면 처리해주어야 하기 때문입니다. 

바로 loginForm.jsp로 이동하게 된다면 빈껍데기 페이지로 이동하게 됩니다.

 

로그인 / 회원가입 페이지를 구성해봅니다.

https://www.w3schools.com/

W3Schools Online Web Tutorials

 

 

w3schools 에서 디자인을 다운받아옵니다.

BS4 Navbar로 들어가서 아래로 내려 Collapsing The Navigation Bar를 찾아줍니다.

아래로 조금만 더 내리면 Try it Yourself를 볼 수 있습니다. 들어가서

왼쪽의 코드 전체를 복사해주세요

jsp 파일에 붙여넣기 해줍니다. 마지막 <div> 태그는 지워주세요. 저는 test.jsp 파일을 만들어서 여기서 먼저 편집해주고 붙여넣기 했습니다.

빨간 상자에서 주소 설정이 따로 없으면 메인 페이지를 담당 할 index.jsp를 자동으로 찾습니다.

따라서 메인 페이지를 담당할 index.jsp 파일을 하나 만들어줍니다.

파란 상자의 href는 GetMapping을 통해서 이동하는 로그인/회원가입 jsp 파일의 주소를 적어주면 됩니다.

 

test 파일을 만들어서 편집했기 때문에 BootStrapControllerTest라는 java class 를 하나 생성해 편집한걸 확인해봅니다.

잘 뜨는 것을 볼 수 있습니다.

블로그, 회원가입, 로그인 글씨를 각각 눌러 jsp 파일로 이동하는지도 확인해봅니다.

이렇게 예쁘게 나올 수 있는 이유는 부트스트랩 라이브러리가 있기 때문입니다.

위의 빨간 상자 속 링크들이 CDN(Content dilivery network)로 컴퓨터에 부하 없이 라이브러리를 사용할 수 있도록 해줍니다.

 

이렇게 페이지마다 넣어주려면 코드가 너무 길어질 것 같고 같은 코드를 여러번 작성하는 것도 비효율적입니다,.

따라서 header.jsp 파일을 만들어서 다른 jsp 파일에 적용만 시켜주도록 해봅시다.

header.jsp파일에 붙여넣기 해줍니다. 이때 주의해야 할 것은 마지막에 </body></html> 태그는 복사하지 않습니다.

registForm.jsp 파일에 include해서 header.jsp 파일 코드가 그대로 실행되도록 해줍니다.

이때 file 값은 상대경로만 가능합니다.

 

footer도 필요하니 다시 w3schools에 가줍니다.

마지막 <div> 태그만 복사해줍니다.

 

footer.jsp 파일을 만들어줍니다.

</body></html> 태그만 남기고 다 지워준 뒤 붙여넣기 해줍니다.

이렇게되면 hearder.jsp에서 없었던 닫는 태그가 footer에서 완성됩니다.

 

회원가입을 할 때 주소도 받도록 하기 위해서 User 클래스에서 address 피드를 추가합니다.

application.yml로 가서 dde-auto를 update로 바꿔준 뒤 서버를 실행시켜줍니다.

그러면 콘솔창에서 테이블을 alert 해준 것을 볼 수 있습니다.

 

회원가입 페이지를 구성하기 위해서 다시 w2schools로 가줍니다.

위의 코드를 복사해줍니다.

붙여넣기 후 알맞게 수정해줍니다.

웹 브라우저에서 접근해보면 잘 나오는 걸 볼 수 있습니다.

그런데 글씨 쓰는 창이 너무 긴 것 같으니 수정해줍니다.

form 태그를 div 태그로 감싸줍니다. 다시 실행시켜보면, 

예쁘게 잘 나옵니다.

 

<form> 태그를 사용하면 안에 있는 데이터들을 한번에 전송하기 편리합니다.

form에 action과 method를 달아주어서 회원가입 버튼을 눌렀을 때 어디로, 어떻게 갈지를 지정해줍니다.

regist기능을 하는 메서드로 이동시키고 POST 방식으로 Mapping 해줍니다.

userRepository에 save 해주면 완료입니다.

저장 후 서버 실행 하고, 브라우저에서 회원가입해보면 데이터베이스에 데이터가 잘 생기는 것을 볼 수 있습니다.