CakePHP4にAdminLTEをプラグインで簡単導入【arodu/CakeLTE】カスタマイズ方法

CakePHP5が出ましたが、プラグインやモジュール類も安定している4系がまだまだ使いやすい。

複雑なDB結合が不要な業務系アプリやちょっとした案件はLaravelより開発速度が速くて低スペックなレンタルサーバーでもそこそこ動くCakePHPを使ってしまいます。

目次

CakePHP本体インストール

まずは本体インストール

#好きな名前でプロジェクトフォルダを作成、今回はcake4p03
mkdir cake4p03

#作成したディレクトリ内に移動
cd cake4app

#バージョン4.5系で、カレントディレクトリにインストール
composer create-project --prefer-dist cakephp/app:4.5.* ./

初期設定

◆config\app.php

//49行目付近、日本語化対応

'App' => [
    'namespace' => 'App',
    'encoding' => env('APP_ENCODING', 'UTF-8'),

    //◆変更 'defaultLocale' => env('APP_DEFAULT_LOCALE', 'en_US'),
    'defaultLocale' => env('APP_DEFAULT_LOCALE', 'ja_JP'),

    //◆変更 'defaultTimezone' => env('APP_DEFAULT_TIMEZONE', 'UTC'),
    'defaultTimezone' => env('APP_DEFAULT_TIMEZONE', 'Asia/Tokyo'),
   :
   :続く




//307行目、utf8mb4

  'Datasources' => [
    /*
     * For MariaDB/MySQL the internal default changed from utf8 to utf8mb4, 
     * aka full utf-8 support, in CakePHP 3.6
     */
    //◆変更 'encoding' => 'utf8mb4',
    'encoding' => 'utf8mb4',
   :
   :続く
  

◆config\app_local.php

//37行目~
 'Datasources' => [
    'default' => [
        'host' => 'localhost',
        /*
         * CakePHP will use the default DB port based on the driver selected
         * MySQL on MAMP uses port 8889, MAMP users will want to uncomment
         * the following line and set the port accordingly
         */
        //'port' => 'non_standard_port_number',

        'username' => 'root',//自分のMySQLログインユーザー名
        'password' => '',//自分のMySQLログインパスワード
        'database' => 'cake4p03',//あらかじめ作成したMySQLのデータベース
        
 

これでDB接続

AdminLTE をプラグイン(arodu/cakelte)で導入

便利なプラグインがあります。
https://github.com/arodu/cakelte

#インストール
composer require arodu/cakelte

#プラグイン読み込み( src\Application.php にプラグイン読み込み行が追記される)
bin/cake plugin load CakeLte

◆ src\Application.php

    public function bootstrap(): void
    {
        parent::bootstrap();
        :
        :続く

        // Load more plugins here
        
        //コマンド【bin/cake plugin load CakeLte】により自動的に追記される
        //自分で直接書いてもOK
        $this->addPlugin('CakeLte');
    }

◆ src/View/AppView.php

<?php
declare(strict_types=1);

namespace App\View;
use Cake\View\View;

// ◆追記する
use CakeLte\View\CakeLteTrait;


class AppView extends View
{

    //◆ 追記する
    use CakeLteTrait;
    public $layout = 'CakeLte.default';

    /**
     * Initialization hook method.
     */
    
    public function initialize(): void
    {
    
        //◆追記する
        $this->initializeCakeLte();
    }
}

以下のURLで導入されているか確認、

http://localhost/プロジェクト名/cake_lte/debug

ちなみに、この段階ではプロジェクトルートはテンプレート適応されていません。
プロジェクトルートの画面は、「 templates\Pages\home.php 」に設定されていますが、テンプレートを強制解除するコードが含まれています。これをコメントアウトするとテンプレートが適応されます。

◆ templates/Pages/home.php

<?php
use Cake\Cache\Cache;
use Cake\Core\Configure;
use Cake\Core\Plugin;
use Cake\Datasource\ConnectionManager;
use Cake\Error\Debugger;
use Cake\Http\Exception\NotFoundException;

//◆ここをコメントアウトする
// $this->disableAutoLayout();
 :
 :続く

ただし、このルート画面はどうせ使わずに、開発が進むと別の画面(ユーザー情報画面やダッシュボード画面など)にルーティングで変更することになると思うので、気にしなくて良いと思います。

AdminLTEプラグイン(arodu/cakelte)を使ったBake

プラグイン公式の通りです。bake の後に -t CakeLte を付けます。

# customersテーブルについてbake allする 例
bin\cake bake all customers -t CakeLte

# customers で テンプレートだけ再bakeする例
bin\cake bake template customers -t CakeLte

AdminLTEプラグイン(arodu/cakelte)のカスタマイズ

プラグインをインストールした状態では、メニューや全体のレイアウトは以下に格納されています。
・vendor/arodu/cakelte/templates/layout
・vendor/arodu/cakelte/templates/element

直接プラグインフォルダの中身をいじくるわけにはいきませんので、カスタマイズ用のファイルを作成します。実行時はこれらのアプリケーション側のファイル設定で上書きできます。

# 【1】設定ファイルをコピー
cp vendor/arodu/cakelte/config/cakelte.php config/cakelte.php

# 【2】レイアウトをコピー
cp -r vendor/arodu/cakelte/templates/layout  templates/plugin/CakeLte

# 【3】テンプレートをコピー
cp -r vendor/arodu/cakelte/templates/element templates/plugin/CakeLte

【1】の設定ファイルは、ロゴ画像や全体の色味(dark / light)の設定を行います。
→ config/cakelte.php

【2】のレイアウトは、全体のレイアウト構成をカスタマイズします。
→ templates/plugin/cakelte/layout/default.php

【3】のテンプレートは、サイドメニューやヘッダーメニューをカスタマイズします。
→ templates\plugin\cakelte\element 配下の各ファイル

プラグインの公式ページには、これらのファイルはpluginディレクトリを作らず、
[root]/templates 配下に設置するよう記載されていますがCakePHP4.5系では一部のファイルで読み込みされませんでした。

そこで、CakePHPの公式説明でプラグインのテンプレートを変更する場合の記述を調べて、上記の方法が正式であることがわかりました。(バージョンの違いかもしれません)
https://book.cakephp.org/4/ja/plugins.html#id12

なお、同様のトラブルと解決についてプラグインのissueにも記載がありました。

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