petcity 프로젝트 기술 명세서 - greenart.co.kr · • spring을 이용한...

PetCity 프로젝트 기술 명세서 Date : 2016.12.26

1조

김영회, 서아람, 손성호, 전기현, 한병권

목차 Petcity

1. 서비스 소개 • 기획 의도 • 팀원 소개 • 요구사항 정의

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

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

4. 부가기능 5. 관리자 페이지

1. 서비스 소개

4

기획 의도

• 펫시티는 분양 시 일어날 수 있는 거래사기와 반려 동물의 무분별한 공장 양성화를 막기 위해 개인 분양 시스템을 갖춰 보다 안전하고, 안심할 수 있는 분양이 이뤄질 수 있도록 기획하게 되었습니다. • 분양시스템 외에 결혼/교배, 펫도우미, 정보 게시판을 더하여 펫과 관련된 다양한 서비스를 제공합니다.

5

팀원 소개

김영회 서아람 손성호

전기현 한병권

• 기획 및 총관리 • 분양시스템 • mypage • Ajax

• 멀티게시판 • 중고장터 • List 처리 • 검색

• 찜목록 • 결혼/교배 • 회원관리

• 멀티게시판 • 펫도우미 • 댓글

• 멀티게시판 • 정보 •Index 페이지

공통사항

• 프론트엔드 개발 HTML, CSS, Javascript 기반의 웹페이지 • MySQL기반의 데이터베이스 • JSP기반의 웹사이트 제작 • MVC model2 패턴구현 • Spring을 이용한 관리자페이지 구현

6

서비스 개요 – 사용자

7

서비스 개요 – 관리자

8

요구사항 정의

2. 프로젝트 개요

10

개발환경

공통

운영체제 Windows 10, Mac OS

소스코드 작성 도구 Eclipse EE, Sublime Text 3

그래픽 제작 도구 Adobe Photoshop CC 2015

웹 서버 Apache tomcat 8.0

데이터베이스 MySQL Server

형상관리 도구 GitHub

Frontend

Language HTML5, CSS3, JavaScript

Framework Twitter Bootstrap 3, jQuery

Backend

Language JAVA, JSP

Framework MVC2, MyBatis

11

작업일정

12

시스템 구조

1. 사용자가 특정 내용을 웹 서버에 요청 2. 웹 서버가 URL이 가리키는 웹 프로그램을 실행

Petcity.jsp

server

3. 웹 프로그램은 DATABASE에 내용을 저장하거나 저장된 내용 을 조회

4. 웹 서버는 JSP의 실행 결과를 브라우저에 전달

사용자 입장에서는 페이지 이동이 이루어 진다.

13

DataBase 구성

14

테이블 명세 (1)

15


16


17


18


19


3. 기술 상세 -서비스 페이지

21

3. 기술상세 - 서비스

분양하기 (1)

NO 설명

<분양 시작하기>

01

<판매자> -판매자가 양식에 맞게 분양글을 작성하고 등록

02 <구매자> -구매자가 분양글에서 분양하기 버튼을 클릭해서 분양상태 시작

<구매자>

<판매자> 01

02

NO 설명

<구매자 분양 입금>

01

<구매자> -분양정보 확인 후 입금하기 클릭

02 <구매자> -마일리지가 부족할 경우 충전하기 클릭

03 <구매자> -충전할 마일리지 금액을 선택하고 입금완료 클릭

04 <구매자> -입금 버튼을 클릭하여 인수 확인 페이지로 이동

<구매자>

22


분양하기 (2)

01

03

02

04

<구매자> <판매자>

23


분양하기 (3) 01

02

NO 설명

<인수인계 최종확인>

01

<판매자> -입금을 한 상태이므로, 구매자의 정보를 볼 수 있음.

02 <구매자> -입금을 한 상태이므로, 분양자의 정보를 볼 수 있음. 판매자는 펫을 전달 한 후 인계확인, 구매자는 펫을 전달 받은 후 인수확인을 하여 최종 거래가 완료됨

03 04

24


분양하기 (4)

NO 설명

<마이페이지 분양 히스토리> 내가 작성한 분양글 / 신청한 분양글로 분류하여 현재 진행단계인 분양글 및 거래완료된 분양글의 이력을 조회 가능

25

NO 설명

01 <거래가 시작된 분양글은 조회 불가능> -state 컬럼을 통한 조건 지정 및 JSTL 분기 처리를 통해 거래진행이 시작된 분양글은 조회를 차단

02

분양하기 주요 소스


01

26

분양하기 주요 소스


02 NO 설명

02 <마이페이지를 통해 분양글의 단계별로 접속 및 거래진행 가능> -거래 단계별로 state 컬럼을 변경해서 구분하고, 마이페이지에서 분양 상태를 명시해줌으로써 사용자가 거래의 현재 진행 단계를 쉽게 파악할 수 있고, 원활한 거래를 지속할 수 있음.

03 <종료된 분양글> -거래가 종료된 글을 클릭하면, 종료된 글로 알럿이 발생함.

03

분양 시스템

28


NO 설명

01 <펫도우미 글 작성> -펫도우미가 글을 작성하고 세부 서비스 내용을 선택

02 <예약가능일 선택> -예약 받을 날짜를 Date Picker 플러그인을 이용하여 선택

03 <Date Picker플러그인의 주요 코드> - 시작일을 선택하고 닫힐 때 종료일의 선택할 수 있는 최소 날짜를 선택한 시작일로 지정

01

예약하기 (1) 02

03

29

NO 설명

01 <펫도우미 등록 완료> -글 작성을 완료하면 펫도우미 등록이 완료되고 서비스 내용이 표시

02 <검색> -예약하고 싶은 서비스를 검색

03 <예약일 선택> -예약하기 버튼을 누르고 예약날짜를 선택하면 예약완료 메시지와 함께 예약페이지로 이동

예약하기 (2)

01

02

03


30


NO 설명

01 <신청한 예약 목록 확인> -마이페이지의 예약 확인에서 예약 신청일을 확인할 수 있고 펫도우미의 정보를 확인할 수 있다.

02 <예약 취소> -예약 취소버튼을 누르면 예약취소 알림창이 나오고 예약이 취소 됨.

예약하기 (3)

01

02

31

NO 설명

01 <예약 중복 날짜는 선택 불가능> -동일한 펫도우미글의 예약이 되어있는 날짜에는 선택 불가능하도록 disable처리

02 <데이터베이스의 정보를 받는 처리> -데이터베이스에 저장되어있는 예약날짜를 넘겨받는 소스

03 <예약일을 disable할 수 있도록 가공> -전달받은 예약날짜의 크기만큼 반복문을 실행시켜 disable시킬 변수에 저장

예약하기 주요 소스

01

02

03


예약 시스템

33


NO 설명

01 <지역 정보 펫 정보> -지역을 설정하면 설정한 지역의 업체 정보를 출력

02 <지역의 업체 정보를 선택하는 소스> - Ajax기법을 이용하여 페이지이동 없이 정보를 선택하여 전달

03 <선택한 업체를 저장해서 검색> - 선택한 정보를 tt 변수에 저장하여 Daum Open API에서 제공하는 keywordSearch함수의 파라미터로 전달

정보검색(Daum Open API)

01

02

03

지역검색 시스템

35


NO 설명

01 <찜 하기 버튼> -찜 하기 버튼을 누르면 마이페이지의 찜 목록으로 이동 -분양, 결혼/교배, 펫도우미 게시판에서 원하는 글에 찜선택 가능

02 <마이페이지의 찜 목록> - 자신이 찜 한 목록과 정보를 확인할 수 있는 페이지 - 제목을 누르면 해당 글로 이동

03 <찜 목록 삭제> - 원하지 않는 찜 목록을 삭제할 수 있다

01

찜하기

02

03

36


NO 설명

01 <다른 테이블의 정보를 불러오기> -다른 테이블의 정보를 불러오기 위하여 SQL의 Join 기능을 이용

02 <예약가능일 선택> -카테고리 분류가 parcels일 때는 p로 시작하는 모든 카테고리를 검색 -카테고리 분류가 wedding 일 때는 w로 시작하는 모든 카테고리를 검색

01

찜하기 주요 소스

02

부가기능

38

4. 부가기능- 게시판 및 댓글 프로필 이미지

NO 설명

01 <Read 페이지의 프로필 이미지> -가입 시 등록한 프로필 이미지가 게시판에 글을 작성할 경우, 프로필 이미지가 보여짐

02 <댓글 프로필 이미지> - 게시판과 더불어 댓글 작성시에도 자신의 프로필 이미지가 같이 보여짐

프로필 이미지

01

02

39

4. 부가기능- 아이디/비밀번호 찾기

NO 설명

01 <아이디 찾기> -가입시 입력한 이름과 이메일 주소를 입력하면, 아이디를 이메일로 보내주는 기능

02 <비밀번호 재설정> - 가입시 입력한 이메일 주소를 입력할 경우, 임시 비밀번호를 이메일로 보내주는 기능

아이디/비밀번호 찾기 01

02

40

4. 부가기능- 게시판 내 캐러셀 이미지

NO 설명

01 <게시판 내 캐러셀 이미지> -분양게시판, 결혼/교배 게시판에서는 이미지 등록 시 캐러셀 이미지로 표현

캐러셀 이미지

01

41

4. 부가기능- 특정일 자동완성

NO 설명

01 <날짜 자동 완성> -펫의 가임기 날짜를 자동완성 하는 기능을 만들기 위해, DatePicker와 자바스크립트를 활용하여 구현

DatePicker 활용

01

02

관리자 페이지(Spring)

43

5. 관리자 페이지 – 인덱스

NO 설명

01 <인덱스 페이지> - 공지사항, 게시판관리, 분양관리, 회원관리로 공지사항 글 작성 및 수정 기능, 게시물 삭제 및 회원 탈퇴 기능이 구현됨

관리자 인덱스

44

5. 관리자 페이지 – 의존성주입(DI)

NO 설명

01 <의존성주입> -객체간의 의존성이 존재하므로, 제어반전에 의하여 특정 객체에 필요한 다른 객체를 프레임워크가 자동으로 연결시켜 주도록 구현함.

의존성 주입

45

5. 관리자 페이지 – 공지사항

NO 설명

01 <공지사항 연동> - 관리자 페이지에서 공지사항, FAQ, QNA를 작성하면, 서비스 Index 페이지의 공지사항, FAQ, QNA가 작성 및 수정이 된다.

공지사항 연동

46

5. 관리자 페이지 – 게시판 및 회원관리

NO 설명

01 <게시판 및 회원관리> - 관리자 페이지에서는 각각의 게시판의 글을 삭제 할 수 있으며, 회원 또한 삭제 할 수 있음.

게시판 및 회원관리

감사합니다.

petcity 프로젝트 기술 명세서 - greenart.co.kr · • spring을 이용한...

Documents