Laravel開発:5.管理画面(Voyager)のカスタマイズ

PHP

はじめに

Laravel開発:4.CRUDの作成
はじめに こちらの続きとなっています。 今回はLaravelでCRUDを作成していきたいと思います。特に難しい機能はありませんが、登録・一覧・詳細・編集画面と削除の動作するところまでを目標とします。 無駄にカラムを多く...

こちらの続きとなっています。

管理画面を簡単に作成できるVoyagerを使用することによって、簡単にソースを触ることなくテーブルのBREADが作成できるようになりました。

簡単な一覧・詳細・編集・追加・削除ならこれで問題はないのですが、ちょっとした処理を加えたい場合はカスマイズをする必要があります。

VoyagerはViewとControllerをカスタマイズする方法も提供していますので、今回はそれを利用していきたいと思います。

環境:

OS : macOS High Sierra 10.13.6

MAMP : 5.1

Laravel : 5.7.6

おさらい

[前回のときに](https://it-kunip.site/php/laravel-crud/)顧客テーブルを作成したので、管理画面から確認できるようにします。

Voyagerの画面から「Tools > Database」を表示します。

「Add BREAD to this table」ボタンからBREADを作成します。

以下のような画面が出ますが、下までスクロールをして「Submit」をクリックします。

そうすると以下のような画面が簡単に作成できます。

これだけでも十分便利なのですが、ここから今回はカスタマイズをしていきたいと思います。

Viewをオーバーライドする

公式のページでもオーバービューについて説明があります。

Overriding Views
Learn how to override views within your Voyager app

resources/views/vendor/voyager/slug-name というディレクトリを用意して以下の2ファイルを用意するだけです。

・brose.blade.php

・edit-add.blade.php

「slug-name」が今回はcustomerに置き換わります。

brose.blade.phpとedit-add.blade.phpは、デフォルトを参考に変更していけばいいかと思います。

デフォルトは、vendor/tcg/voyager/resources/views/bread にあります。

Controllerの参照先を変更する

一つだけControllerの参照先を変更する場合は、BREADの設定を変更するだけで可能です。

公式ドキュメントでは、Voyagerで参照するController全てを変更するやり方がありました。

Welcome
Voyager Documentation for Version 1.1 (still in development)

config/voyager.php の controllers を変更して、php artisan voyager:controllers を実行するやり方ですが、今回は部分的に参照先を変更するやり方で行きたいと思います。

BREADの編集画面からControllerを変更します。

 

\App\Http\Controllers\Voyager\CustomerController とします。

実際にCustomerControllerを作成します。

vendor\tcg\voyager\src\Http\Controllers\VoyagerBaseController.php を \App\Http\Controllers\Voyager\CustomerController.php にコピーします。

後は、namespaceとclass名と継承先を変更するだけです。

<?php

namespace App\Http\Controllers\Voyager;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Str;
use TCG\Voyager\Database\Schema\Column;
use TCG\Voyager\Database\Schema\SchemaManager;
use TCG\Voyager\Database\Schema\Table;
use TCG\Voyager\Database\Types\Type;
use TCG\Voyager\Events\BreadAdded;
use TCG\Voyager\Events\BreadDeleted;
use TCG\Voyager\Events\BreadUpdated;
use TCG\Voyager\Facades\Voyager;
use TCG\Voyager\Http\Controllers\VoyagerBaseController;
use TCG\Voyager\Http\Controllers\VoyagerBreadController;
use TCG\Voyager\Models\DataRow;
use TCG\Voyager\Models\DataType;
use TCG\Voyager\Models\Permission;
use TCG\Voyager\Http\Controllers\Traits\BreadRelationshipParser;

class CustomerController extends VoyagerBaseController
{
    use BreadRelationshipParser;

最後に

今回の対応ではデフォルトのビューとコントローラを使用していますので、結果は同じですが参照しているファイルが違いますので独自の処理を追加していくことができます。

 

コメント

  1. […] こちらの内容はブログにアップしています。 […]