오늘은 스케쥴관리 페이지에서 할일을 추가하는 기능을 만들었다.

쉽게 말하면
todolist table에 데이터를 집어 넣는 기능이다.

페이지를 옮겨다니는 것도 좋지만
팝업창 기능을 이용해서 기능을 구현하고 싶었다.



(스케쥴관리 메인 페이지)



여기서 할 일 추가하기를 누르면 팝업창이 뜨고 입력하게 할 것이다.

팝업창을 뜨게 하는 자바스크립트를 검색했다.
그리고 그냥 추가하고 크기만 조금 수정했다.



(팝업 스크립트)



그 후 [할 일 추가하기] 버튼을 클릭했을 경우 스크립트가 동작하도록 호출한다.



(팝업 호출)



호출된 페이지는 schedule_append.jsp 페이지로 이동하므로
이제 이 페이지를 작성해야한다.
기본적으로 DB에 아이디를 추가할 것이다.
id는 세션값으로 받아왔다.
그리고 그 아이디를 통해 이름을 가져왔다. (지금 생각해보니 왜 가져왔는지 의문)
(삭제해줘야할 불필요한 코드다..!)
(아이디를 통해 todolist를 필터링 할것이다.)
(해당 아이디의 데이터만 화면에 보이게 할것이다.)



(기본정보 받아오는 코드)



그리고 form 태그를 만들어준다.
여기서 입력한 정보를 schedule_append_OK.jsp 페이지로 넘어가서 데이터를 입력시켜줄 것이기 때문이다.



(form 태그 만들기)



이제 여기서 입력한 정보를 schedule_append_OK.jsp 페이지로 넘겨주어
데이터를 입력할 것이다. (MySQL에)



(데이터 입력)



입력 후 이 창은 팝업창이므로 저절로 닫히도록 자바 스크립트를 추가했다.



(스스로 창닫기 코드)



지금 까지 만든 페이지를 확인해보자! :)



(할일 추가하기 클릭)



팝업창이 뜬다!



(팝업창)



여기에 할 일을 적어준다.




(할 일 입력)



그리고 추가하기를 눌러준다.!

메인페이지에 다시 들어가보면!
할 일이 추가된 것을 볼 수 있다.


(할일 추가 된 모습)





저번까지 만들었던
로그인 및 회원가입 페이지를 이용할 것이다.

회원가입 후 로그인을 하여
사용자들이 여러가지 기능을 사용할 수 있게 할것이다.

1. 스케쥴 관리
2. 출석게시판
3. 자유게시판
4. 포인트 순위
5. Shop

이런 기능의 메뉴들을 만들 것이다.
그 기능의 일환으로 스케쥴 관리를 오늘 대략적으로 짜보겠다.

그에 앞서 홈페이지의 메인 페이지를 구성해봐야한다.

다양한 기능들의 페이지가 필요하므로
폴더를 만들어서 관리를 할 것이다.!



(폴더 생성)




그 후 main 페이지 코드이다.



(메인 페이지 코드)



여기서 div 등 을 이용해
간단하게 보기좋게 디자인하였다.
(더 자세하고 정교하게 디자인은 나중으로...!)

코드에는 각 내용의 버튼들이 있고
그 버튼이 눌렸을때 각 해당 main 페이지로 이동하도록 코드를 구성했다.

실행 화면이다.



(메인 페이지)




여기서 나의 정보의 개인정보 수정을 클릭하면



(개인정보페이지)



아직 내용은 없지만 무슨 페이지인지만 헤더에 적어 놓았다.
마찬가지로


(출석 게시판 페이지)




출첵 게시판 등등
다른 페이지도 헤더에 어떤 페이지인지만 써놓고
페이지 파일을 만들어 두었다.
이제 우리는 이 내용들을 채워갈 것이다.

먼저 스케쥴 관리 게시판!
이름은 거창하지만

To do LIst 게시판이라고 생각하면 된다.
해야할 것들을 적어 두는 게시판으로 활용할 것이다.

우선 테이블을 만들어준다.!



(테이블 생성)



todo의 테이블을 만들어 주었다.



(테이블 모습)



여기서 id 값으로 사용자들을 구별하여
해당 id의 내용들만 뽑아서 보여줄 것이다.

스케쥴관리의 메인 페이지부터 작성해볼것이다!


(스케쥴관리 메인)



제일 먼저 해당 아이디로부터 개인 정보를 받아와서 출력해줄 것이다.
그래서 포인트가 몇점인지
그리고 ID가 무엇인지 받아와야 그 ID로 해당 todo 테이블에서 데이터를 꺼내올 수 있기 때문이다.

그 후
select * from todo where id =?
명령문 ?에 입력받은 id를 넣어주어 해당 ID의 데이터만 뽑아 올 것이다.



(select * from todo where id =?)



그 후 받아온 내용을 페이지에 뿌려준다.
단,
아무 내용이 없을 경우
해야할 일이 없다고 출력해준다.



(화면에 뿌려주기)



그리고 아직은 기능은 없지만
해야할 일을 추가하거나
해야할 일을 삭제하거나
해야할 일을 수정하는 기능이 있는
버튼이 필요하다.



(버튼 생성)



버튼 3개를 만들어주었다.

여기까지 스케쥴관리 메인 페이지를 확인해 보겠다.

먼저 메인페이지에서 스케쥴관리를 클릭한다.



(스케쥴 관리 클릭)





(스케쥴 관리 페이지)




페이지에는 입력받은 이름으로부터 "이름"님의 해야할 일이 출력되고
해당 id의 포인트 그리고 아직은 데이터가 없으므로
해야할 일이 없다고 출력되는 것을 확인 할 수 있다.






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

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

같은 아이디가 여러개라면
로그인할 때도 엉망이 될게 분명하고
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)에서는
연결된 로그인으로 로그인세션을 만들어서
로그인 된 상태에서는 다른 회원 페이지를 보여줄 것이다.




오늘은 폼체크를 공부하고
폼체크 기능을 추가했다.

Formcheck 기능은 양식에 맞는지 체크해주는 것이다.
이 모든것을 JSP 파일로 만들면 서버에 부하도 크고 용량도 많이 차지하게 되므로
간단한 체크같은 경우
Java Script로 작성하여 체크해준다.

로그인 화면에서 폼체크
1. 아이디가 적혔는지
2. 비밀번호가 적혔는지
+ 추가기능
로그인 화면이 뜨면, 아이디 입력 칸에 커서가 깜빡깜빡이기.



(폼체크 코드)



1. onload
: 이 기능으로 body부분이 열릴때 실행된다.
focus()기능은 커서가 깜빡깜빡이는 기능이다.
form 에 name속성을 추가하여 document.loginForm.id에 focus 기능을 추가했다.

2. onsubmit
: submit이 눌릴때 체크하게 된다. return을 쓰고 formCheck()를 써서
formCheck반환 값은 true, false로 해준다.
formCheck함수는 위에 자바스크립으로 작성해주었다.
입력 형식에 맞으면 true
그렇지 않으면 false를 반환해준다.


(실행결과)






(실행결과)



실행결과
아이디 혹은 비밀번호가 입력되지 않으면 위와같이 오류 메세지를 출력해준다.

이 기능은 회원가입 형식에도 사용할 것이다.
그러므로 자바스크립 파일을 따로 만들어 줄것이다.






(자바스크립트 파일)



자바 스크립트 파일에 위에 스크립트 부분을 그대로 옮겨준다.

그 후 이 함수를 사용할 곳에서는
아래와 같이 연결해주면 된다.



(자바스크립트 연결)




이제 회원가입페이지에서 이 기능을 사용해보겠다.
똑같이 자바 스크립트파일을 지정해준 후
submit을 누를때 체크하는 형식으로 해주었다.




(회원가입페이지)





(실행 결과)





(실행 결과)



실행결과
폼체크가 회원가입페이지에서도 잘 적용됬다.

:)

이제 이 기능에서 아이디 중복확인을 추가해보려했다.



(자바스크립트)




(회원가입 코드)





(실행결과)



위와 같은 실행결과 까지는 성공했지만
자바스크립트에서 데이터를 받아오는데 문제가 있었다.
자바스크립트가 자바랑 조금 미묘하게 달라서
자바스크립트만 따로 공부를 해서 추가해야할 것 같다.
ㅜㅜ




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

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

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 비밀번호가 추가된 것을 볼 수 있다.

그렇다면 로그인도 될까?




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








(로그인 성공 모습)





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





(이미 존재하는 아이디)





(알림 메세지)





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

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


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

아직 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. 회원가입 버튼

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

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

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



(내가 구성한 코드)



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

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

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

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



(id. ps 체크 페이지)



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

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

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




(로그인 화면)



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



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

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





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



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

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



(해당 페이지로 넘기기)



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

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




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





(회원 가입 페이지)



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



+ Recent posts