はじめに

AdminLTEとは

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

Laravel-AdminLTEパッケージとは

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

主な特徴

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

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

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

新規プロジェクトの作成

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

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

composer require jeroennoten/laravel-adminlte

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

php artisan adminlte:install

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

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

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

AdminLTEを継承した共通レイアウトを作成します。以下のファイルを作成してください。（公式のwikiを参考）

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を参考）

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. ルーティングの設定

ルートを設定します。


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

5. メニューの設定

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


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

6. 画面確認

開発サーバーを起動

php artisan serve

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

実際の画面

7. ログイン画面を作成する

認証機能はLaravel Breezeを利用します。

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                                                      │
 └──────────────────────────────────────────────────────────────┘

生成されたログイン画面を以下のように編集する。

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

8. アカウント登録画面を作成

以下のファイルを編集

resources/views/auth/register.blade.php

@extends('adminlte::auth.register')

実際の画面

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

参考