A Project

REG. Project

관리자

view : 231

기간 : 2015-02-23 ~ 2015-07-07 ( 월,화,수,목,금 )
URL : 내부서버용
레시피 공유 사이트

 

Final Project : REG. Project

개발환경

OS

Microsoft Windows 8.1K

DBMS

ORACLE 11G

WAS

Tomcat 5.5

Language

JAVA 5.0, Servlet & JSP, HTML, Javascript, jQuery, Jstl ,el ,Ajax,

개발툴

Database

ORACLE 11G

Design

Adobe Photoshop , CSS, BootStrap

Editer

Spring4.1.6, Maven Spring Tool Suit,

개발기간

개발인원

2015. 06. 08 ~ 2015. 07 .05

5명

개발 취지 및 목적

많은 사람들이 요리에 관심을 가진 요즘, TV에서는 쿡방시대 라고 할만큼 요리를 소재로 한 프로그램이

틀 때마다 나오고, 쉐프님 들이 직접 출연하여 연예인 못지않은 인기를 얻고 있습니다.

인터넷에도 요리를 소재로 한 블로그 나 웹툰이 인기리에 흥행하면서 요리에 대한 관심이 더욱 늘어나 있는데, 많은 사용자들이 눈으로 즐기는 요리가 아닌 직접 요리를 하면 즐길 수 있도록 레시피를 제공 하는 데에 주 목적을 두었습니다.

카테고리별로 레시피를 선택할 수 있도록 분류하고, 기본적인 검색 기능과 집에 있는 재료로 만들 수 있는 레시피 를 제공하기 위해 여러 재료를 선택하여 레시피를 검색하는 기능을 주 기능으로 하였습니다.

또한 자신의 취향에 맞는 레시피 플래너를 제공하는 기능과 좀더 전문적으로 요리를 배우고자 하는 사용자들을 위한 쿠킹 클래스 기능을 구현하였습니다.

그리고 사용자들 간의 커뮤니티를 활성화 시키기 위해 나만의 레시피를 올려서 서로 공유 할 수 있도록 하고, 실시간 채팅으로 자유롭게 대화를 나눌 수 있는 공간을 제공 하였습니다.

대상

- 요리에 흥미 있는사람,

- 배달음식이 지겹고, 집밥이 그리운 사람

- 요리에 관심은 있으나 실력이 부족한사람

구현 기능

- Ajax와 자바스크립트, 다음 주소 API를 이용한 회원가입, 이메일로 본인인증

- Mybatis 동적쿼리를 이요한 레시피 검색과 카테고리별로 분류

- 레시피 PDF로 다운로드

- 제이쿼리 플러그인을 이용한 그래프 표현

- 제이쿼리 Datepicker를 이용한 쿠킹클래스 예약 기능

- 스마트에디터를 이용하여 다중파일 업로드와 자유로운 편집으로 나만의 레시피 작성 기능

- 스프링 웹소켓을 이용한 실시간 채팅 기능

 

주요기능 실행화면과 설명

실행 화면

 

 

 

홈 메인 화면

- 레이아웃 스프링 타일즈와 부트스트랩을 기반으로 제작

1) 제이쿼리 드롭다운 메뉴바를 이용하여 사용자들이 원하는 페이지로의 이동이 편리하도록 구성

2) 부트스트랩 캐러셀을 이용하여 추천 레시피 3가지를 슬라이드로 구현,

    이미지 클릭 시 해당 레시피의 상세 정보 페이지로 이동.

3) 메뉴플래너와 쿠킹클래스의 이동이 편리하도록 이미지로 링크 구성

4) 냉장고를 부탁해 페이지로 이동하도록 이미지 링크

5) 회원에 한에 실시간 채팅이 가능한 이미지 링크

6) 추천레시피와 신규레시피, 인기 레시피 소개

7) 추천와인 3가지 캐러셀을 이용하여 슬라이드로 구현

 

주요기능 실행화면과 설명

 

 

레시피 메인화면

1) 부트스트랩의 캐러셀을 이용하여 메뉴플래너, 이웃레시피, 쿠킹클래스의 링크를 슬라이드로 표현

2) 추천레시피와 인기, 신규 레시피를 선별하여 소개

3) 레시피 이미지에 마우스 호버 시 바로 스크랩 할수 있는 기능 구현

4)이미지 클릭시 해당 레시피 의 상세 정보 페이지로 이동

 

 

카테고리 별 분류

-레시피를 카테고리별로 분류하여 볼 수 있도록 Tab 형식으로 기능 구현

 

주요기능 실행화면과 설명

 

 

 

설명

 1) 검색할 키워드를 입력하여 레시피 검색

 2) 키워드가 제목, 재료, 레시피 내용에 포함된 레시피 검색

 3) 레시피를 4개씩 보여주고, 더보기 버튼을 눌러서 검색된 모든 레시피가 보이도록 구현,

    줄이비 버튼으로 레시피 리스트 줄임.

 

 

 

주요기능 실행화면과 설명

 

 

냉장고를 부탁해

-메뉴플래너를 수정하고자 할 때, 마이페이지에서 플래너를 선택후,

수정하고자 하는 날짜를 클릭하면 레시피를 선택할수 있는 모달창이 뜸

1) 키워드로 레시피를 검색하거나 리스트의 레시피를 선택

2) 레시피를 선택 후 선택완료 버튼을 눌러서 수정 완료

 

 

냉장고를 부탁해

 1) 왼쪽 하단에 있는 이미지 링크 클릭하여 페이지 이동

 2) 냉장고에 있는 재료를 중복으로 선택하여 해당 재료들이 포함된 레시피를 검색

주요기능 실행화면과 설명

 

 

냉장고를 부탁해

-메뉴플래너를 수정하고자 할 때, 마이페이지에서 플래너를 선택후,

수정하고자 하는 날짜를 클릭하면 레시피를 선택할수 있는 모달창이 뜸

1) 키워드로 레시피를 검색하거나 리스트의 레시피를 선택

2) 레시피를 선택 후 선택완료 버튼을 눌러서 수정 완료

 

 

냉장고를 부탁해

 1) 왼쪽 하단에 있는 이미지 링크 클릭하여 페이지 이동

 2)

냉장고에 있는 재료를 중복으로 선택하여 해당 재료들이 포함된 레시피를 검색

주요기능 실행화면과 설명

 

 

메뉴플래너 메인

 1) 메뉴플래너의 필수조건인 기간, 끼니, 재료를 선택

 2) 사용자에게 좀더 맞는 레시피로 구성하기위해 난이도와 조리시간 선택

 

 

메뉴플래너 결과

 1) 조건에 맞는 메뉴플래너가 구성되고, 하루의 칼로리를 보여줌

 2) 플래너에 제목을 붙여서 저장, 저장된 플래너는 마이페이지에서 확인 가능하도록 구현

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

창닫기확인

TOP