Laravel11でLaravel-AdminLTEを利用する

## はじめに

### AdminLTEとは

AdminLTEは、最も広く使われているオープンソースの管理画面テンプレートの1つです。Bootstrapベースで構築され、モダンなデザイン、レスポンシブ対応、豊富なコンポーネントを提供し、管理画面の開発を効率化します。

### Laravel-AdminLTEパッケージとは

[`jeroennoten/Laravel-AdminLTE`](https://github.com/jeroennoten/Laravel-AdminLTE)は、AdminLTEをLaravelで簡単に利用するためのパッケージです。このパッケージを使用することで、AdminLTEの統合、認証画面の生成、メニュー管理などを容易に実装できます。

### 主な特徴

- AdminLTE 3の完全な統合
- カスタマイズ可能なサイドバーメニュー
- ビューコンポーネントとブレードディレクティブ
- 認証ビューの生成機能
- 多言語対応

## 1. プロジェクトの作成とパッケージのインストール

まず、新しいLaravelプロジェクトを作成し、必要なパッケージをインストールします。

新規プロジェクトの作成

```bash
composer create-project laravel/laravel laravel-adminlte-project
cd laravel-adminlte-project

```

AdminLTEパッケージのインストール

```bash
composer require jeroennoten/laravel-adminlte

```

AdminLTEのアセットをインストール

```bash
php artisan adminlte:install

```

上記コマンドにより、以下の3つの主要なリソースがインストールされます：

1. **AdminLTEの配布ファイル** (`public/vendor`フォルダ)
    - AdminLTE本体のファイル
    - Bootstrap
    - jQuery
    - その他の依存ファイル
2. **パッケージの設定ファイル** (`config/adminlte.php`)
    - AdminLTEの基本設定
3. **パッケージの翻訳ファイル** (`lang/vendor/adminlte/`)
    - 多言語対応のための翻訳リソース

## 2. 共通レイアウトの作成

AdminLTEを継承した共通レイアウトを作成します。以下のファイルを作成してください。（[公式のwikiを参考](https://github.com/jeroennoten/Laravel-AdminLTE/wiki/Usage#recommended-way-of-use)）

```php:resources/views/layout/admin.blade.php
@extends('adminlte::page')

{{-- Extend and customize the browser title --}}

@section('title')
    {{ config('adminlte.title') }}
    @hasSection('subtitle') | @yield('subtitle') @endif
@stop

{{-- Extend and customize the page content header --}}

@section('content_header')
    @hasSection('content_header_title')
        <h1 class="text-muted">
            @yield('content_header_title')

            @hasSection('content_header_subtitle')
                <small class="text-dark">
                    <i class="fas fa-xs fa-angle-right text-muted"></i>
                    @yield('content_header_subtitle')
                </small>
            @endif
        </h1>
    @endif
@stop

{{-- Rename section content to content_body --}}

@section('content')
    @yield('content_body')
@stop

{{-- Create a common footer --}}

@section('footer')
    <div class="float-right">
        Version: {{ config('app.version', '1.0.0') }}
    </div>

    <strong>
        <a href="{{ config('app.company_url', '#') }}">
            {{ config('app.company_name', 'My company') }}
        </a>
    </strong>
@stop

{{-- Add common Javascript/Jquery code --}}

@push('js')
<script>

    $(document).ready(function() {
        // Add your common script logic here...
    });

</script>
@endpush

{{-- Add common CSS customizations --}}

@push('css')
<style type="text/css">

    {{-- You can add AdminLTE customizations here --}}
    /*
    .card-header {
        border-bottom: none;
    }
    .card-title {
        font-weight: 600;
    }
    */

</style>
@endpush

```

## 3. 管理画面の作成

共通レイアウトを使用して、実際の管理画面ページを作成します。（[公式のwikiを参考](https://github.com/jeroennoten/Laravel-AdminLTE/wiki/Usage#recommended-way-of-use)）

```php:resources/views/dashboard.blade.php
@extends('layouts.admin')

{{-- Customize layout sections --}}

@section('subtitle', 'Welcome')
@section('content_header_title', 'Home')
@section('content_header_subtitle', 'Welcome')

{{-- Content body: main page content --}}

@section('content_body')
    <p>Welcome to this beautiful admin panel.</p>
@stop

{{-- Push extra CSS --}}

@push('css')
    {{-- Add here extra stylesheets --}}
    {{-- <link rel="stylesheet" href="/css/admin_custom.css"> --}}
@endpush

{{-- Push extra scripts --}}

@push('js')
    <script> console.log("Hi, I'm using the Laravel-AdminLTE package!"); </script>
@endpush

```

## 4. ルーティングの設定

ルートを設定します。

```php

Route::get('/dashboard', function () {
    return view('dashboard');
});

```

## 5. メニューの設定

AdminLTEのメニューを設定します。

```php

return [
    'menu' => [
        //追加
        [
            'text' => 'ダッシュボード',
            'url'  => 'welcome',
            'icon' => 'fas fa-fw fa-tachometer-alt',
        ],
         // 他のメニュー項目
    ],
];

```

## 6. 画面確認

開発サーバーを起動

```bash
php artisan serve

```

ブラウザで以下のURLにアクセスします。
http://127.0.0.1:8000/dashboard

### 実際の画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526782/64e201be-eff9-b749-472f-09a6c20f1383.png)


## 7. ログイン画面を作成する
認証機能はLaravel Breezeを利用します。
```bash
composer require laravel/breeze --dev
php artisan breeze:install

#選択肢は以下を選びました（任意）
 
 ┌ Which Breeze stack would you like to install? ───────────────┐
 │ Blade with Alpine                                            │
 └──────────────────────────────────────────────────────────────┘

 ┌ Would you like dark mode support? ───────────────────────────┐
 │ No                                                           │
 └──────────────────────────────────────────────────────────────┘

 ┌ Which testing framework do you prefer? ──────────────────────┐
 │ PHPUnit                                                      │
 └──────────────────────────────────────────────────────────────┘
 ```

 生成されたログイン画面を以下のように編集する。
 ```php:resources/views/auth/login.blade.php
 @extends('adminlte::auth.login')
 ```
 `.env`を編集して表示を日本語化します。
 
 ```.env
APP_LOCALE=ja
APP_FALLBACK_LOCALE=en
APP_FAKER_LOCALE=ja_JP
```
### 実際の画面

ブラウザで以下のURLにアクセスします。
http://127.0.0.1:8000/login

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526782/f1dc2ed5-abc6-ff2f-4108-0b0113f6521e.png)

## 8. アカウント登録画面を作成
以下のファイルを編集
```php:resources/views/auth/register.blade.php
@extends('adminlte::auth.register')
```
### 実際の画面
ブラウザで以下のURLにアクセスします。
http://127.0.0.1:8000/register

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526782/6017d896-357a-78fd-b724-976c61b6d0eb.png)


## 参考

- [Laravel-AdminLTE 公式ドキュメント](https://github.com/jeroennoten/Laravel-AdminLTE/wiki)
- [AdminLTE 公式サイト](https://adminlte.io/)
- [Laravel 公式ドキュメント](https://laravel.com/docs)