A Project

IntoTheWild

관리자

view : 1108

교육기간 : 2014-12-31 ~ 2015-01-27 ( 월,화,수,목,금 )
URL : 내부 서버용
캠핑용품 대여 및 커뮤니티를 통한 정보 공유

 

프로젝트 개요

프로젝트

IntoTheWild

관련분야

캠핑용품 대여 및 커뮤니티를 통한 정보 공유

개발기간

2014.12.31.~2014.1.27

개발환경

운영체제

windows 7, windows 8

DBMS

Oracle 11g

개발언어

Html5/CSS3, JavaScript/Ajax, Servlet/JSP

개발도구

STS 3.6.4, MAVEN

Framework

Sprin 3.0, MyBatis, Tiles, Jquery

개요

캠핑정보 사이트(캠핑박사, 캠핑온 등)의 시스템을 차용하여 기본적인 회원/상품관리 기능을 구현

캠핑용품을 판매/대여하는 것뿐만 아니라 커뮤니티로써의 캠핑장소개(구글맵)투표이벤트 기능을 사용자에게 제공

기본적으로 단일/패키지 상품을 구매/대여를 할 수 있으나 사용자가 직접 선택하여 구성하는 ‘나만의 패키지’기능을 구현

데이터베이스 다이어그램

  

세부기능 요약 및 설명

상세화면

기능설명

 

  

패키지 리스트

<<사용되는 Table>>

 

1) 커플SET,FAMILYSET ,SELF STYLE 등 캠핑 인원/컨셉 별로 패키지 상품을 선택할 수 있음

Jquery Grid Layout PlugIn을 적용하여 자연스러운 액자식 상품 목록을 볼 수 있음 

 

 

패키지 상세리스트

<<사용되는 Table>>

 

1) 기본적으로 하나의 패키지는 텐트, 타프, 매트, 이불, 의자로 구성이 된다. 패키지 상세리스트는 어떠한 상품으로 패키지가 구성되어 있는지 확인할 수 없음

2) 배송안내, 교환/환불규정을 확인할 수 있으며 상품 후기 또한 확인 가능함 

  

 

패키지 결제

<<사용되는 Table>>

 

1) 대여기간별, 수량별로 대여 가격에 차등을 두었으며, 손쉽게 상품결제를 할 수 있는 페이지 

  

  

패키지 주문내역

<<사용되는 Table>>

 

1) 패키지 상품을 결제한 뒤 주문내역을 확인할 수 있는 페이지

2) 상품의 준비여부에 따라 배송준비중, 배송중,배송완료, 반납완료의 총 4단계로 상태 변경이 가능함 .

  

 

  

투표 이벤트

<<사용되는 Table>>

 

1) IntoTheWild는 단순히 캠핑용품을 대여/구매하는 사이트가 아니라 기타 정보 및 컨텐츠도 제공하는 커뮤니티로써의 컨셉 또한 가지고 있음

2) 투표를 통해 새로운 정보(여행지, 캠핑지식)를 사용자에게 제공

  

 

 

투표 이벤트 등록/관리

<<사용되는 Table>>

 

1) 투표이벤트를 등록하고 관리할 수 있는 페이지

  

 

 

투표결과 확인/댓글달기

<<사용되는 Table>>

 

1) 투표현황을 확인할 수 있으며, 댓글을 달면서 IntoTheWild 이용자들 간 의견을 공유할 수 있음

2) 댓글은 시간순, 의견별로 확인이 가능

 

패키지 주문/배송관리

<<사용되는 Table>>

 

1) 전체 회원의 주문내역을 확인/관리할 수 있는 페이지

2) 배송상태는 배송준비중, 배송중, 배송완료, 반납완료 총 4가지 상태로 존재람

3) 만약 고객이 주문취소를 하거나 관리자가 주문취소를 할 경우, 그리고 배송상태를 반납완료가 될 경우 해당 패키지의 총재고가 반환되어 대여수량만큼 더해지게 됨

 

  

패키지 상세리스트

<<사용되는 Table>>

 

1) 관리자 로그인 페이지

2) 로그인을 함으로써 관리자 기능을 이용할 수 있는 메인페이지로 넘어가도록 구현하였으며, 일반 사용자가 로그인 시도를 하는 경우 접속이 제한되도록 구현 

 

 

공지사항 입력/관리

<<사용되는 Table>>

 

1) 일반적인 게시판의 형태로써 관리자가 공지사항을 등록/관리할 수 있음

2) 관리자만 삭제할 수 있는 기능을 추가함으로써 일반 사용자의 공지글 수정을 제외함

  

 

 

 중고장터 입력/관리

<<사용되는 Table>>

 

1) 중고장터(알뜰장터)에서는 사용자 간 중고 캠핑용품을 매매할 수 있는 컨셉의 게시판임

2) 팝니다/삽니다/교환 세가지의 말머리가 있으며 말머리별로 게시글을 정렬할 수 있음

3) 아이디. 제목. 내용으로 게시글을 검색할 수 있음  

 

 

  

상품 검색기능

<<사용되는 Table>>

 

1) 단일 상품을 대상으로 전체,구매,대여 상품을 검색할 수 있는 기능

  2)상품의 단계는 대분류,중분류,소분류의단계 카테고리로 구분할 수 있는데 상품 검색은 소분류의 상세보기 검색으로 볼 수 있음 

 

  

캠핑장 소개

<<사용되는 Table>>

 

1) 이미 등록된 모든 캠핑장 정보를 불러오는 페이지로써 구글맵을 적용하여 지도상에서 관리자에 의해 등록된 캠핑장의 위치 또한 확인할 수 있음 

 

  

캠핑장 정보 입력

<<사용되는 Table>>

 

1) 캠핑장 정보를 입력하여 사용자에게 여러 지역의 캠핑장 정보를 제공함과 동시에 상용 후에는 각 지역의 캠핑장과 연계하여 패키지 상품을 제공할 예정인 페이지

2) 네이버 스마트 에디터 를 적용하여 폰트편집이 가능하도록 구현 

 

 

 

 

장바구니

<<사용되는 Table>>

 

1) 장바구니는 검색 중 마음에 드는 상품을 뽑아 담아두는 기능으로써 상품 여러 개를 한번에 결제할 수 있고 취소할 수도 있음

  

  

   

단일 상품(구매/대여) 상세보기

<<사용되는 Table>>

 

1) 장바구니에 담거나 구매하기 전에 제품의 상세정보를 보여주는 페이지

 

 

캠핑장 상세보기

<<사용되는 Table>>

 

1) 캠핑장 리스트에서 캠핑장의 상세정보를 볼 수 있는 페이지로서 구글맵을 적용하여 지도상의 위치와 캠핑장 정보를 얻을 수 있는 페이지 

 

 

Q&A 게시판

<<사용되는 Table>>

 

1) 사용자가 궁금한 부분을 질문하고 관리자가 답변해주는 답변형 게시판으로써 게시판 목록과 해당목록에 대한 상세보기 기능이 가능한 페이지

  2) 네이버 스마트 에디터를 적용하여 폰트편집이 가능하 도록 구현 

 

 

 

Q&A 게시판 댓글

<<사용되는 Table>>

 

1) 관리자가 남기는 댓글은 페이지의 이동없이 댓글의 수정/저장을 할 수 있음

2) 동적으로 뷰페이지에 div를 지웠다가 다시 그리는 방식으로 구현한 댓글 파트임 

 

 

단일 상품 결제

<<사용되는 Table>>

 

1) 단일 상품 구매 페이지

2) 주문결제를 할 때 insert되는 테이블이 여러 개이기 때문에 spring의 transaction annotation을 적용하여 문제가 있을 시에 결제가 되지 않도록 처리를 하였음 

 

 

단일 상품 결제(적립금 사용)

<<사용되는 Table>>

 

1) 단일 상품 결제 시에만 적용되는 옵션으로써 다이얼로그에 적립포인트를 그려주고, 사용자가 원하는 만큼의 포인트만 쓸 수 있도록 함

2) 만약 잔여 포인트보다 높은 숫자를 입력하거나 0을 입력할 경우 총 결제 금액에 영향을 미치지 않음 

 

단일 상품 결제(적립금 사용)

<<사용되는 Table>>

 

1) 단일 상품 결제 시에만 적용되는 옵션으로써 다이얼로그에 적립포인트를 그려주고, 사용자가 원하는 만큼의 포인트만 쓸 수 있도록 함

2) 만약 잔여 포인트보다 높은 숫자를 입력하거나 0을 입력할 경우 총 결제 금액에 영향을 미치지 않음 

 

 

단일 상품 입력

<<사용되는 Table>>

 

1)단일 상품은 총 3단계 카테고리로 구별되어 있으며 하나의 뷰페이지에서 모두 입력할 수 있도록 구현

2) 이미지와 재고까지 입력할 수 있도록 구현

  

 

<!--[endif]--> 

 

 

 

 

 

단일 상품 카테고리별 리스트

<<사용되는 Table>>

 

1) 카테고리 별로 대분류>중분류>소분류 순으로 상품 현황을 확인할 수 있으며, 페이징처리를 통해 대량의 상품을 관리하기 용이하도록 구현

2) 상품명으로 검색이 가능하도록 구현 

 

 

 

 

 

단일 상품 수정 페이지

<<사용되는 Table>>

 

1) 단일 상품의 상세정보를 확인하고 수정할 수 있는 페이지

2) 상품 타입(대여/구매/나만의패키지)과 재고 수량, 상품 이미지를 수정가능함 

 

 

상품후기 게시판

<<사용되는 Table>>

 

1) 일반적인 상품 후기를 남기는 게시판기능, 네이버 스마트 에디터를 적용하여 폰트편집이 가능하도록 구현 

 

 

상품후기 게시판 댓글

<<사용되는 Table>>

 

1) 댓글은 ajax를 적용하여 실시간 답글확인이 가능한 ReplyToComment 기능을 구현하였고, 댓글의 댓글까지 적용하여 구현 

 

 

회원가입

<<사용되는 Table>>

 

1) 회원가입 페이지는 유효성 체크를 하여 필수정보를 입력하지 않으면 회원가입이 되지 않음

2) 달력과 주소 플러그인을 적용하여 실제 웹사이트의 회원가입 페이지와 유사하게 구현

  

 

 

 

 

 

 

로그인/비밀번호 찾기/회원탈퇴

<<사용되는 Table>>

 

1) 로그인을 하여 사용자가 구매/대여/커뮤니티 기능을 사용할 수 있도록 구현

2) 비밀번호 찾기 기능으로 분실한 비밀번호를 찾아주는 기능을 구현

3) 회원에 등급을 지정하여 탈퇴한 회원은 더이상 서비스를 이용할 수 없는 등급으로 변경하도록 구현 

 

마이페이지

<<사용되는 Table>>

 

1) 회원이 자신의 정보를 수정할 수 있는 페이지

2) 적립금과 쿠폰, 주문내역을 조회할 수 있음

  

나만의 패키지

<<사용되는 Table>>

 

1) 나만의 패키지는 기존의 패키지 상품을 구매하지 않고 사용자가 원하는 상품을 직접 선택하여 우측 분홍색 div에 드래그해서 넣는 방식의 페이지임

2) 대여일을 선택하여 일반 단일 상품처럼 결제가 가능하도록 구현

  

  

쿠폰 등록/관리

<<사용되는 Table>>

 

1) 쿠폰은 기본적으로 상품 구매 시 쿠폰의 금액만큼 총 비용에서 차감해주는 기능임

2) 관리자가 사용자에게 일괄적으로 발급이 가능하며, spring의 scheduler 기능을 이용하여 생일과 결혼기념일에 쿠폰을 제공하는 기능을 구현

  

단일 상품 주문/배송관리

<<사용되는 Table>>

 

1) 전체 회원의 주문내역을 확인/관리할 수 있는 페이지

2) 배송상태는 배송준비중, 배송중, 배송완료, 반납완료 총 4가지 상태로 존재함

3) 만약 고객이 주문취소를 하거나 관리자가 주문취소를 할 경우, 그리고 배송상태를 반납완료가 될 경우 해당 상품의 총재고가 반환되어 대여수량만큼 더해지게 됨

 

 

 

 

 

단일 상품 주문/배송관리

<<사용되는 Table>>

 

1) 단일/패키지 별 매출을 월단위로 확인할 수 있는 페이지

2) 플러그인을 적용하여 여러 형태의 그래프로 확인이 가능하며 매출 상세정보를 엑셀파일로 다운로드 받을 수 있음

  

단일 상품 주문/배송관리

<<사용되는 Table>>

 

1) 회원등급을 관리할 수 있으며, 여러 종류의 쿠폰을 발급할 수 있는 페이지

2) 전체 회원의 정보를 확인할 수 있음

  

단일 상품 주문/배송관리

<<사용되는 Table>>

 

1) 최근 본 상품을 화면 우측 퀵메뉴에 담아둠으로써 언제든지 확인이 가능하도록 구현

2) 퀵메뉴는 사용자가 마우스 휠을 움직일 때마다 따라다니며 퀵메뉴 좌측의 버튼을 클릭하면 숨기는 기능도 가능함

 
   
 

 

프로젝트 개요

프로젝트

NFCafe

관련분야

안드로이드, 웹

개발기간

2015.01.05~2015.01.27

개발환경

운영체제

MS Windows7

DBMS

MySql 5.6

개발언어

JAVA, HTML, SQL, JavaScript

개발도구 및 S/W

Eclipse(Ver. Luna), Android SDK, Apache Tomcat Server 7.0

활용기술

Android, JSP, BootStrap, NFC, GCM API

개요

1. 안드로이드 NFC기술을 이용한 앱 주문

2. 앱으로부터 주문내역을 웹으로 전송

3. JSP에서 주문내역 및 매출 관리

4. 완료된 주문 푸쉬 알림 전송

데이터베이스 다이어그램

  

세부기능 요약 및 설명

상세화면

기능설명

 

1. 안드로이드 메인 화면

2. NFC 태깅을 하지 않고 앱을 실행하면 주문을 할 수 없다는 경고 메시지가 뜬다.

4. NFC를 태깅하면 사용할 어플리케이션 선택 메뉴에 NFCafe앱이 뜬다.

 

 

1. 커피, 디저트 등의 메뉴 리스트와 장바구니, 주문번호 확인 페이지를 탭 호스트로 한 화면에 담아 보여준다.

2. 커피 옵션 선택

3. 디저트는 커피와 다르게 수량만 선택이 가능하다.

4. ADD 버튼을 누르면 자동으로 Cart(장바구니) 페이지에 주문정보가 추가 된다.

5. 주문정보 : 주문번호, 상품코드, 옵션코드,

수량, 가격, GCM Register Id 

 

 

1. 지금까지 추가한 주문 목록을 확인할 수 있다.

2. Reset 버튼으로 주문 목록을 초기화 할 수 있다.

3. Order 버튼으로 주문을 완료.

4. NFC 태깅으로 주문번호를 받아오지 않은 상태에서 앱을 실행한 경우, Order 버튼을 눌러도 주문정보가 웹으로 넘어가지 않는다.

5. 주문 번호를 할당받은 경우, 주문 정보가 앱에서 웹으로 넘어가게 된다.

6. 카운터에서 주문한 상품을 수령할 때 식별할 수 있는 주문번호를 화면에 표시한다.

7. 주문 목록이 앱에서 웹으로 넘어가고 난 후, 기존의 주문목록은 초기화 된다.

 

1. 주문 접수가 완료되면 해당 기기에 GCM API를 사용한 알림 메시지를 보낸다.

2. 메시지를 터치하면 주문완료 페이지로 이동한다.

 

 

1. NFCafe 웹페이지 메인화면

관리자 및 직원들이 로그인하여 주문 조회 및 매출조회 기능을 사용할 수 있다.

 

  

1. 권한에 따라 다른 메뉴 구성을 보여준다.

2. 관리자 및 직원 외의 권한은 카페 메뉴와 카페소식 게시판 이용만 가능하다.

3. 직원으로 접속시 카페 메뉴, 주문을 확인할 수 있는 주문리스트메뉴, 카페 게시판 이용이 가능하다.

4. 관리자로 접속시 매출조회 등 모든 메뉴를 이용할 수 있으며 계정관리 기능을 이용할 수 있다. 

 

 

1. NFCafe의 메뉴소개 페이지

 

1. 계정이 등록된 직원과 관리자의 ID와 Password를 찾기 위한 페이지

2. 등록된 직원의 이름과 이메일 주소로 아이디와 비밀번호 일치여부 조회 후 확인이 가능.

3. 편의상 확인항목을 이름과 이메일로 한정

 

 

1. 관리자는 직원들과 달리 보안을 고려하여 웹페이지에서 계정이 확인이 되지 않고 등록된 이메일로 아이디와 패스워드가 전송된다.

2. 네이버 smtp를 활용하여 네이버로 등록된 이메일로 메일 전송이 가능 

 

1. 직원들의 계정을 등록할 수 있는 페이지

2. 관리자로 접속하여 계정관리 버튼을 클릭하면 계정생성 탭에서 계정 생성이 가능하다.

  

 

  

1. 관리자 및 직원계정의 패스워드를 변경할 수 있는 페이지

2. 관리자로 접속하여 계정관리 버튼을 클릭하면 비밀번호 변경 탭에서 비밀번호 변경이 가능하다.

3. 등록된 계정을 삭제할 수 있는 페이지. 관리자 계정은 삭제하지 못하도록 설정하였고 등록되어 있는 직원들의 계정만 삭제가 가능하다.

4. 관리자로 접속하여 계정관리 버튼을 클릭하면 계정삭제 탭에서 계정삭제가 가능하다.

등록되어 있는 직원들의 계정도 조회가 가능하다. 

 

 

1. 앱으로부터 주문내역을 보여주는 페이지

2. 주문 접수항목의 ‘Y’(이미 접수 완료), ‘N’(미주문 or 새로운 주문)으로 주문 접수 여부를 확인할 수 있다. 접수버튼을 클릭하여 접수여부를 ‘Y’로 변환시 앱으로 접수완료 메시지가 푸쉬알림으로 전송된다.

3. 취소 항목은 해당 주문을 취소한다.

4. 조회 항목은 주문번호에 대한 주문내역을 따로 알림창으로 보여준다.

5. 알림 항목은 주문이 완료되고 주문자에게 푸쉬알림을 보낼 팝업창을 띄운다.

6. 상품수령은 고객이 상품을 수령했는지의 여부를 표시한다

7. 완료 항목은 주문이 완료되고 상품수령이 ‘Y’로 변환된 주문에 대해서 리스트에서 삭제하고 매출조회를 위한 테이블에 데이터를 저장시킨다. 

 

 

1. 주문목록 페이지에서 조회버튼을 클릭시 호출되는 팝업창.

2. 해당 주문번호에 대한 주문내역을 가져와 주문번호에 대한 총가격을 보여준다. 

 

1. 주문목록리스트에서 알림버튼을 클릭할때 호출되는 팝업창

편의상 기본값이 설정되어 있고, 메시지를 지우고 보낼 메시지를 직접 입력해도 된다. 입력된 메시지는 주문자의 스마트폰으로 푸쉬 메시지가 전송된다.

 

 

1. 완료버튼 클릭시 주문목록 리스트에서 주문내역이 삭제된다. 완료된 주문내역이 리스트에 보여질 필요가 없으므로 주문목록 리스트에서 제거됨과 동시에 관리자가 매출조회를 할 수 있도록 매출조회 테이블로 데이터가 저장된다.

2. 상품이 수령되기 전에 실수로 목록에서 삭제되는것을 방지하기 위해서 주문자가 상품을 수령했다는 사실을 확인하기 위해 상품수령여부 항목이 ‘Y’로 바뀐 항목에서만 완료가 가능하고 리스트에서 삭제가 된다.  

 

 

1. 관리자로 접속했을 때 보여지는 매출조회 페이지

2. 기본적으로 오늘에 해당하는 날짜의 데이터를 보여준다. 테이블에서 주문내역을 확인할 수 있고 매출 총금액을 확인할 수 있다.

3. Date picker를 통해 원하는 날짜를 선택하여 해당기간의 매출을 조회할 수 있다. 조회기간동안의 매출액을 그래프로 확인할 수 있으며 테이블로도 데이터를 확인할 수 있다.

 

 

1. 매출조회 페이지에서 엑셀파일로 저장하고자 하는 데이터의 기간을 입력하고 엑셀버튼을 클릭하면 엑셀 파일을 다운로드 받을 수 있다. 

 

 

1. 카페 게시판 목록 페이지

2. 카페 게시판은 누구나 이용이 가능하며 관리자로 접속시에는 체크박스가 활성화가 되어 비밀번호에 상관없이 글의 삭제가 가능하다. 따라서 목적에 맞지 않는 글이나 광고성의 글을 삭제할 수가 있다.

3. 작성자의 이름, 글의 제목, 글의 내용에 대해 키워드로 게시글을 검색을 할 수 있다.

4. 글제목 왼쪽의 이미지로 답변글을 확인할 수 있고 제목 오른쪽에 디스켓 이미지로 파일이 첨부되어 있음을 확인할 수 있다.

* 주요 기능 : 페이징, 답변달기, 파일업로드

 

1. 게시판에 글을 등록할 때, 글과 함께 추가로 파일을 업로드 할 수 있다.

2. 게시판 글 수정은 게시글 작성시 입력한 비밀번호와 일치할 시에만 글 수정이 가능하다.

3. 답변글 등록은 글 등록과 기능적으로 동일하다.

게시글 작성시 입력한 비밀번호와 일치할 시에만 글 삭제가 가능하다.

 

먼저 비밀번호를 입력하여 주세요.

창닫기확인

TOP