Backpackers project

1. Backpacker’s
제작: 김강호

2. ● 목차
■ Concept
■ 사용자 Page
■ 관리자 Page
■ ERD & DB
■ Spring MVC

3. Backpacker’s
Concept
● 여행일정 정보 제공
운영진의 독특한 감성으로 미리 여행지를 탐사하고 세부 비
용과 일정을 티켓형태로 만들어 판매 한다.
여행자는 여행의 불확실성을 줄이고 예산 수립의 정확도를
높일수 있다.
● 새로운 탐험지 제공
지구는 아주 넓기 때문에 특별한 경험을 원하는 소비자를 타
겟으로 알려지지 않은 탐험지와 루트를 제공

4. Project
Concept
● 프로젝트명: Backpackers
● 제작일: 2016.05.09~05.15
● 개발환경:
○ Spring MVC, MyBatis
○ JAVA + JSP
○ Oracle 11g
○ Html, JavaScript, CSS
○ Bootstrap
○ Git-hub
○ Windows 10
● 본인 역할:
○ Concept, UI, 전체 Coding

5. 사용법
Concept
● 사용자
○ 홈페이지 가입
○ logIn
○ 여행 정보 확인
○ 티켓 구매
○ 티켓 이용
● 관리자
○ 관리자 등록
○ logIn
○ 여행 정보 티켓 등록
○ 판매
○ 사용자 관리

7. Main Page Ui
부트스트랩을 사용하여 모바일과 PC에
서의 사용성에 중점을 두었다.
초기화면은 부트스트랩의 Carousel 기
능을 활용하여 새로운 여행지에 대한 호
기심 유발에 목적이 있다.
pc
mobile

8. User Login & Help
상단의 Login을 클릭하면 Login Page가
나타 난다.
사용자가 아이디를 원할 경우 하단의
‘아이디가 필요하세요?’ 라는 문구를 클
릭하여 Help Page로 이동 한다.
Help Page는 사용자에게 이용 방법과
약관을 전달하고 페이지 가입을 유도한
다.

9. Member Page
운영진의 사진을 메인에 등록하여 사용
자에게 신뢰감 제공한다.
운영진의 얼굴을 클릭할때, 부트스트랩
Modal 기능을 사용하여 페이지 전환을
하지 않고, 부드럽게 운영진 정보를 확
인 할수 있다.

10. Tour Page
사용자가 이용할수 있는 여행지의 이미
지를 확인할수 있다.
로그인 후 예약하여 인원을 입력하면 수
량만큼 티켓이 예약되며, MyPage에서
예약사항을 확인할수 있다.
좀더 흥미롭다면 사진을 클릭하여 Tour
Board Page로 이동할수 있다.

11. Tour Board
사용자들의 리뷰나 의견을 게시판을 통
해 확인할수 있다.
여행 정보와 게시판의 동선을 줄여 상품
의 신뢰성을 고려하거나 평가가 편하도
록 직관적인 구성을 하였다.

12. Contact & Map Page
운영진에게 궁굼한 사항이나, 외부 사업
적 교류를 위해 Contact Page를 구성하
였다.
Map Page는 회사의 위치를 나타내며
Google Map Api를 이용하여 페이지에
서 위치 정보를 확인할수 있다.

13. 관리자 Page
상단 ‘MORE’를 클릭 하면 관리자 Page
로 LogIn를 할수 있다.

14. 관리자 Board
Board Page는 사용자들의 모든 게시판
을 한곳에서 모니터링 하며, 유사시 등
록, 삭제, 수정이 가능하다.
티켓(상품) 또한 Board Page에서 관리
하며 관리자 이동 동선을 최소화 하고
메뉴 직관성을 높였다.

15. 관리자 Id Page
관리자 Id Page는 관리자들의 아이디를
등록하고 관리할수 있다.

16. 사용자 Id Page
사용자 Id Page는 사용자의 가입 현황과
티켓의 예약 상황을 모니터링 하고 수정
할수 있다.

17. ERD & DB TABLE
ERD를 관리자 입장에서 페이지 흐름을
한눈에 볼수 있도록 구성하였다.< 사용
프로그램 : erdplus>
복잡한 관계를DB에서 구성하기 보다
핵심적인 요소만 Table에 배치하여 프
로그램 흐름을 파악하기 좋고, 생산성이
있는 프로젝트를 진행하려고 노력하였
다.

18. Spring MVC
서버 폴더 구성은 MVC패턴 의도대로
크게 3가지로 구성하였다
● Model
○ Admin / dao
○ Main / dao
● View
○ Views(jsp)
● Controller
○ Admin / controller
○ Main / controller
Spring Annotation 기능을 활용하여 코
드를 심플하게 구성하였다.