前回に引き続いて、Laravelを使用したBootstrapの管理画面のスターターパッケージの紹介です。いかに新規のプロジェクトの管理画面を速く立ち上げるかが目的です。前回は、Core UIをベースにしたパッケージでしたが、今度は、Admin LTEをベースにしたものです。両方ともBootstrapのバージョン4をもとにしています。

インストール

Laravel Boilerplateでは、Laravelそのものも含むzipファイルをダウンロードしてインストールという形式でしたが、Laravel-AdminLTEでは、まずLaravelのプロジェクトをコマンドラインで作成してから、Laravel-AdminLTEのパッケージjeroennoten/laravel-adminlteをcomposerでプロジェクトにインストールします。その際には、依存するパッケージalmasaeed2010/adminlteもインストールされます。

almasaeed2010/adminlte
のパッケージがAdmin LTEの無料版のCSSフレームワークで、jeroennoten/laravel-adminlteのパッケージがLaravelのプロジェクトにおいて、管理画面のbladeファイル、レイアウト設定やメニューなどの機能を提供します。

ルック

残念ながらLaravel-Admin LTEのデモサイトがないのですが、以下のような感じです。

ログイン画像

管理画面画像

config/app.phpで設定が必要ですが、日本語も対応しています。

Admin LTEに関しては、こちらでいろいろなUIを閲覧できます。

設定


Laravel Boilerplat
eと比べて、デフォルトでインストールされている機能は少ないですが、以下のベーシックなレイアウトの設定が独自のconfig/adminlte.phpのファイルから簡単にできます。

  • タイトル
  • ファビコン
  • ロゴ画像
  • ユーザーメニュー

    これは、画面右上のログインしたユーザー名(ここではkenji)をクリックしたときの表示。

  • レイアウト

    例えば、上の画面の設定では、固定のナビバーとフッターを指定しています。

      'layout_topnav' => null,
      'layout_boxed' => null,
      'layout_fixed_sidebar' => false,
      'layout_fixed_navbar' => true,
      'layout_fixed_footer' => true,
    
  • 認証の画面表示のCSSクラス
  • body、content、sidebar、topnavなどのcssクラス
  • サイドバーのルック
  • ユーザーのプロフィールやダッシュボードやログアウトなどのURL
  • Laravel MIXの使用
  • サイドバーのメニューの指定

    配列で指定できます。階層もOKです。以下は上のメニューの設定の一部。

       'menu' => [
            [
                'text' => 'search',
                'search' => true,
                'topnav' => true,
            ],
            [
                'text' => 'blog',
                'url'  => 'admin/blog',
                'can'  => 'manage-blog',
            ],
            [
                'text'        => 'pages',
                'url'         => 'admin/pages',
                'icon'        => 'far fa-fw fa-file',
                'label'       => 4,
                'label_color' => 'success',
            ],
            ['header' => 'account_settings'],
            [
                'text' => 'profile',
                'url'  => 'admin/settings',
                'icon' => 'fas fa-fw fa-user',
            ],
            [
                'text' => 'change_password',
                'url'  => 'admin/settings',
                'icon' => 'fas fa-fw fa-lock',
            ],
            [
                'text'    => 'multilevel',
                'icon'    => 'fas fa-fw fa-share',
                'submenu' => [
                    [
                        'text' => 'level_one',
                        'url'  => '#',
                    ],
    ...
    
  • サイドバーのメニューのフィルター。権限によりメニューのオン・オフが可能となります。
  • プラグイン。datatablesやselect2などのjsの指定。

これら設定は、以下の場所で詳細がドキュメントされています。

https://github.com/jeroennoten/Laravel-AdminLTE#6-configuration

採用できそう?

気に入ったのは、基本的な設定が簡単にconfigファイルで行えることです。また、Laravel Boilerplateと違って、独立したパッケージとして提供されているので、将来のパッケージの更新の面では管理しやすいと思います。

メルマガ購読の申し込みはこちらから。

By khino