Code1018

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

이번에는 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)에서는
연결된 로그인으로 로그인세션을 만들어서
로그인 된 상태에서는 다른 회원 페이지를 보여줄 것이다.

오늘은 로그인페이지에서 데이터베이스를 구축하고
아이디/비밀번호를 체크해서 로그인을 해보겠다.

아직 DB 공부는 안해서 DB 공부 들어가기전에
메모장을 이용해서 아이디 비밀번호를 관리해서 구현해보겠다.

먼저 메모장 파일을 만든다.

(아이디/비밀번호 파일)

아이디         비밀번호
root               toor
hack             1234
security          aaa

이렇다.

이 파일에서 입력받아서 ArrayList로 만들것이다.
이 과정은 앞으로 계속 사용할 것이므로 java 파일로 만들어 둘것이다.
소스에서 패키지 만들고 class를 생성하였다.

(DB 받아들이는 파일)

이제 이 파일을 이용해 메모장 DB를 접근하여
아이디/비밀번호를 체크해 보겠다.

로그인 체크는 로그인 체크.jsp 에서 확인하는 코드를 추가하였다.

(체크 하는 코드 추가)

filename 을 경로를 지정 받아서 filename을 만들었다.
그 후 db 배열에 입력하였다.

그 후 멤버의 수를 계산하였다. 그 이유는 인덱스를 나중에 계산하기 위해서이다.

contain 메서드를 이용해 id를 체크하고
인덱스를 계산하였다.

그 후 아이디/비밀번호를 체크하였다.

실행 화면은 다음과 같다.

(없는 아이디를 입력)

(아이디와 비밀번호를 다시 확인해달라고 나왔다.)

(지금 쓰면서 생각 난 것인데, 이 부분을 아이디와 비밀번호를 확인해달라고 경고창을 띄우고
 다시 로그인 화면으로 돌아가게 할 것이다. 나중에 이 코드를 추가할 것이다. )

(존재하는 아이디, 하지만 틀린 비밀번호 입력)

(오류 화면)

이 화면에서 전과 똑같은 구문을 추가한 이유는
보안상 이유로 두개의 같은 구문으로 통일 시켰다.

(존재하는 아이디/비밀번호 입력)

(로그인 성공 화면)

제대로 성공했다고 뜨는 화면이다.

여기서
아이디로 비밀번호를 체크하는 과정을 추가해보려고 한다.
아이디를 추가하는건 조금 복잡할 것 같아서 일단 단순한
비밀번호를 찾는 기능을 추가하였다.

비밀번호 찾는 페이지에 코드를 추가하였다.

(비밀번호 찾기 페이지)

아이디 입력하면 그 아이디를 find.jsp 로 아이디를 보내준다.
find 페이지에서 이 아이디로 비밀번호를 찾아서 출력해 줄 것이다.

(find.jsp)

여기서는 경고창으로 설정하였다.
아이디가 존재하지 않으면 해당 아이디가 없다고 출력을 해주고
해당 아이디가 있으면 해당 아이디에 일치하는 비밀번호를 출력해준다.

(아이디/비밀번호 찾기 클릭)

(아이디/비밀번호 찾기 페이지)

없는 아이디를 입력해보겠다.

(없는 아이디 입력)

(결과 화면)

존재하는 아이디를 입력해보겠다.

(존재하는 아이디 입력)

(비밀번호 출력)

여기서 치명적인
논리적 헛점(?) 을 발견하게 되었다....

(비밀번호를 입력)

(오류화면)

그 이유는 코드에 있었다..
다시 잘 보면..

(문제 코드 화면)

id를 찾는 과정에서 db에서 contain 함수로 찾기 때문에
비밀번호를 찾아도 아이디라고 생각하고 그 값의 인덱스를 출력하고

그 출력에다가 멤버의 수를 더하니 db의 인덱스를 초과해서
에러 화면이 나오는 것이다.
...
..
그렇다는 것은
로그인 화면에서도
아이디에 비밀번호를 입력하면
에러 화면이 뜰것이라는 것이다..

내일 이 부분에 대해서 수정을 해야할 필요가 있다.
내일은 이 부분에 대해서
보완을 해보겠다...! ㅜㅜ

지금 공부하고 있는 JSP 지식을 이용해
로그인 페이지를 만들어 볼 것이다.

단계별로 진행할 것이고
공부하는 JSP 지식을 추가하면서
업그레이드 되는 부분은 수정하면서 만들 것이다.

JSP 로그인 페이지 계획
페이지에 있을 내용
1. 아이디, 비밀번호 입력
2. 로그인 버튼
3. 아이디/비밀번호 찾기 버튼
4. 회원가입 버튼

오늘은 간단히 로그인하는 화면과 버튼들 그리고
로그인 버튼을 누르면 아이디와 비밀번호 내용이 다음 페이지로 넘어가는 것 까지
구현해 보겠다.

더 정교한 디자인은 아직 못하므로
기능적인 부분을 우선시하여 구현하겠다.

디자인 부분도 조금씩 수정하면서
그럴싸한 로그인 페이지를 만들어 보겠다.