画面一覧

画面名 概要
商品一覧画面 商品一覧を表示する
商品詳細画面 商品詳細を表示する
メニュー 検索バーを表示する

画面遷移図

メニューはナビゲーションバーに表示するものとします。主にオレンジ色の範囲を実装します。

ERD

主にオレンジ色の範囲を利用します。

画面仕様

商品一覧画面

  1. カテゴリーごとに商品一覧を表示する
    • カテゴリーレコードは、カテゴリーテーブルの表示順序の昇順で表示する
    • 商品レコードは新しいものから順に表示する
  2. 利用者はナビゲーションバーにある検索テキストボックスで商品名による商品検索(あいまい検索)ができる
    • 商品名(ITEM NAME) ※ナビゲーションバー
  3. 利用者が商品を選択すると商品詳細画面に遷移する

商品詳細画面

  1. 商品一覧画面で選択された商品の詳細情報を表示する
  2. 利用者は以下の項目を入力できる
    • 数量(QUANTITY) ※1〜10まで選択できるものとする
  3. 利用者は ADD TO CART ボタンをクリックすると カート画面に遷移する
    • 選択された商品ID、数量(QUANTITY)をセッションに保持する