/ WEBSITE

오늘의 요리사

[Website] 오늘의 요리사

자신이 현재 가지고 있는 식재료 정보를 입력하여 만들 수 있는 요리의 레시피를 검색하거나 자신이 먹고 싶은 것의 단편적인 정보(조건)로 메뉴 추천을 받을 수 있는 사이트

또한 각 음식에 대한 상세 정보(칼로리 등)를 검색할 수 있음

Design

각 디자인 컴포넌트는 모두 포토샵을 활용해 제작함

Main Cover

Cook main cover img

Cook navbar img

  1. Home logo: 메인 페이지로 이동
  2. Cooking search: 메인 페이지의 검색창으로 이동
  3. Recommend recipe: 레시피 검색 페이지로 이동
  4. Menu Recommendation: 메뉴 검색 페이지로 이동
  5. Design: CSS를 사용해 디자인 함

Main Page

Cook main img

Today's Recommend

Cook Recommned img

  1. 오늘의 추천 메뉴 : 메뉴에서 임의로 하나를 선택하여 화면에 정보를 출력함
  2. 오늘의 추천 레시피 : 레시피에서 임의로 하나를 선택하여 화면에 정보를 출력함

메인 페이지 하부 버튼

Cook button img

  1. 메뉴 추천 버튼 : 메뉴 검색 페이지로 이동
  2. 레시피 추천 버튼 : 레시피 검색 페이지로 이동
  3. Design: Hover를 사용하여 반응형 버튼으로 구현함

메인 페이지 검색창

Cook food search img

  1. 정확하게 검색하고자 하는 음식으ㅡㄹ 입력
  2. 음식 검색 결과 페이지로 이동하여 자세한 결과 출력
  3. 데이터베이스에서 해당 음식을 검색한 후 이름, 단위 칼로리, 섹션 정보를 사진과 표 형식으로 출력함

Cook menu search img

  1. 선택 조건은 라디오 박스로 구현함(단일 선택)
  2. Submit 버튼을 클릭하면 결과 페이지로 이동함
  3. 선택된 항목을 SQL문에 변수 값으로 삽입하고 데이터베이스에서 검색함
  4. 오늘의 추천 메뉴/레시피 항목은 우측에서도 출력됨

Cook recipe search img

  1. 체크 박스를 사용하여 선택 조건 구현(최대 8개 복수 선택 가능)
  2. Submit 버튼을 클릭하면 결과 페이지로 이동
  3. 선택된 항목을 SQL문에 변수 값으로 삽입하고 데이터베이스에서 검색함
  4. 오늘의 추천 메뉴/레시피 항목은 우측에서도 출력됨

Cook food search result img

  1. 찾아낸 음식 상세 정보를 출력함
  2. 음식 이름, 단위 칼로리, 맛, 대분류에 대한 정보가 표시됨
  3. 정보는 표 형식으로 표현
  4. 시각적인 효과를 위해 사진과 함께 정보가 출력됨
  5. 오늘의 추천 메뉴/레시피 항목은 우측에서도 출력됨

Cook menu search result img

  1. 메뉴 검색 페이지에 입력한 조건을 사용하여 SQL 문을 통해 데이터베이스에서 검색
  2. 조건에 맞는 결과를 최대 3개까지 선택하여 카드 형태로 출력
  3. 하단의 메뉴 재검색 및 레시피 재검색 버튼을 통해 검색 페이지로 이동 가능

Cook recipe search result img

  1. 레시피 검색 페이지에 입력한 조건을 사용하여 SQL 문을 통해 데이터베이스에서 검색
  2. 조건에 맞는 결과를 최대 3개까지 선택하여 카드 형태로 출력
  3. 레시피 결과에서 결과를 클릭하여 요리와 관련된 레시피 사이트로 연결
  4. 하단의 메뉴 재검색 및 레시피 재검색 버튼을 통해 검색 페이지로 이동 가능

Backend

  1. 메인 페이지의 검색 창에 검색할 음식 이름을 입력하고 입력 또는 제출 버튼을 클릭
  2. 이벤트 발생 시 해당 결과 서블릿 호출
  3. 서블릿은 검색창에 입력된 음식의 이름을 데이터로 추출하여 서비스를 통해 DAO를 호출함
  4. 리콜된 DAO가 SQL 문에서 데이터로 수신한 식품의 이름을 데이터베이스에서 검색하도록 요청
  5. 만약 그 음식 이름의 데이터가 데이터베이스에 존재한다면, 데이터베이스는 DAO로 해당 정보를 전송함
  6. 수신된 데이터는 DAO의 ArrayList 목록에 저장되고 서블릿으로 반환
  7. 반환된 목록에 해당하는 함수를 호출하고 해당 함수에 대한 결과 화면 JSP를 호출하여 검색 결과 시각화
  1. 메뉴 추천 버튼 등을 통해 메뉴 추천 기준 선택 페이지로 이동
  2. 라디오 버튼을 통해 필터를 선택하고 검색 버튼을 클릭
  3. 이벤트 발생 시 해당 MenuResult 서블릿 호출
  4. 서블릿은 선택된 조건에서 데이터를 추출하고 서비스를 통해 DAO를 호출
  5. SQL 문에서 호출된 DAO가 수신한 조건을 검색하도록 데이터베이스 요청
  6. 조건 데이터에 해당하는 데이터가 데이터베이스에 있는 경우, 데이터베이스는 DAO로 데이터를 전송
  7. 수신된 데이터는 DAO의 ArrayList 목록에 저장되고 서블릿으로 반환
  8. 반환된 목록에 해당하는 함수를 호출하고 해당 함수에 대한 결과 화면 JSP를 호출하여 검색 결과 시각화
  1. 레시피 추천 버튼 등을 통해 레시피 추천 기준 선택 페이지로 이동
  2. 체크 박스에 대해 중복 선택 항목(최대 8개)을 선택하고 검색 버튼을 클릭
  3. 이벤트가 발생하면 해당 RecipeResult 서블릿을 호출
  4. 서블릿은 선택된 조건에서 데이터를 추출하고 서비스를 통해 DAO를 호출
  5. SQL 문에서 호출된 DAO가 수신한 조건을 검색하도록 데이터베이스 요청
  6. 조건 데이터에 해당하는 데이터가 데이터베이스에 있는 경우, 데이터베이스는 DAO로 데이터를 전송
  7. 수신된 데이터는 DAO의 ArrayList 목록에 저장되고 서블릿으로 반환
  8. 반환된 목록에 해당하는 함수를 호출하고 해당 함수에 대한 결과 화면 JSP를 호출하여 검색 결과 시각화

오늘의 추천 기능

  1. 메인 페이지가 열리면 백엔드는 데이터베이스에서 하나의 메뉴/레시피 데이터에 대한 임의 검색 및 전송을 자동으로 요청
  2. 데이터베이스에서 백엔드로 메뉴/스크립션을 하나씩 전송e
  3. 전송된 데이터를 백엔드, ArrayList에 담을 수 있는 리스트 및 시간 추적 데이터로 저장
  4. 오늘의 추천 카드 측면이 있는 각 페이지에는 결과에 따라 목록에 저장된 데이터가 삽입되어 결과를 시각화할 수 있음

주요 기술

  • 웹 개발 전반(페이지 이동, 이벤트 처리, 디자인 등)
  • 데이터베이스 전반
  • 실시간 이벤트 처리
  • 실시간 변동
  • LED 조작
  • 기초 기술(조건, 반복 등)