airbnb.com 을 모티브로 한 포트폴리오
TRANSCRIPT
5
순서도 전체순서도
Listen()
API 이용 주소 등록 , 검색
컨디션별 숙박 등록 , 검색
호스팅 , 예약 목록 출력
결제 정보 등록 , 출력
숙박 등록 , 예약• • •
각 작업 함수
Accept()
Receive()
전체 Client 에게Send()
( 숙박리스트 )
Client 시작
로그인
Connect
호스팅 예약검색 …
종료
로그아웃
Send()Data, 등록 , 예약 , 수정 등 요청
Receive()
예약 화면에 Display 해주는 함수
호스팅 화면에 Display 해주는 함수
멤버 화면에 Display 해주는 함수
결제 화면에 Display 해주는 함수• • •
받은 Data 의 종류별 처리 함수
Send()Data 전송
성공
실패
Main 화면3 시가 되면종가모듈 수행( 주가변동 )
각화면에Display
로그인에 성공한 소켓 접속 유지
서버시작
Accept
DB
관리자 UI(Web)
예약호스팅회원
로그인
회원 , 호스팅 월간차트
호스팅 리스트 , 차트
회원 중 호스팅 회원수
관리자 비번 변경
성공실패
멤버서비스
6
전체 데이터베이스 설계도
8
화면 구현 UI
• Main 상단 화면
9
화면 구현 UI
• Main 하단 화면
11
공통 HomeController
12
공통 Values
13
공통 Command
14
공통 Retval
15
공통 Pagination
16
공통 Retval
17
공통 Application-Context1
18
공통 Application-Context2
19
공통 Application-Context3
20
공통 tiles.xml
21
공통 tiles.xml(no tiles)
22
공통 Pom.xml
24
요구사항 확인
Hosting 호스팅 메인
호스팅 등록하기 클릭시 로그아웃 상태일 경우 로그인 화면으로 이동로그인 상태일 경우 호스팅 등록 메뉴로 이동
호스팅 등록 호스팅 등록은 각각 다른 화면으로 구성 다음 버튼 클릭시 입력한 값은 footer 의 hidden 태그 value 에
임시저장 후최종 완료 버튼 클릭시 DB 로 값 저장
모든 입력이 필요한 화면은 값 미입력시 error 메시지 팝업 주소 입력은 Google API 를 사용하여 자동완성 시키며 입력된 주소값을
기준으로 하여 Google Map 자동 Default 값 세팅 ,우편번호와 같은 숫자만 입력해야 하는 항목은 정규식 사용하여 그 외 문자 입력 방지
이미지 업로드의 경우 파일명은 DB 로 값 전달하나 , 아마존 서버로 직접 저장은 미구현
Checkbox 가 필요한 화면은 모두 true 시 T, false 시 F 로 값 치환하여 각 DB 컬럼별 T-F-T-T-T 와 같은 형태로 저장
+,- 버튼을 활용한 기능은 input 태그에 readonly 추가시켜 직접 입력 불가능하게 설정 , 각 항목별 값은 부적합한 값이 입력되지 않게끔 구현
25
Hosting
요구사항 확인
호스팅 관리 호스팅 관리 메인 화면은 Member email 을 기준으로 DB 에 있는
houses 테이블 값 출력 , 페이지 네이션으로 각 페이지당 1 개의 방씩 출력
상세정보 클릭시 클릭한 house_seq 을 controller 로 넘겨 update 시 활용
모든 수정 화면은 우측에 DB 에 저장되어 있던 기존 값을 출력하여 나타내어준다 .
한 화면에 두 개의 DB 컬럼을 수정해야 하는 경우 , 하나의 값만 수정했을 시 나머지 한 개 값은 기존 DB 값을 그대로 사용
달력은 당일을 기준으로 이전 일자는 선택 불가 , 최대 100 일까지만 선택 가능 , 최초 hosting 시 block 테이블이 null 일 경우 화면에 설정 값이 없다는 메시지 출력
예약 취소는 house_seq 를 기준으로 예약되어 있는 테이블 값을 출력해주며 , 취소 버튼을 클릭하여 호스트가 임의 취소 가능하게끔 구현
Google Map 은 DB 에 저장되어 있는 위도 , 경도 값을 가져와 해당 위치를 나타내어준다 .
이미지업로드는 실제 아마존서버로의 저장은 구현하지 않으며 , 저장되는 파일 명만 DB 로 값 전달
26
데이터베이스
Hosting
27
데이터베이스
HostingRegist (Hosting) : Hosting 전체 값 한 번에 전달
Regist (Address) : Address 전체 값 한 번에 전달
28
데이터베이스
HostingRegist (Block) : 최초 Hosting 시에는 실행되지 않으며 , 호스트 관리 메뉴에서
달력 설정시 실행
Update (Price) : 가격 수정
Update (Rules) : 규칙 수정
29
데이터베이스
HostingUpdate (CheckIn) : 체크인 일자 수정
Update (Option) : 옵션 수정
Update (Explaination) : 숙소 설명 수정
30
데이터베이스
HostingUpdate (Map) : 구글 맵 수정 ( 위도 , 경도 )
Update (Convenience) : 편의시설 수정
Update (Picture) : 이미지 파일명 수정
31
데이터베이스
HostingUpdate (Safety) : 안전시설 수정
Delete (Block) : RegistBlock 시 기존 튜플 삭제
Delete (Houses) : houses 삭제 전 관계되어 있는 FK 값 테이블 선 삭제
32
데이터베이스
HostingSelect (HouseList) : 현재 DB 에 저장되어 있는 값 출력
33
데이터베이스
HostingSelect (BuildingList) : Building 테이블에 저장되어 있는 튜플 출력
Select (House_seq) : Update 시 Where 문에 들어갈 House_seq 추출
Select (HouseCount) : Pagenation 시 사용할 등록 Houses 튜플 수 추출
34
데이터베이스
HostingSelect (if exist) : 테이블 값이 없을 경우 0 을 리턴
Select (resv_view) : House_seq 기준 예약되어 있는 Resv 값 추출
Select (Block_list) : House_seq 기준 Block 값 출력
35
화면구현
Hosting
로그인시 : 호스팅 화면으로 이동로그아웃시 : 로그인 화면으로 이동
36
화면구현
Hosting
설정된 값들은 다음 버튼 클릭시Footer 의 hidden 태그로 값 저장 , 차후 hosting 최종 단계에서 DB 로 값 전달
37
화면구현
Hosting
Onlyread 태그 사용으로 직접 타이핑하여 값 입력 불가0 이하로 세팅시 error 메시지 팝업
38
화면구현
Hosting
Google api 사용하여 주소 자동완성 사용입력값 split 처리하여 해당하는 input 태그로 자동입력 처리
39
화면구현
Hosting
GoogleMap API 로 지도 검색기능 및Marker 기능 구현
이전 화면에서 입력 받은 주소 값Google GeoCoding 사용하여 해당하는 위치로 default 값 세팅
40
화면구현
Hosting
Check 시True 는 T, False 는 F 로 값 변환하여최종 DB 에 T-T-T-F-.T.. 와 같은 형태로 저장
41
화면구현
Hosting
Check 시True 는 T, False 는 F 로 값 변환하여최종 DB 에 T-T-T-F-.T.. 와 같은 형태로 저장
42
화면구현
HostingUpload a file 버튼 및 Drag 로 사진 파일 저장 ( 실제 서버로 업로드 기능 미구현 ) 현재 저장된 파일명만 DB 로 값 전달
43
화면구현
Hosting
작성값이 null 일 경우 error 메시지 발생( 숙소 설명을 작성해주세요 .)
44
화면구현
Hosting
작성값이 null 일 경우 error 메시지 발생( 숙소 이름을 작성해주세요 .)
45
화면구현
Hosting
작성값이 null 일 경우 error 메시지 발생( 기타 규칙을 작성해주세요 .)
46
화면구현
Hosting
체크인 시간은 15:00 고정 값
47
화면구현
Hosting
Onlyread 태그 사용으로 input box 에직접 값 입력 불가최소 숙박일수가 최대 숙박일수보다높을 수 없으며 ,최대 숙박일수가 최소 숙박일수보다작게 값 세팅 불가
48
화면구현
Hosting
작성값이 null 일 경우 error 메시지 발생( 요금을 설정해주세요 )
완료 버튼 클릭시 모든 footer 에 전달되었던 값들 Ajax 를 이용하여 Controller -> DB 로 값 저장정상 저장시 Hosting 관리 메뉴로 이동
49
화면구현
Hosting
상단부터숙소 제목숙소 주소등록일자 순으로 DB 에 있던 값 출력
관리 및 설정 메뉴 클릭시해당하는 DB Seq.No 를 Controller 로 넘겨수정기능 구현시 활용
50
화면구현
Hosting
현재 일자로부터 최대 100 일까지만 일자 선택 가능 (2 회 클릭으로 범위지정 )
기존 DB 에 있던 값 출력 , 수정 시 변경된 값 즉시 화면에 반영
설정값 미리보기 화면
51
화면구현
Hosting
요금 수정 기능
기존 DB 에 있던 값 출력 , 수정 시 변경된 값 즉시 화면에 반영
52
화면구현
Hosting
2 개 기능 중 1 개만 수정시 나머지 1 개 값은기존 DB 값을 그대로 유지
기존 DB 에 있던 값 출력 , 수정 시 변경된 값 즉시 화면에 반영
53
화면구현
Hosting
값은 15:00 로 고정
기존 DB 에 있던 값 출력 , 수정 시 변경된 값 즉시 화면에 반영
54
화면구현
Hosting
현재 해당 room 에 등록되어 있는 예약정보 출력 ,우측 취소 버튼 클릭 시 예약 취소 가능
55
화면구현
Hosting 기존 DB 에 있던 값 출력 , 수정 시 변경된 값 즉시 화면에 반영
각 항목별 수정 기능 구현
56
화면구현
Hosting
2 개 기능 중 1 개만 수정시 나머지 1 개 값은기존 DB 값을 그대로 유지
기존 DB 에 있던 값 출력 , 수정 시 변경된 값 즉시 화면에 반영
57
화면구현
Hosting
기존 Hosting 시 등록된 Marker 값을 출력 ,수정시 수정된 좌표 DB 저장 및 수정화면에도 즉시반영
58
화면구현
Hosting
수정 기능 구현
기존 DB 에 있던 값 출력 , 수정 시 변경된 값 즉시 화면에 반영
59
화면구현
Hosting
Upload a file 버튼 및 Drag 로 사진 파일 저장 ( 실제 서버로 업로드 기능 미구현 ) 현재 저장된 파일명만 DB 로 값 전달
60
화면구현
Hosting
수정 기능 구현
기존 DB 에 있던 값 출력 , 수정 시 변경된 값 즉시 화면에 반영
61
애플리케이션 구현
Hosting번 호 1/9 파일명 /클래스 HostingController.jav
a 설 명 Hosting 기능 관련 Controller
62
애플리케이션 구현
Hosting번 호 1/9 파일명 /클래스 HostingController.jav
a 설 명 Hosting 기능 관련 Controller
63
애플리케이션 구현
Hosting번 호 1/9 파일명 /클래스 HostingController.jav
a 설 명 Hosting 기능 관련 Controller
64
애플리케이션 구현
Hosting번 호 1/9 파일명 /클래스 HostingController.jav
a 설 명 Hosting 기능 관련 Controller
65
애플리케이션 구현
Hosting번 호 1/9 파일명 /클래스 HostingController.jav
a 설 명 Hosting 기능 관련 Controller
66
애플리케이션 구현
Hosting번 호 1/9 파일명 /클래스 HostingController.jav
a 설 명 Hosting 기능 관련 Controller
67
애플리케이션 구현
Hosting번 호 1/9 파일명 /클래스 HostingController.jav
a 설 명 Hosting 기능 관련 Controller
68
애플리케이션 구현
Hosting번 호 1/9 파일명 /클래스 HostingController.jav
a 설 명 Hosting 기능 관련 Controller
69
애플리케이션 구현
Hosting번 호 1/9 파일명 /클래스 HostingController.jav
a 설 명 Hosting 기능 관련 Controller
70
애플리케이션 구현
Hosting번 호 1/9 파일명 /클래스 HostingController.jav
a 설 명 Hosting 기능 관련 Controller
71
애플리케이션 구현
Hosting번 호 1/9 파일명 /클래스 HostingController.jav
a 설 명 Hosting 기능 관련 Controller
72
애플리케이션 구현
Hosting번 호 1/9 파일명 /클래스 HostingController.jav
a 설 명 Hosting 기능 관련 Controller
73
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
74
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
75
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
76
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
77
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
78
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
79
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
80
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
81
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
82
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
83
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
84
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
85
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
86
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
87
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
88
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
89
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
90
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
91
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
92
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
93
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
94
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
95
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
96
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
97
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
98
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
99
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
100
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
101
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
102
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
103
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
104
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
105
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
106
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
107
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
108
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
109
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
110
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
111
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
112
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
113
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
114
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
115
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
116
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
117
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
118
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
119
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
120
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
121
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
122
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
123
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
124
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
125
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
126
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
127
애플리케이션 구현
Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax
128
애플리케이션 구현
Hosting번 호 3/9 파일명 /클래스 Footer.js 설 명 Ajax 통신을 위한 임시 값 저장
129
애플리케이션 구현
Hosting번 호 4/9 파일명 /클래스 HostingDTO.java 설 명 Hosting 관련 Bean
130
애플리케이션 구현
Hosting번 호 5/9 파일명 /클래스 Command.java 설 명 Mapper 에 값을 전달해주는 Bean
131
애플리케이션 구현
Hosting번 호 6/9 파일명 /클래스 Retval.java 설 명 Ajax 통신을 위한 임시 Bean
132
애플리케이션 구현
Hosting번 호 7/9 파일명 /클래스 HostingMapper.java 설 명 Controller 와 Mapper 의 통신을
위한 Interface
133
애플리케이션 구현
Hosting번 호 8/9 파일명 /클래스 HostingService.java 설 명 HostingServiceImpl 의 Interface
134
애플리케이션 구현
Hosting번 호 9/9 파일명 /클래스 HostingServiceImpl.java 설 명 HostingService 의 Implement
135
애플리케이션 구현
Hosting번 호 9/9 파일명 /클래스 HostingServiceImpl.java 설 명 HostingService 의 Implement
136
애플리케이션 구현
Hosting번 호 9/9 파일명 /클래스 HostingServiceImpl.java 설 명 HostingService 의 Implement
138
요구사항 확인
Booking모든 기능은 로그인을 필수로 한다 .
예약 기능 : 예약 화면에서는 예약 할 도시 , 날짜 , 숙박인원 , 숙소유형 , 가격범위 , 규모 ( 침실 , 욕실 , 침대 수 ), 지역 , 시설 , 호스트 언어를 선택하여 예약한다규모 , 시설 , 호스트 언어는 선택하지 않아도 된다 .검색에서 가져온 정보를 토대로 리스트를 검색한다 .도시명 , 날짜 , 금액 등은 수정하여 검색이 가능하다 .규모는 침실 , 욕실 , 침대 수를 체크박스에서 선택하여 결정한다 .시설은 예약하려는 방의 다양한 옵션기능을 선택 추가하는 기능이며 중복선택이 가능하다 .예약 시 모든 선택 ( 필터 ) 의 결과에 따라 리시트를 출력하여 보여준다 .필터를 적용하지않으면 검색에서 가져온 값에 따른 리스트를 출력하여 보여준다 .예약 Detail 화면에서는 필터링에서 확정된 값을 Detail 화 하여 보여준다 .
결제 기능 : 결제 기능은 예약 기능에서 필터를 거쳐 ( 혹은 구글 맵 에서 선택하여 ) 결정한 방의 예약결제를 진행하는 기능이며 , 결제방법 ( 신용카드 ), 카드번호와 만료일 ( 년 /월 /보안코드 ), 이름 / 성 , 우편번호를 입력 받는다 .결제국가와 결제방법은 디폴트 값과 신용카드 로 고정 되어있다 .카드번호는 - 를 제외한 19 자 내외로 입력 받는다 . 만료일은 년도는 2 자리 월은 2 자리로 입력 받는다 . 보안코드는 3 자리를 입력 받는다 .이름 / 성 은 5자 /5 자 내외로 입력 받는다 . 우편번호는 10 자내외로 입력 받는다 .카드번호는 필수입력 사항이며 정규식에 맞게 작성하여야 한다 .
예약 관리 :예약 관리는 예약후에 취소나 자신이 예약한 방의 정보를 다시 확인할 수 있는 기능을 제공한다 .예약취소는 취소 팝업을 보여준 후에 예약을 취소한다 .예약한 리스트의 예약번호를 통해 자신이 예약한 곳의 상세 정보를 확인 할 수 있다 .상세정보에는 자신이 예약한 지역과 체크인 /체크아웃 날짜를 확인할 수 있다 . 뒤로 가기 버튼을 통해 다시 예약리스트로 돌아갈 수 있다 .
139
데이터베이스
• EXERD
Booking
140
데이터베이스
Booking• reservation 테이블
141
데이터베이스
• resv_view 테이블
Booking
142
데이터베이스
• payment 테이블
Booking
143
데이터베이스
Booking• resvCancel : 예약 취소
• payment : 입력된 결제 정보를 받아 DB 에 전달
• getHost : Host 의 대한 정보를 Member Table 에서 추출
144
데이터베이스
Booking• resvList : 예약가능한 방 List 를 출력
• findOne : Detail 화면에 출력 할 houses 값을 houseMap 에서 추출
• resvCount : 전체 호스팅 등록 된 house Count
145
데이터베이스
Booking• findResv : 예약한 방의 Seq 를 추출
146
UI화면구현
Booking
147
UI화면구현
Booking
148
UI화면구현
Booking
149
UI화면구현
Booking
150
UI화면구현
Booking
151
UI화면구현
Booking
152
애플리케이션 구현
Booking
번 호 1/11 파일명 /클래스 Values.java 설 명 예약 취소 Pagination Static
변수
153
애플리케이션 구현
Booking
번 호 2/11 파일명 /클래스
BookingController.java 설 명 예약 컨트롤러 Java 소스
154
애플리케이션 구현
Booking번 호 3/11 파일명 /
클래스 BookingDTO.java 설 명 예약 Bin
155
애플리케이션 구현
Booking
번 호 3/11 파일명 /클래스 BookingDTO.java 설 명 예약 Bin
156
애플리케이션 구현
Booking번 호 3/11 파일명 /
클래스 BookingDTO.java 설 명 예약 Bin
157
애플리케이션 구현
Booking
번 호 3/11 파일명 /클래스 BookingDTO.java 설 명 예약 Bin
158
애플리케이션 구현
Booking
번 호 3/11 파일명 /클래스 BookingDTO.java 설 명 예약 Bin
159
애플리케이션 구현
Booking번 호 4/11 파일명 /
클래스CancelPagination.ja
va 설 명 예약 취소 PaginationJava 소스
160
애플리케이션 구현
Booking
번 호 5/11 파일명 /클래스 Command.java 설 명 Mapper.xml/Pagination 에서
사용하는 변수
161
애플리케이션 구현
Booking
번 호 6/11 파일명 /클래스 Retval.java 설 명 Temp 값을 저장하는 변수
162
애플리케이션 구현
Booking번 호 7/11 파일명 /
클래스BookingMapper.jav
a 설 명 예약 Mapper
163
애플리케이션 구현
Booking
번 호 8/11 파일명 /클래스
BookingService.java 설 명 예약 Service
164
애플리케이션 구현
Booking
번 호 9/11 파일명 /클래스
BookingServiceImp.java 설 명 예약 Service Interface
165
애플리케이션 구현
Booking
번 호 9/11 파일명 /클래스
BookingServiceImp.java 설 명 예약 Service Interface
166
애플리케이션 구현
Booking
번 호 10/11 파일명 /클래스 BookingMapper.xml 설 명 예약 DB 쿼리소스
167
애플리케이션 구현
Booking번 호 10/11 파일명 /
클래스 BookingMapper.xml 설 명 예약 DB 쿼리소스
168
애플리케이션 구현
Booking번 호 10/11 파일명 /
클래스 BookingMapper.xml 설 명 예약 DB 쿼리소스
169
애플리케이션 구현
Booking
번 호 11/11 파일명 /클래스 hyunwoo.js 설 명 예약 Ajax JavaScript 소스
170
애플리케이션 구현
Booking
번 호 11/11 파일명 /클래스 hyunwoo.js 설 명 예약 Ajax JavaScript 소스
171
애플리케이션 구현
Booking
번 호 11/11 파일명 /클래스 hyunwoo.js 설 명 예약 Ajax JavaScript 소스
172
애플리케이션 구현
Booking
번 호 11/11 파일명 /클래스 hyunwoo.js 설 명 예약 Ajax JavaScript 소스
173
애플리케이션 구현
Booking
번 호 11/11 파일명 /클래스 hyunwoo.js 설 명 예약 Ajax JavaScript 소스
174
애플리케이션 구현
Booking
번 호 11/11 파일명 /클래스 hyunwoo.js 설 명 예약 Ajax JavaScript 소스
175
애플리케이션 구현
Booking
번 호 11/11 파일명 /클래스 hyunwoo.js 설 명 예약 Ajax JavaScript 소스
177
요구사항 확인
Search메인 화면 간단 검색기능 : 메인 화면에서의 검색기능은 예약 시 검색 범위를 좁히는데 목적으로 한다 . 검색은 자동완성 기능을 사용한다 검색 범위는 국가 , 시 , 구까지 지원한다 . 체크인과 체크아웃 요일은 달력으로 선택하여 정한다 . 숙박인원은 1 명에서 16 명까지의 체크박스에서 선택할 수 있다 . 상단 헤더에서도 검색기능을 지원한다
178
요구사항 확인
Search상세 검색 : 검색 결과 화면에서는 예약 할 도시 , 날짜 , 숙박인원 , 숙소유형 , 가격범위 , 규모 ( 욕실 , 침대 수 ), 지역 , 시설을 선택하여 상세 검색을 지원한다 규모 , 시설은 선택하지 않아도 된다 . 날짜는 체크인날짜와 체크아웃 날짜를 선택하고 숙박인원은 1~16명까지의 체크박스에서 선택한다 . 가격범위는 입력 형식으로 가격선을 결정한다 .규모는 욕실 , 침대 수를 1~ 최대 16 까지의 체크박스에서 선택하여 결정한다 .지역은 여러가지를 선택 할 수 있다 . 시설은 예약하려는 방의 다양한 옵션기능을 선택 추가하는 기능이며 중복선택이 가능하다 . 검색 시 모든 선택 ( 필터 ) 의 결과에 따라 구글맵에서 해당하는 호스트방을 보여준다 .
179
데이터베이스
Search
180
데이터베이스
SearchHouses_view (houses,address,building join view)
181
데이터베이스
SearchHouses_view (houses,address,building join view)
182
데이터베이스
SearchProcedure : sp_house_cnt ( 검색 결과 페이징을 위한 검색된 수 )
183
데이터베이스
SearchProcedure : sp_house_cnt ( 검색 결과 페이징을 위한 검색된 수 )
184
데이터베이스
SearchProcedure : sp_house_cnt ( 검색 결과 페이징을 위한 검색된 수 )
185
데이터베이스
SearchProcedure : sp_house_cnt ( 검색 결과 페이징을 위한 검색된 수 )
186
데이터베이스
SearchProcedure : sp_house_cnt ( 검색 결과 페이징을 위한 검색된 수 )
187
데이터베이스
SearchProcedure : sp_house_list ( 검색 결과 type : houses_view list )
188
데이터베이스
SearchProcedure : sp_house_list ( 검색 결과 type : houses_view list )
189
데이터베이스
SearchProcedure : sp_house_list ( 검색 결과 type : houses_view list )
190
데이터베이스
SearchProcedure : sp_house_list ( 검색 결과 type : houses_view list )
191
데이터베이스
SearchProcedure : sp_house_list ( 검색 결과 type : houses_view list )
192
데이터베이스
SearchProcedure : sp_addr_list ( 검색 필터의 지역들을 구함 )
193
화면 구현
Search상단 검색
입력 시 자동완성 기능 지원
194
화면 구현
Search상단 검색
구글 autoComplete api 사용 , 검색 국가 대한민국으로 제한
검색한 주소의 위도 , 경도 값 추출
195
화면 구현
Search상단 검색 조건 입력 후 검색
( 체크인 , 아웃 필수 )
196
화면 구현
SearchjQuery bootstrap datepicker 사용
197
화면 구현
Search상단 검색
198
화면 구현
Search메인 검색
타이핑 시 자동완성 지원
199
화면 구현
Search메인 검색
200
화면 구현
Search검색 조건 지역 분할
검색 조건 JSON type
201
화면 구현
Search검색 수행
202
화면 구현
Search메인 검색
203
화면 구현
Search검색 결과 페이징 구현
204
화면 구현
Search메인 검색
클릭 시 검색필터 확장
205
화면 구현
Search검색 필터 확장
206
화면 구현
Search메인 검색
207
화면 구현
Search메인 검색
208
화면 구현
Search메인 검색
클릭 시 결과내 재검색
209
화면 구현
Search재 검색 시 검색 값 유지
210
화면 구현
Search재 검색 시 검색 값 유지
211
화면 구현
Search메인 검색
클릭 시 상세 페이지 이동
212
화면 구현
Search메인 검색
마커 클릭 시 표시
213
화면 구현
Search메인 검색
사진 클릭시 상세 페이지 이동
214
화면 구현
Search구글맵 구현
215
화면 구현
Search구글 맵 마커 이벤트 처리
216
애플리케이션 구현
Search
SearchVal : 검색조건 데이터 전송을 담당하는 Class
217
애플리케이션 구현
Search
BookingController : 검색을 수행하는 search method
총 예약 일수를 구하는 부분
218
애플리케이션 구현
Search
BookingController : 검색을 수행하는 search method
검색 결과를 페이지 별로 구하는 코드
219
애플리케이션 구현
Search
BookingController : 검색을 수행하는 search method
검색 후 결과값들 저장
220
애플리케이션 구현
Search
BookingController : 검색을 수행하는 list method
221
애플리케이션 구현
Search
Pagination : 검색 결과 페이징을 위한 클래스
223
요구사항 확인
Member
구분 메뉴 및 기능 비고
•로그인
•페이스북 , 구글 연동 , 이메일 주소로 로그인 가능하게 한다 .•관리자 아이디 id: admin pw: 1 로 로그인시 관리자모드연결•아이디 로그인 시 이메일 형식이 아닐 경우 거부
•로그아웃•Session 값 Clear.
224
요구사항 확인
Member
구분 메뉴 및 기능 비고
•회원가입
•ID 는 Email 형식•중복체크•전화번호 정규식
225
데이터베이스
Member
226
데이터베이스
Member
227
데이터베이스
Member
228
화면 구현
Member
229
화면 구현
Member
230
화면 구현
Member
231
어플리케이션 구현
Member
232
어플리케이션 구현
Member
233
어플리케이션 구현
Member
234
어플리케이션 구현
Member
235
어플리케이션 구현
Member
236
어플리케이션 구현
Member
237
어플리케이션 구현
Member
238
어플리케이션 구현
Member
239
어플리케이션 구현
Member
240
어플리케이션 구현
Member
241
어플리케이션 구현
Member
242
어플리케이션 구현
Member
243
어플리케이션 구현
Member
244
어플리케이션 구현
Member
245
어플리케이션 구현
Member
로그인과 호스팅된 숙소가 우선 존재해야함 .
-등록 기능 : 구글맵 검색을 통하여 사용자가 등록하고 싶은 위치와 그 위치의 카테고리 ( 음식점 , 공원 ) 등등을 select box를 통하여 지정하며 textarea 를 통해 코멘트를 입력하는 형식이다 . 등록된 가이드북 내용은 숙소를 검색하는 사용자들에게 보여진다 .
가이드북은 구글맵 검색을 통한 위치 찾기 , 대분류 /소분류를 지정하는 다중 select 문을 지원한다 .
247
요구사항 확인
Guide
248
데이터베이스
Guide
249
데이터베이스
Guideguide_category 테이블
250
데이터베이스
Guideguide_category 테이블
251
데이터베이스
Guideguide_view
252
데이터베이스
Guideguide_view
253
데이터베이스
GuideProcedure : g_insert ( 가이드 등록 )
254
화면구현
Guide
가이드북 등록하는 곳으로 가는 방법 !
255
화면구현
Guide가이드북 등록 초기화면
256
화면구현
Guide장소 검색시 google Autocomplete 기능 , 맵에 해당장소 마커
257
화면구현
Guide메인 카테고리를 어떤 것을 선택하느냐에 따라 하위 카테고리가 보여지는 것이 달라지는 2 차 select 구현
258
애플리케이션 구현
Guide번 호 1/9 파일명 /
클래스 geunhong.js 설 명 구글맵 구현
259
애플리케이션 구현
Guide번 호 2/9 파일명 /
클래스 geunhong.js 설 명 검색시 맵이동 , 마커 구현
애플리케이션 구현
Guide번 호 3/9 파일명 /
클래스 geunhong.js 설 명 서브카테고리 소스
애플리케이션 구현
Guide번 호 4/9 파일명 /
클래스 geunhong.js 설 명 등록버튼
애플리케이션 구현
Guide번 호 5/9 파일명 /
클래스 GuideController 설 명 가이드 컨트롤러
애플리케이션 구현
Guide번 호 6/9 파일명 /
클래스 GuideDTO 설 명 GuideDTO
애플리케이션 구현
Guide번 호 7/9 파일명 /
클래스 GuideMapper 설 명 GuideMapper 자바
애플리케이션 구현
Guide번 호 8/9 파일명 /
클래스 GuideMapper 설 명 GuideMapper XML
애플리케이션 구현
Guide번 호 9/9 파일명 /
클래스 GuideMapper 설 명 GuideMapper XML
268
ADMIN
요구사항 확인
• 관리자 로그인 모드 전용 아이디를 접속시 전용 모드로 변경 관리자 전용 ID : airbnb 관리자 전용 PW: airbnb
• 리스트 화면 회원 리스트 호스팅 멤버 리스트 호스팅 하우스 현황 리스트 예약 현황 리스트
1. 각각의 리스트에 클릭하면2. 회원 리스트 디테일3. 호스팅 디테일4. 예약 디테일 화면 이동5. 각각의 세부 사항은 회원 및 호스트 , 예약 컬럼에 의거 결정 한다 .
269
요구사항 확인
• 통계 화면 월별 회원 가입자수 현황 챠트 월별 호스팅멤버 가입수 현황 차트 월별 호스팅 예약자 수 현황 차트
• 자동화의 개념에 의거 하여 관리자 모드에서는 어떤한 데이터의 조작 및 변경이 불가능하다 .
• 나가기 버튼이 있어 처음 화면으로 이동
ADMIN
270
데이터베이스
ADMINCOUNT (ADMIN) : MEMBER,HOSTING, 예약 전체 수 각각 sql
271
데이터베이스
ADMIN COUNT (ADMIN) : MEMBER,HOSTING, 예약 전체 수 각각 PROCEDURE
272
데이터베이스
ADMINCOUNT (ADMIN) : MEMBER,HOSTING, 예약 전체 LIST sql
273
데이터베이스
ADMIN COUNT (ADMIN) : MEMBER,HOSTING, 예약 LIST 각각 PROCEDURE
274
데이터베이스
ADMIN COUNT (ADMIN) : MEMBER,HOSTING, 예약 LIST 각각 PROCEDURE
275
데이터베이스
ADMIN COUNT (ADMIN) : MEMBER,HOSTING, 예약 LIST 각각 PROCEDURE
276
데이터베이스
ADMINCOUNT (ADMIN) : MEMBER,HOSTING, 예약 CHART sql
277
화면구현
Admin
278
화면구현
Admin
279
화면구현
Admin
280
화면구현
Admin
281
화면구현
Admin
282
애플리케이션 구현
Admin
283
애플리케이션 구현
Admin
284
애플리케이션 구현
Admin
285
애플리케이션 구현
Admin
286
애플리케이션 구현
Admin
287
애플리케이션 구현
Admin
288
애플리케이션 구현
Admin
289
애플리케이션 구현
Admin
290
애플리케이션 구현
Admin
291
애플리케이션 구현
Admin
292
애플리케이션 구현
Admin
293
애플리케이션 구현
Admin
294
애플리케이션 구현
Admin
295
애플리케이션 구현
Admin
296
애플리케이션 구현
Admin
297
5. 결론
• 주요 기능
AjaxJsonTiles , no TilesMybatisGoogle API(Map, chart)MySqlBootStrapetc...