천둥장터
관리자
view : 1042
| 기간 : | 2017-06-30 ~ 2017-07-19 ( 월,화,수,목,금 ) |
|---|---|
| URL : | |
| 물물교환 중개 웹 | |
|
소개
|
|
||
|
프로젝트
|
천둥장터 |
||
|
소개
|
물물교환 중개 웹 |
||
|
개발기간
|
2017 . 06 . 30 ~ 2017 . 07 . 19 (20일) |
개발인원 |
3명 |
|
담당업무 |
구글 맵 api를 활용한 지도 표시 제품 등록 페이지 등록, 수정, 삭제 상세페이지 물품 정보 출력 및 기능 메인페이지 제품 리스트 메인페이지 관리자 페이지
|
||
|
개발환경
|
|
|
운영체제
|
Window 7 64bit |
|
DB
|
Oracle |
|
사용언어
|
Java, HTML5/CSS, JQuery, Ajax, Mybatis, JavaScript, FrameWork(Spring) |
|
개발도구
|
Maven Spring Tool Suit |
|
기타S/W
|
API : 구글 맵, 기가 라이브 채팅 |
|
메인페이지 |
|
|
|
|
메인페이지
Top-Main-Bottom으로 나누어 Top페이지의 로고, 검색바, 채팅, 카테고리창 Bottom페이지의 회사카피라이터를 고정하고 main페이지의 내용만 변경시킨다. |
|
|
메인페이지 카테고리 |
|
|
|
|
메인 페이지 - 카테고리
물품 등록시 설정한 카테고리 기준으로 ajax를 이용하여 깜박임 없이 리스트를 출력한다. |
|
|
메인페이지 검색 |
|
|
|
|
메인 페이지 - 검색
물품등록시 제목과 내용 기준으로 ajax를 이용하여 깜박임 없이 출력한다. |
|
|
상세페이지 1 |
|
|
|
|
상세페이지 1 - 이미지
스와이프.js, 스와이프.css를 이용하여 물품 등록시 여러 사진을 스와이프로 뿌려준다. 게시판의 기본 키를 이용하여 검색한 내용들을 출력한다. 스크롤 탑을 이용하여 페이지 최상단 하단으로 이동 상품 찜하기 클릭 시 테이블을 검색하고 같은 데이터가 없을 시 insert 같은 데이터가 있을시 delete한다. |
|
|
상세페이지 2 |
|
|
|
|
상세페이지 2
구글map api를 이용하여 물품 등록시 등록한 검색어를 다시 한번 검색하여 위치를 출력한다. 상품문의 Ajax를 이용하여 등록버튼을 클릭하면 화면 깜박임 없이 닉네임과 내용을 출력한다. 연락하기 클릭 시 기가 채팅 라이브러리를 이용하여 판매자 닉네임의 채팅방으로 접속한다. |
|
|
상세페이지 3 |
|
|
|
|
상세페이지 3
연관상품 데이터의 카테고리 기준으로 4개의 게시판을 출력한다. ○ ○님의 상점 데이터의 ○ ○의 기본 키를 기준으로 4개의 게시판을 출력한다. 클릭 시 상세페이지로 이동한다. 판매자 상점가기 판매자가 올린 모든 상품들을 메인 페이지에서 출력한다. |
|
|
공지사항 |
|
|
|
|
공지사항
공지사항 제목을 클릭 시 제이쿼리를 사용하여 내용의 display를 none, block 처리를 해준다. |
|
|
1:1 문의 |
|
|
|
|
1:1 문의
제이쿼리를 이용하여 상담내역을 클릭하면 상담내역 리스트를 출력하고 1:1 상담하기 클릭하면 입력 폼을 출력한다. |
|
|
마이페이지 |
|
|
|
|
마이페이지
예약완료, 판매완료를 클릭 시 데이터를 변경 하여 데이터에 맞는 이미지를 상단에 출력한다. 삭제를 클릭 시 데이터를 삭제한다. 제목을 클릭 시 내용 변경 페이지로 이동한다. |
|
|
찜 목록 |
|
|
|
|
찜 목록
상세페이지에서 찜을 클릭한 게시판을 리스트로 출력한다. 이미지를 클릭하여 상세페이지로 이동한다. |
|
|
등록 페이지 1 |
|
|
|
|
등록 페이지 1
물품등록 버튼을 클릭 시 제이쿼리를 이용하여 file 태그를 생성한다. Base64를 이용하여 등록한 이미지를 실시간으로 미리보기를 보여준다. 썸네일 이미지를 클릭하여 이미지를 삭제, 수정한다. |
|
|
등록 페이지 2 |
|
|
|
|
등록 페이지 1
물품등록 버튼을 클릭 시 제이쿼리를 이용하여 file 태그를 생성한다. Base64를 이용하여 등록한 이미지를 실시간으로 미리보기를 보여준다. 썸네일 이미지를 클릭하여 이미지를 삭제, 수정한다. |
|
|
관리자페이지 - 메인 |
|
|
|
|
관리자페이지 - 메인
배너 이미지 변경을 클릭하여 배너 이미지를 등록한다. 일반 페이지로 접속을 클릭하여 사용자와 같은 페이지를 볼 수 있다. 천둥 톡 버튼을 클릭하여 대화창에 접속 할 수 있다. 수정 버튼을 클릭하여 잘 못 올라온 카테고리를 수정 할 수 있다. 삭제 버튼을 클릭하여 게시글을 삭제 할 수 있다. |
|
|
관리자페이지 - 검색 |
|
|
|
|
관리자페이지 - 검색
일반 메인페이지와 마찬가지로 ajax를 이용하여 깜박임 없이 검색 기능 기능을 사용할 수 있다. |
|
|
관리자페이지 - 카테고리 |
|
|
|
|
관리자페이지 - 카테고리
일반 메인페이지와 마찬가지로 ajax를 이용하여 깜박임 없이 카테고리 기능 기능을 사용할 수 있다. |
|
|
관리자페이지 - 공지사항 |
|
|
|
|
관리자페이지 - 공지사항
공지등록 버튼을 클릭하여 공지사항을 등록 할 수있다. 제목을 클릭하여 수정 페이지로 넘어 가지 않고 jQery를 사용하여 제목과 내용 text 박스를 만들어 주고 수정, 삭제,목록 버튼을 클릭하여 수정, 삭제 할 수있다. |
|
|
채팅 |
|
|
|
|
채팅
기가 라이브 채팅 라이브러리를 사용하여 판매자의 닉네임을 기준으로 채팅방을 개설하고 구매자들 닉네임 기준으로 접속하여 채팅하는 방식으로 설계하여 실시간으로 채팅을 지원한다 |
|
