今回は新しくリリースされたLaravel6にAdminLTEライブラリを入れていきます。
環境
・php7.3.4
・composer 1.8.5
・Laravel 6.0
とりあえず導入する
$ composer require jeroennoten/laravel-adminlte
上のコマンドでインストールします。
私の環境でインストールした場合、versionは1.27となっていました。
config/app.phpの設定
「composer require」で組み込んだものは大体ここを見て、確認します。
137行目に’providers’ ⇒ [ があります。
分かりやすいように一番下に追加して、ついでにコメントもつけておきます。
サービスプロバイダの役割は各Laravelの書籍で詳しく学べますが、主に以下の3つです。
1.サービスコンテナへのバインド
2.イベントリスナーやミドルウェア、ルーティングの登録
3. 外部コンポ―ネントを組み込む
assetsファイルの設定
/public/vendor/adminlte のcss をコピーして、適用させます。
$ php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=assets
/config/adminlte.php の作成
AdminLTE用の設定ファイルを作成します。
$ php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=config
View ファイルを作成する
テンプレートをカスタマイズできる View ファイルを生成するためのコマンドは以下の通り。
php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=views
/resources/views/vendor/adminlte 下に 各ファイルが作成されます。
ホーム画面を作成、設定する
/resorces/views/home.blade.php を作成して、以下のように記述します。
<!-- adminlte::pageを継承 --> @extends('adminlte::page') <!-- タイトル --> @section('title', 'Dashboard') <!-- 見出し --> @section('content_header') <h1>Dashboard</h1> @stop <!-- 内容 --> @section('content') <p>Welcome to this beautiful admin panel.</p> @stop
Routeを設定する
/route/web.php を以下のように記述します。
<?php /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('/', function () { //return view('welcome'); return view('home'); //←追加 });
これで初期で resources/views/welcome.blade.php ではなく、resources/views/home.blade.php がホーム画面に適用されるようになります。
Lang クラスのメソッド名が変更されている
ここで一旦アクセスしてみます。
エラーが出ました。
ドキュメントによるとLangクラスのメソッド名の変更が原因のようです。
https://readouble.com/laravel/6.0/ja/upgrade.html#trans-and-trans-choice
エラー画面でも問題のある個所が表示されますが、AdminLTEの「Menu」部分でこのクラスが使われているようです。
結論を言いますと、
/vendor/jeroennoten/laravel-adminlte/src/Menu/Filters/LangFilter.php
が原因のファイルです。
この中で「trans」が使われていますので、これをドキュメント通り「get」に変更することで解決します。
※20行目、23行目あたり。計2か所。
変更前
20行目 $this->langGenerator->trans(‘adminlte::menu.’.$item[‘header’]) : $item[‘header’];
23行目 $this->langGenerator->trans(‘adminlte::menu.’.$item[‘text’]) : $item[‘text’];
変更後
20行目 $this->langGenerator->get(‘adminlte::menu.’.$item[‘header’]) : $item[‘header’];
23行目 $this->langGenerator->get(‘adminlte::menu.’.$item[‘text’]) : $item[‘text’];
サーバーの環境に合わせる
もう一度アクセスして画面を確認してみます。
CSSが読み込まれていません。
パスが通っていないようです。これはエックスサーバーでLaravelを設置したとき、サブドメインで動かすように設置したので、assetのパスが解決していないことが原因でした。
>>前回の記事
/$HOME/public_html/(サブドメイン)/(プロジェクト名)/public
にcssを読み込ませるように、adminLTE内で使われているasset()のパスを以下のように変更します。
● resources/views/vendor/adminlte/master.blade.php
計7か所
asset(‘vendor/adminlte/vendor/bootstrap/dist/css/bootstrap.min.css’)
asset(‘vendor/adminlte/vendor/font-awesome/css/all.min.css’)
asset(‘vendor/adminlte/vendor/Ionicons/css/ionicons.min.css’)
asset(‘vendor/adminlte/dist/css/AdminLTE.min.css’)
asset(‘vendor/adminlte/vendor/jquery/dist/jquery.min.js’)
asset(‘vendor/adminlte/vendor/jquery/dist/jquery.slimscroll.min.js’)
asset(‘vendor/adminlte/vendor/bootstrap/dist/js/bootstrap.min.js’)
● resources/views/vendor/adminlte/page.blade.php
計2か所
asset(‘vendor/adminlte/dist/css/skins/skin-‘ . config(‘adminlte.skin’, ‘blue’) . ‘.min.css’)
asset(‘vendor/adminlte/dist/js/adminlte.min.js’)
これらのパスを
asset(‘(プロジェクト名)/vendor~~~’)
となるように変更します。
私の場合は、asset(‘laravel/public/vendor~~~’)
となります。
ここまで変更して、もう一度画面を見てみます。
ようやく出ました。
参考URL:
Laravel6.0 アップデートメモ
https://qiita.com/a_yasui/items/12d3b2d6ac2f29d364c9
【Laravel × AdminLTE】AdminLTE をインストールして使ってみる
https://daiki-sekiguchi.com/2018/08/18/laravel-adminlte-install/