CentOS + Apache + MySQL + PHP & CakePHP-2.3.8 に、プラグイン「BoostCake」 を導入する。
CakePHPへ「Twitter Bootstrap 2.3.2 & 3.0.0 に対応したプラグイン BoostCake」を導入します。※1:CakePHP-2.3.8 の導入方法は、こちらの記事参照→CakePHP-2.3.8のセットアップ
※2:CakePHP-2.3.8 は、/var/www/html/cakephp238/ にセットアップされています。
※3:CakePHP公式サイトの「ブログチュートリアル」を試しています。
→ http://book.cakephp.org/2.0/ja/getting-started.html#id2
※4:参考にさせて頂いた BoostCake 作成者様のサイト
1.Twitter Bootstrap v2.3.2 を、ダウンロード後、解凍し、各フォルダへ配置する
・http://getbootstrap.com/2.3.2/
→ 今回は、TwitterBootstrap の version は、2.3.2 にしました。
※上記の各js、css、img を、app/webroot 配下の js、css、img に配置しました。
2. Composer の導入
・github(https://github.com/slywalker/cakephp-plugin-boost_cake)には、『BoostCake のインストールは、Composer で』と書いてあるので、まずはComposer から導入します。
・「venderディレクトリを作成するルートディレクトリ」で、curl コマンドで Composer をインストール
→[ユーザ名@ホスト名 app]$ curl -s http://getcomposer.org/installer | php
3. composer.json ファイルを作成し、boost_cake をインストールする
・以降、こちらのサイト(http://slywalker.github.io/cakephp-plugin-boost_cake/)の手順通りに進めます。
・app/composer.json を作成
{ "require":{ "slywalker/boost_cake": "*" } }
・composer の実行
→[ユーザ名@ホスト名 app]$ php composer.phar install
→無事 BoostCake は、app/Plugin 下にセットアップされました。
4. プラグインの読み込みを追記する
・cakephp238/app/Config/bootstrap.php へ、BoostCake の情報を追記
CakePlugin::load(‘BoostCake’);
5. ヘルパー、Authコンポーネントへの追加
・app/Controller/AppController.php へ、以下を追加。
public $components = array( 'Acl', 'Auth' => array( 'authorize' => array( 'Actions' => array('actionPath' => 'controllers') ), 'flash' => array( 'element' => 'alert', 'key' => 'auth', 'params' => array( 'plugin' => 'BoostCake', 'class' => 'alert-error' ) ) ), 'Session', 'DebugKit.Toolbar' ); public $helpers = array( 'Session', 'Html' => array('className' => 'BoostCake.BoostCakeHtml'), 'Form' => array('className' => 'BoostCake.BoostCakeForm'), 'Paginator' => array('className' => 'BoostCake.BoostCakePaginator'), );
6. ACLの登録(ACLを使用している場合)
・Plugin-ACLを使用している場合、アクションへの権限を許可しておくと、WEBブラウザで、ホスト名/cakephp238/boost_cake にアクセスして、各リファレンスが確認出来ます。
※Plugin-Acl の導入についてはこちら→CakePHP-2.3.8 に Plugin–Acl を導入する。
WEBブラウザで、ホスト名/cakephp238/admin/acl/acos にアクセスし、Sychronaize ACOs をクリック
BoostCakeのアクションが追加される。
権限を付与
7. default.ctp へ適用してみる
・CakePHP の View に適用される default.ctp へ、BoostCake を適用します。
→ app/View/Layouts/default.ctp を編集
編集前の「Posts index」表示:
- head の修正(script の追記、css の追記)
<head> <?php echo $this->Html->charset(); ?> <title> <?php echo $cakeDescription ?>: <?php echo $title_for_layout; ?> </title> <?php echo $this->Html->meta('icon'); echo $this->Html->script('jquery-1.7.2.min'); echo $this->Html->script('bootstrap'); echo $this->Html->css('cake.generic'); echo $this->Html->css('bootstrap'); echo $this->Html->css('bootstrap-responsive'); echo $this->fetch('meta'); echo $this->fetch('css'); echo $this->fetch('script'); ?>
<style> body { padding-top: 60px; } .affix { position: fixed; top: 60px; width: 220px; } </style> </head>
- body の修正( boostCake の ナビを追記)
<body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <?php echo $this->Html->link('Posts', array( 'plugin' => 'BoostCake', 'controller' => 'posts', 'action' => 'index' ), array('class' => 'brand')); ?> </div> </div> </div>編集後の「Posts index」表示:
8. BoostCake導入後のForm
・編集前の「login」ページ:ホスト名/cakephp238/users/login
・編集後の「login」ページ:ホスト名/cakephp238/users/login
9. 表示が崩れてしまったページの対応
・各Viewページが、崩れてしまっていました。
・編集前の「Posts View」ページ:ホスト名/cakephp238/posts/view
・編集後の「Posts View」ページ:ホスト名/cakephp238/posts/view
・デフォルトの「dl、dt、dd」 タグ を、無効にすることで、回避しました。
/** Scaffold View **/ /*dl { line-height: 2em; margin: 0em 0em; width: 60%; } dl dd:nth-child(4n+2), dl dt:nth-child(4n+1) { background: #f4f4f4; } dt { font-weight: bold; padding-left: 4px; vertical-align: top; width: 10em; } dd { margin-left: 10em; margin-top: -2em; vertical-align: top; } */
※とりあえず、この方法で対応しましたが、CSSのコメントアウト以外でどうにかしたいものです。
・詳細な編集については、http://slywalker.github.io/cakephp-plugin-boost_cake/bootstrap2.html を参考に。
以上です。