人気のPHP WEBアプリケーションフレームワークLaravelのTipsを記録していきます

Laravel Voyager を使用する

● Voyager

オリジナルのCMSや管理画面を作りたい時に、面倒な色々の準備をやってくれるのが Voyager です。
必要最低限の機能がかなりのクォリティで用意されています。

https://github.com/the-control-group/voyager

● Voyager のインストラクションビデオ

( 必ず見るようにしましょう。 簡潔に説明してくれています。)

https://laravelvoyager.com/academy/configurations/

● Voyager のインストール

Laravel コマンドでアプリを作成した後に次のコマンドを入力します

・1. laravelコマンドでアプリを作成

composer create-project "laravel/laravel=5.7.*" my_app
cd my_app

・2. composer で Voyagerをインストール

composer require tcg/voyager

・2-B. インストールした Laravel , Voyager のバージョンを確認

composer show

laravel と voyager だけ表示させる

composer show | grep -e laravel/framework -e tcg/voyager

リストの中の次のバージョンを確認する(何か問題が発生した時はバージョンを考慮して検索しましょう)

laravel/framework                     v5.7.28 
tcg/voyager                           v1.1.12

・3-A. .env に DB設定を書き込む

適宜変更します

https://YOUR-SERVER-NET
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

・3-B. Laravel の varcharのデフォルト文字数を191文字にして(191*4 = 764バイト) 767バイトより小さくする

app\Providers\AppServiceProvider.php

// ↓ この行を追加
use Illuminate\Support\Facades\Schema;

    public function boot()
    {
        // ↓ この行を追加
        Schema::defaultStringLength(191);
    }

・4. php artisan voyager コマンドからインストールする

・ダミーデータも一緒にインストールする場合
php artisan voyager:install --with-dummy

(↑ このコマンドでDBデータも自動作成されます)

・管理ユーザーを設定してインストールする場合
php artisan voyager:install
php artisan voyager:admin your@email.com --create

・5. Voyagerにアクセスします

https://<your-site>/admin

admin@admin.com
password

● nginx で Voyager を動作させる

Voyager 1.2 以降から

{{ voyager_asset('lib/css/responsive.dataTables.min.css') }}

の様な形で voyager_asset が追加されました。 「今まで public ディレクトリ以下にファイルをコピーしていた代わりに内部ファイルを返す」 といったものです。これが標準の nginx では動作しない可能性があります。

・nginx設定ファイルに以下を追加

location ~* .(js|css|jpg|png|gif|svg|woff|ttf)$ {
	try_files $uri $uri/ /index.php?$args;
}
nginx -s reload

これで読み込まれます。

 

● 管理画面の見た目のカスタマイズ

・1. 管理画面を日本語にローカライズする

右上のメニューから「Profile」 →「Edit My Profile」→「Locale を ja にセットする」

・2. 管理画面のローディングアイコンを変更する

「Settings」→「Admin」→「Admin Loader」に画像をアップロードする

・3. 管理画面のログイン画面のメイン画像を変更する

こちらの画像ファイルを変更します。

/public/vendor/tcg/voyager/assets/images/bg.jpg

デフォルトでは画像サイズ「1800ox * 1200px 」となっています。

・4. 管理画面のBREDのテンプレートビューを変更する

管理画面のBREDのテンプレートビューを変更するには次の位置に Bladeテンプレートファイルを作成します。

(詳細表示 : browse)を変更する場合

/resources/views/vendor/voyager/<テーブル名>/browse.blade.php

元の管理画面を参考に変更したい場合は次のファイルの内容をコピーします。

vendor/tcg/voyager/resources/views/bread/browse.blade.php

解説: https://laravelvoyager.com/academy/views/

・5. 管理画面のBREDのレイアウトテンプレートを変更する

vendor/tcg/voyager/resources/master.blade.php

 ↓ コピーする

resources/views/vendor/voyager/master.blade.php

・4. Voyager 管理画面のBREDのテンプレートビュー(Blade)内で権限により処理を変える

例: BREADのリスト表示で
「admin の role を持つ場合は表示させる」
「user の role の場合は Policy(別途作成が必要)により TCG\Voyager\Actions\EditAction が可能な場合は表示させる」
を Bladeテンプレートに記述します。

@if (Auth::user()->hasRole('admin'))
    <!-- admin -->
@else
    @php
        $edit_action = new TCG\Voyager\Actions\EditAction($dataType, $data);
    @endphp
    @can($edit_action->getPolicy(), $data)
        @php echo '<!-- user (edit可能です)-->'; @endphp
    @else
        @php echo '<!-- user (edit ×不可能です)-->'; @endphp
        @continue
    @endcan
@endif

・6. 管理画面のBREDのコントローラを変更する

管理画面のBREDのコントローラーを変更するには次の位置に コントローラーファイルを作成します。

例: (EstimateController)を変更する場合

app/Http/Controllers/EstimateController.php

app/Http/Controllers/EstimateController.php を次のようにします。( VoyagerBaseController を継承して中身が空のコントローラを作成 )

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use TCG\Voyager\Database\Schema\SchemaManager;
use TCG\Voyager\Events\BreadDataAdded;
use TCG\Voyager\Events\BreadDataDeleted;
use TCG\Voyager\Events\BreadDataUpdated;
use TCG\Voyager\Events\BreadImagesDeleted;
use TCG\Voyager\Facades\Voyager;
use TCG\Voyager\Http\Controllers\Traits\BreadRelationshipParser;

class  EstimateController extends \TCG\Voyager\Http\Controllers\VoyagerBaseController
{
}

 
元の管理画面を参考に変更したい場合は次のコントローラーファイルの内容をコピーします。

vendor/tcg/voyager/src/Http/Controllers/VoyagerBaseController.php

最後にVoyager の BREAD から 対象となるDBテーブルの「コントローラー名」に「\App\Http\Controllers\EstimateController」を指定します。 (必須です) これで作成したコントローラが使用されます。

● Voyager に 独自cssを追加する

1. /config/voyager.php の以下を変更します。

    'additional_css' => [
        'storage/css/voyager_custom.css',
    ],

storage/app/public/css/voyager_custom.css にcssファイルを置きます

2. css を設置します

<My-APP>/public/css/voyager_custom.css

● Voyager チートシート

https://voyager-cheatsheet.ulties.com/

● Google Analytics API を使用する

https://goo.gl/JrtvkG

● 設定ファイル

/config/voyager-hooks.php
/config/voyager.php

● WordPressデータをインポートしたい

https://github.com/thedevdojo/wordpress-import

● 辞書ファイルの場所

辞書ファイル(日本語)はこちらにあります。

/vendor/tcg/voyager/publishable/lang/ja

● Voyager の ユーザーモデルを変更する

app/User.php

<?php
namespace App\Models;
use TCG\Voyager\Models\User as VoyagerUser;
class User extends VoyagerUser {
    // add custom mutators and other code in here
}

app/config/voyager.php

'user' => [
    'add_default_role_on_register' => true,
    'default_role'                 => 'user',
    'admin_permission'             => 'browse_admin',
    'namespace'                    => App\User::class,
],

● BREADの options を使用する

BREADのオプションに任意のパラメータを設定した場合は次のように $row->details から参照できます。

例)編集画面にコメントを表示させる
resources/views/vendor/voyager/<BREAD名>/edit-add.blade.php

{{-- コメント表示 --}}
@php 
if ( @$row->details->comment ){
    echo '<small>';
    echo $row->details->comment;
    echo '</small>';
}
@endphp
{{-- / コメント表示 --}}

なお、編集時に項目の見出しをつけるには

{
    "legend": {
        "text": "○○編集エリア"
    }
}

のように指定すると見出しが表示されます。

引用 : https://goo.gl/ydJEd6

● BREAD画面でリレーションにリンクをつける

https://github.com/the-control-group/voyager/issues/2008

● Select Dropdown を使った BREAD のリレーション設定方法

・1. 入力タイプを「Select Dropdown」を選択する

・2. オプション詳細を次のように記述する

{
    "relationship": {
        "key": "id",
        "label": "name"
    }
}
No.1438
04/10 11:38

edit