Edited at

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

More than 1 year has passed since last update.


内容

以下の順番にまとめます。

1. MacへのXAMPP+Laravelインストール

2. ユーザログイン機能の追加

3. MVCとルーティングの説明

4. ユーザリストの表示 ←いまここ

5. ユーザリストのペジネーション表示

6. ユーザ管理APIの追加

7. Vue.jsとAPIベースのユーザ管理アプリの追加準備

8. Vue.jsとAPIベースのユーザ管理アプリの追加

9. Vue.jsとAPIベースのユーザ管理アプリへのペジネーション追加

10. APIへのJWTAuth認証の追加

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テーブルが更新されていることを確認します。

スクリーンショット 2018-07-03 21.07.52.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で初期登録したユーザがリストされます。

スクリーンショット 2018-07-09 22.47.14.png

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

スクリーンショット 2018-06-17 3.55.16.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. ユーザリストのペジネーション表示」です。