Laravel5.5こと始め 〜4. ユーザリストの表示〜


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

# 4. ユーザリストの表示

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

## 4.1. ユーザの初期登録
「[2. ユーザログイン機能の追加](https://qiita.com/sonrisa/items/207fd53eced13fc88acf)」で説明したとおり、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テーブルが更新されていることを確認します。

<img width="863" alt="スクリーンショット 2018-07-03 21.07.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/263562/768cca3f-628c-5c33-996b-9c9f0d45f30a.png">


## 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で初期登録したユーザがリストされます。

<img width="693" alt="スクリーンショット 2018-07-09 22.47.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/263562/04348fa4-194e-812c-7d89-c6784322043e.png">

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

<img width="1237" alt="スクリーンショット 2018-06-17 3.55.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/263562/b6c625f1-0b93-21a8-34b6-cbf4006b0a13.png">

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. ユーザリストのペジネーション表示](https://qiita.com/sonrisa/items/86efb8caebe207ab8fa8)」です。