err0rthemax / gorail

2020-2학기 고급웹프로그래밍 / 철도 여행 정보제공 사이트 / 포크

2020-2학기 고급웹프로그래밍 최종프로젝트 8

2020-2학기 고급웹프로그래밍 / 철도 여행 정보제공 사이트 / 성적 A+

프로젝트 주제 : GoRail (철도 여행 정보제공 사이트)

개발환경

• 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 으로 접속한다.
  

Project 진행 내용

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