内容

以下の順番にまとめます。
1. MacへのXAMPP+Laravelインストール
 2. ユーザログイン機能の追加
[3. MVCとルーティングの説明]
(https://qiita.com/sonrisa/items/809adf872e6fb3657f81)
[4. ユーザリストの表示]
(https://qiita.com/sonrisa/items/929486929ed8d851a24e) ←いまここ
[5. ユーザリストのペジネーション表示]
(https://qiita.com/sonrisa/items/86efb8caebe207ab8fa8)
6. ユーザ管理APIの追加
 7. Vue.jsとAPIベースのユーザ管理アプリの追加準備
 8. Vue.jsとAPIベースのユーザ管理アプリの追加
[9. Vue.jsとAPIベースのユーザ管理アプリへのペジネーション追加]
(https://qiita.com/sonrisa/items/d58c56b638924d8c6810)
[10. APIへのJWTAuth認証の追加]
(https://qiita.com/sonrisa/items/97c1f3e8491f76dc2ce2)
11. Vue.jsとAPIベースのユーザ管理アプリへの認証の追加

4. ユーザリストの表示

ここでは登録されたユーザ一覧を表示するページをログイン後に表示されるページとして追加します。いままで学んだとおり、ルーティングの設定とコントローラとビュー（bladeファイル）の追加を行います。

4.1. ユーザの初期登録

「2. ユーザログイン機能の追加」で説明したとおり、Laravelにはマイグレーション機能があり、「php artisan migrate:fresh」コマンドを実行することで、.envファイルで指定したデータベースにテーブルを作成し、データ初期化します。

マイグレーション機能は、databaseフォルダ下に存在しており、下記のようなファイル構成になっています。

database/
├── factories
│   └── UserFactory.php
├── migrations
│   ├── 2014_10_12_000000_create_users_table.php
│   └── 2014_10_12_100000_create_password_resets_table.php
└── seeds
    └── DatabaseSeeder.php

Seederとは、マイグレーション機能の延長にある機能で、その名のとおり種を作ることをいい、テーブルをリフレッシュして初期データを投入することを意味します。

まずはSeederプログラムの雛形を作成します。下記のコマンドを実行することで、「database/seeds」フォルダ下に「UsersTableSeeder.php」というデータ初期化用のSeederプログラムの雛形が作成されます。

$ php artisan make:seeder UsersTableSeeder
Seeder created successfully.

作成された「UsersTableSeeder.php」の中身は以下の通りです。

database/seeds/UsersTableSeeder.php

<?php

use Illuminate\Database\Seeder;

class UsersTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        //
    }
}

このプログラムのrun関数の中にUserモデルを使った初期化のコードを埋め込みます。　ここではtest1、test2、test3の3ユーザを登録するプログラムになっています。

database/seeds/UsersTableSeeder.php

<?php

use Illuminate\Database\Seeder;
use App\User; // <-追加

class UsersTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
// 以下追加
      $users = [
        ["name"=>"test1","email"=>"test1@test.com","password"=>"(uhBnji9"],
        ["name"=>"test2","email"=>"test2@test.com","password"=>"(uhBnji9"],
        ["name"=>"test3","email"=>"test3@test.com","password"=>"(uhBnji9"]
      ];

      foreach($users as $user) {
        $u = new User;
        $u->name = $user["name"];
        $u->email = $user["email"];
        $u->password = bcrypt($user["password"]);
        $u->save();
      }
// ここまで
    }
}

Seederは「php artisan migrate:refresh --seed」コマンドを実行して起動しますが、これによって起動されるプログラムは「database/seeds」フォルダ配下にある「DatabaseSeeder.php」のrun関数です。

database/seeds/DatabaseSeeder.php

<?php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        // $this->call(UsersTableSeeder::class);
    }
}

デフォルトではrun関数内のコードはコメントアウトされていますが、先程作成したUsersTableSeederクラスを実行するためにコメントアウトをはずします。

database/seeds/DatabaseSeeder.php

<?php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        $this->call(UsersTableSeeder::class);
    }
}

「php artisan migrate:fresh --seed」コマンドを実行するとUsersTableSeederのrunコマンドが実行されて、データが初期化されます。

$ php artisan migrate:fresh --seed
Dropped all tables successfully.
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table
Seeding: UsersTableSeeder

http://localhost/phpmyadmin にアクセスしてusersテーブルが更新されていることを確認します。

4.2. ユーザリストの表示

ログインした後に表示されるhome画面に登録されたユーザのリストを表示する実装をしてみましょう。編集する部分は「app/Http/Controllers/HomeController.php」のindex関数と「resources/views/home.blade.php」になります。

「app/Http/Controllers/HomeController.php」のindex関数では全ユーザリストを取得して、V(ビュー)にわたす処理を記述します。

app/Http/Controllers/HomeController.php

...
use Illuminate\Http\Request;
use App\User; // ←追記
...
    public function index()
    {   
        $users = User::all(); // ←追記
        return view('home', ['users' => $users]); // ←修正
    }
...

「resources/views/home.blade.php」は前述のbladeサンプルをコピーアンドペーストします。

resources/views/home.blade.php

...
                    You are logged in!

<table class="table table-striped table-bordered">
  <tr>
    <th>ID</th>
    <th>NAME</th>
  </tr>
  @foreach($users as $user)
  <tr>
    <td>{{ $user->id }}</td>
    <td>{{ $user->name }}</td>
  </tr>
  @endforeach
</table>
                </div>
...

「php artisan serve」を実行して http://localhost:8000 にアクセスしてログインするとSeederで初期登録したユーザがリストされます。

この画面遷移(ルーティング)とMVCの関係は下図のとおりです。

http://localhost:8000/login にアクセスするとビュー「login.blade.php」がブラウザに表示されます。このビューのログイン・フォームに値を入れてログインボタンを押下すると「LoginController.php」にユーザIDとパスワードがPOSTされてログイン処理を行い、成功すると「home」にリダイレクトされ、ビュー「home.blade.php」が表示されます。このとき、「HomeController.php」のindex関数が実行され、モデルの「User.php」が取得したユーザ情報を配列とする変数がビューの動的表示に使用されブラウザ上にユーザリストが表示されます。

本件に関連するルーティングの定義は以下の通りです。

+--------+----------+------------------------+------------------+------------------------------------------------------------------------+--------------+
| Domain | Method   | URI                    | Name             | Action                                                                 | Middleware   |
+--------+----------+------------------------+------------------+------------------------------------------------------------------------+--------------+
|        | GET|HEAD | home                   | home             | App\Http\Controllers\HomeController@index                              | web,auth     |
|        | GET|HEAD | login                  | login            | App\Http\Controllers\Auth\LoginController@showLoginForm                | web,guest    |
|        | POST     | login                  |                  | App\Http\Controllers\Auth\LoginController@login                        | web,guest    |
+--------+----------+------------------------+------------------+------------------------------------------------------------------------+--------------+

以上、「4. ユーザリストの表示」が完了です。

次は、「5. ユーザリストのペジネーション表示」です。