Laravel-adminの導入

Laravel-adminでインストール、CRUD、CSVインポートの方法まで説明します。

Laravel-adminのインストール

z-song/laravel-admin
Build a full-featured administrative interface in ten minutes - z-song/laravel-admin
composer require encore/laravel-admin
php artisan vendor:publish --provider="Encore\Admin\AdminServiceProvider"
php artisan admin:install

ここまでやるとDBにいろいろテーブルが作成されています。
ファイルで設定せずに、管理画面上で管理画面のメニューバーなどの更新できる構成になっています。

デモ画面

http://laravel-admin.org/demo/

ドキュメント

Laravel-admin

ユーザーの追加

管理画面からユーザーを追加しようとすると以下のエラーが出ました。

Disk [admin] not configured, please add a disk config in `config/filesystems.php`.

以下のリンク先の通りに設定します。

Laravel-admin

ページを追加する

標準では以下のページが作成されています。

/admin
/admin/auth/***

銘柄情報のCRUDをもつ/admin/stocksページを追加します。
管理画面のAdmin->Menuに以下の情報を入力し作成しました。

更新するとサイドバーにリンクは反映されていますが、ページは見つかりません。
コントローラーとルーティングの設定をする必要があります。

app/Stock.phpがある状態で、管理画面のコントローラーを生成します。

php artisan admin:make StockController --model=App\\Stock

ルーティングを追加します。

$router->resource('stocks', StockController::class);

これだけでCRUDをもったページが完成しました。
colorというカラムであれば、自動でカラーマップの入力が付くみたいですね。すばらしい。

データの挿入も問題ありません。



CSVをインポートしたい

標準でCSVエクスポート機能はあるのですが、インポート機能がありません。

Laravel-admin

ドキュメントを参考にして、追加してみます。

Laravel-Excelのインストール

最新のバージョンではloadメソッドが削除されているので、以下のバージョンをインストールします。

"require": {
    "maatwebsite/excel": "~2.1.0"
}

アップロードのボタンの用意

app/Admin/Extensions/Tools/ImportButton.phpを作成します。
以下のコードでImportボタンと、ボタンの処理に関するスクリプトを設置しています。
ここはjQueryで書くのが良さそうです。

<?php

namespace App\Admin\Extensions\Tools;

use Encore\Admin\Admin;
use Encore\Admin\Grid;
use Encore\Admin\Grid\Tools\AbstractTool;
use Illuminate\Support\Facades\Request;

class ImportButton extends AbstractTool
{

    /**
     * Set up script for import button.
     */
    protected function setUpScripts()
    {
        $script = <<<SCRIPT

function handleFileSelect(evt) {
    var file = evt.target.files; // FileList object
    var fileName = file[0].name;
    
    $('#input').hide();
    $('#confirm').show();
    $('#confirm .text').text(fileName);
}

$('#files').on('change', handleFileSelect);

$('#confirm').on('click', function() {

    var formData = new FormData();
    if ($("input[name='csvfile']").val()!== '') {
        formData.append( "file", $("input[name='csvfile']").prop("files")[0] );
    }
    formData.append("_token", LA.token);

    $.ajax({
        method: 'post',
        url: '/admin/stocks/csv/import',
        data: formData,
        processData: false,
        contentType: false,
        success: function () {
            $.pjax.reload('#pjax-container');
            toastr.success('アップロード成功');
        }
    });
});

SCRIPT;

        Admin::script($script);
    }

    /**
     * Render Import button.
     *
     * @return string
     */
    public function render()
    {

        $this->setUpScripts();

        $import = 'Import';

        return <<<EOT

<div class="pull-right" style="margin-right: 10px">
    <label id="input">
        <span class="btn btn-sm btn-twitter">
            <span><i class="fa fa-upload"></i> {$import}</span>
            <input type="file" id="files" name="csvfile" style="display:none">
        </span>
    </label>
    <span id="confirm" class="btn btn-sm btn-twitter" style="display:none">
        <span><i class="fa fa-upload"></i> <span class="text"></span></span>
    </span>
</div>
EOT;

    }
}

コントローラーにimport、DBに保存する処理を追加

先ほど用意したボタンのスクリプトのPOST送信先の処理をコントローラーに追加します。
app/Admin/Controllers/StockController.php

class StockController extends Controller
{
    ...

    /**
     * Import interface.
     */
    protected function import(Content $content, Request $request)
    {
        $file = $request->file('file');
        $reader = Excel::load($file->getRealPath());

        $rows = $reader->toArray();

        foreach ($rows as $row){
            // firstOrNewで条件に合致したものがあればfirst()で取得し、なければnewでインスタンス生成
            $record = $this->stock->firstOrNew(['code' => $row['code']]);
            $record->fill($row)->save();
        }
        return redirect('admin/stocks');
    }
}

ルーティングの追加

app/Admin/routes.php

$router->post('stocks/csv/import', 'StockController@import');

以上でCSVのインポート機能の追加が出来ました。

CSVをカスタマイズしてエクスポートしたい

基本的に以下の方法で問題ありませんでした。

http://laravel-admin.org/docs/#/en/model-grid-export

古いバージョンだと動かなかったので、composer updateしてください。
1.6.3で動作確認済み。

新版本中控制器创建Grid新写法不传递回调导致export()方法不可用 · Issue #2491 · z-song/laravel-admin
Laravel Version: 5.7.2 PHP Version: 7.1.9 Laravel-admin: 1.6.0 Description: 新生成的控制器直接$grid = new Grid(new Model()),然后在下边为grid添加字段信息。这时候调用$grid->export()设置exp...

まとめ

管理画面の基本的な機能であればすぐに実装可能であり、非常にいいパッケージです。
カスタマイズしようと思うと情報が少なく、苦労するかもしれません。

有料でもいいならば、以下のNovaも検討してみてください。

Laravel Nova と laravel-admin を比較してみる - Qiita
## この記事について Laravel のメイン開発者である Taylor Otwell さん謹製の、管理者用サイト(サブサイト)作成パッケージである Laravel Nova(以下 Nova)と、同様のツールで、以前から存在する ...

コメント