WEBエンジニアによるキンスレと技術系ブログ

今はまっているゲームと技術系の記事をメインに投稿を続けるブログ

ページ内リンク

Laravel5.8にjeroennoten/Laravel-AdminLTEインストールから初期設定まで解説

今回はLaravelプロジェクトにLaravel-AdminLTEをインストールしてログイン画面を表示するところまで実装していきます。
Laravelのプロジェクトが既に作成されていることを前提として進めていきます。

よろしくお願いします。

Laravel-AdminLTEとは?

Laravel-AdminLTEを導入することで管理画面のログインからヘッダー・サイドメニューの表示までを非常に簡単に実装することが可能となっています。

実際に実務での利用を検討している方、勉強で管理画面を作成してみたい方は是非この記事を参考にしてみてください。

今回の記事は、Laravel-AdminLTEのgithubページを元に説明を行なっていきます。

githubページ:https://github.com/jeroennoten/Laravel-AdminLTE

Laravel-AdminLTEのインストール

Laravelプロジェクトにパッケージをインストールします。

$ composer require jeroennoten/laravel-adminlte

インストール後「config/app.php」の「providers」に下記を追加します。
composerでパッケージをインストールした際に毎回行うおまじないになります。設定することによって必要な初期処理を行なってくれます。

'providers' => [

    (中略)

    // Laravel Admin LTE
    JeroenNoten\LaravelAdminLte\ServiceProvider::class,

],

各種追加設定

公開されているassetsファイルのコピー

下記コマンドを実行することでpublicフォルダにjs,cssなどのファイルが生成されます。

$ php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=assets

公開されている設定ファイルのコピー

下記コマンドを実行することでconfigフォルダにadminlte.phpファイルが生成されます。

生成されたファイルを編集することで、ログイン画面に表示するタイトルやサイドメニューに表示する内容などを編集することができます。

$ php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=config

公開されているviewsファイルのコピー

下記コマンドを実行することでresources/views/vender/adminlteフォルダにviewsファイルが生成されます。
生成されたviewファイルを編集することでログイン画面やサイドメニューなどのレイアウトの修正が可能になります。

ログイン画面・ルーティングの設定

下記コマンドを実行するだけでログイン画面とルーティングの設定ができます。

$ php artisan make:adminlte

ログイン用usersテーブルの作成

migrationを実行してuserテーブルにデータを作成します。
ログインするユーザーデータの作成はAdminLTEで生成される画面で登録を行います。

$ php artisan migrate

[実行後ログ]

Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table

実際に画面で確認

ログインページの表示

http://127.0.0.1:8000/login」へアクセス
管理画面っぽいログイン画面が表示されましたねw

f:id:raruspeer:20190622194337p:plain

「Register a new membership」から新規ユーザーの作成を行います。
値を入力して登録を実行

f:id:raruspeer:20190622194551p:plain

登録後、自動的にログインしダッシュボード画面が表示されました。

f:id:raruspeer:20190622194639p:plain

まとめ

今回はAdminLteでデフォルトで作成されるユーザー新規登録画面からログインまでを行いました。
画面の内容に関しては英語がデフォルトとなっているので別途日本語に変換する必要がありますが、とても簡単に管理画面のベースを作成することが出来ます。

今回の記事を読んで役に立った方がいればコメントを書いてもらえると幸いです。
ありがとうございました!