Code1018

  지난 글에서 auth APP을 이용하여 로그인/로그아웃 기능을 구현하였다. 이번에는 회원가입 기능을 추가해 볼 것이다. 이를 위해 accounts APP을 만들어준다.

< accounts APP 생성 >

  이제 이 APP에 auth APP의 기능을 이용해 회원 가입 기능을 추가할 것이다. settings.py 를 수정해준다.

< settings.py 수정 >

  accounts APP을 생성한 후 settings.py 파일에서 임포트 APP 리스트에 추가해준다.

< urls.py 수정 >

  urls.py에 생성한 accounts 경로를 만들어주고 우리 APP의 urls을 include해준다. 위에서 아래로 url을 찾기 때문에 우리가 만든 APP의 urls.py를 검색한 뒤 여기에 없으면 auth APP의 urls.py에서 찾는 url을 찾을 것이다.

< accounts/urls.py >

  우리가 만든 APP의 urls.py에 회원 가입 경로를 설정해준다. views 파일에 SignUp 클래스를 만들어 줄 것이므로 위와 같이 view를 넣어준다.

< SignUp 클래스 생성 >

  이 클래스는 제네릭 CreateView이다. form은 auth APP에 있는 UserCreationForm을 사용할 것이고, template과 가입이 끝난 뒤 어디로 redirect 시킬지에 대한 정보를 입력한다. 

< signup.html >

  마지막으로 회원 가입하는 페이지! signup.html 템플릿을 만들어준다.

  이제 지금까지 구현한 회원가입 기능이 잘 동작하는지 확인해본다.

< Signup 페이지 >

  aacounts/signup/ 으로 접속하니 회원가입 페이지가 잘 나오는 것을 확인 할 수 있다. 이제 아이디와 비밀번호를 입력하여 회원가입한다.

< 회원 가입 >

  회원 가입 후 실제로 로그인 해본다.!

< 로그인 시도 >

< 로그인 성공 >

  우리가 회원 가입한 아이디로 로그인이 된 것을 확인 할 수 있었다.

  이로써 auth APP을 이용하여 회원가입 기능을 구현해 보았다.

로그인 및 회원가입 페이지 만들던 것에서

추가해주어야할 아주 중요한 것이 있다.
바로
아이디 중복 체크이다.

같은 아이디가 여러개라면
로그인할 때도 엉망이 될게 분명하고
DB도 난리 날 것이다.

오늘은 회원가입할 때
아이디가 중복되는지 체크해주는 기능을 넣을 것이다.

먼저, 폼체크를 할 것이다.
회원가입 페이지에서
빈 칸으로 회원가입을 하려고 하면
빈칸을 채우라고 알려주는 것이다.

로그인할때의 폼체크와 같이 해줄 것이다.
우리가 전에 만들었던 js 파일에서 joinCheck 메서드를 만들어서 체크해줄 것이다.
그러기위해 전에 만들었던 js파일을 연결해준다.

(폼 체크)

(추가한 폼체크 파일)

여기까지 폼체크가 끝났다.
이제
아이디 중복 체크를 해줄 것이다.
전에
로그인할때 비밀번호 체크하기 위해 만들었던 loginCheck.java 파일에
이번에 중복확인 작업을 해주는 메서드를 추가할 것이다.

(아이디 중복 체크 메서드)

명령어
select id from member 를 이용하여 MySQL에서 id들을 쭉 불러온다.
그리고 전체를 돌면서 일치하는 값이 있으면 true를
일치하는 값이 없으면 false를 반환하는 메서드를 만들었다.

이제 이 메서드를 이용하여 중복체크하는 joinOK.jsp 페이지를 만들어서
만약
중복된다면
아이디가 중복되었다고 알려주고 다시 회원가입 페이지로 돌아가고
그렇지 않으면
DB에 넘어온 정보들을 입력하는 페이지를 만든다.

(중복 체크 페이지)

자 여기까지 끝이다!
이제 중복되는 kim의 아이디로 회원가입을 해보겠다.

(중복되는 아이디 실험)

(아이디가 중복된다고 뜬다.)

(회원가입 페이지)

그 후 다시 회원가입 페이지로 넘어오는 기능까지 넣었다.

어제까지 JSP와 DB를 연동하여 회원가입까지 마무리하였다.
로그인기능까지 추가했는데

오늘은 로그인 인증이 되면 세션을 열어줄 것이다.
그래서 로그아웃하거나 브라우저가 닫히기 전까지는 로그인을 유지할 수 있도록 하겠다.

이렇게 되면 코드가 길어지게 되는데
먼저 로그인 인증을 하는 메소드를 따로 자바 파일을 만들어서 구현할 것이다.

(로그인 인증 메소드)

비밀번호와 비교해서 일치하면 true 그렇지 않으면 false를 리턴하는 메소드를 짜보았다.

그 후 main 페이지에서 적용시켰다.
간단하게 인증 성공과 실패를 구분지어보았다.

(인증기능 추가)

그리고 추가적으로
아이디와 비밀번호를 입력하지 않고 로그인을 눌렀을 때 입력해달라고
폼체크를 하는 것을 추가했다.
그렇지 않으면 위에서 체크할 때 아이디와 비밀번호가 null인지도 또 추가해야하기 때문이다.
그리고 그것에 대한 알림을 주고 싶었다.

자바 스크립트 연결

(자바 스크립트 연결)

onsubmit -> submit버튼이 눌리게 되면 실행된다.

(폼체크 추가)

폼체크 자바스크립트 파일 작성

(아이디와 비밀번호가 입력되었는지 체크)

그리고 로그인 되었으면 로그인이 되었는지 확인할 수 있도록
로그인 페이지를 간단하게 만들었다.
로그인이되면 로그인이 되었다는 알림과 함께
이 페이지로 넘어오게 할 것이다.

(로그인된 페이지)

그리고 세션을 추가해주기로 했으므로
로그인이 된다면
session.setAttribute를 이용해 해당 아이디와 login 세션에 yes로 값을 설정해준다.

그렇게 하여 이 login 세션이 yes이면 아까 만들었던 페이지로 넘어가고
그렇지 않으면 전에 만들었던 페이지에 남게 된다.

(로그인 메인 페이지 코드)

이렇게하고 직접 확인해보겠다.
:)

(메인페이지)

(로그인 성공 알림)

(로그인 된 화면)

아.! 깜빡했던게 있다.
로그인 옆에 우리가 어제 만들었던 회원가입 버튼을 추가해주기로한다.
메인 페이지니까! :)

(회원가입페이지 연결)

확인해보겠다

(회원가입 버튼 생성)

이제 로그인 화면에 이름같은걸 출력해서
로그인이 된 내용들을 볼 수 있게 하고 싶다.

넘어오는 값을 확인하기 위하여 아까 설정했던 세션 아이디를 출력해서
id누구누구 님 안녕하세요를 출력해보기로 한다.

(로그인 인증 후 페이지 코드)

(로그인 화면)

세션ID가 잘 넘어오는 것을 확인할 수 있다.

아! 로그인된 페이지에서 그래도
로그아웃 버튼은 있어야 그럴싸하지 않을까?
로그아웃버튼 생성! (후딱)
button으로 onclick시 logout변수에 yes라는 값을 넣어 넘겨주었다.

(로그아웃 추가 코드)

메인 페이지에서는 logout변수가 null이 아니고 yes라면
remove를 이용해 세션을 삭제해준다.

(세션 삭제)

확인

(로그아웃 버튼 생성)

자 이제 하던걸 해보겠다.
아이디로 DB에서 검색해서 이름하고 나이, 포인트를 받아와서
출력해주겠다.

(회원정보 코드)

확인!

(로그인 페이지)

로그인이 된 후에 페이지에 회원의 이름과 함께
나이, 포인트의 정보가 출력되고 있는 게 보인다.!
맘에 든다.!

자 여기까지가 회원가입 및 로그인 페이지를 다 만들었다.
내일 마지막으로 디자인 살짝! 조금 다루어준 후 마무리 해보겠다. :)

오늘 추가한 내용
세션기능
로그아웃기능
회원정보 출력
+ 어제는 로그인 체크페이지로 이동해서 검사했지만 오늘 수정으로
? 표시를 이용해 그 페이지 내에서 자체로 검사하기로 했다.
괜히 페이지가 많아지는 것을 줄이기 위해서다.!

전에 만들던 로그인 페이지 프로젝트는
메모장을 이용했다.

이번에는 DB를 연동시켜서
회원가입하는 페이지로 DB에 정보를 등록해서 회원가입하고
로그인하는 프로젝트를 해보겠다.

사용할 DB는 MySQL이다.

(MySQL 아이콘)

귀여운 돌고래모양의 아이콘이 MySQL이다.

사용할 데이터베이스를 만들어준다.

(DB 생성)

그 후
사용할 테이블을 만들어주겠다.
인코딩은 utf-8을 사용한다.

idx는 인덱스 번호이며, 아이디, 비밀번호, 이름, 나이, 포인트, 아이피주소, 등록날짜를 저장할 것이다.

(테이블 생성)

만들어진 테이블을 확인해보겠다.
select * from member
sql 명령문으로 확인한다.

(테이블 확인)

테이블이 잘 만들어졌다. :)

이 DB와 접속하기 위해서는
DB와 연결하고 접속할 클래스가 필요하다.

(DBUtil 생성)

(DB 유틸 코드)

코드는 위와 같다.
DB와의 연결 conn을 반환하는 메소드(연결하는 메소드)
그리고 close 메소드들을 정리해주었다.

이제 간단한 회원가입 양식 페이지를 만들겠다.
(디자인은 거의 무시했다. 보기 이상하더라도...!)
(디자인은 나중에 정리해보겠다.)

(회원가입 페이지 코드)

(회원가입 모습)

이제 이 정보를 가지고 DB에 입력할 jsp페이지를 만들어서
DB에 등록해보겠다.

(등록 페이지 코드)

입력 받은 내용을 토대로 insert 명령을 사용해 DB에 등록한다.

확인해보겠다.

(확인)

(확인)

DB에 잘 등록된걸 확인 할 수 있다.
가입 날짜는 자동으로 기록되게 했으므로 따로 기록하거나 DB 명령문에 입력안해도 된다.

이제 이 DB를 가지고 간단하게
로그인해보겠다.

간단한 로그인 메인페이지다.

(메인 페이지 코드)

(메인 페이지 화면)

(현재 등록된 정보)

입력받은 정보들을
loginCheck.jsp 페이지로 넘겨서 확인해보겠다.

(확인 코드)

여기서 시간이 많이 걸렸다...
select 명령문을 이용해 해당 비밀번호를 찾는것 때문에 헤메었는데,
rs.next(); 명령으로 다음 결과 셋트로 넘어가는게 포인트다.

확인해보겠다.

(결과 확인)

(로그인 성공)

(로그인 실패)

(1)에서는
회원정보를 DB에 등록하고
그 정보를 통해서 로그인하는 과정까지 만들었다.

(2)에서는
연결된 로그인으로 로그인세션을 만들어서
로그인 된 상태에서는 다른 회원 페이지를 보여줄 것이다.