[Spring][7]Join practice[회원가입 실습]

목차

- CRUD 구현 실습

- BootStrap

- 회원가입(Join) 구현

 

---

CRUD 구현 (Join) 실습

 

다음과 같이 폴더를 구성합니다.

 

auth는 인증이 필요한 페이지를 모아두는 폴더입니다.

 

 

폴더 구성의 모습

 

 

UserController를 새로 만듭니다.

 

 

redirect를 하는 이유는 정보를 그대로 가진 상태에서 넘겨줘야한다는 것!

 

 

webapp/WEB-INF/views/test 의 경로로

 

test폴더를 만들고 navbarTest.jsp를 추가해보자

 

navbar를 가져다 쓰기 전에 테스트를 위해 새롭게 test폴더와 jsp파일을 생성합니다.

테스트를 할 때는 바로 적용하기보다는 이렇게 테스트를 먼저 합니다.

 

 

navbarTest.jsp

 

 

비어있는 jsp 파일(navbarTest.jsp)에서 밑에 사진처럼 윗부분만을 남기고 밑에 부분은 삭제합니다.

 

그리고 bootstrap에서 가지고 온 것을 복사 붙여 넣기 해봅시다.

 

 

빨간 박스 주목, 그리고 밑에 추가된 모습들

 

---

Bootstrap

 

bootstrap을 써서 디자인해보자

 

w3 bootstrap은 트위터에서 만든 라이브러리를 오픈소스로 공개를 한 것입니다.

 

https://www.w3schools.com/

W3Schools Online Web Tutorials

 

 

 

 

Learn Bootstrap

 

BS4 NavBar 선택

 

Collapsing The Navigation Bar 선택

 

Navbar

 

버튼을 누릅니다

 

왼쪽 화면 복사!

 

화면을 복사하고 navbar 파일에 넣습니다.

 

navbarTest.jsp에 bootstrap에서 가져온것을 붙여넣기함

 

 

test를 위해 BootStrapTestController를 따로 또 만들어 줍니다. 컨트롤러를 만들어주는 이유는 JSP파일 혼자서 실행이 되지 않기 때문인데요, 그래서 mapping을 통해서 url로 접근할 수 있게 만들어 줍니다.

 

 

.test

 

BootStrapControllerTest

 

@Controller를 붙여줍니다. Controller를 붙여주면 페이지로 반환을 해줍니다.

test/navbarTest.jsp를 반환하게 됩니다.

 

Controller, GetMapping("") url 지정

 

컨트롤러의 위치

 

 

Ctrl + shift + f를 하면 정렬을 해주는데 Line width 값이 낮으면 정렬할 때 좁아 보입니다.

설정을 바꿔 줍시다!

 

 

Window -> Preferences

 

Editor -> Line width값을 바꾸어줌

 

설정을 바꾸니 되게 가독성이 좋아졌다.

 

navbarTest.jsp에 bootstrap에서 가져온것을 붙여넣기함

 

다음과 같이 수정합니다

 

수정된 모습, href에 Mapping했던 url이 들어가는 모습

 

이제/test/boot/navbar를 입력을 하고 접속해봅시다.

 

구현되는 모습

 

테스트가 되었으면 이제 원래 만들고자 하는 파일에 복붙을 합니다.

 

*

Tips

절대 원래 구현하고자 하는 파일에 먼저 테스트하지 마라

*

 

코드를 자세히 보면

아래처럼 source의 위치를 내부 서버나 로컬이 아닌 바깥의 url을 가져와 쓰는 것을

CDN(Content Delivery Network) 방식이라고 합니다.

장점으로는 server에 부담이 덜합니다.

 

script태그 안의 source의 경로들

 

이제 테스트가 되었으니

layout 폴더 추가해서 header와 footer를 추가해봅시다.

 

layout폴더를 만들어줍니다

 

header를 들고 오면 됩니다. 

 

<%@ include file="" %> 안의 경로를 잘 확인합니다.

 

header.jsp 파일이 layout 폴더 안에 있기 때문에 joinForm.jsp 에서 auth 폴더를 나가고

다시 layout 폴더로 들어가야 합니다.

 

url로 보면../ 은 지금 있는 폴더 바깥이라는 뜻이며,

/layout은 layout 폴더로 들어간다는 뜻입니다. 

 

그리고 header.jsp를 선택한다는 거죠.

 

header를 추가해 코드가 간결해진 모습 

 

아래는 navbarTest.jsp의 코드를 가져와서 header.jsp를 만든 모습입니다.

 

header page

 

 

footer를 만들기 위해 간단한 Templates을 가져옵니다.

 

 

BS4 Basic Template 선택

 

요것만 복사

 

복사해서 글을 넣어보니

footer가 안 이쁘다, 이모지 추가해보자

 

표시를 누릅니다

 

표시를 누르고 키보드를 눌러 이모지를 확인해봅니다. 

 

이모지가 추가된모습

 

훨쉰 나아보인다

 

user의 address를 받아오기 위해서 User 클래스에 가서 수정을 하고

getter, setter도 추가합니다

 

 

그리고 yml 파일을 ddl-auto를 none에서 update로 바꿔줍니다

그래야 table이 새로 생깁니다.(@GeneratedValue)

 

update

 

address 추가

 

바꾸고 나서 none으로 설정을 바꾼다.

그렇지 않으면 서버 실행 시 데이터가 날아갈 수 있습니다.

 

none!!

 

---

회원가입 구현

 

Forms를 긁어와서 회원가입 페이지를 만들어보자.

회원가입 시 입력값을 받아오는 Templates을 가져옵니다.

 

BS4 Forms

 

header와 footer 사이에 쏙 넣어줍니다

 

/auth/joinForm Url을 입력하고 접속해보자.

 

구현되는 모습

 

입력창이 너무 길어 보인다.

여기에 이쁘게 담기 위해서 container로 감싼다.

 

그리고 아래와 같이 name을 추가하고 DB에 담긴 columns 이름을 맞춰줍니다.

"username", "password", "email", "address"

 

container 추가

 

더 나아진 모습

 

회원가입을 직접 해봅시다.

각각의 요소에 입력값을 넣고 회원가입 버튼을 눌러줍니다.

 

 

회원가입이 성공하면

아래처럼 로그인 화면으로 이동하게 됩니다.

코드상에서는 form 태그 안에 action 값으로

form action="/auth/join"을 넣습니다.

 

그렇게 하면 GetMapping("/auth/join")으로 가게 되어 있기 때문에 UserController 여기로 가서

안의 코드를 실행합니다.

 

@GetMapping("/auth/join")

public String join(User user) {

userRespositroy.save(user);

return "redirect:/auth/login";

}

 

user 값이 form 태그 안에 담겨있는 채로 넘겨주게 되고

이것은 JPA에서 내장되어있는 함수를 사용하게 되어 쿼리문으로 save 하게 됩니다.

 

다음으로는

로그인 화면으로 이동하게 됩니다.

 

로그인 화면

 

DB에서 확인해보면 이렇게 DB에 데이터가 쏙 들어가 있네요!

 

DB에 들어간 모습

 

 

---