画面一覧

画面名 概要
商品一覧画面 商品レコードの一覧を表示する
商品作成画面 新規商品レコードを作成する
商品詳細画面 商品レコードの詳細を表示する
商品編集画面 商品レコードを編集（更新・削除）する

画面遷移図

メニューはサイドバーに表示するものとします。

ERD

items テーブル

列名（論理） 列名（物理） データ型 制約
ID id integer primary key, auto_increment
名前 name varchar(255)
価格 price integer
説明 description varchar(255)
カテゴリーID category_id integer

画面仕様

商品一覧画面

  1. 利用者がサイドバーでITEMSメニューを選択した際に表示する
  2. 利用者は以下の条件で商品レコードを検索できる
    • 商品名によるあいまい検索
    • カテゴリーセレクトボックスによるカテゴリー指定
      • カテゴリーセレクトボックスには、カテゴリーテーブルのカテゴリーレコード一覧を表示する
  3. 利用者がIDをクリックすると商品詳細画面へ遷移する
  4. 商品一覧に商品レコードを先頭10件のみを表示する（ページング機能）
  5. 利用者がCREATEボタンをクリックすると商品作成画面へ遷移する

商品作成画面

  1. 利用者が商品一覧画面でCREATEボタンをクリックした際に表示する
  2. 利用者は以下の項目を入力できる
    • 商品名（NAME）
    • カテゴリー（CATEGORY）
    • 価格（PRICE）
    • 商品説明（DESCRIPTION）
    • 商品画像（IMAGE）
  3. 利用者がSTOREボタンをクリックすると、商品テーブルに新規レコードを作成し、商品一覧画面に遷移する

商品詳細画面

  1. 利用者が商品一覧画面でIDをクリックした際に表示する
    • 商品テーブルから、商品一覧画面で選択されたIDに一致する商品レコードを表示する
  2. 利用者がEDITボタンをクリックすると 商品編集画面に遷移する

商品編集画面

  1. 利用者が商品詳細画面でEDITボタンをクリックした際に表示する
    • 商品詳細画面で表示していた商品レコードを編集モードで表示する
  2. 利用者は以下の項目を入力できる
    • 商品名（NAME）
    • カテゴリー（CATEGORY）
    • 価格（PRICE）
    • 商品説明（DESCRIPTION）
    • 商品画像（IMAGE）
  3. UPDATEボタンをクリックすると商品テーブルの対象レコードを更新し、商品一覧画面に遷移する
  4. DESTROYボタンをクリックすると商品テーブルの対象レコードを削除し、商品一覧画面に遷移する