CentOS + Apache + MySQL + PHP & CakePHP-2.3.8 に、プラグイン「BoostCake」 を導入する。
CakePHPへ「Twitter Bootstrap 2.3.2 & 3.0.0 に対応したプラグイン BoostCake」を導入します。※１：CakePHP-2.3.8 の導入方法は、こちらの記事参照→CakePHP-2.3.8のセットアップ
※２：CakePHP-2.3.8 は、/var/www/html/cakephp238/ にセットアップされています。
※３：CakePHP公式サイトの「ブログチュートリアル」を試しています。
→ http://book.cakephp.org/2.0/ja/getting-started.html#id2
※４：参考にさせて頂いた 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 を参考に。
以上です。
0 件のコメント:
コメントを投稿