Laravel でテーブルレコードを取得して表示

この記事のゴール
前提条件
これからやる作業
コントローラー作成・編集
ルーティング設定
ブラウザでの表示確認１回目
コントローラー再編集
Bladeテンプレート作成・編集
ブラウザでの確認２回目

この記事のゴール

Laravel のモデル経由でテーブルレコードを取得する。
取得したレコードのデータをBladeテンプレートを使ってHTML出力する。

前提条件

Laravel のマイグレーション実行済
Laravel のモデル作成済。

※まだの場合は以前の記事を参考にしてください。

これからやる作業

コントローラー作成・編集
ルーティング設定
ブラウザ表示確認１回目
コントローラー再編集
Bladeテンプレート作成・編集
ブラウザ表示確認２回目

コントローラー作成・編集

では、コントローラーを新規作成してみましょう。

php artisan make:controller TodoController

では、[app/Http/Controllers/TodoController.php] を編集していきます。

次のように編集して保存してください。6行目と10～13行目を追記しています。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Todo;

class TodoController extends Controller
{
    public function index()
    {
        return Todo::all();
    }
}

6行目の「use App\Models\Todo;」でモデルを使う宣言をしています。

12行目では、WEBのコンテンツ出力として、todosテーブルのレコード全件を出力しています。

Laravel では、モデルでの検索結果をコントローラーからreturnしたときには、

WEBコンテンツとしての出力を自動的にJSON形式に変換してくれます。

ルーティング設定

[routes\web.php] を開いて次の１行を追記し、保存してください。

Route::get('/todo', [\App\Http\Controllers\TodoController::class, 'index']);

ブラウザでの表示確認１回目

ブラウザのアドレスバーに http://localhost/todo/ と入力してアクセスしてください。

前回の記事においてシーダーで登録したレコードの内容がJSON形式で表示されています。

日本語の部分はエンコードされているので読めませんが、文字化けではありません。

これで、コントローラー側でレコード取得できていることが担保されました。

このように段階的に実装の品質を担保していく作業は重要です。

コントローラー再編集

では、次はBladeテンプレートへデータを渡すようにコントローラーを修正します。

次のように、returnの箇所を修正し、保存してください。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Todo;

class TodoController extends Controller
{
    public function index()
    {
        return view('todo.index', [
            'pageTitle' => 'TODOリスト',
            'todos' => Todo::all(),
        ]);
    }
}

これで、Bladeテンプレートにデータが渡るようになりました。

Bladeテンプレート側では、$todos としてデータを参照することができます。

Bladeテンプレート作成・編集

フォルダ [resources/views/] の中に、新しいフォルダ [todo] を作成してください。

新しいフォルダの中に、新しいファイル [index.blade.php] を作成してください。

次のように編集して保存してください。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>{{$pageTitle}}</title>
    </head>
    <body>
        <h1>{{$pageTitle}}</h1>
        @isset($todos)
        @foreach($todos as $todo)
        <p>{{$todo->id}}：{{$todo->todo}}　{{$todo->done ? '[完了]' : ''}}</p>
        @endforeach
        @else
        <p>todoは登録されていません。</p>
        @endisset
    </body>
</html>

Bladeテンプレートの制御構造は、「＠～」という形式になります。

「@isset($todos)」が、「$todos」の値がセットされている場合の処理、

「@else」～「@endisset」の箇所が、「$todos」の値がセットされていない場合の処理です。

モデル経由の検索結果はオブジェクトとして渡されるので、

「@foreach」の中で「$todo->id」のように、カラム名をプロパティ名として扱います。

また、マスタッシュの内部には、PHPの式を書くことができます。

「{{$todo->done ? ‘[完了]’ : ”}}」のように、三項演算子を使うことができます。