この記事では、Laravel9で見た目が良い管理画面を作成する方法を紹介します。
今回紹介する方法では、DockerでLaravel Sailを利用してプロジェクトを作成し、管理画面を実装します。
管理者のログイン機能は、Laravel Breezeで実装していきます。
画面のデザインには、管理画面用の無料テンプレートAdminLTEを使います。
環境と実装手順について
今回使う環境は以下のとおりです。
- PHP 8.1
- Laravel v9
- Docker Desktop
- macOS (M1)
Docker Desktop がない場合は、事前にインストールが必要です。
ここからは、Docker Desktopが導入済みである前提で解説をしていきます。
今回は、次の手順で実装していきます。
- Laravel Sail を利用してプロジェクトを作成する
- Laravel Breezeを導入する
- AdminLTEを導入する
- 管理者が管理画面にログインできる機能まで実装する
管理画面を実装する上で使う機能・パッケージは次の通りです。
- Laravel Sail
- Laravel Breeze
- AdminLTE
それぞれの機能について、簡単に解説します。
Laravel Sailとは
Laravel Sailは、Dockerを使用してLaravelのプロジェクトを操作できるCLI（コマンドラインインターフェース）です。
SailはmacOS、Linux、Windowsに対応しており、簡単にLaravel9の開発環境を構築できます。
Laravel Breezeとは
Laravel Breezeは、すべての認証機能を最小かつシンプルにLaravelへ実装したものです。
今回はBreezeを利用して、管理者のログイン・新規登録機能を実装します。
AdminLTEとは
AdminLTEとは、Bootstrapがベースの管理画面などに使えるテンプレートです。
無料で使えてデザインも良く、マルチメディア（レスポンシブデザイン）にも対応しています。
デザイン作成が苦手なエンジニアでも、AdminLTEを使うと簡単にかっこいい管理画面が作成できます。
Laravel Sailを利用してプロジェクトを作成する
ここから、実際にLaravelのプロジェクトを作成していきます。
まずはDocker Desktopを立ち上げておきましょう。
次に、Laravelのプロジェクトを立ち上げるコマンドを実行します。
今回は『laravel-admin』という名前でプロジェクトを作成しますが、ここは自由に命名してください。
ターミナルでプロジェクトを作成したいディレクトリに移動して、以下のコマンドを実行します。
PROT21
もし上記でエラーになる場合、以下のDCTの無効化コマンドを実行してから、再度curlコマンドを実行してみましょう。
PROT22
DCTの無効化状態から戻す場合のコマンドはこちらです。
PROT23
curlコマンドで、Laravelのプロジェクト作成の最後に、PCのパスワードを求められます。
インストールが完了したら、以下のメッセージが表示されます。
PROT24
作成できたらプロジェクトルートディレクトリに移動します。
PROT25
Laravel Sailを起動します。『-d』をつけるとバックグラウンドで起動できます。
PROT26
ブラウザで以下のURLを開きます。
PROT27
ブラウザでLaravelの初期の画面が表示されればOKです。
作成されたプロジェクトのLaravelのバージョンを確認します。
PROT28
もし作業を途中でやめたい場合、Sailを停止するときは以下のコマンドです。
PROT29
Laravel Breezeを導入する
ここからLaravel Breezeをインストールします。
Laravel Breezeのパッケージをインストールするコマンドを実行します。
PROT30
つづいて、Laravel Breezeをインストールするコマンドを実行します。
PROT31
Laravel Breezeをインストールすると、このように初期画面の右上に『Log in』『Register』のリンクが追加されます。
『Log in』でログイン画面（/login）に遷移します。
『Register』で新規登録画面（/register）に遷移します。
AdminLTEを導入する
ここからAdminLTEをインストールします。
AdminLTEのパッケージをインストールするコマンドを実行します。
PROT32
つづいて、AdminLTEをインストールするコマンドを実行します。
PROT33
これでAdminLTEがインストールできました。
そうすると、ログイン画面と新規登録画面の見た目が変わります。
ログイン画面
新規登録画面
管理者テーブルを作成する
ここから、管理者のテーブルを作成します。
今回、テーブル名は『admin_users』とします。
テーブル名はご自身のプロジェクトに合わせて名前を変更してください。
テーブルを作成する手順は以下のとおりです。
- マイグレーションファイルとモデルを作成する
- 各ファイルを修正する
- マイグレーションを実行する
順番に解説します。
マイグレーションファイルとモデルを作成する
マイグレーションファイルとモデルを作成します。
次のコマンドを実行すると、マイグレーションファイルとモデルを同時に生成できます。
PROT34
まず、生成されたマイグレーションファイルを修正します。
今回は、既に生成されているusersテーブルのマイグレーションファイルと同じテーブル構成にします。
xxx_create_users_table.php の記述をコピーして、以下のように『users』を『admin_users』に変更するだけです。
database/migrations/20YY_MM_DD_hhmmss_create_admin_users_table.php
PROT35
次は、AdminUserモデルファイルを編集します。
Breezeをインストールしたときに作成されているapp/Models/User.phpの記述をコピーして、AdminUser.phpに貼り付けてください。
そしてクラス名を『User』から『AdminUser』に修正します。
app/Models/AdminUser.php
PROT36
各ファイルを修正する
Authを使ったログイン・新規登録機能をadminテーブルで利用するため、必要なファイルの記述を修正します。
修正するのは次の2つのファイルです。
- config/auth.php
- app/Http/Controllers/Auth/RegisteredUserController.php
順番に解説します。
config/auth.php
config/auth.phpは、以下のように『users』の部分を『admin_users』、『User』の部分を『AdminUser』に修正します。
config/auth.php
PROT37
RegisteredUserController.php
AuthのRegisteredUserController.php は、以下のように『User』を『AdminUser』に修正します。
app/Http/Controllers/Auth/RegisteredUserController.php
PROT38
ここまででマイグレーションファイル、モデル、その他の記述で修正が必要な箇所が修正できました。
マイグレーションを実行する
マイグレーションのコマンドを実行します。
PROT39
マイグレーションの状態を確認するときは、以下のコマンドを実行します。
PROT40
MySQLコマンドで、テーブルができていることを確認しましょう。
以下のようになっていればOKです。
PROT41
MySQLから戻るときはexitでOKです。
PROT42
ログイン後の画面へのルーティングの設定する
ここから、管理画面のトップページを作成します。
まずは、管理画面トップページへのルーティングを設定します。
ログインしていない場合は管理画面トップにアクセスできないように、ミドルウェアを設定しておきます。
routes/web.php
PROT43
デフォルトでは、ログインした直後の遷移先はダッシュボード（/dashboard）です。
そのため管理者がログイン画面からログインしたら、管理画面のトップページ（ /admin）に遷移するようにします。
以下のファイルで遷移先の設定を変更します。
app/Providers/RouteServiceProvider.php
PROT44
コントローラーを作成する
ここから必要なコントローラーを作成します。
今回は『AdminController』という名前にします。
AdminControllerを生成するコマンドを実行します。
PROT45
AdminControllerにindexアクションを追加します。
今回は、admin.indexのビューファイルを表示させるように設定します。
app/Http/Controllers/AdminController.php
PROT46
ビューを作成する
管理画面のトップページのビューを作成します。
管理者がログインしたら遷移するページです。
以下のように、admin/index.blade.phpを作成します。
resources/views/admin/index.blade.php
PROT47
必要なファイルの作成は以上です。
管理画面にログインする
ログイン画面からログインします。
PROT48
管理者が登録されていない場合は、新規登録画面から管理者を新規登録します。
PROT49
今回は説明のため、誰でも新規登録ができる状態になっています。
ただし管理画面の性質上、管理者を誰でも新規登録ができるのはよくありません。
必要に応じて、新規登録画面への遷移ができないように修正してください。
ログイン後、管理画面のトップページに遷移しました。
ONETECHがベトナムオフショアで開発したLaravel事例
当社では業務システムやBtoC向けのクラウドサービスのシステム開発などを手掛けています。本ブログではLaravelを使ったシステム開発の事例を紹介します。
その他にもLaravelを使った開発事例は複数ございますので以下をご覧いただければと思います。
まとめ
Laravel9でデザイン性が良い管理画面が簡単に作成できる方法を解説しました。
現状は、管理者がログインして管理画面トップページを表示するのみです。 ここから先は、自由にカスタマイズをしましょう。
