Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

72 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

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

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

×