2020-2학기 고급웹프로그래밍 / 철도 여행 정보제공 사이트 / 성적 A+
- ide : visual studio code
- os : macOS, window10
- server : nodejs
- database : mysql
- front : html, css, javascript
- 라이브러리 : jquery, bootstrap
-
설치 및 실행방법 :
1. 구글드라이브, 혹은 깃 허브에서 소스코드를 내려 받는다. 2. Visual Studio Code 터미널에서 /trainPortal-master 디렉토리로 경로를 이동한다. 3. node test.js 명령어를 입력한다. 4. 웹사이트 주소 localhost:3000 으로 접속한다.
- 공통부분
- 세션 체크
- 모든 페이지에 접속하기 전 ( 회원가입, 로그인 페이지 제외) 로그인 세션 값을 체크 함.
- 로그인 되어 있을 시 요청에 응답
- 로그인 되어 있지 않을 시 로그인 페이지로 이동
- 메뉴바
- 모든 페이지의 윗 부분에 메뉴바를 추가하여 사용자의 편의 제공.
- 메뉴바는 동적으로 변화하고 모바일 환경에도 적합하게 설계
- 검색기능
- “부산”, “울산”, “광주” 등과 같이 미리 등록된 여행지의 경우 해당 지역에 맞는. 관광정보를 제공합니다.
- 세션 체크
- 로그인 및 회원가입
- 로그인 및 로그아웃
- 입력된 id 와 password 를 DB에 저장되어있는 정보와 일치 확인.
- 일치 시 로그인 후 다음 화면으로 이동.
- 로그아웃 시 로그인 초기화면으로 이동.
- 회원가입
- 계정 없을 시 회원가입을 통하여 계정 생성.(계정 중복 또는 비밀번호 중복 확인 후 불 일치 경우 생성 불가.)
- 입력된 정보를 DB Query(INSERT)을 통해 정보를 저장.
- 로그인 및 로그아웃
- 메인.
- “GoRail” 홈페이지에 대한 소개를 동적으로 구현.
- 데이터를 슬라이드 형식으로 오른쪽으로 동적으로 홈페이지 소개.
- 각 지역별로 여행코스 및 지역 관광상품 소개.
- 지역별로 코스를 Class 로 나눈 다음, 전국코스, 경북코스, 전라도코스, 식도락코 스, 여름바다코스 그리고 힐링코스 와 같이 다양한 코스로 소개 구현.
- 각 코스 Class에는 지역별 관광 컨텐츠 소개 및 해당 코스의 자세한 정보를 나타 내주는 “ 더 알아보기” 버튼 구현.
- “GoRail” 홈페이지에 대한 소개를 동적으로 구현.
- 코스검색.
- 자세한 코스 선택 및 지역 선택으로 자세한 정보를 사용자들에게 선택적 제공 구현 - 코스 선택은 Select 를 이용하여 전국, 경상북도, 전라도, 식도락 여름바다, 힐링 중 선택 기능 구현.
- 더 자세한 지역 선택을 위와 같이 Select를 이용하여 코스별 선택 가능 지역을 보여주어 사용자에게 선택할 수 있도록 구현.
- 사용자가 선택한 코스 및 지역에 대한 정보 제공.
- 사용자가 선택한 코스 및 지역에 대한 자세한 정보를 팝업 기능을 이용하여 제공. - 관광지에 관한 정보를, 오픈 API를 이용하여 Ajax를 통해 사용자가 선택한 데이 터에 맞는 정보를 제공..
- 기차역에 관한 정보를, 오픈 API를 이용하여 해당 지역 기차역을 ID를 받아와 그에 맞는 정보를 제공.
- 선택된 역과 역의 위도,경로를 매핑하여 해당 정보에 해당하는 구글맵 정보 제공.
- 자세한 코스 선택 및 지역 선택으로 자세한 정보를 사용자들에게 선택적 제공 구현 - 코스 선택은 Select 를 이용하여 전국, 경상북도, 전라도, 식도락 여름바다, 힐링 중 선택 기능 구현.
- 고객상담
- Node.js MySQL 데이터 베이스 모듈 이용하여 글 저장.
- 데이터베이스 테이블 구성.
- 작성자의 정보를 저장하는 ‘author’ 테이블
- 글의 제목과 내용을 저장하는 ‘topic’ 테이블
- 고객상담 메인 페이지.
- 변수를 통하여 DB의 정보를 불러와 메인 페이지에서는 이때까지 접수된 목록을 화면 왼쪽에 표시.
- 목록에 있는 글 클릭시 해당 글의 내용을 DB에서 불러와 화면에 제공. - 가벼운 인사말과 글을 남기는 방법을 소개 작성.
- 코레일 관광 영상을 iframe을 이용하여 Youtube 영상을 제공.
- 실시간채팅상담 기능을 오픈 API를 이용하여 추가.
- CSS를 이용하여 전체적인 게시판 형식 구성.
- 글 작성 버튼을 구현 및 href을 이용하여 글 작성페이지로 이동 구현.
- 글 작성 페이지
- 메인 페이지의 방법처럼 기존의 전수된 목록은 화면 왼쪽에 표시. 자유롭게 다른 글 로 이동 가능.
- 제목과 본문을 사용자로부터 Input 구현.
- 작성된 글의 저장을 위해 “제출” button 구현.
- 글 작성이 제출이 되면 DB Query(INSERT) 를 불러와 해당 내용을 DB에 저장.
- 글 수정 페이지
- 글 목록에 수정하고 싶은 글을 선택하면 수정을 위한 “수정하기” button 구현. - “수정” button 클릭시 해당 글의 Input을 다시 불러와 수정기능 구현. - 글 수정이 제출이 되면 DB Query(Update)를 불러와 해당 내용을 DB에 수정.
- 글 삭제 페이지
- 글 목록에 삭제하고 싶은 글을 선택하면 삭제를 위한 “삭제하기” button 구현. - “삭제” button 클릭시 DB Query( DELETE)를 불러와 해당 글 내용을 DB에서 삭제.