内容
以下の順番にまとめます。
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」の中身は以下の通りです。
<?php
use Illuminate\Database\Seeder;
class UsersTableSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
//
}
}
このプログラムのrun関数の中にUserモデルを使った初期化のコードを埋め込みます。 ここではtest1、test2、test3の3ユーザを登録するプログラムになっています。
<?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関数です。
<?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クラスを実行するためにコメントアウトをはずします。
<?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(ビュー)にわたす処理を記述します。
...
use Illuminate\Http\Request;
use App\User; // ←追記
...
public function index()
{
$users = User::all(); // ←追記
return view('home', ['users' => $users]); // ←修正
}
...
「resources/views/home.blade.php」は前述のbladeサンプルをコピーアンドペーストします。
...
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. ユーザリストのペジネーション表示」です。