CakePHPでBootstrap4を組み込んでみる

CakePHPでBootstrapを組み込むには、いくつかのパターンがあります。今回は、よく知られている、プラグインを利用して行います

Cakeのインストールと初期設定

Composerで最新版をインストールします

とりあえずテーブル作成

テストのためのテーブルを作成しておきます

簡単に初期設定

config/app.php

bakeで作っておく

プラグインのインストール

CakePHPのプラグインをインストールします。これを使って簡単に組み込めるようにします

利用するのはよく使われている以下のプラグインです
friendsofcake/bootstrap-ui

プラグインのインストール

2018年8月時点ではmasterではBootstrapバージョン3に対応したものです。developではバージョン4に対応しています。今回はバージョン4対応のために「dev-develop」を利用します

プラグインの有効化

最下部に追加します

config/bootstrap.php

設定

プラグインのための設定を行います。「AppView.php」の継承元を変更する、「trait」を利用するなどの方法が紹介されていますが、ここではもっと簡単にやってみます

src/View/AppView.php

Templateファイルを修正していく

プラグインのレイアウトファイルを利用することでデザインを変更することができますが、使えるレイアウトファイルが限られているので、とりあえず、デフォルトのレイアウトファイルをがっつり変更します

レイアウトファイル

src/Template/Layout/default.ctp

CSS, JSの読み込み方法はもっと別の方法がありますが、コピペで済むのでこれで対応します

メニュー用エレメントの作成

画面上部のグローバルメニューとして作成するエレメントファイルです。フォルダも含めて作成します

src/Template/Element/menu/default.ctp

メインコンテンツ表示のためのエレメントファイル

レイアウトファイルから読み込まれるメインの部分です

src/Template/Element/content.ctp

簡単な独自CSS定義

Cakeで用意されているCSSを削除して、簡単なCSSを定義します

webroot/css/style.css

Productsの一覧用Viewファイル

src/Template/Products/index.ctp

この時点での商品一覧の実行結果
データは適宜追加しておきます

商品の新規追加画面のViewファイル

src/Template/Products/add.ctp

新規登録画面の実行結果

フラッシュメッセージも対応しています

これで一応対応できていることは確認できます。後は、Bootstrapのルールに従って作成していきます

Flashメッセージのエレメントファイル

Bootstrapバージョン4の導入とは異なりますが、プラグインで導入したエレメントファイルをオーバーライドする方法を紹介します。導入したプラグインで利用されているFlashメッセージのエレメントファイルは以下のファイルです

このファイルを「src」内にコピーすると表示スタイルを変更できます。以下の場所にコピーします

フォルダを作成して、プラグインのエレメントファイルをコピーします

コピーしたファイルを編集するとFlashメッセージのHTMLなどを修正することができます