Laravel6にAdminLTEを組み込む

こんにちは、せぃゆーです。

私はデザインができないので、ある程度きれいな見た目になるAdminLTEをインストールしようと思います。

Laravelのインストール
認証のインストール
AdminLTEのインストール
/vendor配下にあるviewファイルをresource/views/vendorに移動
ログイン処理/ログインユーザの作成
seederファイルの修正/実行
1. seederの実行
ログインしてみましょう
各画面にAdminLTEを導入
まとめ

Laravelのインストール

この辺はAdminLTEの関係はないので、細かい説明は行いません。

composer create-project --prefer-dist laravel/laravel laravel_adminlte "6.*"
cd laravel_adminlte

認証のインストール

composer require laravel/ui 1.*
php artisan ui vue --auth

いったんcssをコンパイルしましょう。

npm install && npm run dev

よく知っているLaravelのログイン画面の出来上がりです。

何もしていない状態で、今のログイン画面も見てみましょう

画面右上のLOGINからログイン画面に遷移してみましょう

いつものログイン画面ですね。

AdminLTEのインストール

composer require jeroennoten/laravel-adminlte
php artisan adminlte:install

/vendor配下にあるviewファイルをresource/views/vendorに移動

php artisan adminlte:install --only=main_views
php artisan adminlte:install --only=auth_views

–only=auth_viewでは「認証用のviewファイルが既に存在しますが、置き換えますか」と聞かれるのでyesを入力してください

 The authentication views already exists. Want to replace the views? (yes/no) [no]:
 > yes

ログイン画面を見てみましょう

AdminLTEのログイン画面が表示されました。

ログイン処理/ログインユーザの作成

次にログイン用のテーブルの作成、ログインするためのユーザを作成していきます。

# マイグレーション実行
php artisan migrate
# seederファイル作成
php artisan make:seeder UsersTableSeeder

Laravelではデフォルトでログインユーザ用のマイグレーションファイルが作成されているので、そのままマイグレーションを実行します。

ユーザテーブルを修正する場合は適宜修正してください

seederファイルの修正/実行

ここでは長いので修正部分の記載します。

public function run()
{
    DB::table('users')->insert([
        'name'              => 'user',
        'email'             => 'user@email.com',
        'password'          => Hash::make('password'),
        'remember_token'    => Str::random(10),
        'created_at' => new DateTime(),
        'updated_at' => new DateTime()
    ]);
}

seederの実行

php artisan db:seed --class=UsersTableSeeder

ログインしてみましょう

先ほど作成したユーザでログインしてみましょう

email: user@email.com, password: passwordでログインしてみます。

現状まだLaravelのデフォルトの画面です。

各画面にAdminLTEを導入

ここではログイン後の画面であるHomeでAdminLTEの導入をしたいと思います。

HOME画面のbladeファイルである./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('js')
    <script> console.log('Hi!'); </script>
@stop

修正後アクセスしてみます