Laravel開発：５．管理画面（Voyager）のカスタマイズ

[こちらの内容はブログにアップしています。](https://ksysnote.com/php/laravel-voyager-custom/)

<h3>はじめに</h3>
https://ksysnote.com/php/laravel-crud/

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

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

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

VoyagerはViewとControllerをカスタマイズする方法も提供していますので、今回はそれを利用していきたいと思います。
<h4>環境：</h4>
OS : macOS High Sierra 10.13.6

MAMP : 5.1

Laravel : 5.7.6
<h3>おさらい</h3>
[前回のときに](https://ksysnote.com/php/laravel-crud/)顧客テーブルを作成したので、管理画面から確認できるようにします。

Voyagerの画面から「Tools &gt; Database」を表示します。
<p id="qLejXQh"><img class="alignnone size-full wp-image-124 " src="https://ksysnote.com/wp-content/uploads/2018/10/img_5bc438f81296e.png" alt="" /></p>
「Add BREAD to this table」ボタンからBREADを作成します。

以下のような画面が出ますが、下までスクロールをして「Submit」をクリックします。
<p id="dmIEPGW"><img class="alignnone size-full wp-image-125 " src="https://ksysnote.com/wp-content/uploads/2018/10/img_5bc43931dc935.png" alt="" /></p>
そうすると以下のような画面が簡単に作成できます。
<p id="FwAvEbd"><img class="alignnone size-full wp-image-126 " src="https://ksysnote.com/wp-content/uploads/2018/10/img_5bc439931d2b7.png" alt="" /></p>
これだけでも十分便利なのですが、ここから今回はカスタマイズをしていきたいと思います。
<h3>Viewをオーバーライドする</h3>
公式のページでもオーバービューについて説明があります。

https://voyager.readme.io/docs/overriding-views

<span class="marker">resources/views/vendor/voyager/slug-name</span> というディレクトリを用意して以下の２ファイルを用意するだけです。

・brose.blade.php

・edit-add.blade.php

「slug-name」が今回は<span class="marker">customer</span>に置き換わります。

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

デフォルトは、<span class="marker">vendor/tcg/voyager/resources/views/bread</span> にあります。
<h3>Controllerの参照先を変更する</h3>
一つだけControllerの参照先を変更する場合は、BREADの設定を変更するだけで可能です。

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

https://voyager.readme.io/docs

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

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

&nbsp;
<p id="vGiKhRf"><img class="alignnone size-full wp-image-127 " src="https://ksysnote.com/wp-content/uploads/2018/10/img_5bc43ec5538f7.png" alt="" /></p>
<span class="marker">\App\Http\Controllers\Voyager\CustomerController</span> とします。

実際にCustomerControllerを作成します。

<span class="marker">vendor\tcg\voyager\src\Http\Controllers\VoyagerBaseController.php</span> を <span class="marker">\App\Http\Controllers\Voyager\CustomerController.php</span> にコピーします。

後は、namespaceとclass名と継承先を変更するだけです。
<pre class="EnlighterJSRAW">&lt;?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
{</pre>
<h3>最後に</h3>
今回の対応ではデフォルトのビューとコントローラを使用していますので、結果は同じですが参照しているファイルが違いますので独自の処理を追加していくことができます。

&nbsp;