【CakePHP3/AdminLTE3】管理画面におすすめ！AdminLTE3をCakePHP3に導入する方法！ - 文系Webエンジニアの技術メモとたまに旅のメモ

今回は、管理画面を簡単に作れる、AdminLTE3をCakePHP3に導入する方法を紹介していきます。

1.AdminLTE3をGitHubからダウンロード

こちらのURLにアクセスします。

https://adminlte.io/

「DOWNLOAD」をクリックします。

f:id:igarashi44:20200716233323p:plain

※条件によっては、警告画面が出るのでその場合は、直接GitHubからダウンロードしましょう。

GitHunの画面が表示されます。

UR Lはこちら

https://github.com/ColorlibHQ/AdminLTE/releases

ダウンロードしたいバージョンの「Assets」内の「zip」ファイルをダウンロードします。
今回は、「AdminLTE 3.0.5」の内容にします。

f:id:igarashi44:20200716233344p:plain

2.AdminLTE3のディレクトリ

ダウンロードが完了したら解凍します。

解凍した「AdminLTE-3.0.5」を開くとこのようなファイル構成になっています。
「dist」ディレクトリを開きましょう。

f:id:igarashi44:20200716233453p:plain

「dist」ディレクトリにはこのようなファイルが入っています。

f:id:igarashi44:20200716233630p:plain

3.CakePHP3のディレクトリに配置

先ほどダウンロードしたAdminLTE3のdistディレクトリ内のファイルをCakePHP3に配置していきます。
今回はwebroot内に下記ディレクトリを作成し、配置しましょう。

/webroot/{plugins}/{adminLTE}/{js}
/webroot/{plugins}/{adminLTE}/{css}
/webroot/{plugins}/{adminLTE}/{img}

4.AdminLTE3を読み込む設定を行う。

先ほど配置したAdminLTEのファイルを読み込む設定をしましょう。
修正するファイルは、「default.ctp」です。

/src/Template/Layout/default.ctp
<head>
    <!-- こちらを追加 -->
    <?= $this->Html->css('/plugins/adminLTE/css/AdminLTE.css') ?>
    <?= $this->Html->script('/plugins/adminLTE/js/adminlte.js') ?>
</head>

これで設定は完了です。

管理画面の作成はAdminLTE3を使用すると簡単にテンプレートが作成できるので
積極的に使用していきましょう。