297

AIRBNB.COM 을 모티브로 한 포트폴리오

Embed Size (px)

Citation preview

Page 1: AIRBNB.COM 을 모티브로 한 포트폴리오
Page 2: AIRBNB.COM 을 모티브로 한 포트폴리오
Page 3: AIRBNB.COM 을 모티브로 한 포트폴리오
Page 4: AIRBNB.COM 을 모티브로 한 포트폴리오
Page 5: AIRBNB.COM 을 모티브로 한 포트폴리오

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)

예약호스팅회원

로그인

회원 , 호스팅 월간차트

호스팅 리스트 , 차트

회원 중 호스팅 회원수

관리자 비번 변경

성공실패

멤버서비스

Page 6: AIRBNB.COM 을 모티브로 한 포트폴리오

6

전체 데이터베이스 설계도

Page 7: AIRBNB.COM 을 모티브로 한 포트폴리오
Page 8: AIRBNB.COM 을 모티브로 한 포트폴리오

8

화면 구현 UI

• Main 상단 화면

Page 9: AIRBNB.COM 을 모티브로 한 포트폴리오

9

화면 구현 UI

• Main 하단 화면

Page 10: AIRBNB.COM 을 모티브로 한 포트폴리오
Page 11: AIRBNB.COM 을 모티브로 한 포트폴리오

11

공통 HomeController

Page 12: AIRBNB.COM 을 모티브로 한 포트폴리오

12

공통 Values

Page 13: AIRBNB.COM 을 모티브로 한 포트폴리오

13

공통 Command

Page 14: AIRBNB.COM 을 모티브로 한 포트폴리오

14

공통 Retval

Page 15: AIRBNB.COM 을 모티브로 한 포트폴리오

15

공통 Pagination

Page 16: AIRBNB.COM 을 모티브로 한 포트폴리오

16

공통 Retval

Page 17: AIRBNB.COM 을 모티브로 한 포트폴리오

17

공통 Application-Context1

Page 18: AIRBNB.COM 을 모티브로 한 포트폴리오

18

공통 Application-Context2

Page 19: AIRBNB.COM 을 모티브로 한 포트폴리오

19

공통 Application-Context3

Page 20: AIRBNB.COM 을 모티브로 한 포트폴리오

20

공통 tiles.xml

Page 21: AIRBNB.COM 을 모티브로 한 포트폴리오

21

공통 tiles.xml(no tiles)

Page 22: AIRBNB.COM 을 모티브로 한 포트폴리오

22

공통 Pom.xml

Page 23: AIRBNB.COM 을 모티브로 한 포트폴리오
Page 24: AIRBNB.COM 을 모티브로 한 포트폴리오

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 추가시켜 직접 입력 불가능하게 설정 , 각 항목별 값은 부적합한 값이 입력되지 않게끔 구현

Page 25: AIRBNB.COM 을 모티브로 한 포트폴리오

25

Hosting

요구사항 확인

호스팅 관리 호스팅 관리 메인 화면은 Member email 을 기준으로 DB 에 있는

houses 테이블 값 출력 , 페이지 네이션으로 각 페이지당 1 개의 방씩 출력

상세정보 클릭시 클릭한 house_seq 을 controller 로 넘겨 update 시 활용

모든 수정 화면은 우측에 DB 에 저장되어 있던 기존 값을 출력하여 나타내어준다 .

한 화면에 두 개의 DB 컬럼을 수정해야 하는 경우 , 하나의 값만 수정했을 시 나머지 한 개 값은 기존 DB 값을 그대로 사용

달력은 당일을 기준으로 이전 일자는 선택 불가 , 최대 100 일까지만 선택 가능 , 최초 hosting 시 block 테이블이 null 일 경우 화면에 설정 값이 없다는 메시지 출력

예약 취소는 house_seq 를 기준으로 예약되어 있는 테이블 값을 출력해주며 , 취소 버튼을 클릭하여 호스트가 임의 취소 가능하게끔 구현

Google Map 은 DB 에 저장되어 있는 위도 , 경도 값을 가져와 해당 위치를 나타내어준다 .

이미지업로드는 실제 아마존서버로의 저장은 구현하지 않으며 , 저장되는 파일 명만 DB 로 값 전달

Page 26: AIRBNB.COM 을 모티브로 한 포트폴리오

26

데이터베이스

Hosting

Page 27: AIRBNB.COM 을 모티브로 한 포트폴리오

27

데이터베이스

HostingRegist (Hosting) : Hosting 전체 값 한 번에 전달

Regist (Address) : Address 전체 값 한 번에 전달

Page 28: AIRBNB.COM 을 모티브로 한 포트폴리오

28

데이터베이스

HostingRegist (Block) : 최초 Hosting 시에는 실행되지 않으며 , 호스트 관리 메뉴에서

달력 설정시 실행

Update (Price) : 가격 수정

Update (Rules) : 규칙 수정

Page 29: AIRBNB.COM 을 모티브로 한 포트폴리오

29

데이터베이스

HostingUpdate (CheckIn) : 체크인 일자 수정

Update (Option) : 옵션 수정

Update (Explaination) : 숙소 설명 수정

Page 30: AIRBNB.COM 을 모티브로 한 포트폴리오

30

데이터베이스

HostingUpdate (Map) : 구글 맵 수정 ( 위도 , 경도 )

Update (Convenience) : 편의시설 수정

Update (Picture) : 이미지 파일명 수정

Page 31: AIRBNB.COM 을 모티브로 한 포트폴리오

31

데이터베이스

HostingUpdate (Safety) : 안전시설 수정

Delete (Block) : RegistBlock 시 기존 튜플 삭제

Delete (Houses) : houses 삭제 전 관계되어 있는 FK 값 테이블 선 삭제

Page 32: AIRBNB.COM 을 모티브로 한 포트폴리오

32

데이터베이스

HostingSelect (HouseList) : 현재 DB 에 저장되어 있는 값 출력

Page 33: AIRBNB.COM 을 모티브로 한 포트폴리오

33

데이터베이스

HostingSelect (BuildingList) : Building 테이블에 저장되어 있는 튜플 출력

Select (House_seq) : Update 시 Where 문에 들어갈 House_seq 추출

Select (HouseCount) : Pagenation 시 사용할 등록 Houses 튜플 수 추출

Page 34: AIRBNB.COM 을 모티브로 한 포트폴리오

34

데이터베이스

HostingSelect (if exist) : 테이블 값이 없을 경우 0 을 리턴

Select (resv_view) : House_seq 기준 예약되어 있는 Resv 값 추출

Select (Block_list) : House_seq 기준 Block 값 출력

Page 35: AIRBNB.COM 을 모티브로 한 포트폴리오

35

화면구현

Hosting

로그인시 : 호스팅 화면으로 이동로그아웃시 : 로그인 화면으로 이동

hb2020
Page 36: AIRBNB.COM 을 모티브로 한 포트폴리오

36

화면구현

Hosting

설정된 값들은 다음 버튼 클릭시Footer 의 hidden 태그로 값 저장 , 차후 hosting 최종 단계에서 DB 로 값 전달

Page 37: AIRBNB.COM 을 모티브로 한 포트폴리오

37

화면구현

Hosting

Onlyread 태그 사용으로 직접 타이핑하여 값 입력 불가0 이하로 세팅시 error 메시지 팝업

Page 38: AIRBNB.COM 을 모티브로 한 포트폴리오

38

화면구현

Hosting

Google api 사용하여 주소 자동완성 사용입력값 split 처리하여 해당하는 input 태그로 자동입력 처리

Page 39: AIRBNB.COM 을 모티브로 한 포트폴리오

39

화면구현

Hosting

GoogleMap API 로 지도 검색기능 및Marker 기능 구현

이전 화면에서 입력 받은 주소 값Google GeoCoding 사용하여 해당하는 위치로 default 값 세팅

Page 40: AIRBNB.COM 을 모티브로 한 포트폴리오

40

화면구현

Hosting

Check 시True 는 T, False 는 F 로 값 변환하여최종 DB 에 T-T-T-F-.T.. 와 같은 형태로 저장

Page 41: AIRBNB.COM 을 모티브로 한 포트폴리오

41

화면구현

Hosting

Check 시True 는 T, False 는 F 로 값 변환하여최종 DB 에 T-T-T-F-.T.. 와 같은 형태로 저장

Page 42: AIRBNB.COM 을 모티브로 한 포트폴리오

42

화면구현

HostingUpload a file 버튼 및 Drag 로 사진 파일 저장 ( 실제 서버로 업로드 기능 미구현 ) 현재 저장된 파일명만 DB 로 값 전달

Page 43: AIRBNB.COM 을 모티브로 한 포트폴리오

43

화면구현

Hosting

작성값이 null 일 경우 error 메시지 발생( 숙소 설명을 작성해주세요 .)

Page 44: AIRBNB.COM 을 모티브로 한 포트폴리오

44

화면구현

Hosting

작성값이 null 일 경우 error 메시지 발생( 숙소 이름을 작성해주세요 .)

Page 45: AIRBNB.COM 을 모티브로 한 포트폴리오

45

화면구현

Hosting

작성값이 null 일 경우 error 메시지 발생( 기타 규칙을 작성해주세요 .)

Page 46: AIRBNB.COM 을 모티브로 한 포트폴리오

46

화면구현

Hosting

체크인 시간은 15:00 고정 값

Page 47: AIRBNB.COM 을 모티브로 한 포트폴리오

47

화면구현

Hosting

Onlyread 태그 사용으로 input box 에직접 값 입력 불가최소 숙박일수가 최대 숙박일수보다높을 수 없으며 ,최대 숙박일수가 최소 숙박일수보다작게 값 세팅 불가

Page 48: AIRBNB.COM 을 모티브로 한 포트폴리오

48

화면구현

Hosting

작성값이 null 일 경우 error 메시지 발생( 요금을 설정해주세요 )

완료 버튼 클릭시 모든 footer 에 전달되었던 값들 Ajax 를 이용하여 Controller -> DB 로 값 저장정상 저장시 Hosting 관리 메뉴로 이동

Page 49: AIRBNB.COM 을 모티브로 한 포트폴리오

49

화면구현

Hosting

상단부터숙소 제목숙소 주소등록일자 순으로 DB 에 있던 값 출력

관리 및 설정 메뉴 클릭시해당하는 DB Seq.No 를 Controller 로 넘겨수정기능 구현시 활용

Page 50: AIRBNB.COM 을 모티브로 한 포트폴리오

50

화면구현

Hosting

현재 일자로부터 최대 100 일까지만 일자 선택 가능 (2 회 클릭으로 범위지정 )

기존 DB 에 있던 값 출력 , 수정 시 변경된 값 즉시 화면에 반영

설정값 미리보기 화면

Page 51: AIRBNB.COM 을 모티브로 한 포트폴리오

51

화면구현

Hosting

요금 수정 기능

기존 DB 에 있던 값 출력 , 수정 시 변경된 값 즉시 화면에 반영

Page 52: AIRBNB.COM 을 모티브로 한 포트폴리오

52

화면구현

Hosting

2 개 기능 중 1 개만 수정시 나머지 1 개 값은기존 DB 값을 그대로 유지

기존 DB 에 있던 값 출력 , 수정 시 변경된 값 즉시 화면에 반영

Page 53: AIRBNB.COM 을 모티브로 한 포트폴리오

53

화면구현

Hosting

값은 15:00 로 고정

기존 DB 에 있던 값 출력 , 수정 시 변경된 값 즉시 화면에 반영

Page 54: AIRBNB.COM 을 모티브로 한 포트폴리오

54

화면구현

Hosting

현재 해당 room 에 등록되어 있는 예약정보 출력 ,우측 취소 버튼 클릭 시 예약 취소 가능

Page 55: AIRBNB.COM 을 모티브로 한 포트폴리오

55

화면구현

Hosting 기존 DB 에 있던 값 출력 , 수정 시 변경된 값 즉시 화면에 반영

각 항목별 수정 기능 구현

Page 56: AIRBNB.COM 을 모티브로 한 포트폴리오

56

화면구현

Hosting

2 개 기능 중 1 개만 수정시 나머지 1 개 값은기존 DB 값을 그대로 유지

기존 DB 에 있던 값 출력 , 수정 시 변경된 값 즉시 화면에 반영

Page 57: AIRBNB.COM 을 모티브로 한 포트폴리오

57

화면구현

Hosting

기존 Hosting 시 등록된 Marker 값을 출력 ,수정시 수정된 좌표 DB 저장 및 수정화면에도 즉시반영

Page 58: AIRBNB.COM 을 모티브로 한 포트폴리오

58

화면구현

Hosting

수정 기능 구현

기존 DB 에 있던 값 출력 , 수정 시 변경된 값 즉시 화면에 반영

Page 59: AIRBNB.COM 을 모티브로 한 포트폴리오

59

화면구현

Hosting

Upload a file 버튼 및 Drag 로 사진 파일 저장 ( 실제 서버로 업로드 기능 미구현 ) 현재 저장된 파일명만 DB 로 값 전달

Page 60: AIRBNB.COM 을 모티브로 한 포트폴리오

60

화면구현

Hosting

수정 기능 구현

기존 DB 에 있던 값 출력 , 수정 시 변경된 값 즉시 화면에 반영

Page 61: AIRBNB.COM 을 모티브로 한 포트폴리오

61

애플리케이션 구현

Hosting번 호 1/9 파일명 /클래스 HostingController.jav

a 설 명 Hosting 기능 관련 Controller

Page 62: AIRBNB.COM 을 모티브로 한 포트폴리오

62

애플리케이션 구현

Hosting번 호 1/9 파일명 /클래스 HostingController.jav

a 설 명 Hosting 기능 관련 Controller

Page 63: AIRBNB.COM 을 모티브로 한 포트폴리오

63

애플리케이션 구현

Hosting번 호 1/9 파일명 /클래스 HostingController.jav

a 설 명 Hosting 기능 관련 Controller

Page 64: AIRBNB.COM 을 모티브로 한 포트폴리오

64

애플리케이션 구현

Hosting번 호 1/9 파일명 /클래스 HostingController.jav

a 설 명 Hosting 기능 관련 Controller

Page 65: AIRBNB.COM 을 모티브로 한 포트폴리오

65

애플리케이션 구현

Hosting번 호 1/9 파일명 /클래스 HostingController.jav

a 설 명 Hosting 기능 관련 Controller

Page 66: AIRBNB.COM 을 모티브로 한 포트폴리오

66

애플리케이션 구현

Hosting번 호 1/9 파일명 /클래스 HostingController.jav

a 설 명 Hosting 기능 관련 Controller

Page 67: AIRBNB.COM 을 모티브로 한 포트폴리오

67

애플리케이션 구현

Hosting번 호 1/9 파일명 /클래스 HostingController.jav

a 설 명 Hosting 기능 관련 Controller

Page 68: AIRBNB.COM 을 모티브로 한 포트폴리오

68

애플리케이션 구현

Hosting번 호 1/9 파일명 /클래스 HostingController.jav

a 설 명 Hosting 기능 관련 Controller

Page 69: AIRBNB.COM 을 모티브로 한 포트폴리오

69

애플리케이션 구현

Hosting번 호 1/9 파일명 /클래스 HostingController.jav

a 설 명 Hosting 기능 관련 Controller

Page 70: AIRBNB.COM 을 모티브로 한 포트폴리오

70

애플리케이션 구현

Hosting번 호 1/9 파일명 /클래스 HostingController.jav

a 설 명 Hosting 기능 관련 Controller

Page 71: AIRBNB.COM 을 모티브로 한 포트폴리오

71

애플리케이션 구현

Hosting번 호 1/9 파일명 /클래스 HostingController.jav

a 설 명 Hosting 기능 관련 Controller

Page 72: AIRBNB.COM 을 모티브로 한 포트폴리오

72

애플리케이션 구현

Hosting번 호 1/9 파일명 /클래스 HostingController.jav

a 설 명 Hosting 기능 관련 Controller

Page 73: AIRBNB.COM 을 모티브로 한 포트폴리오

73

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 74: AIRBNB.COM 을 모티브로 한 포트폴리오

74

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 75: AIRBNB.COM 을 모티브로 한 포트폴리오

75

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 76: AIRBNB.COM 을 모티브로 한 포트폴리오

76

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 77: AIRBNB.COM 을 모티브로 한 포트폴리오

77

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 78: AIRBNB.COM 을 모티브로 한 포트폴리오

78

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 79: AIRBNB.COM 을 모티브로 한 포트폴리오

79

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 80: AIRBNB.COM 을 모티브로 한 포트폴리오

80

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 81: AIRBNB.COM 을 모티브로 한 포트폴리오

81

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 82: AIRBNB.COM 을 모티브로 한 포트폴리오

82

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 83: AIRBNB.COM 을 모티브로 한 포트폴리오

83

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 84: AIRBNB.COM 을 모티브로 한 포트폴리오

84

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 85: AIRBNB.COM 을 모티브로 한 포트폴리오

85

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 86: AIRBNB.COM 을 모티브로 한 포트폴리오

86

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 87: AIRBNB.COM 을 모티브로 한 포트폴리오

87

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 88: AIRBNB.COM 을 모티브로 한 포트폴리오

88

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 89: AIRBNB.COM 을 모티브로 한 포트폴리오

89

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 90: AIRBNB.COM 을 모티브로 한 포트폴리오

90

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 91: AIRBNB.COM 을 모티브로 한 포트폴리오

91

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 92: AIRBNB.COM 을 모티브로 한 포트폴리오

92

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 93: AIRBNB.COM 을 모티브로 한 포트폴리오

93

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 94: AIRBNB.COM 을 모티브로 한 포트폴리오

94

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 95: AIRBNB.COM 을 모티브로 한 포트폴리오

95

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 96: AIRBNB.COM 을 모티브로 한 포트폴리오

96

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 97: AIRBNB.COM 을 모티브로 한 포트폴리오

97

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 98: AIRBNB.COM 을 모티브로 한 포트폴리오

98

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 99: AIRBNB.COM 을 모티브로 한 포트폴리오

99

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 100: AIRBNB.COM 을 모티브로 한 포트폴리오

100

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 101: AIRBNB.COM 을 모티브로 한 포트폴리오

101

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 102: AIRBNB.COM 을 모티브로 한 포트폴리오

102

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 103: AIRBNB.COM 을 모티브로 한 포트폴리오

103

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 104: AIRBNB.COM 을 모티브로 한 포트폴리오

104

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 105: AIRBNB.COM 을 모티브로 한 포트폴리오

105

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 106: AIRBNB.COM 을 모티브로 한 포트폴리오

106

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 107: AIRBNB.COM 을 모티브로 한 포트폴리오

107

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 108: AIRBNB.COM 을 모티브로 한 포트폴리오

108

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 109: AIRBNB.COM 을 모티브로 한 포트폴리오

109

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 110: AIRBNB.COM 을 모티브로 한 포트폴리오

110

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 111: AIRBNB.COM 을 모티브로 한 포트폴리오

111

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 112: AIRBNB.COM 을 모티브로 한 포트폴리오

112

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 113: AIRBNB.COM 을 모티브로 한 포트폴리오

113

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 114: AIRBNB.COM 을 모티브로 한 포트폴리오

114

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 115: AIRBNB.COM 을 모티브로 한 포트폴리오

115

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 116: AIRBNB.COM 을 모티브로 한 포트폴리오

116

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 117: AIRBNB.COM 을 모티브로 한 포트폴리오

117

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 118: AIRBNB.COM 을 모티브로 한 포트폴리오

118

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 119: AIRBNB.COM 을 모티브로 한 포트폴리오

119

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 120: AIRBNB.COM 을 모티브로 한 포트폴리오

120

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 121: AIRBNB.COM 을 모티브로 한 포트폴리오

121

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 122: AIRBNB.COM 을 모티브로 한 포트폴리오

122

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 123: AIRBNB.COM 을 모티브로 한 포트폴리오

123

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 124: AIRBNB.COM 을 모티브로 한 포트폴리오

124

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 125: AIRBNB.COM 을 모티브로 한 포트폴리오

125

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 126: AIRBNB.COM 을 모티브로 한 포트폴리오

126

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 127: AIRBNB.COM 을 모티브로 한 포트폴리오

127

애플리케이션 구현

Hosting번 호 2/9 파일명 /클래스 Geunhong.js 설 명 Hosting 기능 관련 Ajax

Page 128: AIRBNB.COM 을 모티브로 한 포트폴리오

128

애플리케이션 구현

Hosting번 호 3/9 파일명 /클래스 Footer.js 설 명 Ajax 통신을 위한 임시 값 저장

Page 129: AIRBNB.COM 을 모티브로 한 포트폴리오

129

애플리케이션 구현

Hosting번 호 4/9 파일명 /클래스 HostingDTO.java 설 명 Hosting 관련 Bean

Page 130: AIRBNB.COM 을 모티브로 한 포트폴리오

130

애플리케이션 구현

Hosting번 호 5/9 파일명 /클래스 Command.java 설 명 Mapper 에 값을 전달해주는 Bean

Page 131: AIRBNB.COM 을 모티브로 한 포트폴리오

131

애플리케이션 구현

Hosting번 호 6/9 파일명 /클래스 Retval.java 설 명 Ajax 통신을 위한 임시 Bean

Page 132: AIRBNB.COM 을 모티브로 한 포트폴리오

132

애플리케이션 구현

Hosting번 호 7/9 파일명 /클래스 HostingMapper.java 설 명 Controller 와 Mapper 의 통신을

위한 Interface

Page 133: AIRBNB.COM 을 모티브로 한 포트폴리오

133

애플리케이션 구현

Hosting번 호 8/9 파일명 /클래스 HostingService.java 설 명 HostingServiceImpl 의 Interface

Page 134: AIRBNB.COM 을 모티브로 한 포트폴리오

134

애플리케이션 구현

Hosting번 호 9/9 파일명 /클래스 HostingServiceImpl.java 설 명 HostingService 의 Implement

Page 135: AIRBNB.COM 을 모티브로 한 포트폴리오

135

애플리케이션 구현

Hosting번 호 9/9 파일명 /클래스 HostingServiceImpl.java 설 명 HostingService 의 Implement

Page 136: AIRBNB.COM 을 모티브로 한 포트폴리오

136

애플리케이션 구현

Hosting번 호 9/9 파일명 /클래스 HostingServiceImpl.java 설 명 HostingService 의 Implement

Page 137: AIRBNB.COM 을 모티브로 한 포트폴리오
Page 138: AIRBNB.COM 을 모티브로 한 포트폴리오

138

요구사항 확인

Booking모든 기능은 로그인을 필수로 한다 .

예약 기능 : 예약 화면에서는 예약 할 도시 , 날짜 , 숙박인원 , 숙소유형 , 가격범위 , 규모 ( 침실 , 욕실 , 침대 수 ), 지역 , 시설 , 호스트 언어를 선택하여 예약한다규모 , 시설 , 호스트 언어는 선택하지 않아도 된다 .검색에서 가져온 정보를 토대로 리스트를 검색한다 .도시명 , 날짜 , 금액 등은 수정하여 검색이 가능하다 .규모는 침실 , 욕실 , 침대 수를 체크박스에서 선택하여 결정한다 .시설은 예약하려는 방의 다양한 옵션기능을 선택 추가하는 기능이며 중복선택이 가능하다 .예약 시 모든 선택 ( 필터 ) 의 결과에 따라 리시트를 출력하여 보여준다 .필터를 적용하지않으면 검색에서 가져온 값에 따른 리스트를 출력하여 보여준다 .예약 Detail 화면에서는 필터링에서 확정된 값을 Detail 화 하여 보여준다 .

결제 기능 : 결제 기능은 예약 기능에서 필터를 거쳐 ( 혹은 구글 맵 에서 선택하여 ) 결정한 방의 예약결제를 진행하는 기능이며 , 결제방법 ( 신용카드 ), 카드번호와 만료일 ( 년 /월 /보안코드 ), 이름 / 성 , 우편번호를 입력 받는다 .결제국가와 결제방법은 디폴트 값과 신용카드 로 고정 되어있다 .카드번호는 - 를 제외한 19 자 내외로 입력 받는다 . 만료일은 년도는 2 자리 월은 2 자리로 입력 받는다 . 보안코드는 3 자리를 입력 받는다 .이름 / 성 은 5자 /5 자 내외로 입력 받는다 . 우편번호는 10 자내외로 입력 받는다 .카드번호는 필수입력 사항이며 정규식에 맞게 작성하여야 한다 .

예약 관리 :예약 관리는 예약후에 취소나 자신이 예약한 방의 정보를 다시 확인할 수 있는 기능을 제공한다 .예약취소는 취소 팝업을 보여준 후에 예약을 취소한다 .예약한 리스트의 예약번호를 통해 자신이 예약한 곳의 상세 정보를 확인 할 수 있다 .상세정보에는 자신이 예약한 지역과 체크인 /체크아웃 날짜를 확인할 수 있다 . 뒤로 가기 버튼을 통해 다시 예약리스트로 돌아갈 수 있다 .

Page 139: AIRBNB.COM 을 모티브로 한 포트폴리오

139

데이터베이스

• EXERD

Booking

Page 140: AIRBNB.COM 을 모티브로 한 포트폴리오

140

데이터베이스

Booking• reservation 테이블

Page 141: AIRBNB.COM 을 모티브로 한 포트폴리오

141

데이터베이스

• resv_view 테이블

Booking

Page 142: AIRBNB.COM 을 모티브로 한 포트폴리오

142

데이터베이스

• payment 테이블

Booking

Page 143: AIRBNB.COM 을 모티브로 한 포트폴리오

143

데이터베이스

Booking• resvCancel : 예약 취소

• payment : 입력된 결제 정보를 받아 DB 에 전달

• getHost : Host 의 대한 정보를 Member Table 에서 추출

Page 144: AIRBNB.COM 을 모티브로 한 포트폴리오

144

데이터베이스

Booking• resvList : 예약가능한 방 List 를 출력

• findOne : Detail 화면에 출력 할 houses 값을 houseMap 에서 추출

• resvCount : 전체 호스팅 등록 된 house Count

Page 145: AIRBNB.COM 을 모티브로 한 포트폴리오

145

데이터베이스

Booking• findResv : 예약한 방의 Seq 를 추출

Page 146: AIRBNB.COM 을 모티브로 한 포트폴리오

146

UI화면구현

Booking

Page 147: AIRBNB.COM 을 모티브로 한 포트폴리오

147

UI화면구현

Booking

Page 148: AIRBNB.COM 을 모티브로 한 포트폴리오

148

UI화면구현

Booking

Page 149: AIRBNB.COM 을 모티브로 한 포트폴리오

149

UI화면구현

Booking

Page 150: AIRBNB.COM 을 모티브로 한 포트폴리오

150

UI화면구현

Booking

Page 151: AIRBNB.COM 을 모티브로 한 포트폴리오

151

UI화면구현

Booking

Page 152: AIRBNB.COM 을 모티브로 한 포트폴리오

152

애플리케이션 구현

Booking

번 호 1/11 파일명 /클래스 Values.java 설 명 예약 취소 Pagination Static

변수

Page 153: AIRBNB.COM 을 모티브로 한 포트폴리오

153

애플리케이션 구현

Booking

번 호 2/11 파일명 /클래스

BookingController.java 설 명 예약 컨트롤러 Java 소스

Page 154: AIRBNB.COM 을 모티브로 한 포트폴리오

154

애플리케이션 구현

Booking번 호 3/11 파일명 /

클래스 BookingDTO.java 설 명 예약 Bin

Page 155: AIRBNB.COM 을 모티브로 한 포트폴리오

155

애플리케이션 구현

Booking

번 호 3/11 파일명 /클래스 BookingDTO.java 설 명 예약 Bin

Page 156: AIRBNB.COM 을 모티브로 한 포트폴리오

156

애플리케이션 구현

Booking번 호 3/11 파일명 /

클래스 BookingDTO.java 설 명 예약 Bin

Page 157: AIRBNB.COM 을 모티브로 한 포트폴리오

157

애플리케이션 구현

Booking

번 호 3/11 파일명 /클래스 BookingDTO.java 설 명 예약 Bin

Page 158: AIRBNB.COM 을 모티브로 한 포트폴리오

158

애플리케이션 구현

Booking

번 호 3/11 파일명 /클래스 BookingDTO.java 설 명 예약 Bin

Page 159: AIRBNB.COM 을 모티브로 한 포트폴리오

159

애플리케이션 구현

Booking번 호 4/11 파일명 /

클래스CancelPagination.ja

va 설 명 예약 취소 PaginationJava 소스

Page 160: AIRBNB.COM 을 모티브로 한 포트폴리오

160

애플리케이션 구현

Booking

번 호 5/11 파일명 /클래스 Command.java 설 명 Mapper.xml/Pagination 에서

사용하는 변수

Page 161: AIRBNB.COM 을 모티브로 한 포트폴리오

161

애플리케이션 구현

Booking

번 호 6/11 파일명 /클래스 Retval.java 설 명 Temp 값을 저장하는 변수

Page 162: AIRBNB.COM 을 모티브로 한 포트폴리오

162

애플리케이션 구현

Booking번 호 7/11 파일명 /

클래스BookingMapper.jav

a 설 명 예약 Mapper

Page 163: AIRBNB.COM 을 모티브로 한 포트폴리오

163

애플리케이션 구현

Booking

번 호 8/11 파일명 /클래스

BookingService.java 설 명 예약 Service

Page 164: AIRBNB.COM 을 모티브로 한 포트폴리오

164

애플리케이션 구현

Booking

번 호 9/11 파일명 /클래스

BookingServiceImp.java 설 명 예약 Service Interface

Page 165: AIRBNB.COM 을 모티브로 한 포트폴리오

165

애플리케이션 구현

Booking

번 호 9/11 파일명 /클래스

BookingServiceImp.java 설 명 예약 Service Interface

Page 166: AIRBNB.COM 을 모티브로 한 포트폴리오

166

애플리케이션 구현

Booking

번 호 10/11 파일명 /클래스 BookingMapper.xml 설 명 예약 DB 쿼리소스

Page 167: AIRBNB.COM 을 모티브로 한 포트폴리오

167

애플리케이션 구현

Booking번 호 10/11 파일명 /

클래스 BookingMapper.xml 설 명 예약 DB 쿼리소스

Page 168: AIRBNB.COM 을 모티브로 한 포트폴리오

168

애플리케이션 구현

Booking번 호 10/11 파일명 /

클래스 BookingMapper.xml 설 명 예약 DB 쿼리소스

Page 169: AIRBNB.COM 을 모티브로 한 포트폴리오

169

애플리케이션 구현

Booking

번 호 11/11 파일명 /클래스 hyunwoo.js 설 명 예약 Ajax JavaScript 소스

Page 170: AIRBNB.COM 을 모티브로 한 포트폴리오

170

애플리케이션 구현

Booking

번 호 11/11 파일명 /클래스 hyunwoo.js 설 명 예약 Ajax JavaScript 소스

Page 171: AIRBNB.COM 을 모티브로 한 포트폴리오

171

애플리케이션 구현

Booking

번 호 11/11 파일명 /클래스 hyunwoo.js 설 명 예약 Ajax JavaScript 소스

Page 172: AIRBNB.COM 을 모티브로 한 포트폴리오

172

애플리케이션 구현

Booking

번 호 11/11 파일명 /클래스 hyunwoo.js 설 명 예약 Ajax JavaScript 소스

Page 173: AIRBNB.COM 을 모티브로 한 포트폴리오

173

애플리케이션 구현

Booking

번 호 11/11 파일명 /클래스 hyunwoo.js 설 명 예약 Ajax JavaScript 소스

Page 174: AIRBNB.COM 을 모티브로 한 포트폴리오

174

애플리케이션 구현

Booking

번 호 11/11 파일명 /클래스 hyunwoo.js 설 명 예약 Ajax JavaScript 소스

Page 175: AIRBNB.COM 을 모티브로 한 포트폴리오

175

애플리케이션 구현

Booking

번 호 11/11 파일명 /클래스 hyunwoo.js 설 명 예약 Ajax JavaScript 소스

Page 176: AIRBNB.COM 을 모티브로 한 포트폴리오
Page 177: AIRBNB.COM 을 모티브로 한 포트폴리오

177

요구사항 확인

Search메인 화면 간단 검색기능 : 메인 화면에서의 검색기능은 예약 시 검색 범위를 좁히는데 목적으로 한다 . 검색은 자동완성 기능을 사용한다 검색 범위는 국가 , 시 , 구까지 지원한다 . 체크인과 체크아웃 요일은 달력으로 선택하여 정한다 . 숙박인원은 1 명에서 16 명까지의 체크박스에서 선택할 수 있다 . 상단 헤더에서도 검색기능을 지원한다

Page 178: AIRBNB.COM 을 모티브로 한 포트폴리오

178

요구사항 확인

Search상세 검색 :  검색 결과 화면에서는 예약 할 도시 , 날짜 , 숙박인원 , 숙소유형 , 가격범위 , 규모 ( 욕실 , 침대 수 ), 지역 , 시설을 선택하여 상세 검색을 지원한다 규모 , 시설은 선택하지 않아도 된다 . 날짜는 체크인날짜와 체크아웃 날짜를 선택하고 숙박인원은 1~16명까지의 체크박스에서 선택한다 . 가격범위는 입력 형식으로 가격선을 결정한다 .규모는 욕실 , 침대 수를 1~ 최대 16 까지의 체크박스에서 선택하여 결정한다 .지역은 여러가지를 선택 할 수 있다 . 시설은 예약하려는 방의 다양한 옵션기능을 선택 추가하는 기능이며 중복선택이 가능하다 . 검색 시 모든 선택 ( 필터 ) 의 결과에 따라 구글맵에서 해당하는 호스트방을 보여준다 .

Page 179: AIRBNB.COM 을 모티브로 한 포트폴리오

179

데이터베이스

Search

Page 180: AIRBNB.COM 을 모티브로 한 포트폴리오

180

데이터베이스

SearchHouses_view (houses,address,building join view)

Page 181: AIRBNB.COM 을 모티브로 한 포트폴리오

181

데이터베이스

SearchHouses_view (houses,address,building join view)

Page 182: AIRBNB.COM 을 모티브로 한 포트폴리오

182

데이터베이스

SearchProcedure : sp_house_cnt ( 검색 결과 페이징을 위한 검색된 수 )

Page 183: AIRBNB.COM 을 모티브로 한 포트폴리오

183

데이터베이스

SearchProcedure : sp_house_cnt ( 검색 결과 페이징을 위한 검색된 수 )

Page 184: AIRBNB.COM 을 모티브로 한 포트폴리오

184

데이터베이스

SearchProcedure : sp_house_cnt ( 검색 결과 페이징을 위한 검색된 수 )

Page 185: AIRBNB.COM 을 모티브로 한 포트폴리오

185

데이터베이스

SearchProcedure : sp_house_cnt ( 검색 결과 페이징을 위한 검색된 수 )

Page 186: AIRBNB.COM 을 모티브로 한 포트폴리오

186

데이터베이스

SearchProcedure : sp_house_cnt ( 검색 결과 페이징을 위한 검색된 수 )

Page 187: AIRBNB.COM 을 모티브로 한 포트폴리오

187

데이터베이스

SearchProcedure : sp_house_list ( 검색 결과 type : houses_view list )

Page 188: AIRBNB.COM 을 모티브로 한 포트폴리오

188

데이터베이스

SearchProcedure : sp_house_list ( 검색 결과 type : houses_view list )

Page 189: AIRBNB.COM 을 모티브로 한 포트폴리오

189

데이터베이스

SearchProcedure : sp_house_list ( 검색 결과 type : houses_view list )

Page 190: AIRBNB.COM 을 모티브로 한 포트폴리오

190

데이터베이스

SearchProcedure : sp_house_list ( 검색 결과 type : houses_view list )

Page 191: AIRBNB.COM 을 모티브로 한 포트폴리오

191

데이터베이스

SearchProcedure : sp_house_list ( 검색 결과 type : houses_view list )

Page 192: AIRBNB.COM 을 모티브로 한 포트폴리오

192

데이터베이스

SearchProcedure : sp_addr_list ( 검색 필터의 지역들을 구함 )

Page 193: AIRBNB.COM 을 모티브로 한 포트폴리오

193

화면 구현

Search상단 검색

입력 시 자동완성 기능 지원

Page 194: AIRBNB.COM 을 모티브로 한 포트폴리오

194

화면 구현

Search상단 검색

구글 autoComplete api 사용 , 검색 국가 대한민국으로 제한

검색한 주소의 위도 , 경도 값 추출

Page 195: AIRBNB.COM 을 모티브로 한 포트폴리오

195

화면 구현

Search상단 검색 조건 입력 후 검색

( 체크인 , 아웃 필수 )

Page 196: AIRBNB.COM 을 모티브로 한 포트폴리오

196

화면 구현

SearchjQuery bootstrap datepicker 사용

Page 197: AIRBNB.COM 을 모티브로 한 포트폴리오

197

화면 구현

Search상단 검색

Page 198: AIRBNB.COM 을 모티브로 한 포트폴리오

198

화면 구현

Search메인 검색

타이핑 시 자동완성 지원

Page 199: AIRBNB.COM 을 모티브로 한 포트폴리오

199

화면 구현

Search메인 검색

Page 200: AIRBNB.COM 을 모티브로 한 포트폴리오

200

화면 구현

Search검색 조건 지역 분할

검색 조건 JSON type

Page 201: AIRBNB.COM 을 모티브로 한 포트폴리오

201

화면 구현

Search검색 수행

Page 202: AIRBNB.COM 을 모티브로 한 포트폴리오

202

화면 구현

Search메인 검색

Page 203: AIRBNB.COM 을 모티브로 한 포트폴리오

203

화면 구현

Search검색 결과 페이징 구현

Page 204: AIRBNB.COM 을 모티브로 한 포트폴리오

204

화면 구현

Search메인 검색

클릭 시 검색필터 확장

Page 205: AIRBNB.COM 을 모티브로 한 포트폴리오

205

화면 구현

Search검색 필터 확장

Page 206: AIRBNB.COM 을 모티브로 한 포트폴리오

206

화면 구현

Search메인 검색

Page 207: AIRBNB.COM 을 모티브로 한 포트폴리오

207

화면 구현

Search메인 검색

Page 208: AIRBNB.COM 을 모티브로 한 포트폴리오

208

화면 구현

Search메인 검색

클릭 시 결과내 재검색

Page 209: AIRBNB.COM 을 모티브로 한 포트폴리오

209

화면 구현

Search재 검색 시 검색 값 유지

Page 210: AIRBNB.COM 을 모티브로 한 포트폴리오

210

화면 구현

Search재 검색 시 검색 값 유지

Page 211: AIRBNB.COM 을 모티브로 한 포트폴리오

211

화면 구현

Search메인 검색

클릭 시 상세 페이지 이동

Page 212: AIRBNB.COM 을 모티브로 한 포트폴리오

212

화면 구현

Search메인 검색

마커 클릭 시 표시

Page 213: AIRBNB.COM 을 모티브로 한 포트폴리오

213

화면 구현

Search메인 검색

사진 클릭시 상세 페이지 이동

Page 214: AIRBNB.COM 을 모티브로 한 포트폴리오

214

화면 구현

Search구글맵 구현

Page 215: AIRBNB.COM 을 모티브로 한 포트폴리오

215

화면 구현

Search구글 맵 마커 이벤트 처리

Page 216: AIRBNB.COM 을 모티브로 한 포트폴리오

216

애플리케이션 구현

Search

SearchVal : 검색조건 데이터 전송을 담당하는 Class

Page 217: AIRBNB.COM 을 모티브로 한 포트폴리오

217

애플리케이션 구현

Search

BookingController : 검색을 수행하는 search method

총 예약 일수를 구하는 부분

Page 218: AIRBNB.COM 을 모티브로 한 포트폴리오

218

애플리케이션 구현

Search

BookingController : 검색을 수행하는 search method

검색 결과를 페이지 별로 구하는 코드

Page 219: AIRBNB.COM 을 모티브로 한 포트폴리오

219

애플리케이션 구현

Search

BookingController : 검색을 수행하는 search method

검색 후 결과값들 저장

Page 220: AIRBNB.COM 을 모티브로 한 포트폴리오

220

애플리케이션 구현

Search

BookingController : 검색을 수행하는 list method

Page 221: AIRBNB.COM 을 모티브로 한 포트폴리오

221

애플리케이션 구현

Search

Pagination : 검색 결과 페이징을 위한 클래스

Page 222: AIRBNB.COM 을 모티브로 한 포트폴리오
Page 223: AIRBNB.COM 을 모티브로 한 포트폴리오

223

요구사항 확인

Member

구분 메뉴 및 기능 비고

•로그인

•페이스북 , 구글 연동 , 이메일 주소로 로그인 가능하게 한다 .•관리자 아이디 id: admin pw: 1 로 로그인시 관리자모드연결•아이디 로그인 시 이메일 형식이 아닐 경우 거부

•로그아웃•Session 값 Clear.

Page 224: AIRBNB.COM 을 모티브로 한 포트폴리오

224

요구사항 확인

Member

구분 메뉴 및 기능 비고

•회원가입

•ID 는 Email 형식•중복체크•전화번호 정규식

Page 225: AIRBNB.COM 을 모티브로 한 포트폴리오

225

데이터베이스

Member

Page 226: AIRBNB.COM 을 모티브로 한 포트폴리오

226

데이터베이스

Member

Page 227: AIRBNB.COM 을 모티브로 한 포트폴리오

227

데이터베이스

Member

Page 228: AIRBNB.COM 을 모티브로 한 포트폴리오

228

화면 구현

Member

Page 229: AIRBNB.COM 을 모티브로 한 포트폴리오

229

화면 구현

Member

Page 230: AIRBNB.COM 을 모티브로 한 포트폴리오

230

화면 구현

Member

Page 231: AIRBNB.COM 을 모티브로 한 포트폴리오

231

어플리케이션 구현

Member

Page 232: AIRBNB.COM 을 모티브로 한 포트폴리오

232

어플리케이션 구현

Member

Page 233: AIRBNB.COM 을 모티브로 한 포트폴리오

233

어플리케이션 구현

Member

Page 234: AIRBNB.COM 을 모티브로 한 포트폴리오

234

어플리케이션 구현

Member

Page 235: AIRBNB.COM 을 모티브로 한 포트폴리오

235

어플리케이션 구현

Member

Page 236: AIRBNB.COM 을 모티브로 한 포트폴리오

236

어플리케이션 구현

Member

Page 237: AIRBNB.COM 을 모티브로 한 포트폴리오

237

어플리케이션 구현

Member

Page 238: AIRBNB.COM 을 모티브로 한 포트폴리오

238

어플리케이션 구현

Member

Page 239: AIRBNB.COM 을 모티브로 한 포트폴리오

239

어플리케이션 구현

Member

Page 240: AIRBNB.COM 을 모티브로 한 포트폴리오

240

어플리케이션 구현

Member

Page 241: AIRBNB.COM 을 모티브로 한 포트폴리오

241

어플리케이션 구현

Member

Page 242: AIRBNB.COM 을 모티브로 한 포트폴리오

242

어플리케이션 구현

Member

Page 243: AIRBNB.COM 을 모티브로 한 포트폴리오

243

어플리케이션 구현

Member

Page 244: AIRBNB.COM 을 모티브로 한 포트폴리오

244

어플리케이션 구현

Member

Page 245: AIRBNB.COM 을 모티브로 한 포트폴리오

245

어플리케이션 구현

Member

Page 246: AIRBNB.COM 을 모티브로 한 포트폴리오
Page 247: AIRBNB.COM 을 모티브로 한 포트폴리오

로그인과 호스팅된 숙소가 우선 존재해야함 .

-등록 기능 : 구글맵 검색을 통하여 사용자가 등록하고 싶은 위치와 그 위치의 카테고리 ( 음식점 , 공원 ) 등등을 select box를 통하여 지정하며 textarea 를 통해 코멘트를 입력하는 형식이다 . 등록된 가이드북 내용은 숙소를 검색하는 사용자들에게 보여진다 .

가이드북은 구글맵 검색을 통한 위치 찾기 , 대분류 /소분류를 지정하는 다중 select 문을 지원한다 .

247

요구사항 확인

Guide

Page 248: AIRBNB.COM 을 모티브로 한 포트폴리오

248

데이터베이스

Guide

Page 249: AIRBNB.COM 을 모티브로 한 포트폴리오

249

데이터베이스

Guideguide_category 테이블

Page 250: AIRBNB.COM 을 모티브로 한 포트폴리오

250

데이터베이스

Guideguide_category 테이블

Page 251: AIRBNB.COM 을 모티브로 한 포트폴리오

251

데이터베이스

Guideguide_view

Page 252: AIRBNB.COM 을 모티브로 한 포트폴리오

252

데이터베이스

Guideguide_view

Page 253: AIRBNB.COM 을 모티브로 한 포트폴리오

253

데이터베이스

GuideProcedure : g_insert ( 가이드 등록 )

Page 254: AIRBNB.COM 을 모티브로 한 포트폴리오

254

화면구현

Guide

가이드북 등록하는 곳으로 가는 방법 !

Page 255: AIRBNB.COM 을 모티브로 한 포트폴리오

255

화면구현

Guide가이드북 등록 초기화면

Page 256: AIRBNB.COM 을 모티브로 한 포트폴리오

256

화면구현

Guide장소 검색시 google Autocomplete 기능 , 맵에 해당장소 마커

Page 257: AIRBNB.COM 을 모티브로 한 포트폴리오

257

화면구현

Guide메인 카테고리를 어떤 것을 선택하느냐에 따라 하위 카테고리가 보여지는 것이 달라지는 2 차 select 구현

Page 258: AIRBNB.COM 을 모티브로 한 포트폴리오

258

애플리케이션 구현

Guide번 호 1/9 파일명 /

클래스 geunhong.js 설 명 구글맵 구현

Page 259: AIRBNB.COM 을 모티브로 한 포트폴리오

259

애플리케이션 구현

Guide번 호 2/9 파일명 /

클래스 geunhong.js 설 명 검색시 맵이동 , 마커 구현

Page 260: AIRBNB.COM 을 모티브로 한 포트폴리오

애플리케이션 구현

Guide번 호 3/9 파일명 /

클래스 geunhong.js 설 명 서브카테고리 소스

Page 261: AIRBNB.COM 을 모티브로 한 포트폴리오

애플리케이션 구현

Guide번 호 4/9 파일명 /

클래스 geunhong.js 설 명 등록버튼

Page 262: AIRBNB.COM 을 모티브로 한 포트폴리오

애플리케이션 구현

Guide번 호 5/9 파일명 /

클래스 GuideController 설 명 가이드 컨트롤러

Page 263: AIRBNB.COM 을 모티브로 한 포트폴리오

애플리케이션 구현

Guide번 호 6/9 파일명 /

클래스 GuideDTO 설 명 GuideDTO

Page 264: AIRBNB.COM 을 모티브로 한 포트폴리오

애플리케이션 구현

Guide번 호 7/9 파일명 /

클래스 GuideMapper 설 명 GuideMapper 자바

Page 265: AIRBNB.COM 을 모티브로 한 포트폴리오

애플리케이션 구현

Guide번 호 8/9 파일명 /

클래스 GuideMapper 설 명 GuideMapper XML

Page 266: AIRBNB.COM 을 모티브로 한 포트폴리오

애플리케이션 구현

Guide번 호 9/9 파일명 /

클래스 GuideMapper 설 명 GuideMapper XML

Page 267: AIRBNB.COM 을 모티브로 한 포트폴리오
Page 268: AIRBNB.COM 을 모티브로 한 포트폴리오

268

ADMIN

요구사항 확인

• 관리자 로그인 모드 전용 아이디를 접속시 전용 모드로 변경 관리자 전용 ID : airbnb 관리자 전용 PW: airbnb

• 리스트 화면 회원 리스트 호스팅 멤버 리스트 호스팅 하우스 현황 리스트 예약 현황 리스트

1. 각각의 리스트에 클릭하면2. 회원 리스트 디테일3. 호스팅 디테일4. 예약 디테일 화면 이동5. 각각의 세부 사항은 회원 및 호스트 , 예약 컬럼에 의거 결정 한다 .

Page 269: AIRBNB.COM 을 모티브로 한 포트폴리오

269

요구사항 확인

• 통계 화면 월별 회원 가입자수 현황 챠트 월별 호스팅멤버 가입수 현황 차트 월별 호스팅 예약자 수 현황 차트

• 자동화의 개념에 의거 하여 관리자 모드에서는 어떤한 데이터의 조작 및 변경이 불가능하다 .

• 나가기 버튼이 있어 처음 화면으로 이동

ADMIN

Page 270: AIRBNB.COM 을 모티브로 한 포트폴리오

270

데이터베이스

ADMINCOUNT (ADMIN) : MEMBER,HOSTING, 예약 전체 수 각각 sql

Page 271: AIRBNB.COM 을 모티브로 한 포트폴리오

271

데이터베이스

ADMIN COUNT (ADMIN) : MEMBER,HOSTING, 예약 전체 수 각각 PROCEDURE

Page 272: AIRBNB.COM 을 모티브로 한 포트폴리오

272

데이터베이스

ADMINCOUNT (ADMIN) : MEMBER,HOSTING, 예약 전체 LIST sql

Page 273: AIRBNB.COM 을 모티브로 한 포트폴리오

273

데이터베이스

ADMIN COUNT (ADMIN) : MEMBER,HOSTING, 예약 LIST 각각 PROCEDURE

Page 274: AIRBNB.COM 을 모티브로 한 포트폴리오

274

데이터베이스

ADMIN COUNT (ADMIN) : MEMBER,HOSTING, 예약 LIST 각각 PROCEDURE

Page 275: AIRBNB.COM 을 모티브로 한 포트폴리오

275

데이터베이스

ADMIN COUNT (ADMIN) : MEMBER,HOSTING, 예약 LIST 각각 PROCEDURE

Page 276: AIRBNB.COM 을 모티브로 한 포트폴리오

276

데이터베이스

ADMINCOUNT (ADMIN) : MEMBER,HOSTING, 예약 CHART sql

Page 277: AIRBNB.COM 을 모티브로 한 포트폴리오

277

화면구현

Admin

Page 278: AIRBNB.COM 을 모티브로 한 포트폴리오

278

화면구현

Admin

Page 279: AIRBNB.COM 을 모티브로 한 포트폴리오

279

화면구현

Admin

Page 280: AIRBNB.COM 을 모티브로 한 포트폴리오

280

화면구현

Admin

Page 281: AIRBNB.COM 을 모티브로 한 포트폴리오

281

화면구현

Admin

Page 282: AIRBNB.COM 을 모티브로 한 포트폴리오

282

애플리케이션 구현

Admin

Page 283: AIRBNB.COM 을 모티브로 한 포트폴리오

283

애플리케이션 구현

Admin

Page 284: AIRBNB.COM 을 모티브로 한 포트폴리오

284

애플리케이션 구현

Admin

Page 285: AIRBNB.COM 을 모티브로 한 포트폴리오

285

애플리케이션 구현

Admin

Page 286: AIRBNB.COM 을 모티브로 한 포트폴리오

286

애플리케이션 구현

Admin

Page 287: AIRBNB.COM 을 모티브로 한 포트폴리오

287

애플리케이션 구현

Admin

Page 288: AIRBNB.COM 을 모티브로 한 포트폴리오

288

애플리케이션 구현

Admin

Page 289: AIRBNB.COM 을 모티브로 한 포트폴리오

289

애플리케이션 구현

Admin

Page 290: AIRBNB.COM 을 모티브로 한 포트폴리오

290

애플리케이션 구현

Admin

Page 291: AIRBNB.COM 을 모티브로 한 포트폴리오

291

애플리케이션 구현

Admin

Page 292: AIRBNB.COM 을 모티브로 한 포트폴리오

292

애플리케이션 구현

Admin

Page 293: AIRBNB.COM 을 모티브로 한 포트폴리오

293

애플리케이션 구현

Admin

Page 294: AIRBNB.COM 을 모티브로 한 포트폴리오

294

애플리케이션 구현

Admin

Page 295: AIRBNB.COM 을 모티브로 한 포트폴리오

295

애플리케이션 구현

Admin

Page 296: AIRBNB.COM 을 모티브로 한 포트폴리오

296

애플리케이션 구현

Admin

Page 297: AIRBNB.COM 을 모티브로 한 포트폴리오

297

5. 결론

• 주요 기능

AjaxJsonTiles , no TilesMybatisGoogle API(Map, chart)MySqlBootStrapetc...