JSP - 로그인 페이지 프로젝트(1)

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

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

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

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

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

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

(내가 구성한 코드)

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

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

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

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

(id. ps 체크 페이지)

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

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

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

(로그인 화면)

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

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

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

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

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

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

(해당 페이지로 넘기기)

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

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

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

(회원 가입 페이지)

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