今回は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
「Register a new membership」から新規ユーザーの作成を行います。
値を入力して登録を実行
登録後、自動的にログインしダッシュボード画面が表示されました。
まとめ
今回はAdminLteでデフォルトで作成されるユーザー新規登録画面からログインまでを行いました。
画面の内容に関しては英語がデフォルトとなっているので別途日本語に変換する必要がありますが、とても簡単に管理画面のベースを作成することが出来ます。
今回の記事を読んで役に立った方がいればコメントを書いてもらえると幸いです。
ありがとうございました！