2013年8月1日木曜日

CakePHP-2.3.8 にBoostCakeを導入する。

 

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 作成者様のサイト
  WS000001

 

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 から導入します。

  WS000072

 ・「venderディレクトリを作成するルートディレクトリ」で、curl コマンドで Composer をインストール
   →[ユーザ名@ホスト名 app]$ curl -s http://getcomposer.org/installer | php

   CakePHP-2.3.8-Screenshot009

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


    CakePHP-2.3.8-Screenshot010

   →無事 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 をクリック
  CakePHP-2.3.8-Screenshot011

BoostCakeのアクションが追加される。

  CakePHP-2.3.8-Screenshot012

権限を付与

  CakePHP-2.3.8-Screenshot014

7. default.ctp へ適用してみる


 ・CakePHP の View に適用される default.ctp へ、BoostCake を適用します。
    → app/View/Layouts/default.ctp を編集

 編集前の「Posts index」表示:

  boostcake-Screenshot001


  • 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」表示:

   boostcake-Screenshot006

8. BoostCake導入後のForm


 ・編集前の「login」ページ:ホスト名/cakephp238/users/login

   boostcake-Screenshot002

 ・編集後の「login」ページ:ホスト名/cakephp238/users/login

    boostcake-Screenshot007

9. 表示が崩れてしまったページの対応


 ・各Viewページが、崩れてしまっていました。

 ・編集前の「Posts View」ページ:ホスト名/cakephp238/posts/view

  boostcake-Screenshot003

 ・編集後の「Posts View」ページ:ホスト名/cakephp238/posts/view

  boostcake-Screenshot008

 ・デフォルトの「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;
  }
  */
boostcake-Screenshot009
 ※とりあえず、この方法で対応しましたが、CSSのコメントアウト以外でどうにかしたいものです。

 ・詳細な編集については、http://slywalker.github.io/cakephp-plugin-boost_cake/bootstrap2.html を参考に。


以上です。

0 件のコメント:

コメントを投稿