sky

1. Skyscanner Project
김규범, 황광회, 정무성, 정현석, 이예린

2. 목차
Ⅰ. Project 스펙
Ⅱ. 메인 페이지
Ⅲ.Flight 페이지
Ⅳ. Hotel 페이지
Ⅴ. 관리자 페이지
Ⅵ. 앱
1.1 Project
1.2 사용 스킬
2.1 회원 가입
2.2 Login
3.1 항공 검색
3.2 항공 조회
3.3 항공 예약
4.1 호텔검색
4.2 호텔 조회
4.3 호텔 예약
5.1 관리자 설정
5.2 회원 관리
5.3 회원 정보 수정
6.1 앱 인트로와 로그인
6.2 예매와 구글 지도
6.3 결제 및 디테일

3. Ⅰ.Project 스펙
▶ 프로젝트 명 SkyScanner Web Server&Homepage
▶ 프로젝트 기간 2017.09.08 ~ 2017.11.03
▶ 프로젝트 인원 총 5명
(PL(김규범), FLIGHT 페이지(황광회), HOTEL 페이지(정무성), 관리자 페이지(정현석), 앱 개발(이예린))
▶ 프로젝트 내용
SkyScanner.com을 모티브로 관리자 기능을 추가하여 포트폴리오로 재구성한 프로젝트
- CHROME BROWSER에 최적화 되어 있으며 EXPLORER에서는 다소 불안정할 수 있습니다.
1.1 Project

4. Ⅰ.Project 스펙
▶ 사용 스킬
JAVA, JAVASCRIPT(JQUERY,JSON), AJAX, TILES, MYBATIS, MYSQL,
HTML5, CSS
▶ 개발 환경
STS 4.3, MariaDB, MyBatis, AJAX, jQuery, Bootstrap, Google Map,
Datepicker, HTML5, JDK1.8, Tomcat8, AWS, Maven 3, 람다식,Webstorm,
Cordova
1.2 사용 스킬

5. Ⅲ.Flight 페이지
3.1 로그인 로그인 버튼 클릭시 MODAL 화면

6. Ⅲ.Flight 페이지
3.1 로그인
관리자 페이지는 관리자 계정만 접근 가능

7. Ⅲ.Flight 페이지
3.1 항공 검색
날짜입력란
인원 선택
예매 페이지로 이동

8. Ⅲ.Flight 페이지
3.2 항공 조회 첫 페이지는 페이징네이션만 구현함
예매 필터 구현
항공사별 최저가격

9. Ⅲ.Flight 페이지
3.2 항공 조회 필터-모든 항공사 click
선택 click

10. Ⅲ.Flight 페이지
3.2 항공 조회
예매 구현
비로그인 시 예매 불가하게 구현.
비로그인 상태

11. Ⅲ.Flight 페이지
3.2 항공 조회 출발지 택1 선택후
항공사 선택시
선택한 김포공항에서 출발하는 대한항공만 Select 한 DB값
을 구현

12. Ⅲ.Flight 페이지
3.3 항공 예약
예매 구현
로그인 시 예매 가능
로그인 상태
로그인 회원 이름
랜덤 숫자+영문으로 예약번호 구현
선택한 항공 내용 및 검색 페이지에서 선택한 인원 수 및 날짜
확인 click⇒ 예매 완료!

13. Ⅳ. Hotel 페이지
4.1 호텔 검색
시작: 검색창에 ‘뉴’ ,‘뉴욕’, ‘뉴델리’ 라는 단어를 검색
지역으로 검색
Datepicker로 날짜 검
색.
시작 날짜는 현재 날짜
로 고정
Click

14. Ⅳ. Hotel 페이지
4.2 호텔 조회
검색어가 포함
된 지역이 검색
됨.
아무거나 클릭
$.each()를 사용하여
SELECT 내용을 화
면에 그림

15. Ⅳ. Hotel 페이지
4.2 호텔 조회
정렬 기준에 따라 지정된
DIV만 화면이 변함
(이름, 가격, 평점 순)
복수의 테이블에서 값을
구해 화면에 그림.
(Hotel, HotelOption)

16. Ⅳ. Hotel 페이지
4.2 호텔 조회
페이지네이션 기능Click

17. Ⅳ. Hotel 페이지
4.3 호텔 예약 Modal 사용.
조건에 맞을 경우 예약테
이블에 INSERT 가능
로그인이 되어 있을 경우,
SESSION에서 불러와
비밀번호만 체크

18. Ⅳ. Hotel 페이지
4.3 호텔 예약
예약이 완료되면 방 수가
UPDATE 됨
방 개수가 0일 경우 예약
이 안됨

19. Ⅴ.관리자 페이지
5.1 관리자 설정
ID : admin PW : 1 ( 관리자 계정으로 로그인 후 관리자 페이지 사용 가능)
DB에 등록된 회원, 항공 노선,
호텔의 수를 표시
Click! 관리자 설정 페이지 Click! 회원 관리 페이지

20. Ⅴ.관리자 페이지
5.1 관리자 설정 페이지
기존 관리자
이메일 주소, 이름, 비밀 번호
정보 update
입력 내용 reset
관리자 변경
새 관리자
이메일 주소, 비밀 번호 입력
새로운 관리자 지정 가능

21. Ⅴ.관리자 페이지
5.2 회원 관리 페이지
회원 검색
이메일,성,이름,국가를
통해 회원 검색 기능
Pagination
회원 List
수정 or 삭제 할
회원 선택 가능
Click! 회원 정보 수정페이지 Click! 회원 정보 삭제

22. Ⅴ.관리자 페이지
5.3 회원 정보 수정 페이지
회원 정보 수정
회원의 이메일, 비밀번호,
성, 이름, 국가 정보 수정
Click! 회원 정보 수정 Click! 입력 내용 reset

23. VI. 앱
6.1 앱 인트로와 로그인
로그인
typewriter
Carousel

24. VI. 앱
6.2 앱 예매와 구글 지도
Selectboxes
Datepicker
입력된 도시에 따라
동적으로 변환되는
구글 지도와 마커

25. VI. 앱
6.3 앱 결제 및 디테일
예약 디테일
확인
티켓 가격 계산
고객 정보 입력 창
카드 결제 창 –
정규식

26. VI. 앱
랜덤 예매번호 생성
예매 디테일
비행기 선택
창에서의 메뉴 팝업
6.3 앱 결제 및 디테일
로그인 디테일
메뉴 바

27. 감사합니다