Final Project - 자료조사(1)

[21.11.04 ~ 21.11.07]

 

* 로그인 & 회원가입
* 메인창(트립가이드) 

 

▥ DB테이블 정리  - 1차 수정 

 

Table popualrlocation as p {
  pop_seq number [pk]  //명소고유번호
  pop_name varchar2(50) //명소이름
  pop_businessTime varchar2(30) //영업시간
  pop_tourismTime varchar2(30)  //추천관광시간
  pop_call varchar2(15) //명소전화번호??
  subject_seq varchar2(30) //목차
}

Table location {
  pop_seq number
  address varchar2(80)  //명소주소로 쓰려구요
  map_x number // 지도에 x좌표
  map_y number // 지도에 y좌표
}

ref: p.pop_seq > location.pop_seq

Table tripmember {
  member_seq number [pk] //사람별 고유 번호
  name varchar2(15) //사람 이름
  id varchar2(50) //아이디
  pwd varchar2(50)  //비밀번호
  email1 varchar2(50) //이메일 앞부분
  email2 varchar2(50) //이메일 뒷부분
}

Table subject {
  subject_seq number //외래키 목차
  subject_name varchar2(50) //목차 이름
}

ref: subject.subject_seq > p.subject_seq

Table like {
  member_seq number //외래키 사람 고유번호
  pop_seq number //외래키 명소 고유번호
  subject_seq number //외래키 목차
}

ref: tripmember.member_seq > like.member_seq
ref: p.subject_seq > like.subject_seq
ref: p.pop_seq > like.pop_seq

Table tripmoment {
  moment_title varchar2(50) //제목
  moment_content varchar2(100)  //내용
  moment_logdate varchar2(30) //작성날짜
  member_seq number //외래키 작성자
}

ref: tripmember.member_seq > tripmoment.member_seq

Table review {
  rating number //평점
  review_content varchar2(500) //리뷰내용
  review_logdate varchar(30)  //작성날짜
  member_seq  number //외래키 작성자
  pop_seq number //외래키  명소 
  
}

ref: p.pop_seq > review.pop_seq
ref: tripmember.member_seq > review.member_seq

---

 

▥ 필요한 기능 정리 

 

⊙ 메인창(main page)

1. Header - Top Nav → 로고, 고객센터, 로그인 / 회원가입 이동 버튼

2. 로그인 시 개인 계정 로고가 뜸 → 프로필 사진 등록, 변경, 삭제(*) ???

3. Header - Main Nav → 호텔, 액티비티, 트립가이드(Spring???)

 

참고 : 

 

(1) JSP 이용

https://blog.naver.com/haha7037/221997511333

JSP 웹페이지 실습 (18) 프로필 사진 업로드 및 변경

 

(2) Spring 이용

https://yeahajeong.tistory.com/90

[spring] 클론코딩08 User - 프로필 사진 등록, 조회, 삭제

 

4. 로딩중 화면 구현

 

참고 : 

https://kkamikoon.tistory.com/entry/Javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A1%9C-%EB%A1%9C%EB%94%A9%EC%A4%91-%ED%99%94%EB%A9%B4-%EB%A7%8C%EB%93%A4%EA%B8%B0%EB%A1%9C%EB%94%A9-%ED%91%9C%EC%8B%9C 

 

 

5. 인기 여행지(국내 4곳) 이미지 등록 및 마우스 오버 시 화면 변화(영상 혹은 jpg파일로 변경 고려)

6. 트립모먼트

- 이미지에 마우스 오버 시 화면 변화

- 프로필 & 아이디 & 좋아요 수 입력

- 버튼 2개(포스팅하러 가기 / 트립모먼트 더보기)

    1) '포스팅하러 가기' 클릭 시,

    사진 업로드 / 위치 추가 / 제목 추가 / 여행 스토리(내용)

    2) '트립모먼트 더보기' 클릭 시,

    메인 페이지의 트립모먼트 동일한 틀

7. Footer - 3개

 

 

 

⊙ 회원정보

 

로그인

 

- 아이디, 비밀번호 유효성 검사

- 간편가입 → kakao API

- 비밀번호 찾기

- 회원가입 페이지 연결

- 배경 투명하게 만든 뒤 창 띄우기(창 이동X) → CSS의 opacity 이용 or Varying modal content

 

회원가입

 

- 아이디, 비밀번호, 비밀번호 확인, 이메일, 휴대폰 번호 등)

 

참고 :

https://codingbroker.tistory.com/58

[HTML, CSS] opacity로 요소, 배경화면 투명하게(흐리게)하는 방법, 자식 요소에 같이 적용되는 문제

 

 

 

 

⊙ 인기여행지 - ex) 서울

1. 카테고리 설정(홈 > 트립가이드 > 서울) 

- Ajax 01_HelloAjax exam03 참고

2. 여행지, 명소, 호텔 검색란 → 부트스트랩으로 대체

3. 전체 사진 중 일부 삽입

  - 관리자모드 추가 

  - 사진 클릭 시 일부 미리보기 가능하도록

  - '모두 보기' 버튼을 추가하여 전체 사진을 볼 수 있는 창 구현

4. 해당 지역(서울) 인기 명소

  - 명소명, 평점, 리뷰수, 리뷰게시자, 내용 일부 첨부

5. 인기 호텔

  - 호텔명, 평점, 리뷰수 첨부

  - 관리자모드 추가

  - '서울 호텔 더보기' 버튼

6. 액티비티

  - 액티비티명, 평점, 리뷰수(리뷰가 없을 경우, "아직 리뷰가 없습니다 " 표시), 가격

  - 관리자모드 추가

  - '서울 액티비티 더보기' 버튼

7. 서울 여행 정보(*)

8. 날씨 API 삽입

9. 트립모먼트 → 메인페이지의 틀과 동일함. 하지만 데이터는 해당 지역에 관한 데이터가 들어있어야 함.

10. 다음 일정 추천(*)

11. 메인페이지와 동일한 Footer 

 

 

 

 

⊙ 인기여행지 - 서울 - ex) 명동

1. 상단의 컨테이너 부분은 이전 페이지와 동일

2. 카테고리 설정(홈 > 트립가이드 > 서울 > 명동), 검색란, 평점, 리뷰수, 좋아요수(좋아요 클릭 시 로그인창 뜨도록)

3. 영업시간, 추천 관광시간, 주소지 & 지도, 전화번호, 이미지(Bootstrap으로 대체)

4. 리뷰(한사람이 하나의 리뷰만 올릴 수 있도록 하려면?)

  - 전체 평점, 게시자 프로필 & 아이디, 개인평점, 내용(글자수 제한), 좋아요 수, 작성일

  - 한 페이지에 들어가는 리뷰 수 제한, 리뷰 수에 따른 전체 페이지 표시(Bootstrap - Pagination - Working with icons)

5. 추가 정보

6. 주변 호텔 정보(지도 첨부) 

  - 호텔명, 호텔성급, 호텔평점, 명소에서 떨어진 거리 표시

7. 트립모먼트 → 메인페이지의 틀과 동일함. 하지만 데이터는 해당 지역에 관한 데이터가 들어있어야 함.

8. 메인페이지와 동일한 Footer 

 

 

 

⊙ 서울 인기 호텔

1. 관리자모드 추가

2. 총 세 가지 페이지 필요

  - 메인 페이지에서 호텔을 눌렀을 때

  - 인기 여행지 페이지 들어갔을 때

  - 명소 페이지 들어갔을 때

 

 

 

 

⊙ 액티비티

 

 

 

 

 

⊙ 트립모먼트

1. 상단의 컨테이너 부분은 이전 페이지와 동일

2. 이미지(부트스트랩), 게시자 프로필, 게시자아이디, 제목, 내용, 작성일, 좋아요 수, 댓글 기능

3. 여러 장의 트립모먼트 게시글

4. 메인페이지와 동일한 Footer

 

---

 

▥ Bootstrap 필요한 기능 정리 

 

Accordion · Bootstrap v5.0 (getbootstrap.com)

Accordion

 

Main Page

1. 로그인 / 회원가입
- Buttons - Outline buttons

 

2. 검색 기능

- Navbar - Image and text

 

3. 호텔

- Card - Images

 

4. 액티비티

- Card - Images

 

5. 트립모먼트
- Card - Example

- Button 2개(더보기, 포스팅하러 가기)

 

 

Login / Write Page

- Modal - Modal components (*2) (Varying modal content 로 대체 가능)

- 유효성 검사 시 Validation - Server side 활용해도 좋음.

 

 

Hotel 

 

 

Trip Moment Page

- Carousel - With indicators
이미지 넘기기, 첨부된 이미지 개수 표시

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

기능 - 명소, 호텔명 정도?

관리자 모드 - 게시글 추가(호텔)

날씨 - api 

사용자 - 트립모먼트