Laravel-AdminLTEの導入手順

# はじめに
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設定
1. MAMP設定（ポート）
2. DB作成
3. .envファイルの修正（DB）
4. database.phpの修正（DB）

以下のサイトを参考にポート番号を80に変更しましたが、ドキュメントルートをMAMPフォルダ外にしたところうまくいかなかったため、私は8888に戻しました。

### 参考サイト
[Mac×Laravel×MAMPで開発環境構築からデータベース接続まで](https://qiita.com/URZUKE/items/6610f5fc0253d45e3c81)

## その他初期設定
1. タイムゾーン変更
2. Locale変更

### 参考サイト
[【Laravel】Laravel初期設定](https://qiita.com/LingmuSajun/items/897b6f55e79d08eaed3f)


## ドキュメントルートの変更
MacでドキュメントルートをMAMP/htdocsではなく、デスクトップのフォルダに変更したところ接続がうまくいきませんでした。ポートを8888に戻したらうまくいきました。

参考：[MAMPでポート80でDocumentsがルートだとアクセスできない](https://teratail.com/questions/323633)


## MAMPでの複数ローカルホストの立て方（やらなくても可）
もし同じMAMPで複数のプロジェクトを使いたい場合は、ローカルホストの設定をする必要がある。
ドキュメントルートにしたいパスを設定する。

それぞれの設定ファイルは以下の場所にあります。
修正する前に念の為、バックアップをとっておきましょう。

- httpd.conf:MAMP/conf/apache/httpd.conf
- httpd-vhosts.conf:MAMP/conf/apache/extra/httpd-vhosts.conf

```httpd.conf
先頭の#（コメントアウト）をはずす
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
```

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>
```

### 参考
[MAMPでの複数のローカルホストのたてかた！](https://qiita.com/tsukishimaao/items/cab4caa065d901608856)


# Laravel-AdminLTE導入手順
こちらを参考に導入する。

https://github.com/jeroennoten/Laravel-AdminLTE/wiki/Installation


1. Laravelプロジェクト作成（完了）
2. プロジェクトフォルダまで移動して、AdminLTEをインストール
3. AdminLTEに必要なファイル、および追加リソースをインストール
4. laraveluiのインストール
5. 認証用のviewを作成
6. ログイン用のテーブル作成
7. アカウント作成


```
//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`の中身を以下のものに変える。

```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のログイン画面
![スクリーンショット 2022-03-26 19.01.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381376/a738450f-a68e-a040-ceae-0645958e3458.png)


テンプレート修正後、以下のようなページが表示されれば導入完了
![スクリーンショット 2022-03-26 19.10.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381376/a80a0f44-fff6-ca08-f8aa-c3446ead8087.png)


メモ
>「php artisan adminlte:install」このコマンドは、AdminLTEテンプレートとその依存関係（Bootstrap、jQueryなど）をpublic/vendorフォルダーにインストールし、パッケージ構成をconfig/adminlte.phpファイルにインストールし、パッケージの変換をresources/lang/vendor/adminlte/フォルダーにインストールします。
引用元：[Installation](https://github.com/jeroennoten/Laravel-AdminLTE/wiki/Installation)


### 参考
https://github.com/jeroennoten/Laravel-AdminLTE/wiki/Installation

https://github.com/jeroennoten/Laravel-AdminLTE


# カスタマイズ　追記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には以下の様なディレクティブが用意されています。

```php:master.blade.php
@yield('adminlte_css')

@yield('adminlte_js')
```

```php:page.blade.php
@section('adminlte_css')
    @stack('css')
    @yield('css')
@stop

@section('adminlte_js')
    @stack('js')
    @yield('js')
@stop
```

なので、home.blade.php上で読み込みたいスタイルのファイルを記載すればOK
```php:home.blade.php
@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のファイルはバージョン管理していないこともあり修正すべきではない。
このように継承先で対応できるということを学んだのでメモとして残しておく。