おにちゃん塾の商品一覧

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

【Laravel】管理画面を作成する方法|ライブラリやテンプレートも紹介
URLをコピーする
URLをコピーしました!

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

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

Laravel管理画面のログイン画面
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で簡単に開くことができるコマンドです。

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

code.コマンド


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

まずは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ファイルとマッチさせる

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

migrate完了


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

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

  1. bootstrap
  2. vue
  3. 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()はそのままなので、解説は省きます。

login()では、login.blade.phpで送られてきたRequestを受け取り、変数に当てはめてきます。

変数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を起動させましょう。


Laravelの管理画面を確認する

まずはhttp://localhost:8888/admin/loginを入力してください。

Laravelブレード構築

この画面が表示された方は、AdminLoginControllerで設定したユーザー名とパスワードを入力してください。

Laravelのブレード構築

この画面が表示された方は、Laravel管理画面の完成です。

今はデザインや管理者が扱える機能を追加していないので、かなり質素ですが、目的に合わせて機能やデザインを追加してみてください。


まとめ:Laravelの管理画面の作成方法

ここまでで『【Laravel】管理画面を作成する方法|ライブラリやテンプレートも紹介』の解説は以上です。


Laravel管理画面機能以外で役立つ機能紹介


Laravelで役立つ記事

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる