Laravel10 AdminLTEをインストール(導入) Windows[動画あり]

Laravel10でAdminLTEをインストールする方法をご紹介します。

自分で設定するときに試行錯誤したため、備忘録です。

動画で操作イメージが しっかり掴めますっ👇

AdminLTEインストール手順

1.　cdコマンドで「C:\xampp\htdocs」に移動してから、
　　新規プロジェクトを作成します。
　　すでにプロジェクトがある場合は、この手順は飛ばしてください。

cd C:\xampp\htdocs

laravel new testlaravel

プロジェクトができました。

2.　「cdコマンド」で作成したLaravelプロジェクトに移動します。

cd C:\xampp\htdocs\testlaravel

3.　Composerを介して、AdminLTEのテンプレートを使用するために
　　必要なパッケージをインストールします。

composer require jeroennoten/laravel-adminlte

4.　Laravelプロジェクトに、AdminLTEテンプレートをインストールするための
　　Laravel Artisanコマンドを実行します。

php artisan adminlte:install

サンプルページの作成

1.　viewファイルを作成してコードを入力します。
　　こちらのコードを参考にしました。
　　https://github.com/jeroennoten/Laravel-AdminLTE/wiki/Usage

resources\views\adminlte.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

2.　ルート登録をします。

routes\web.php

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

3.　サーバーを立ち上げて、サイトにアクセスします。

　　私の場合は、XAMPPを立ち上げて以下にアクセスしました。
　　http://localhost/testlaravel/public/adminlte

　　AdminLTEがインストールできました。

日本語を適用する

1.　サイドバーが英語表記になっているため、日本語に変更します。

　　Laravelプロジェクトの多言語化に関連する言語ファイルを
　　公開するためにArtisanコマンドを実行します。

php artisan lang:publish

2.　Laravel Breezeの日本語対応版をインストールします。

composer require askdkc/breezejp --dev

3.　日本語対応のLaravel Breezeのセットアップを行います。

php artisan breezejp

4.　日本語に設定できました。

認証機能を実装

1.　上の手順で「日本語対応のLaravel Breeze」をインストールしたので、
　　Laravel Breezeのインストール手順もご紹介します。

　　Laravel Breezeは、Laravelのデフォルトの認証機能を最小限にしたスターターキットであり、
　　ユーザー登録、ログイン、パスワードリセットなどの認証機能を実装するのに便利です。

composer require laravel/breeze --dev

2.　LaravelプロジェクトにLaravel Breezeをインストールするための
　　特定のArtisanコマンドを実行します。
　　どのスタックを選択するかは、プロジェクトのニーズや開発環境に依存します。

php artisan breeze:install

3.　Laravel Breezeがインストールされると、画面の右上にリンクが表示されます。
　　http://localhost/testlaravel/public/

「Log in」をクリックした場合、下図の画面が表示されます。

「Rgister」をクリックした場合、下図の画面が表示されます。

DataTableの設定

AdminLTEの DataTable の機能を使う場合は、
「’active’ => false,」→「’active’ => true,」に変更してください。
（初期値は false になっています）

config\adminlte.php

    'plugins' => [
        'Datatables' => [
            'active' => true,

「’active’ => true,」でDataTableを作成した場合は、
検索ボックスやページネーションが自動で表示されて、使用できます。

「’active’ => false,」でDataTableを作成した場合は、
検索ボックスやページネーションが表示されません。

ちなみに上記画面のviewファイルのコードです。
resources\views\adminlte.blade.php

@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Dashboard</h1>
@stop

@php
    $heads = [
        '商品番号',
        '備考',
        '作成日時',
        '更新日時',
        '',
        '',
    ];
    $config = [
        'dom' => 'Bftrip',
        'order' => [
            [0, 'asc']
        ],
   ];
@endphp

@section('content')
    <x-adminlte-datatable class="mytable table-sm table-striped table-hover" id="mytable" :heads="$heads" :config="$config">
        @for ($i = 1; $i <= 3; $i++)
            <tr>
                <td>Product {{$i}}</td>
                <td>Note for Product {{$i}}</td>
                <td>2023-07-30</td>
                <td>2023-07-30</td>

                <td class="md:px-4 py-3">
                    <a href="#" class="btn btn-primary" style="font-size:small;">編集</a>
                </td>                            <td class="md:px-4 py-3">
                    <form method="post" action="#">
                        @csrf
                        @method('delete')
                        <button type="submit" class="btn btn-danger" style="font-size:small;">削除</button>
                    </form>
                </td>

            </tr>
        @endfor
    </x-adminlte-datatable>
@stop

DataTableの応用

バッジ(badge) とプログレスバー(progressbar) を作ってみました。

@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Dashboard</h1>
@stop

@php
    $heads = [
        'Product',
        'Progress',
        'Label',
    ];
    $config = [
        'dom' => 'Bftrip',
        'order' => [
            [0, 'asc']
        ],
   ];
@endphp

@section('content')
    <x-adminlte-datatable class="mytable table-sm table-striped table-hover" id="mytable" :heads="$heads" :config="$config">
        <tr>
            <td>りんご</td>
            <td>
                <div class="progress">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
                </div>
            </td>
            <td><span class="badge badge-success">50%</span></td>
        </tr>
        <tr>
            <td>めろん</td>
            <td>
                <div class="progress">
                    <div class="progress-bar bg-info" role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div>
                </div>
            </td>
            <td><span class="badge badge-info">30%</span></td>
        </tr>
        <tr>
            <td>ぱいなっぷる</td>
            <td>
                <div class="progress">
                    <div class="progress-bar bg-warning" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
                </div>
            </td>
            <td><span class="badge badge-warning">75%</span></td>
        </tr>
    </x-adminlte-datatable>
@stop

 

 
 
この記事がお役に立ちますと幸いです。
 

Laravel AdminLTEカスタマイズ:サイドバーや全体画面[図解解説]

...

kirinote.com

2023.09.16