お持ち帰りご注文用紙編

概要

• お持ち帰りご注文用紙開発ということで、それぞれの商品のご注文数を入力
• お名前、お電話番号を入力
• 確定を押すと、入力内容を確認でき、処理を行えるような実装にする

詳細

• 基本的には ERD レッスン第 1 回 126p の「お持ち帰りご注文用紙」を参考にする。
• ただ、商品を横に 2 行にする表示はレイアウトが少し複雑になると思ったため、1 行で対応。
• 商品の注文数は、商品名の横にテキストボックスを設置し、注文数を入力できるようにする。
• お名前、お電話番号もテキストボックスを設置し、入力できるようにする。
  • お名前、お電話番号は必須入力とする。
• 「注文する」ボタンを押すと、ユーザー登録および注文情報を登録する処理を行う。
  • ただし現状、ログインを行なっているわけではないため、注文があるたびにユーザー情報を登録することになる。
• 新しい商品の場合は商品名の左側に「*New*」と表示する。

動かし方

バージョン情報

MacBook Air (M2, 2022)
macOS Sonoma 14.5
Node.js v20.11.1
npm 10.8.2

フロントエンド

cd frontend
npm install
npm run dev

バックエンド

• prismaが動かない場合、先頭に npx コマンドを付けて実行する

cd backend
cp .env.example .env
npm install


# データベースの作成
prisma migrate dev --name init
※ prismaが動かない場合、先頭に npx コマンドを付けて実行する

# データベースの初期データ投入
prisma db seed

# バックエンドの起動
npm run dev

DB(prisma)

# DBのレコードを確認できる
prisma studio
# DBの初期化やり直し
prisma migrate reset