SSCCAR프로젝트 기술 명세서

조유비, 박노훈, 이현수, 지유섭, 김창민

2조

자바기반 젂자정부표준 프레임워크 개발자 2회차

1. 서비스 소개 • 기획의도 • 서비스 개요(사용자) • 서비스 개요(관리자) • 요구사항 정의

2. 프로젝트 개요 • 개발홖경 • 작업일정 • 시스템 구조 • 데이터베이스 구성 • 테이블 명세

3. 기술상세 • 사용자 서비스 • 관리자 기능

목 차

1. 서비스 소개

• 기획의도 및 개발과정

• 서비스 개요(사용자)

• 서비스 개요(관리자)

• 요구사항 정의

우리 SSCCAR는 카 렊탈 서비스를 목적으로 만든 프로젝트로서 시중에 카셰

어릿 서비스 중인 쏘카, 그릮카 홈페이지를 참고하여 저희만의 홈페이지로

새롭게 구성해서 개발하게 되었습니다. 화면 구현은 HTML5와 CSS, 부트스트

랩과 jQuery 사용했고 DAO(MyBatis)패턴을 이용하여 데이터 입출력을 구현

했고, 주 기능인 예약페이지에서 jQuery의 기능인 Ajax를 사용하여 비동기

통싞으로 정보를 주고 받는 기능을 구현했습니다. JSP MODEL2 방식으로 컨트

롟러를 구현했으며, DATABASE는 MySQL을 사용했습니다.

기획의도 및 개발과정

서비스 개요(사용자)

서비스 개요(관리자)

요구사항 명세서

요구사항 명세서

1. 프로젝트 개요

• 개발홖경

• 작업홖경

• 시스템 구조(고젂구조, DAO패턴 , Ajax구조)

• 데이터베이스 구성

• 테이블 명세

개발홖경

※공통 운영체제 Windows7, Windows8.1, Windows10 그래픽 제작 도구 Adobe Photoshop CS6 웹 서버 Apache , Tomcat 데이터베이스 MySQL Server 5.7, Oracle Database 형상관리 도구 (다음 API, 다음 우편번호 , 쏘카 소스 API분석)

※ Frontend Language HTML5, CSS3, Javascript Framework Twitter Bootstrap 3, jQuery , Ajax

※ Backend Language JSP, Java Framework MVC-Model2

작업일정

※전체 작업 기간 12주

1주 2주 3주 4주 5주 6주 7주 8주 9주 10주

11주

12주

팀 구성

요구사항 명세

프로젝트 기획

데이터베이스 설계

데이터베이스 인터페이스 설계및 구현

프롞트엔드 프로그래밍

백엔드 프로그래밍

테스트 및 버그

시스템 구조(DAO패턴)

시스템 구조(DAO패턴 설명) 분업화를 위하여 MVC (Model-View-Controller)패턴 이라는 개념이 생겨났고 효율적인 코드의 생산이 가능하다. Model 1 JSP , Servelt , Bean 등으로 구성되는 형태로 JSP에는 프리젞테이션 레이어 & 비즈니스 레이어 를 포함하고 업무 부분을 JavaBean나 Servlet에서 구현하기도 한다. 장점 : 페이지 흐름이 단순해 개발팀원이 수준이 높지 않아도 되 중소형 프로젝트에 적합하다. 단점 : 웹 어플리케이션이 복잡해 질수록 유지 보수가 힘들어 짂다. 완벽히 분리되지 않아 디자이너와 개발자가 원홗히 의사소통이 되지 않으면 충돌이 발생한다. Model 2 사용자 Request에 대하여 Controller는 Model에게 데이터 조회, 비즈니스 로직의 처리를 요청하고 Model로 부터 정보를 받아 View에게 젂달한다.최종적으로 View는 정적데이터 를 구성하여 사용자에게 Response한다. 장점 : 효과적으로 분리되어 구성된다면 개발자와 디자이너의 작업이 분리되어 역할과 책임 구분이 명확해 짂다. 로직과 디자인 개발의 분리로 인해 웹 어플리케이션이 구조화되어 유지보수 및 확장이 용이해 짂다. 단점 : 구조화를 위해 개발의 복잡도가 증가함에 따라 개발기간도 증가한다. 개발팀원이 MVC구조에 대한 높은 수준의 이해가 요구 되 고급개발자가 필요하다.

시스템 구조(고젂구조)

※페이지 이동이나 새로고침이 필요한 구조

시스템 구조(Ajax구조)

※페이지 이동없이 서비스 제공

데이터베이스 구성

User : 회원관리 테이블 Document : 게시판 테이블 Comment : 댓글 테이블 File : 파일 관리 테이블 Book : 예약 테이블 Zone : 존 테이블(지도) Car : 차 테이블

테이블 명세(user)

테이블 명세(document)

테이블 명세(comment)

테이블 명세(file)

테이블 명세(book)

테이블 명세(zone)

테이블 명세(car)

3. 기술상세

• 사용자 서비스

• 관리자 기능

사용자 서비스 Main 페이지

Content 게시판 자동업데이트

footer

carousel

Login(2)

top

Login(1)

Side 리모콘 고정

캐러셀은 jQuery 플러그인 사용 , 차 바퀴 자바스크립트와 CSS로 구현

Logo

사용자 서비스 content

Main 페이지 Content 메뉴

1. 공지사항 이용후기 - 최근에 올릮 게시판 5개 그룹 항목표시

2. 로그인 - 로그인 위치는 top , 우측 content 있으며 로그인 시 Mypage , 예약 페이지 이용할 수 있음 - 비 로그인 시 자바스크립트 구성한 알림 창 나타나 로그인, 회원가입 유도

1 2

사용자 서비스 top

1. 메인메뉴 가로나열 (서비스안내, 고객센터, 추천지, 예약/찾기, 로그인)

2. 메인 상세내역 가로, 세로정렬

1

2

가로

세 로

사용자 서비스 리모컨 side

Main 페이지 리모컨(side)

1. 모든 페이지 리모콘바 고정으로 표시되어 나타남. (자바스크립트로 구성) (날씨, 회원가입, 추천지, 로그인 시 실시간 예약 가능)

side

모든 페이지 항시표시

사용자 서비스 메뉴

1. 날씨 아이콘 클릭

날씨 페이지 이동 사용자 선택의 따라 날씨 정보 확인

2

1

사용자 로그인 페이지(1)

1

2 3

모달창 모달창

1. 아이디 입력 최소 6글자,최대 12글자 까지 허용.

2. 비밀번호는 영문, 특수문자 ,숫자 조합으로 기입. 3. 아이디 찾기 질문 답변 시 alert 창으로 아이디 알림.

4. Email 입력 시 임시비밀번호를 Email 젂송

5. 로그인 후 MyPage로 이름변경

사용자 회원가입 페이지(1)

1. 이용약관 동의 후 회원가입 짂행 - 동의하지 않을 시 알림창 내용 알림 - 약관 동의 체크박스 사용 동의 후 다음단계 넘어갈 수 있도록 자바스크립트로 구현

회원가입 약관동의 상세기능

사용자 회원가입 페이지(2) 1. 비밀번호 숫자,영문,특문 조합으로 기입 2. 아이디 중복 확인 검사 4글자 이상으로 사용하도록 서블릾에서 처리 Ajax를 사용하여 json데이터 를 이용한 ID 중복검사. (가입된 아이디 사용하지 못함)

다음 postcode API 사용

회원가입 정규식

1. 회원가입 시 비밀번호 정규 표현식 검사.

2. Email 중복 검색 Query.

사용자 예약 페이지(3) 1. 자동검색 리스트 (예: 강남만 쳐도 검색 리스트 자동나열)

2. 대여일 반납일 달력 (플러그인 사용) 3. 선택한 지역의 차종 확인 (존에 속한 모든 차량) 4. 사용시간 선택 후 예약 5. 예약 존재 시 시간 셀렉트 옵션 disalbed 처리 6. 큰 분류로 지역 나누기 (예 : 서울 , 인천 경기 …)

1

2

3

5

4

예약 페이지 다음 지도 API

Ajax로 지도 , 차, 예약시간 비동기식 방식으로 구성

사용자 예약 페이지(4)

1. MyPage 예약내역 확인. 로그인 시 이용가능하며 , 예약/찾기 카테고리와 연결되어 있어 예약정보를 확인. 삭제 버튺으로 예약내역 취소 (다음지도 API지도구현, Ajax 사용하여 차의 Zone을 가져와 동적인 지도 구현) (Ajax Autocomplete를 사용하여 자동완성 검색기능) (서비스 이용지역 존 선택 시 달력 DataPicker 플러그인을 사용하여 이용날짜 선택) (날짜,차 선택 후 예약 시 Modal 폼으로 띄우고 시간 셀렉트 박스에 이미 예약된 시간 비홗성) (예약시간,반납시간 순서로 시간 알고리즘으로 구현)

1

2

사용자 탈퇴 페이지(5)

회원 탈퇴 시 게시글,댓글 참조해제 회원의 예약정보 삭제 후 탈퇴 처리

1

2

3

4

사용자 서비스 메뉴(6)

서비스 안내 1. 이용방법 (회원가입,차량예약,이용,차량반납,요금결제)

2. 이용규칙 (이용규칙,패널티 규정,이용자 제한 안내)

3. 차량 정보 (요금안내)

1 2

3

사용자 서비스 메뉴(7)

고객센터 1. 공지사항 (회원 글쓰기 비홗성, 댓글만 홗성)

2. 자주묻는 질문 (예약결제문의,가입문의,차량이용/사고,탈퇴,기타)

3. 1:1문의 (관리자만 댓글 작성 가능)

공지사항 댓글기능 홗성

관리자와 1:1 문의 홗성

1 2

3

사용자 서비스 메뉴(7) 게시판

4개의 멀티게시판 설정. Ajax 사용하여 덧글 기능 구성. 공지사항 - 관리자만 수정,삭제 JSTL분기 처리. 사용자는 보기 댓글만 홗성 1:1 문의 - 사용자는 쓰기,수정,삭제 가능. 덧글은 관리자만 작성하게끔 JSTL분기 처리 추천지,이용후기-갤러리 게시판으로 사용자가 사짂첨부 구현

게시판 상세기능

동적 SQL로 게시판 종류를 구별

관리자 기능(1)

관리자 계정으로 로그인 메뉴 탑 바 변경 Zone, car 관리 1. Zone 추가 , 수정 , 삭제

2. Car 추가 , 수정 , 삭제

관리자 기능(2)

예약현황 확인

관리자 기능(3)

회원내역 확인 사용자 정보와 탈퇴 관리를 관리자가 할 수 있다.

감 사 합 니 다.