2016年2月18日木曜日

CakePHP3系環境にBootstrapをinstall(for Windows)

1. Bootstrapのインストール
・Bootstrapの取得
http://getbootstrap.com
からファイルダウンロード

・WebRoot配下に展開
2. BootstrapUIのインストール
・BootstrapUIの取得
https://github.com/FriendsOfCake/bootstrap-ui/
からファイルダウンロード

・pluginsディレクトリにフォルダ名BootstrapUIとして展開
3. JQueryのインストール
・JQueryの取得
http://code.jquery.com
からファイルダウンロード

・webroot/js/jquery配下に展開
4. Bootstrap設定
・config/bootstrap.phpに追記
--------------------------------
Plugin::load('BootstrapUI', ['autoload' => true]);
--------------------------------

・src/View/AppView.phpに追記
--------------------------------
public function initialize()
{
$this->loadHelper('Html', ['className' => 'BootstrapUI.Html']);
$this->loadHelper('Form', ['className' => 'BootstrapUI.Form']);
$this->loadHelper('Flash', ['className' => 'BootstrapUI.Flash']);
$this->loadHelper('Paginator', ['className' => 'BootstrapUI.Paginator']);
}
--------------------------------
5. cake bakeコマンドを使ってファイル作成 (例でAdminクラスを作る)
・コマンドプロンプトで以下のコマンド実行
cd C:\eclipse\xampp\htdocs\bin
cake bake all Admin

以下のファイルが生成される
Controller/AdminController.php
src/Model/Entity/Admin.php
src/Model/Table/AdminTable.php
test/Fixture/AdminFixture.php
test/TestCase/Controller/AdminControllerTest.php
test/TestCase/Model/Table/AdminModelTest.php
6. src/Template/Layout/default.ctpの編集
・追記
$this->prepend('css', $this->Html->css(['bootstrap']));
$this->prepend('script', $this->Html->script(['jquery-2.1.4.js', 'bootstrap']));

・Bootstrap の CSS と衝突を避けるため以下は削除
< ?= $this->Html->css('base.css') ?>
< ?= $this->Html->css('cake.css') ?>
7. 画面を確認

-- Install Bootstrap to CakePHP3 for windows --


1. Bootstrap install
・Acquisition of Bootstrap
http://getbootstrap.com
file download

・Deployment under WebRoot
2. BootstrapUI install
・Acquisition of BootstrapUI
https://github.com/FriendsOfCake/bootstrap-ui/
file download

・Deployment as a folder name BootstrapUI the plugins directory
3. JQuery install
・Acquisition of JQuery
http://code.jquery.com
file download

・Deployment under webroot/js/jquery
4. Bootstrap setting
・Appended to the config/bootstrap.php
--------------------------------
Plugin::load('BootstrapUI', ['autoload' => true]);
--------------------------------

・Appended to the src/View/AppView.php
--------------------------------
public function initialize()
{
$this->loadHelper('Html', ['className' => 'BootstrapUI.Html']);
$this->loadHelper('Form', ['className' => 'BootstrapUI.Form']);
$this->loadHelper('Flash', ['className' => 'BootstrapUI.Flash']);
$this->loadHelper('Paginator', ['className' => 'BootstrapUI.Paginator']);
}
--------------------------------
5. File created using a cake bake command (example:Admin)
・following command at the command prompt
cd C:\eclipse\xampp\htdocs\bin
cake bake all Admin

The following files are generated
Controller/AdminController.php
src/Model/Entity/Admin.php
src/Model/Table/AdminTable.php
test/Fixture/AdminFixture.php
test/TestCase/Controller/AdminControllerTest.php
test/TestCase/Model/Table/AdminModelTest.php
6. edit default.ctp
・Appended
$this->prepend('css', $this->Html->css(['bootstrap']));
$this->prepend('script', $this->Html->script(['jquery-2.1.4.js', 'bootstrap']));

・Delete the following in order to avoid the CSS and the collision of Bootstrap
< ?= $this->Html->css('base.css') ?>
< ?= $this->Html->css('cake.css') ?>
7. Check the screen

0 件のコメント:

コメントを投稿