CapkePHP3에서 Bootstrap을 사용하기위한 플러그인으로 BootstrapUI이 있습니다.
이번에는 이 플러그인을 사용하여 bake로 자동 생성되는 화면에 Bootstrap을 적용하여 디자인을 그대로 합니다.
적용할 화면은 다음 두 화면입니다.
기본적으로는 CakePHP3의 퀵 스타트 가이드를 따라 만든 것입니다만, 사용자명이 email가 아니라 name으로 하고 있습니다.

설치 및 설정

BootstrapUI를 composer를 사용하여 설치합니다.composer require friendsofcake/bootstrap-ui:dev-master
설치 후 플러그인의 css 및 js 참조를 CDN으로 변경합니다.
모처럼이므로, 나는 이 최신판을 선택한다.

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.7/css/bootstrap.min.css']));

$this->prepend('script', $this->Html->script(['jquery/jquery', 'bootstrap/bootstrap']));
 ↓
$this->prepend('script', $this->Html->script(['//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js']));

프로젝트에 적용

bootstrap.php에서 BootstrapUI를 로드합니다.
bootstrap.php는 전체 설정을하는 파일이며 디자인의 Bootstrap과 다르기 때문에 주의.
파일의 가장 마지막이라도 좋기 때문에, 다음의 로드 처리를 추가합니다.

config/bootstrap.php

Plugin::load('BootstrapUI');

또한 AppView.php를 다음과 같이 다시 작성합니다.

View/AppView.php

<?php
namespace App\View;

use BootstrapUI\View\UIView;

class AppView extends UIView
{
    public function initialize()
    {
        parent::initialize();
    }
}

디폴트에서는 View 를 상속하고 있는 것을, UIView 를 상속해, initialize 메소드로 부모의 initialize 메소드를 호출하도록(듯이) 합니다.

디스플레이를 살펴보기

지금까지 Bootstrap을 프로젝트에 적용할 수 있었으므로 표시를 확인해 보겠습니다.





폰트라든지는 Bootstrap같이 되었습니다만, 특히 일람 화면은 무너지는 것이 심합니다.

레이아웃을 적용하여 다시보기

BootstrapUI에는 편리한 레이아웃이 포함되어 있습니다.vendor/friendsofcake/bootstrap-ui/src/Template/Layout/example 안에는 다음의 3 종류의 레이아웃이 있습니다.

signin.ctp : 로그인 화면용

dashboard.ctp : 목록 화면이나 용

cover.ctp : 용도 불명 (이번에는 사용하지 않는다)

이 세 가지를 다음 경로로 이동합니다.src/Template/Layout/TwitterBootstrap그런 다음 로그인 화면과 목록 화면의 ctp 파일에 다음을 추가합니다.

login.ctp

<?= $this->extend('../Layout/TwitterBootstrap/signin'); ?>

index.ctp

<?= $this->extend('../Layout/TwitterBootstrap/dashboard'); ?>

이제 디스플레이를 살펴 보겠습니다.




로그인은 상당히 좋아졌습니다만, 일람 화면은 아직 무너지고 있으므로 좀 더 테코 넣습니다.

목록 화면 수정

테이블 보기 다시

테이블을 다시 표시하려면 table 태그에 Bootstrap에 정의된 table 클래스를 추가합니다.

index.ctp

<table cellpadding="0" cellspacing="0" class="table">

사이드바로 Actions 이동

Actions 태그를 append에서 tb_sidebar로 설정합니다.

index.ctp

<?= $this->append('tb_sidebar'); ?>
<nav class="large-3 medium-4 columns" id="actions-sidebar">
    <ul class="side-nav">
        <li class="heading"><?= __('Actions') ?></li>
        <li><?= $this->Html->link(__('New User'), ['action' => 'add']) ?></li>
    </ul>
</nav>
<?= $this->end(); ?>

최종 확인

상당히 좋아진 것이 아닐까요.
BootstrapUI에는 그 밖에도 편리한 헬퍼가 있으므로, 그들도 조합해 가면 Bootstrap를 사용한 화면을 CakePHP로 간단하게 만들 수 있습니다.
그리고 누군가 cover.ctp의 사용법을 알고 있으면 알려 주시면 감사하겠습니다.

참고

CakePHP3에서 트위터 부트 스트랩 사용 (도입편)
BootstrapUI(README.md)