오늘은 로그인 페이지에서 발견되었던 결함을 수정하였다.
그리고 회원가입을 할 수 있게 하였다.

로그인 페이지의 결함을 수정한 방법은
아이디 배열과 비밀번호 배열을 따로 만들기로 했다.

DB 텍스트 파일을 두개 만들까 생각했다가
그건 너무 번잡스럽고 DB 파일 하나로 관리하기 위해서 DB 파일은 하나로 그대로 하고
DB 파일에서 아이디와 비밀번호를 따로 받아서 배열을 두개로 만들기로 했다.

먼저 DbRead 클래스에서 메소드를 추가하였다.
id 배열을 return 하는 메소드와 password 배열을 return 하는 메소드 두개를 추가하였다.



(추가한 메소드)



그리고 아이디, 비밀번호 체크하는 페이지에서 db_id , db_passwd 배열 두개를 만들어주었다.



(체크 페이지 화면)




이렇게 되면 아이디배열에서 아이디를 검색하고
비밀번호 배열에서 비밀번호를 검색하기 때문에 속도가 더 빨라진다.

지금은 DB 자료가 많지 않기 때문이지만 DB 파일 하나로 유지하기 때문에
많은 정보가 있다면 검색하는데 제약이 있다.

아래는 수정하고 실행한 화면이다.




(로그인 화면에서 비밀번호를 입력)





(에러화면)



아이디 배열에 없는 id 이므로 오류 화면을 띄어준다.

비밀번호 찾는 페이지에서도 똑같이 수정해주었다.




(아이디에 비밀번호 입력)


(정상 화면)



결함으로 발견됬던 에러페이지가 뜨지 않게 되었다.

이로써 저번에 발견됬던 결함은 수정 되었다.

조금 더 그럴싸하게 아이디와 비밀번호가 틀리면 경고창으로 아이디와 비밀번호가
틀렸다고 알려주고 다시 화면으로 돌아오게 했다.




(수정한 화면)




경고창을 띄우고 다시 로그인 페이지로 돌아가는
코드를 추가해주었다.

아래는 실행화면이다.


(틀린 아이디 입력)




(경고창)




이제 회원가입 페이지를 만들어 볼 차례이다.

새로 수정된 DB로 원래 DB를 수정해주어야하므로
DbWrite 클래스를 만들어서 이 기능을 구현하도록 만들었다.




(클래스 추가)






(DB 수정하는 메소드)




이 메소드는 아이디와 비밀번호가 추가된 새로운 DB와 파일이름을 인자로 받는다.
그 후 파일이름에 접근해서 새로운 DB로 작성하는 코드다.

이제 회원가입 페이지를 만들것이다.
회원 가입 페이지에
이름, 개인정보도 추가해주어야하지만
이 정보들을 DB에 추가하기에 아직은 초라한 텍스트파일 DB이기 때문에
아이디와 비밀번호만 먼저 추가해 볼것이다.
(차차 업그레이드하는 것으로!)



(회원가입 페이지 코드)




회원 가입 페이지를 확인해본다.



(회원가입 페이지)




잘 나온다.!
이제 입력한 값을 회원가입 버튼을 누르면
넘어가는 페이지에서
새로운 DB로 수정하는 일을 해줘야한다.



(데이터 입력 페이지)




데이터를 입력해 아까 만들어준 클래스메소드를 이용해서 DB를 수정해주었다.

또 이미 있는 아이디에대해서 체크를해서 있으면 존재하는 아이디라고
출력해주었다. (나중에는 아이디 옆에 아이디 중복확인 이라는 기능으로 만들어줄 것이다.)

회원가입이 완료되면 회원가입이 완료 되었다고 알려주면서
로그인 페이지로 넘어가는 것으로 동작을 마무리한다.

한번 테스트해보겠다.



(수정 전 DB)




회원가입을 해보겠다.
아이디 apple, 비밀번호 1234 로 입력하고 회원가입을 클릭해본다.



(회원가입)


(회원가입 성공 모습)







(수정된 DB)





DB 텍스트 파일을 보면 apple 과 그에 따른 1234 비밀번호가 추가된 것을 볼 수 있다.

그렇다면 로그인도 될까?




(회원가입한 아이디로 로그인)








(로그인 성공 모습)





만약 존재하는 아이디로 회원가입을 하려고 한다면?





(이미 존재하는 아이디)





(알림 메세지)





이미 존재한다고 알려주면서 다시 회원가입페이지를 보여주면서 동작을 마무리한다.

다음에 더 추가해 줄 기능은
회원가입할 때 아이디 중복을 확인 버튼을 만들어서 체크해줄것이다.
로그인 한 후, 회원정보 변경 버튼을 만들어서 비밀번호를 바꿀 수 있는 기능을 추가해 줄것이다.


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

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

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

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

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

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



(내가 구성한 코드)



사이트 이름은 로그인 화면으로 설정하였다.
<h1> 태그로 로그인 화면의 간판을 만들어주었다.

form 태그를 이용해 로그인 했을 경우 loginCheck 페이지로 넘어가게 해주었다.
여기서 현재는 loginCheck 페이지로 로그인 정보를 넘기는 것 까지 구현하였다.

<input> 태그로 입력과 버튼을 설정하였다.
그리고 button을 이용해 아이디/비밀번호 찾기와 회원가입 버튼을 만들었다.

또 아이디와 비밀번호의 길이를 15자로 제한하였다.



(id. ps 체크 페이지)



로그인 버튼을 누르면 넘어가는 페이지를 작성했다.
지금은 간단히 넘어오는 데이터를 확인하기 위해
넘어온 데이터를 변수에 입력받아
화면에 출력해 주었다.

맨 윗줄에 request.setCharacterEncoding("UTF-8"); 을 입력해 준 것은
한글이 깨지지 않게 하기위해 작성해 준것이다.
(아이디가 한글로 입력 됬을 경우를 대비한 것이다.)

실제 동작시킨 페이지 화면이다.




(로그인 화면)



(아이디와 비밀번호 입력)



아이디와 비밀번호를 입력하는 화면이다.

입력하고 로그인 버튼을 누르면





(로그인 정보가 나오는 화면이다.)



로그인 버튼은 완성하였고
나머지
아이디/비밀번호 찾기 버튼
회원 가입 버튼
을 눌렀을 때

해당 페이지로 넘어 가는 것까지 구현했다.



(해당 페이지로 넘기기)



onclick 은 클릭했을 때 일어나는 일이다.

해당 페이지로 넘겨주는 코드를 입력하였다.




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





(회원 가입 페이지)



해당 페이지로 잘 넘어가는 모습을 확인할 수 있다.



+ Recent posts