はじめに
Laravel-AdminLTEを使ってみたいと思い導入しました。その導入手順についてまとめます。
AdminLTEとは？
BootstrapベースのCSSフレームワークらしいです。
以下よりAdminLTEのデモを確認できます。
https://adminlte.io/themes/v3/
バックエンドの実装に集中したい！フロントエンドに自信がない！といった方で管理画面などを作りたい場合におすすめかと思います。他にもこういった管理画面を作るものはあるので、良さそうなものを使うといいかと思います。
前提
- macOS Big Sur 11.6.4
- PHP 7.4.21(MAMP)、composerはインストール済み
環境構築
プロジェクト作成
//プロジェクト作成
composer create-project laravel/laravel --prefer-dist プロジェクト名
cd プロジェクト名
//バージョン確認
php artisan --version
--prefer-distオプションについて
--prefer-dist: Reverse of --prefer-source, composer will install from dist if possible. This can speed up installs substantially on build servers and other use cases where you typically do not run updates of the vendors. It is also a way to circumvent problems with git if you do not have a proper setup.
引用：https://kohkimakimoto.github.io/getcomposer.org_doc_jp/doc/03-cli.html
訳）-prefer-sourceの逆で、可能であればdistからインストールします。ビルドサーバーなど、通常ベンダーのアップデートを実行しないような場合に、インストールを大幅に高速化することができます。また、gitの設定が適切でない場合に、その問題を回避する方法でもあります。
MAMP DB設定
- MAMP設定（ポート）
- DB作成
- .envファイルの修正（DB）
- database.phpの修正（DB）
以下のサイトを参考にポート番号を80に変更しましたが、ドキュメントルートをMAMPフォルダ外にしたところうまくいかなかったため、私は8888に戻しました。
参考サイト
Mac×Laravel×MAMPで開発環境構築からデータベース接続まで
その他初期設定
- タイムゾーン変更
- Locale変更
参考サイト
ドキュメントルートの変更
MacでドキュメントルートをMAMP/htdocsではなく、デスクトップのフォルダに変更したところ接続がうまくいきませんでした。ポートを8888に戻したらうまくいきました。
参考：MAMPでポート80でDocumentsがルートだとアクセスできない
MAMPでの複数ローカルホストの立て方（やらなくても可）
もし同じMAMPで複数のプロジェクトを使いたい場合は、ローカルホストの設定をする必要がある。
ドキュメントルートにしたいパスを設定する。
それぞれの設定ファイルは以下の場所にあります。
修正する前に念の為、バックアップをとっておきましょう。
- httpd.conf:MAMP/conf/apache/httpd.conf
- httpd-vhosts.conf:MAMP/conf/apache/extra/httpd-vhosts.conf
先頭の#（コメントアウト）をはずす
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
httpd-vhosts.confの一番下に以下の設定を追加
<VirtualHost *:8888>
DocumentRoot "/Users/ユーザー名/Desktop/project/laravel_dashboard/public"
<Directory "/Users/ユーザー名/Desktop/project/laravel_dashboard/public">
AllowOverride All
</Directory>
</VirtualHost>
参考
Laravel-AdminLTE導入手順
こちらを参考に導入する。
- Laravelプロジェクト作成（完了）
- プロジェクトフォルダまで移動して、AdminLTEをインストール
- AdminLTEに必要なファイル、および追加リソースをインストール
- laraveluiのインストール
- 認証用のviewを作成
- ログイン用のテーブル作成
- アカウント作成
//1.完了済み
//2.プロジェクトフォルダまで移動して、AdminLTEをインストール
composer require jeroennoten/laravel-adminlte
//3.AdminLTEに必要なファイル、および追加リソースをインストール
php artisan adminlte:install
//4.laraveluiのインストール（Laravel7以降）
composer require laravel/ui
php artisan ui bootstrap --auth
//5.認証用のviewを作成（laravel/uiのviewをAdminLTEのものに置き換える）
php artisan adminlte:install --only=auth_views
//6.ログイン用のテーブル作成
php artisan migrate
//7.アカウント作成
http://localhost:8888/register からアカウントを作成
//8.テンプレートの修正
現状は、Laravelのデフォルトのテンプレートとなっている。
そのため、AdminLTEで提供されているブレードテンプレートを使用するように修正する。修正後ページを更新して、ダッシュボードが表示されれば完了。
8.テンプレートの修正で、resources/views/home.blade.phpの中身を以下のものに変える。
@extends('adminlte::page')
@section('title', 'Dashboard')
@section('content_header')
<h1>Dashboard</h1>
@stop
@section('content')
<p>Welcome to this beautiful admin panel.</p>
@stop
@section('css')
<link rel="stylesheet" href="/css/admin_custom.css">
@stop
@section('js')
<script> console.log('Hi!'); </script>
@stop
AdminLTEのログイン画面
テンプレート修正後、以下のようなページが表示されれば導入完了
メモ
「php artisan adminlte:install」このコマンドは、AdminLTEテンプレートとその依存関係（Bootstrap、jQueryなど）をpublic/vendorフォルダーにインストールし、パッケージ構成をconfig/adminlte.phpファイルにインストールし、パッケージの変換をresources/lang/vendor/adminlte/フォルダーにインストールします。
引用元：Installation
参考
カスタマイズ 追記2022/8/11
注意
自分でソースを見て判断しただけなので、正確性は保証しません。
カスタマイズがしたい
実際に使用するにあたり、テンプレートで新たにjsやcssファイルを読み込みたいシーンがありました。
ただ、どこで追加すれば良いのかわからなかったのでadmin-lteのソースを追ってみることにしました。
admin-lteのファイルはvendor/jeroennoten/laravel-adminlteにあります。
まずはテンプレートがどこのものを継承しているか把握してみます。
デフォルトであるresources/views/home.blade.phpを見ると以下のものを継承している様です。
@extends('adminlte::page')
このadminlte::pageというのが、おそらくvendor/jeroennoten/laravel-adminlte/resources/views/page.blade.phpではないかと思います。
また、このpage.blade.phpは同じ階層のmaster.blade.phpを継承しています。
なので、カスタマイズしたい場合はこの辺りを読んでいけばいいと思います。
jsとcssファイルを追加で読み込みたい
どのテンプレートを継承しているか目星がついたので、ここではjsとcssファイルを読み込む様にしたいと思います。
基本的にvendeorのファイルは修正しないというイメージなので、継承先のhome.blade.phpで対応します。
home.blade.phpの継承もとであるpage.blade.phpとmaster.blade.phpには以下の様なディレクティブが用意されています。
@yield('adminlte_css')
@yield('adminlte_js')
@section('adminlte_css')
@stack('css')
@yield('css')
@stop
@section('adminlte_js')
@stack('js')
@yield('js')
@stop
なので、home.blade.php上で読み込みたいスタイルのファイルを記載すればOK
@section('css')
<link rel="stylesheet" href="{{ asset('/css/hoge.css') }}">
@stop
@section('js')
<script src="{{ asset('/js/hoge.js') }}"></script>
@stop
最初のうちはいまいちbladeの使い方もわからずmaster.blade.phpを直接修正してしまっていたが、vendorのファイルはバージョン管理していないこともあり修正すべきではない。
このように継承先で対応できるということを学んだのでメモとして残しておく。