먼저, 여러가지 플러그인 중 하나를 선택한다.
이 중에서 friendsofcake 의 bootstrap-ui 를 선택(했다기 보다는 일본에서 예제로 본 것이 이것뿐임 ㅋ)했다고 가정함.
1. composer를 이용해서 플러그인을 어플리케이션 루트 폴더에 인스톨한다.
> command line
|
$ php composer.phar require friendsofcake/bootstrap-ui:dev-master
|
2. bootstrap.php 에 플러그인을 로드하는 코드를 추가한다.
> config/bootstrap.php
|
Plugin::load('BootstrapUI');
|
3. AppView.php에 Helper를 로드하는 코드를 추가한다.
> src/View/AppView.php
|
public $layout = 'BootstrapUI.default';
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']);
}
|
* $layout 변수에 위와 같이 디폴트 값을 설정하면, BootstrapUI 플러그인의 디렉토리에 있는 src/Template/Layout/Default.ctp가 사용됨.
4. Layout 폴더에 있는 Default.ctp 파일에 필요한 js, css 파일을 추가해준다. (CDN도 가능하고 프로젝트의 webroot 폴더에 필요한 파일을 복사한 후 로컬로 링크를 걸어도 무방함.)
> vendor/friendsofcake/bootstrap-ui/src/Template/Layout/default.ctp
|
$this->prepend('css', $this->Html->css(['bootstrap/bootstrap']));
↓
$this->prepend('css', $this->Html->css(['//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css']));
$this->prepend('script', $this->Html->script(['jquery/jquery', 'bootstrap/bootstrap']));
↓
$this->prepend('script', $this->Html->script(['jquery/jquery', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js']));
|
* $layout 변수에 디폴트 값을 설정하지 않은 경우는 기존의 cakephp 의 Default.ctp 에 정의함.
> src/Controller/TestController.php
|
<?php
namespace App\Controller;
use App\Controller\AppController;
class TestController extends AppController
{
public function index()
{
}
}
|
> src/Template/Test/index.ctp
|
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Bootstrap Test</a>
</div>
</div>
</nav>
<div class="container theme-showcase" role="main">
<?php
echo $this->Form->create();
echo $this->Form->input('textbox');
echo $this->Form->input('select box', [
'type' => 'select',
'options' => [1, 2, 3]
]);
echo $this->Form->input('radio', [
'label' => 'radio',
'type' => 'radio',
'options' => [1, 2, 3]
]);
echo $this->Form->input('checkbox', [
'multiple' => 'checkbox',
'options' => [1, 2, 3]
]);
echo $this->Form->button('Submit', [
'class' => 'btn btn-primary'
]);
echo $this->form->end();
?>
</div>
|
어플리케이션 폴더의 루트에 있는 composer.json 파일에 코드를 추가하는 것으로 고정이 가능함.
> composer.json
|
"require": {
"friendsofcake/bootstrap-ui": "dev-master#27d320545f6c407a1679bf05b6d2e90227728278"
}
|
* vendor/friendsofcake/bootstrap-ui/src/Template/Layout/examples/ 폴더 밑에 cover.ctp、dashboard.ctp、signin.ctp 샘플 레이아웃 파일이 있으므로 활용 가능함.
댓글
댓글 쓰기