[쇼핑몰 홈페이지 제작] 상품과 회원 관리 9 - 회원 가입 및 로그인 2 : 로그인 및 아이디 중복 체크하는 기능 구현하기

DAO 클래스를 작성하였으면 회원 가입 처리를 위한 페이지에서 공통적으로 사용하는 페이지부터 만들어 보겠다. 화면 상단의 주 메뉴에 따라 화면 좌측의 서브 메뉴는 달라진다. 상품과 관련된 작업에서 공통적으로 사용되는 서브 이미지와 서브 메뉴를 위한 페이지는 product 폴더에 저장해 두었지만 회원과 관련된 작업을 위해서 사용하는 모든 페이지는  member  폴더에서 관리된다. 

---

 

 

 

 

 

회원 가입 및 로그인 두 번째

 

[직접 해보기] 서브 페이지에서 이미지를 출력하는 파일

이번에 작성할 회원 관련 공통 페이지인 sub_img.html과 sub_menu.html 파일은 member 폴더를 생성하고 여기에 추가한다. 

---

 

 

 

 

[직접 해보기] 서브 페이지에서 좌측 메뉴를 구성하는 파일

 

회원 가입을 할 때 폼에 입력된 정보가 올바른지 판단하는 자바스크립트 파일을 WebApp의 하위 폴더인 member에 member.js란 이름으로 작성한다. 자바스크립트 파일은 이미 header.jsp 페이지에서 포함하고 있다.

 

 

---

 

 

 

[직접 해보기] 폼에 입력된 정보가 올바른지 판단하는 자바스크립트 파일

 

회원 가입을 위해서 화면 상단의 주 메뉴에서 join을 클릭하면 이용약관이 출력되는 페이지로 이동해야 하기 위해서 “NonageServlet?command=contract” 요청이 발생한다. 

이 요청을 받으면 약관 동의를 위한 페이지로 이동하는 액션을 만들어 보겠다.

---

 

 

 

 

[직접 해보기] 약관 동의를 위한 페이지로 이동하는 액션 클래스

---

 

 

 

 

[직접 해보기] 약관 동의를 위한 JSP 페이지

 

원래 소스 코드는 문장이 하나도 정리되어 있지 않아 일일이 정리해보았다. 시간은 좀 걸려도 이렇게 해야 나중에 보기도 편하다.

---

 

 

 

 

 

[직접 해보기] 커맨드 패턴으로 작업 처리를 위한 명령 처리 클래스 ActionFactory 수정하기

 

약관을 동의하고 [Next] 버튼을 클릭하면 “NonageServlet?command=join_form” 요청이 발생합니다. 이 요청이 발생하면 회원 가입을 위한 폼으로 이동한다.

---

 

 

 

 

[직접 해보기] 회원 가입을 위한 폼으로 이동하도록 하는 액션 클래스

회원 정보를 입력 받을 폼을 작성한다.

---

 

 

 

 

[직접 해보기] 회원 가입을 위한 폼을 출력하는 JSP 파일 

---

 

 

 

 

[직접 해보기] 커맨드(command) 패턴으로 작업 처리를 위한 명령 처리 클래스 
ActionFactory 수정하기

 

회원 가입이 제대로 이루어지려면 아이디 중복 체크를 해야 합니다. 아이디를 입력하고 나서 [중복 체크] 버튼을 클릭하면 “NonageServlet?command=id_check_form” 요청이 발생한다. 이 요청에 대한 처리를 하기 위한 액션 클래스를 작성하겠다.

---

 

 

 

 

[직접 해보기] 아이디 중복 체크를 위한 액션 클래스

 

다음은 아이디 중복 체를 위한 과정이다.

 

 

하지만 이런 식으로 아직은 그림이 보이지 않는다.

---

 

 

 

 

 

[직접 해보기] 아이디 중복 체크를 위한 폼을 출력하는 JSP 파일 

---

 

 

 

 

[직접 해보기] 커맨드(command) 패턴으로 작업 처리를 위한 명령 처리 클래스 
ActionFactory 수정하기

 

 

 

 

 

---

 

 

 

 

학습을 마치고

아이디 중복을 체크할 수 있는 코드까지 작성하며 파일을 만들어보았다. 하지만 아직 그림이 나오지않아 이런 부분이 아쉬웠다. 우선 이 부분은 넘어가기로 했다. 이 코드를 수정하느라 시간을 너무 많이 보냈다. 그래도 중복 체크는 잘 되고 있다. 다음에는 우편번호를 확인할 수 있는 파일을 만들어보겠다.