도서 정보 제공 웹 서비스 - 기본화면 구현

 먼저 기본적인 UI를 구성함으로써 앞으로 서블릿과 AJAX를 테스트해볼 수 있도록 할 것이다.

물론 계속해서 화면을 꾸며나가는 과정에서 몇 번이고 수정을 반복해야겠지만, 큰 틀은 변하지 않을 것이다.

 

 

 

 

 

 

 

 

 

기본적으로 메인화면과 로그인화면, 회원가입 화면을 먼저 설계하였다.

 

메인화면, 상당히 심심하게 구성되었다.

 앞서 메인화면은 상당히 심플한데, 물론 아직은 정식 서비스를 개시하지 않았기에 내용을 채우지 않아

그런 것이며, 좌측상단에 보면 >>가 담겨있는 빨간색 사각형이 존재하는데, 이를 사각형을 클릭하면...

 

 

 

 

 

 

다음과 같이 사이드바가 등장한다.

 해당 사이드바는 아직 사용자가 로그인한 상태가 아니기 때문에, 관리자가 아닌 일반 고객과 같은

사이드바 목록을 가지고 있다. 도서, 커뮤니티, 내 정보, 기타 메뉴가 있으며 각각의 상위 메뉴는

하위 메뉴들을 가지고 있다. 상위 메뉴를 클릭하면 아래와 같이 목록들이 나타난다.

 

 

 

 

 

 

 

 

커뮤니티 메뉴는 하위메뉴로 게시판과 메시지관련 메뉴를 갖는다.

 

 

 

 

 

로그인 화면 역시 사이드바 버튼을 가지고 있다.

 로그인 화면에도 사이드바 버튼이 있는것을 확인할 수 있는데 이는, jsp:include 디렉티브 태그를 이용해서 구현했다.

 

 

 

 

 

 

 

 

사이드바의 소스코드

 사이드바의 소스코드는 sidebar.jsp의 형태로 따로 구현을 해두었다.

여기서는 JSTL도 사용함으로써 로그인 된 상태일 때는 로그아웃 버튼이

아니라면 회원가입과 로그아웃 버튼이 나타나도록 코어태그가 사용되었음을 확인할 수 있다.

하단에는 관리자일 경우에는 관리자 전용 메뉴를 추가로 생성하는 것을 확인할 수 있다.

 

 

 

 

 

 

 

회원가입 화면의 소스코드, 강조처리된 부분이 바로 사이드바를 포함시키는 디렉티브 태그다.

 

 

 

 

 

 

 

회원가입 화면, 특이하게 비밀번호를 찾을때는 책과 관련된 질문에 대한 정확한 답을 해야하도록 설정했다.

 

 

 

 

 

 

비밀번호 찾기 질문은 모두 책과 관련된 질문으로 설정했다.

 

 

 

 

 

 

 여기서 중요한 것은, 비밀번호 찾기 질문들이 책에 관련된 질문이라는 사실이 아니다.

중요한 사실은, 바로 저러한 질문이 미리 HTML문서에 하드코딩으로

select내에 option 태그를 집어넣은 것이 아니라는 것이다. 백문이 불여일견, 소스코드를 살펴보자.

 

 

 

 

 

 

 

 

회원가입 화면의 자바스크립트 소스

 

 

 

ajax 메소드를 통해 비동기식으로 서블릿을 호출하는 것을 알 수 있다.

해당 서블릿은 커넥션풀로 미리 연결된 커넥션을 사용해서 데이터베이스에서 질문의 내용과 번호를 JSON의 형태로

반환하는데, 이를 ajax메소드로 수신 후에 select태그 내에 append 하는 것이다.

 

 이렇게 하드코딩이 아니라 유동적으로 처리함으로써 후에 비밀번호 찾기 질문이 추가될 경우에도 유연하게 대처할 수 있음을 알 수 있다. 사실, 데이터베이스가 질문을 추가하기만 하면 이쪽 소스코드는 수정할 필요가 전혀 없다.

또한 비동기식처리이므로 화면이 갱신되지 않는다.

 

 

 

 

 

 

 

PASSWORD_QUESTION_LIST 릴레이션의 스냅샷

위의 데이터베이스를 DAO클래스를 만들어 서블릿에서 활용함으로써 질문들을 얻을 수 있다.

질문의 내용들이 모두 책과 관련되게 함으로써 좀 더 책과 관련된 서비스임을 드러낸다.

 

 

 

 

 

 

 

여기에 사용된 DAO 클래스는 Queue에 번호와 질문을 차례로 담고 서블릿으로 반환한다.

 

 

이처럼 기본 틀을 완성한 후에, 로그인과 로그아웃, 회원 탈퇴, 아이디, 비밀번호 찾기 등

사용자와 관련된 간단한 기능들을 구현할 예정이다. 그리고 그렇게 구현된 기능을 기반으로

게시판 작성, 메세지 전송, 도서 대출 및 반납 신청, 질의응답 등의 기능을 구현할 것이다.