Help us understand the problem. What is going on with this article?

CakePHP3 BootstrapUIを使ってデザインをそれっぽくする

More than 3 years have passed since last update.

CapkePHP3でBootstrapを使うためのプラグインとして、BootstrapUIがあります。
今回はこのプラグインを使って、bakeで自動生成される画面にBootstrapを適用してデザインをそれっぽくします。
適用する画面は以下の2画面です。
基本的にはCakePHP3のクイックスタートガイドに沿って作ったものですが、ユーザー名がemailではなくnameにしています。

image.png

image.png

インストールと設定

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をプロジェクトに適用させることができたので、表示を確認してみます。

image.png

image.png

フォントとかはBootstrapっぽくなりましたが、特に一覧画面は崩れがひどいです。

Layoutを適用して表示を直す

BootstrapUIには便利なレイアウトが同梱されています。
vendor/friendsofcake/bootstrap-ui/src/Template/Layout/exampleの中に以下の3種類のレイアウトがあります。

  • signin.ctp:ログイン画面用
  • dashboard.ctp:一覧画面とか用
  • cover.ctp:用途不明(今回は使わない)

この3つを以下のパスに移動します。
src/Template/Layout/TwitterBootstrap
その後、ログイン画面と一覧画面のctpファイルに以下を追加します。

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

これで表示を見てみます。
image.png

image.png

ログインはだいぶよくなりましたが、一覧画面はまだ崩れてるのでもう少しテコ入れします。

一覧画面の修正

テーブルの表示を直す

テーブルの表示を直すためには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(); ?>

最終確認

image.png

だいぶよくなったのではないでしょうか。
BootstrapUIにはほかにも便利なヘルパーがあるので、それらも組み合わせていくとBootstrapを使った画面をCakePHPで簡単に作ることができます。
あと、誰かcover.ctpの使い道を知っていたら教えていただけると幸いです。

参考

CakePHP3でtwitter bootstrapを使う(導入編)
BootstrapUI(README.md)

frost_star
まだまだ半人前プログラマー。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした