Skyscanner Project
김규범, 황광회, 정무성, 정현석, 이예린
목차
Ⅰ. 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 결제 및 디테일
Ⅰ.Project 스펙
▶ 프로젝트 명 SkyScanner Web Server&Homepage
▶ 프로젝트 기간 2017.09.08 ~ 2017.11.03
▶ 프로젝트 인원 총 5명
(PL(김규범), FLIGHT 페이지(황광회), HOTEL 페이지(정무성), 관리자 페이지(정현석), 앱 개발(이예린))
▶ 프로젝트 내용
SkyScanner.com을 모티브로 관리자 기능을 추가하여 포트폴리오로 재구성한 프로젝트
- CHROME BROWSER에 최적화 되어 있으며 EXPLORER에서는 다소 불안정할 수 있습니다.
1.1 Project
Ⅰ.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 사용 스킬
Ⅲ.Flight 페이지
3.1 로그인 로그인 버튼 클릭시 MODAL 화면
Ⅲ.Flight 페이지
3.1 로그인
관리자 페이지는 관리자 계정만 접근 가능
Ⅲ.Flight 페이지
3.1 항공 검색
날짜입력란
인원 선택
예매 페이지로 이동
Ⅲ.Flight 페이지
3.2 항공 조회 첫 페이지는 페이징네이션만 구현함
예매 필터 구현
항공사별 최저가격
Ⅲ.Flight 페이지
3.2 항공 조회 필터-모든 항공사 click
선택 click
Ⅲ.Flight 페이지
3.2 항공 조회
예매 구현
비로그인 시 예매 불가하게 구현.
비로그인 상태
Ⅲ.Flight 페이지
3.2 항공 조회 출발지 택1 선택후
항공사 선택시
선택한 김포공항에서 출발하는 대한항공만 Select 한 DB값
을 구현
Ⅲ.Flight 페이지
3.3 항공 예약
예매 구현
로그인 시 예매 가능
로그인 상태
로그인 회원 이름
랜덤 숫자+영문으로 예약번호 구현
선택한 항공 내용 및 검색 페이지에서 선택한 인원 수 및 날짜
확인 click⇒ 예매 완료!
Ⅳ. Hotel 페이지
4.1 호텔 검색
시작: 검색창에 ‘뉴’ ,‘뉴욕’, ‘뉴델리’ 라는 단어를 검색
지역으로 검색
Datepicker로 날짜 검
색.
시작 날짜는 현재 날짜
로 고정
Click
Ⅳ. Hotel 페이지
4.2 호텔 조회
검색어가 포함
된 지역이 검색
됨.
아무거나 클릭
$.each()를 사용하여
SELECT 내용을 화
면에 그림
Ⅳ. Hotel 페이지
4.2 호텔 조회
정렬 기준에 따라 지정된
DIV만 화면이 변함
(이름, 가격, 평점 순)
복수의 테이블에서 값을
구해 화면에 그림.
(Hotel, HotelOption)
Ⅳ. Hotel 페이지
4.2 호텔 조회
페이지네이션 기능Click
Ⅳ. Hotel 페이지
4.3 호텔 예약 Modal 사용.
조건에 맞을 경우 예약테
이블에 INSERT 가능
로그인이 되어 있을 경우,
SESSION에서 불러와
비밀번호만 체크
Ⅳ. Hotel 페이지
4.3 호텔 예약
예약이 완료되면 방 수가
UPDATE 됨
방 개수가 0일 경우 예약
이 안됨
Ⅴ.관리자 페이지
5.1 관리자 설정
ID : admin PW : 1 ( 관리자 계정으로 로그인 후 관리자 페이지 사용 가능)
DB에 등록된 회원, 항공 노선,
호텔의 수를 표시
Click! 관리자 설정 페이지 Click! 회원 관리 페이지
Ⅴ.관리자 페이지
5.1 관리자 설정 페이지
기존 관리자
이메일 주소, 이름, 비밀 번호
정보 update
입력 내용 reset
관리자 변경
새 관리자
이메일 주소, 비밀 번호 입력
새로운 관리자 지정 가능
Ⅴ.관리자 페이지
5.2 회원 관리 페이지
회원 검색
이메일,성,이름,국가를
통해 회원 검색 기능
Pagination
회원 List
수정 or 삭제 할
회원 선택 가능
Click! 회원 정보 수정페이지 Click! 회원 정보 삭제
Ⅴ.관리자 페이지
5.3 회원 정보 수정 페이지
회원 정보 수정
회원의 이메일, 비밀번호,
성, 이름, 국가 정보 수정
Click! 회원 정보 수정 Click! 입력 내용 reset
VI. 앱
6.1 앱 인트로와 로그인
로그인
typewriter
Carousel
VI. 앱
6.2 앱 예매와 구글 지도
Selectboxes
Datepicker
입력된 도시에 따라
동적으로 변환되는
구글 지도와 마커
VI. 앱
6.3 앱 결제 및 디테일
예약 디테일
확인
티켓 가격 계산
고객 정보 입력 창
카드 결제 창 –
정규식
VI. 앱
랜덤 예매번호 생성
예매 디테일
비행기 선택
창에서의 메뉴 팝업
6.3 앱 결제 및 디테일
로그인 디테일
메뉴 바
감사합니다

Project ppt (1)

  • 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.