A Project

천둥장터

관리자

view : 1218

기간 : 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 박스를 만들어 주고 수정삭제,목록 버튼을 클릭하여 수정삭제 할 수있다.

 

 

채팅

 

 

 

채팅

 

기가 라이브 채팅 라이브러리를 사용하여 판매자의 닉네임을 기준으로 채팅방을 개설하고 구매자들 닉네임 기준으로 접속하여 채팅하는 방식으로 설계하여 실시간으로 채팅을 지원한다

 

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

창닫기확인

TOP