【Laravel】簡単アプリ作製【４】商品一覧表示機能

Laravel

　Laravelを使って、データベースに登録された商品の一覧を表示する機能を実装する。
　今回は、既存の商品データ（名前、価格、カテゴリ）を一覧表形式で表示するWebページを作成。

1. ルートの設定

　まず、一覧ページにアクセスするためのルートを設定します。routes/web.phpファイルを開き、以下のコードを追加します。
routes/web.php

PHP
// 商品一覧ページ
Route::get('/products', [ProductController::class, 'index'])->name('products.index');

　この設定により、/productsにアクセスした際にProductControllerのindexメソッドが呼び出されるようになります。

2. コントローラーの編集

　次に、データを取得してビューに渡す処理をコントローラーに追加します。ProductController.phpを開き、indexメソッドを以下のように記述します。
app/Http/Controllers/ProductController.php

PHP
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ProductController extends Controller
{
    // 商品一覧の表示
    public function index()
    {
        // データベースからすべての商品を取得
        $products = Product::all();

        // ビューにデータを渡して表示
        return view('products.index', compact('products'));
    }
}

このメソッドでは、Product::all()を使ってproductsテーブルの全データを取得し、それをproducts.indexというビューに渡しています。

3. ビュー（画面）の作成（resources/views/products/index.blade.php）

　最後に、データを表示するためのビューファイルを作成します。
　resources/views/products/フォルダ内にindex.blade.phpという新しいファイルを作成し、以下のHTMLコードを記述します。
ビュー（画面）の作成（resources/views/products/index.blade.php）

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>商品一覧</title>
</head>
<body>
    <h1>商品一覧</h1>

    <!-- 登録ページへのリンク -->
    <a href="{{ route('products.create') }}">新規登録</a>
    <br><br>

    <!-- 商品一覧をテーブル形式で表示 -->
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>商品名</th>
                <th>カテゴリ</th>
                <th>価格</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($products as $product)
                <tr>
                    <td>{{ $product->id }}</td>
                    <td>{{ $product->name }}</td>
                    <td>{{ $product->category?->name }}</td> <!-- 紐づいたカテゴリ名を表示 -->
                    <td>¥{{ number_format($product->price) }}</td> <!-- 価格をフォーマットして表示 -->
                </tr>
            @endforeach
        </tbody>
    </table>
</body>
</html>

　このビューでは、@foreachを使ってコントローラーから受け取った商品データをループ処理し、テーブル形式で表示しています。
　また、モデルのリレーションを利用して、商品に紐づいたカテゴリ名も表示しています。

4. 動作確認

ブラウザを開き、localhost/laravel-app/public/products/　にアクセスして、登録された商品が一覧で表示されるか確認。

また、以前作成した商品登録フォームへのリンクも追加しているので、登録フォームから新しい商品を追加し、一覧ページに反映されるかどうかも確認。

※この記事はAIで生成後、実際に手順通り実施して加筆、修正しています。

コメント