【Laravel】管理画面を作成する方法｜ライブラリやテンプレートも紹介

2022 8/12

2022年8月12日

本記事では、Laravelの管理画面を作成する方法を紹介しています。

本記事で紹介する内容は、最小限のシステムのみです。

管理画面以外に注力してしまうと、管理画面に不必要な情報までインプットしてしまうので、本記事ではこのような構成をとっています。

フォルダ名：login
Laravel ver：6
データベース：Mysql
エディタ：VScode
Webブラウザ：Google Chrome
MAMP使用

MAMPの開発環境ができていない方は下記の記事を参考にしてみてください。

Laravel管理画面プロジェクト作成

まずは、作業フォルダを作成していきます。

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

cdはカレントディレクトリを移動するターミナルコマンドです。

code .は、現在の作業フォルダをVScodeで簡単に開くことができるコマンドです。

実際に、コマンドと入力すると下記の画面が表示されます。

データベースのマイグレーション処理

まずはMAMPを使ってデータベースを作成していきます。

データベース名：login
照合：uft8_general_ci

.envファイルを修正していきましょう。

MAMPを使っている方は下記のように.envファイルを修正しましょう。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=login
DB_USERNAME=root
DB_PASSWORD=root

.envファイルが修正できた方は下記のコマンドを入力しましょう。

Laravel/uiをセッティングする

Laravelの機能でuiをセッティングすることが可能です。

bootstrap
vue
react

大半のLaravelユーザーはvueでセッティングするのですが、私はフロントをReactで学習してしまったので、reactを活用していきます

composer require laravel/ui:^1.0 --dev
php artisan ui react --auth
npm install && npm run dev

reactの部分をvueにするか、bootstrapで展開することができます。

これでLaravel管理画面を作成するための土台は完了です。

Laravelの管理画面ルーティング

まずは、管理画面を作成するためにルーティングを作成していきます。

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

//↓追加
Route::group(['middleware' => ['admin.auth']], function () {
    Route::get('/admin', 'admin\AdminMainController@show');
    Route::post('/admin/logout', 'admin\AdminLogoutController@logout');
});

Route::group(['prefix' => 'admin'], function () {
    Route::get('/login', 'admin\AdminLoginController@showForm');
    Route::post('/login', 'admin\AdminLoginController@login');
});

ルーティングを行う際は基本的にgroupを活用しましょう。

今回はルーティング数が少ないので、逆に非効率ですが、今後規模が大きくなればなるほど、group化の方が管理しやすくなります。

今回使用していること

group機能
middleware機能
prefix機能

group機能はそのままの意味です。

Laravel管理画面機能での学び：prefix

prefix(接頭語)機能に関しては、URLを省略する機能です。

/admin/login
/admin/logout
/admin/toppage
/admin/users
/admin/shop

このようなルーティング処理の場合、共通項として/adminが当てはまるはずです。prefix機能を活用すると簡単に共通化することができるのです。

Route::group([‘prefix’ => ‘admin’], function(){
  Route::get(‘/login’, ‘省略’)
　Route::get(‘/logout’, ‘省略’)
　Route::get(‘/toppage’, ‘省略’)
　Route::get(‘/users’, ‘省略’)
　Route::get(‘/shop’, ‘省略’)
});

このように省略して管理することができるので、サイト規模が小規模でない限りは、必須の機能です。

今のうちに覚えておきましょう。

Laravelの管理画面コントローラー

ルーティングを完了した方は、Laravelの管理画面コントローラーを作成していきましょう。

管理画面に必要なコントローラー

AdminMainController：管理画面のトップページ用
AdminLoginController：管理画面のログイン処理用
AdminLogoutController：管理画面のログアウト処理用

管理画面コントローラー：Main

artisanコマンドを活用してさMain部分の土台を作成しましょう。

php artisan make:controller admin/AdminMainController

<?php

namespace App\Http\Controllers\admin;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class AdminMainController extends Controller
{
   function show(){
    return view("admin.toppage");
  }
}

/adminというURLが入力されると、adminフォルダにあるtoppage.blade.phpが表示される仕組みです。

管理画面コントローラー：ログイン部分

artisanコマンドを活用してさMain部分の土台を作成しましょう。

php artisan make:controller admin/AdminLoginController

<?php

namespace App\Http\Controllers\admin;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class AdminLoginController extends Controller
{
    
    function showForm(){
        return view('admin.login');
    }

    function login(Request $request){
        $user_name = $request->input('user_name');
        $password = $request->input('password');

        if($user_name == 'xs35gsh6' && $password == 'gcg408gbnx'){
            $request->session()->put("auth_admin", true);
            return redirect('admin');
        }

        return redirect('admin/login');
    }
}

/loginがgetで送信された時：showForm()を実行する
/loginがpostで送信された時：login()を実行する

showFormではログインフォームが表示され、loginではログインできるかの判断を行なっていきます。

showForm()はそのままなので、解説は省きます。

変数user_nameにはユーザ名、変数passwordにはパスワードを代入します。

if文を使い、ユーザー名とパスワードが一致しているかの確認を行い、一致している場合はif文の中の処理を行い、一致していない場合はリダイレクトする処理を作っています。

管理画面コントローラー：ログアウト部分

artisanコマンドを活用してさMain部分の土台を作成しましょう。

php artisan make:controller admin/AdminLogoutController

<?php

namespace App\Http\Controllers\admin;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class AdminLogoutController extends Controller
{
    function logout(Request $request){
    $request->session()->forget("auth_admin");
    return redirect("admin");
  }
}

/admin/logoutという処理をpostでした場合logout()が実行されます。

ログアウトの中では、セッションとして作成したauth_adminを削除しており、redirectしています。

Laravelの管理画面ミドルウェア

ここからは管理画面のミドルウェアを作成していきます。

ミドルウェアとは：HTTPリクエストをフィルタリングする機能。現在HTTPリクエストを行なったユーザーは認証しているかどうかなどを行えます。

php artisan make:middleware AuthAdmin

namespace App\Http\Middleware;

use Closure;

class AuthAdmin
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        if(false == $request->session()->get("auth_admin")){
            return redirect("admin/login");
        }

        return $next($request);
    }
}

ミドルウェアにはBeforeとAfterがあります。

今回はBeforeミドルウェアを活用していきます。

Beforeミドルウェアで処理すること：HTTPリクエストに対して、条件が合わないユーザーを弾いたりすることができる。

今回の利用方法は、ユーザー名とパスワードが一致していないユーザーをリダイレクトする処理を追加しています。

kernel.phpにミドルウェアを追加する

ミドルウェアを作成した後にするべきことは、どのファイルでも利用できるようにすることです。

    protected $routeMiddleware = [
        'auth' => \App\Http\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
        'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
        //追加する↓
        'admin.auth' => \App\Http\Middleware\AuthAdmin::class
    ];

kernel.php内にrouteMiddlewareという変数がありますので、そちらの下記に追加しましょう。

これでシステム部分は完成しました。ここからはフロントを作っていきます。

Laravelの管理画面ブレード作成

Laravelには簡単にフロントを作成することができる機能があります。

本来であれば、最初に導入したReactやVueを活用してフロントを構築するのですが、今回は簡単にフロント部分を作成していきます。

Laravel管理画面ブレード作成

admin/toppage.blade.php
admin/login.blade.php

管理画面ブレード：トップページ

<h2>管理者画面を管理する</h2>

<form method="post" action="{{ url('admin/logout') }}">
  @csrf
  <input type="submit" value="ログアウト" />
</form>

ログアウトフォームを作成しました。

管理画面ブレード：ログインフォーム

@extends('layouts.app')

@section('content')
<h2>ログイン画面</h2>
<form method="post" action="{{ url('admin/login') }}">
  @csrf
  <div>
    管理者名: <input type="text" name="user_name" value=""/>
  </div>
  <div>
    パスワード: <input type="password" name="password" value="" />
  </div>
  <div>
    <input type="submit" value="ログイン" />
  </div>
</form>
@endsection

ここまで作成できた方は、Laravelを起動させましょう。