【Laravelで管理画面】Laravel admin～基本的なgrid使用方法～

## 前提
* 業務で使っているLaravel-adminについてなかなかWEB上に情報が落ちていないので、「これ使える！」と思ったものを書いていく
* 私の実務経験歴：1か月
* 基本的なLaravelの使い方、Laravel adminの使い方は割愛

### Laravel-adminとは

[公式ドキュメント](https://laravel-admin.org/docs/en)

[demoサイト](https://demo.laravel-admin.org/)

↓Laravel adminの外観
![screencapture-demo-laravel-admin-org-auth-users-2021-09-18-15_32_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780929/4f24df44-3012-b8e4-7699-3a77a8abd006.png)

* Laravelで簡単に管理画面が作れるLaravel用のライブラリ
* 関連のライブラリの中ではトップクラスの更新頻度とGithubのスター数を誇る
  * 直近更新日時：2021/9/18(本記事投稿の2日前)
  * スター数：10.1k

※ 他にもLaravelで使える管理画面[Voyager](https://voyager.devdojo.com/)がある。こちらも更新頻度・スター数ともに優秀

## 開発環境
* Windows 10 Home
* Laravel 8.x
* PHP 7.x
* Laravel admin 1.x

## やりたいこと

**「基本的な管理画面を作成する」**

Laravel adminでは王道のgridを使った実装

↓外観イメージ
![screencapture-localhost-admin-test-public-admin-auth-users-2021-09-19-17_41_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780929/1cbfcb59-3fa4-4021-f676-0c3a6db72dd7.png)


## その前に…
laravel adminを実行した後に
`php artisan migrate:fresh`
などをやると、管理者用ログインデータが消えます(笑)

なので、こちらの記事にある通り、シーダーファイルを作ってください。

※ログインには最低限admin_usersのシーダーがあれば十分ですが、ログイン後の画面を確認するためにも他のテーブルのデータの今のうちに登録しておいた方がいいです。

https://qiita.com/ntm718/items/5ea29ee70b50320352c4

## ソースコード

### Route

* 特に変更なし。以下はインストール直後の`app\Admin\routes.php`
  * 今回は以下routeを使用
  * `$router->resource('users', UserController::class);`
* ちなみに、この`app\Admin\routes.php`は管理画面専用のrouteファイルなので、Laravel本体のrouteファイルである`routes\web.php`とは区別して使用する

```app\Admin\routes.php
Route::group([
    'prefix'        => config('admin.route.prefix'),
    'namespace'     => config('admin.route.namespace'),
    'middleware'    => config ('admin.route.middleware'),
    'as'            => config('admin.route.prefix') . '.',
], function (Router $router) {

    $router->get('/', 'HomeController@index')->name('home');

    $router->resource('users', UserController::class);
    $router->resource('samples', SampleController::class);
});

```
* routeファイルは本家Laravelと基本的に同じ処理

### Controller

* Laravel-adminの処理の軸となるController。画面出力のメイン処理を行うところ。

#### Controllerの生成
* 以下コマンドでModelと一緒に生成

https://laravel-admin.org/docs/en/quick-start#Add%20controller

* 本家のController生成方法と少しコマンドが違う点は注意

```
php artisan admin:make UserController --model=App\\User
// ↓windows user
php artisan admin:make UserController --model=App\User```
```

* インストール以降、特に変更なし。
  * 以下はインストール直後の`app\Admin\Controllers\UserController.php`
* ただの一覧表示は以下のようにgridメソッドを使用

```app\Admin\Controllers\UserController.php
    protected function grid()
    {
        $grid = new Grid(new User());
        $grid->column('id', __('Id'));
        $grid->column('name', __('Name'));
        $grid->column('email', __('Email'));
        $grid->column('email_verified_at', __('Email verified at'));
        $grid->column('password', __('Password'));
        $grid->column('remember_token', __('Remember token'));
        $grid->column('created_at', __('Created at'));
        $grid->column('updated_at', __('Updated at'));
        return $grid;
    }

```

* $gridにUserモデルをインスタンス化したGridクラスを設定
* $gridからcolumnメソッドを使用して、以下のように処理
  * 第１引数：出力したいテーブルのカラム名を指定
  * 第２引数：ラベル名
* 最後に$gridをreturn

#### ちなみに…
* $gridをreturnするだけでなぜ一覧表示が作れるかというとreturn先を見ればなんとなく見えてくる
* reteurn先:`vendor\encore\laravel-admin\src\Controllers\AdminController.php`のindexメソッドのgridメソッド

```vendor\encore\laravel-admin\src\Controllers\AdminController.php
    public function index(Content $content)
    {
        return $content
            ->title($this->title())
            ->description($this->description['index'] ?? trans('admin.list'))
            ->body($this->grid()); // ココ！！！
    }
```
* $contentが生成する画面全体のことで、->(アロー)で中身を構築している構図
* もうちょい深堀するとbodyメソッドで画面大部分（title、description以外）の生成をしていることがわかる

### View
* 不要
  * Viewはライブラリが用意しているモノを使う。

### Model
* Controller生成時、一緒にできる
* こちらも変更はなし
* 構成は本家Laravelと同様

```app\Models\User.php
<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
    use HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name',
        'email',
        'password',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];

    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}

```


### Seeder
* 初期状態ではデータが足りないので、追加します。
※ほんとはFactory作っちゃった方がたくさんデータを作れるのでベター
※パスワードは念のため隠してます。

```database\seeders\AdminTablesSeeder.php
    public function run()
    {
        // create a user.
        Administrator::truncate();
        Administrator::create([
            'username' => 'admin',
            'password' => bcrypt('admin'),
            'name'     => 'Administrator',
        ]);

        // こっから追加

        Administrator::create([
            'username' => 'kuma',
            'password' => bcrypt('****'),
            'name'     => 'kuma',
        ]);
        Administrator::create([
            'username' => 'kumakuma',
            'password' => bcrypt('*****'),
            'name'     => 'kumakuma',
        ]); 
        Administrator::create([
            'username' => 'test taro',
            'password' => bcrypt('*****'),
            'name'     => 'test taro',
        ]);
        Administrator::create([
            'username' => 'tanaka taro',
            'password' => bcrypt('******'),
            'name'     => 'tanaka taro',
        ]);

　　　　// ここまで追加

```

* テストデータを増やしたらSeedを実行

```
php artisan db:seed
or
php artisan db:seed --class=AdminTablesSeeder
```

### 動作確認

`http://localhost/<プロジェクト名>/public/admin/auth/users`へアクセスする。
↓こんな感じになっていればOK！

![screencapture-localhost-admin-test-public-admin-auth-users-2021-09-19-17_41_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780929/1cbfcb59-3fa4-4021-f676-0c3a6db72dd7.png)


### 最後に
* 今回は初期コードをほぼいじらずに表示するだけ。という内容
* まだまだ実用的ではないですが、こんなことできるのね、程度で知ってもらえればいいかなと思います。
* 他にも
  * サイドバーの増やし方
  * もっと違うGridの使い方(画像表示とか)
  * gridのリレーションの使い方
  * ボタンの消し方、増やし方
  * 編集画面、詳細画面の生成方法
  * ...etc

いろいろ使い方はあるので、ちょこちょこ出していきます。

## 参考

[公式ドキュメント](https://laravel-admin.org/docs/en)

[公式ドキュメント-Quick Start](https://laravel-admin.org/docs/en/quick-start)