Laravel8でAdminLTE3を使用する方法

概要

この記事では、管理画面として有名なテンプレートAdminLTE3をLaravel8で使用する方法について記述していきます。
前提として、既にLaravelのセットアップは完了している事としています。

Laravel-AdminLTEをインストールする

下記の通りcomposerコマンドを使ってLaravel-AdminLTEをインストールします。

$ composer require jeroennoten/laravel-adminlte

インストールが完了したら下記のコマンドでadminlteコマンドが使えるようになっている事を確認します。

$ php artisan list

上記のコマンドを実施した結果、下記のようなリストが表示されます。

  adminlte
  adminlte:install     Install all the required files for AdminLTE, and additional resources
  adminlte:plugins     Manages the installation and removal of additional AdminLTE plugins
  adminlte:status      Checks the installation status of the AdminLTE resources
  adminlte:update      Update all the required assets for AdminLTE

念のため日本語解説版を紹介

  adminlte
  adminlte:install     AdminLTE に必要なすべてのファイル、および追加リソースをインストールします。
  adminlte:plugins     追加のAdminLTEプラグインのインストールと削除を管理します。
  adminlte:status      AdminLTE リソースのインストールステータスをチェックします。
  adminlte:update      AdminLTE に必要なすべてのアセットをアップデートする。

では、早速インストールコマンドを実行！

$ php artisan adminlte:install

インストールが成功すると、下記の差分が出来上がります。

更新されたファイル

• composer.json
• composer.lock

新たに出来たやつ

• config/adminlte.php
• public/vendor/
• resources/lang/vendor/

上記の通りになっていれば、インストール完了です。

認証画面(View)の作成

下記のコマンドを実行して認証用のViewを作成します。
ViewはMVCのVの部分ですね。

$ php artisan adminlte:install --only=auth_views

Authentication views installed successfully.と出れば成功です。

resources/views/authフォルダの中身が、AdminLTE用に置き換わっているはずです。

下記のようにresources\views\auth\login.blade.phpの中身を見るとadminlteの記述がちゃんとあるはずです。

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

上記は、vendor/jeroennoten/laravel-adminlte/resources/views/login.blade.phpのファイルが参照されています。が参照されていることになります。

認証画面以外にもAdminLTEを適用する

下記のコマンドを実行しましょう。

php artisan adminlte:install --only=main_views

すると、下記のようになります。

新しくできたやつ

• resources/lang/vendor/
• resources/views/auth/
• resources/views/vendor/

ログイン後の画面を作成する

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のデザインに置き換わっているはずです。

以上。

出典

下記のページを参考にさせていただきました。YOSHITAKAさんありがとうございます。
Laravel8でAdminLTE3をターミナルで導入して、インストールする方法。管理画面をサクッと作ろう。