## モジュール 2: Laravelアプリケーションの基本機能の理解

このモジュールでは、Laravel と MySQL を利用して構築されたシンプルな書店ウェブサイトの基本的な機能を順を追って確認します。

### 手順 1. 書籍購入機能の確認

+ [書籍一覧](${LAB:HTTPS_REVERSE_PROXY_URL}?next=${LAB:"/vscode/proxy/8000/products"|urlencode} "書籍一覧") ページをクリックして「書籍一覧」を表示し、書籍を選択した後、「詳細」ボタンをクリックして「商品詳細」ページで書籍の詳細を確認します。

![204_2_1_1.png 85%](https://lab-static.pingcap.com/images/2026/1/23/199c00cab6ff3a7bba730f1d54f44b3436e888ef.png)

+ 「商品詳細」ページで、購入する数量（1から10の範囲に制限）を選択し、「COD」などのお支払い方法も選択して、「購入する」ボタンをクリックして書籍を購入します。

![204_2_1_3.png 85%](https://lab-static.pingcap.com/images/2026/1/23/c5a79f88eaa5516456c83065725eb06d12aaaf23.png)

+ 購入成功の確認メッセージが表示されたら、「すべての注文」ボタンをクリックしてユーザーの注文履歴を確認します。

![204_2_1_4.png 85%](https://lab-static.pingcap.com/images/2026/1/23/3ecef15b9f38a897bebf69e087914f5d4690639d.png)

+ すべての履歴注文を確認し、「戻る」ボタンをクリックして「書籍一覧」ページに戻ります。

![204_2_1_5.png 85%](https://lab-static.pingcap.com/images/2026/1/23/cb11b32109ec955d86bfbd9644ac284555b9281f.png)

+ 「書籍一覧」ページに戻り、一連の購入プロセスを完了します。

![204_2_1_6.png 85%](https://lab-static.pingcap.com/images/2026/1/23/ed291e75991a8a0196bdcff2e56055be4d2bd169.png)

+ 「書籍一覧」ページを閉じ、次のステップに進んでください。

### 手順 2. 新しい書籍の作成

+ [書籍作成](${LAB:HTTPS_REVERSE_PROXY_URL}?next=${LAB:"/vscode/proxy/8000/products/create"|urlencode} "書籍作成") ページをクリックして新規書籍作成ページを開き、書籍情報の入力と表紙画像の選択を行ってください。

![204_2_2_1.png 85%](https://lab-static.pingcap.com/images/2026/1/23/c7cdc6e8de99670c1a572bf89175cba8f10a6149.png)

+ 以下に提供されている書籍情報を入力し、「更新」ボタンをクリックして新しい書籍を在庫に追加します。
  + `ステータス`: 販売中
  + `カテゴリ`: Comics
  + `書名`: Wishing Well
  + `内容紹介`: Be careful about what you wish for in this dark fantasy anthology where dreams are granted with a brutal twist.
  + `価格`: 166.09
  + `数量`: 77
  + `表紙`(以下の画像をダウンロード・アップロードできます。):

![204_2_2_2.png 85%](https://lab-static.pingcap.com/images/2026/1/8/d7d8411abf94e90f6e722b5bbbcbf6d9fb295c74.png)

+ Webページは次のように表示されます：

![204_2_2_3.png 85%](https://lab-static.pingcap.com/images/2026/1/23/88eb4b32ec6f88566a48d50d530c02083de1df74.png)

+ 新しい書籍が作成されると、「書籍管理」ページにリダイレクトされ、新しく作成された書籍レコードを確認できます。

![204_2_2_4.png 85%](https://lab-static.pingcap.com/images/2026/1/23/1679ac8c368a08b89c389aed47eb251fe558beda.png)

+ 「書籍管理」ページを閉じ、次のステップに進んでください。

### 手順 3. 書籍の削除

+ [書籍管理](${LAB:HTTPS_REVERSE_PROXY_URL}?next=${LAB:"/vscode/proxy/8000/products/manage"|urlencode} "書籍管理")ページをクリックして「書籍管理」ページを開き、削除したい書籍を選択し、右端の「削除」ボタンをクリックします。

![204_2_3_1.png 85%](https://lab-static.pingcap.com/images/2026/1/23/10e20a3dfe46f874cd2697d6e7908003359af4cc.png)

+ 「Are you sure you want to delete this book?」というプロンプトが表示されますので、「OK」を選択します。

![204_2_3_2.png 85%](https://lab-static.pingcap.com/images/2026/1/23/df67cb46d02cdbeb9c5502837c727d6ba80c0ff9.png)

+ ページは自動的に「書籍管理」ページにリダイレクトされ、書籍が在庫から削除されていることが確認できます。

![204_2_3_3.png 85%](https://lab-static.pingcap.com/images/2026/1/23/ae1340c88a20383e5d37e969f058093c880fd85c.png)

+ 「書籍管理」ページを閉じ、次のステップに進んでください。

### 手順 4. 書籍情報の更新

+ [書籍管理](${LAB:HTTPS_REVERSE_PROXY_URL}?next=${LAB:"/vscode/proxy/8000/products/manage"|urlencode} "書籍管理")ページをクリックして「書籍管理」ページを開き、例えば「Waterfalls」という書名の書籍情報を編集したい場合、その書籍を選択して「編集」ボタンをクリックします。

![204_2_4_1.png 85%](https://lab-static.pingcap.com/images/2026/1/23/eeed028d947cd6978c838c527d80e21f8db62a45.png)

+ 書籍の価格を74.95から77.77に変更します。他の情報（例：表紙画像など）も必要に応じて編集できます。

![204_2_4_2.png 85%](https://lab-static.pingcap.com/images/2026/1/23/99642fe11c7c16695af00042cc9913a32b559d15.png)

+ 変更が完了したら、「更新」ボタンをクリックして確定します。

![204_2_4_3.png 85%](https://lab-static.pingcap.com/images/2026/1/23/a98f7fa9122b80aa164dee1e80390dc74fe8c5b6.png)

+ 「書籍管理」ページに戻り、価格が変更されたことを確認します。

![204_2_4_4.png 85%](https://lab-static.pingcap.com/images/2026/1/23/19dca978017a8a4c0f240dfe0d33c2733e5f548b.png)

+ 「書籍管理」ページを閉じます。

### 手順 5. Laravelアプリケーションを停止する

+ VS Codeのターミナルで、`Ctrl + C` と入力して現在実行中のLaravelアプリケーションを停止します。

+ 次のモジュールに進みましょう。