데이터베이스를 이용한 회원 관리 시스템 구축하기 4 - 로그인 인증 처리 1 : 회원 인증을 위한 아이디와 비밀번호 받는 폼과 자바스크립트 파일 작성

로그인 인증 처리를 위한 실습을 진행해 볼 것이다. 먼저 입력 폼부터 만들어보겠다.

---

 

 

 

 

로그인 인증 처리

 

 

 

 

이번 장에서는 회원 관리만 하지만 보통 대부분 웹사이트에서는 회원 관리, 게시판 관리 등 다양한 작업들이 이루어진다. 이런 작업을 위한 JSP 파일을 폴더 별로 나누어 관리하지 않으면 프로젝트에 어려움이 있기 때문에 회원 관리를 위한 JSP 파일을 member 폴더에, 게시판을 위한 관리는 board 폴더에 한다.

여기서는 회원  관리를 위한 작업을 위한 jsp 파일이기에 member 폴더를 주가한 후 이 폴더에 JSP 페이지를 추가하도록 한다. member 폴더 추가는 JSP를 생성할 때 나타나는 입력폼에서 추가하면 된다.

---

 

 

 

 

[직접 해보기] 회원 인증을 위해 아이디와 비밀번호를 입력받는 폼

 

1. member 폴더 생성하기

 

webapp 옆에 member라고 써서 폴더를 생성해주었다.

 

 

 

이렇게 member 폴더가 생성되었고 그 안에 jsp 파일도 만들어졌다.

---

 

 

 

 

2. login 파일에 코드 작성하기

 

입력 폼을 정상적으로 수행하기 위해서는 자바스크립트 파일(member.js)이 필요하기에 이를 포함하였다. member.js에 loginCheck() 함수를 정의하여 로그인 버튼을 클릭하면 아이디와 암호가 모두 입력되었을 때 로그인 인증 처리를 한다. 둘 중 하나라도 입력이 안 되면 에러 메시지를 출력하면서 진행이 되지 않도록 할 것이다.

 

 

 

아직은 파일을 만들지 않아서 로그인 버튼을 누르면 오류 창이 나타난다.

---

 

 

 

 

유효성 체크를 위한 자바스크립트 파일

유효성을 파악하기 위해 폼에 입력된 정보가 올바른지 판단하기 위해 자바스크립트를 사용해야 한다. 폼에 입력된 정보에 대한 유효성 체크는 자바스크립트로 한다.

 

유효성을 체크하는 자바스크립트 함수는 여러 JSP에서 공통적으로 사용되는 내용을 포함하기 때문에 이를 하나의 자바스크립트 파일로 분리해 놓고 이를 필요로 하는 JSP 파일에서 포함해서 사용해야 한다.

하나의 파일에 모든 내용을 포함하지 않고 스타일시트는 css 파일에, 자바스크립트는 js에 따로 분리해서 작성한다. 그리고 jsp 파일과 스타일시트 파일과 자바스크립트, 이미지 파일 등 다양한 종류의 파일은 한꺼번에 WebContent 안에서 관리하지 않고 동일한 종류의 파일끼리 폴더에 분리해서 관리한다.

그렇기 때문에 유효성을 체크할 자바스크립트 파일은 script 폴더에 저장해 두겠다. 

---

 

 

 

 

[직접 해보기] 회원 관리 웹 애플리케이션을 위한 자바스크립트 파일

 

1. Webapp에서 script 새 폴더 생성하기

 

 

 

이렇게 script 폴더가 하나 생겼다.

---

 

 

 

 

2. 자바스크립트 파일 만들기

 

이처럼 js 파일을 만들고 다음과 같은 코드를 작성했다.

---

 

 

 

 

 

3. 자바스크립트 코드 작성하기

 

---

 

 

 

 

4. 코드 분석하기

 

 

jsp 파일이나 서블릿 클래스 이름으로 요청이 일어나지 않고 모든 요청을 xxx.do와 같이 한다. 이번 장에서 구축한 웹사이트에서도 jsp 페이지를 직접 실행하지 않고 xxx.do로 요청하여 서블릿에서 jsp 페이지를 실행하도록 작성하겠다.

---

 

 

 

 

 

 

학습을 마치고

아직 로그인 인증 처리를 위한 프로그램이 두 개 정도 남아있는데 남은 내용은 다음 포스트에 이어서 작성하기로 했다. 오후에 10장을 빨리 다 마치려고 했으나 저녁까지 해도 할 내용이 많이 남아있다.

오랜만에 자바스크립트 코드를 작성하려니 어려움이 있었지만 해볼 만했다.