cakePHP 3 を 直接 触って 覚えてみることにした No.3
この記事は 2017年 2月 14日 に書かれた記事です。
前回のままだと cakePHP の 標準のデザインですので 管理画面用の デザインに変更します
というわけで 僕の 大好きな Bootstrap を 用いて コーディング していきます
まだ alpha.6 ですが こちらを 使いたいと思います
Bootstrap 4
https://v4-alpha.getbootstrap.com/
Bootstrap 4 に 必要な jQuery と tether は 以下から ダウンロード できます
Download jQuery
http://jquery.com/download/
tether
https://github.com/HubSpot/tether/releases
webroot
上記 URL で ダウンロード した ファイル を
CSS ファイル は /plugins/Admin/webroot/css/ に
JS ファイル は /plugins/Admin/webroot/js/ に それぞれ 入れていきます
ファイル名は 任意に変えても問題ないです
レイアウト指定
Admin 以下を 指定のレイアウト に変更します
というわけで /plugins/Admin/src/Controller/AppController.php に 追記します
namespace Admin\Controller;
use App\Controller\AppController as BaseController;
// ここから追加
use Cake\Event\Event;
//ここまで追加
class AppController extends BaseController
{
// ここから追加
public function beforeFilter( Event $event )
{
$this->viewBuilder()->layout( 'Admin.admin' );
}
//ここまで追加
}
レイアウト作成
レイアウト を 指定しただけでは ファイルがないので エラーページになります
plugins/Admin/src/Template/Layout/admin.ctp に ファイルを 作成し レイアウト を 作成します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name='robots' content='noindex,follow'>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no,address=no,email=no">
<?= $this->Html->css( 'Admin.bootstrap.min' ).PHP_EOL ?>
<?= $this->Html->css( 'Admin.bootstrap.diff' ).PHP_EOL ?>
<?= $this->Html->css( 'Admin.admin' ).PHP_EOL ?>
<title><?= $title_for_layout ?></title>
</head>
<body>
<nav class="fixed-top navbar-inverse bg-inverse" role="navigation">
<div class="navbar navbar-toggleable-md">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#mainNavigation" aria-controls="mainNavigation" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<?php echo $this->Html->link( '管理ページ', [ 'controller' => '/' ], [ 'class' => 'navbar-brand' ] ); ?>
<div class="collapse navbar-collapse" id="mainNavigation">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">設定</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<li><?php echo $this->Html->link( 'ユーザ一覧', [ 'controller' => 'users', 'action' => 'index' ], [ 'class' => 'dropdown-item' ] ); ?></li>
<li><?php echo $this->Html->link( 'ユーザの追加', [ 'controller' => 'users', 'action' => 'add' ], [ 'class' => 'dropdown-item' ] ); ?></li>
<li class="dropdown-divider"></li>
<li><?php echo $this->Html->link( 'ログアウト', [ 'controller' => 'users', 'action' => 'logout' ], [ 'class' => 'dropdown-item' ] ); ?></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<?= $this->fetch( 'content' ) ?>
</body>
<?= $this->Html->script( 'Admin.jquery.min' ).PHP_EOL ?>
<?= $this->Html->script( 'Admin.tether.min' ).PHP_EOL ?>
<?= $this->Html->script( 'Admin.bootstrap.min' ).PHP_EOL ?>
</html>
front_page.ctp
最後に あまり良くない方法かもしれませんが plugins/Admin/src/Template/Pages/front_page.ctp に タイトル の 設定をします
<?php $title_for_layout = 'Dashboard'; $this->set( 'title_for_layout', $title_for_layout ); ?>
これで ページにアクセスしたとき タイトルが 正しく反映されるかと思います
また デザインも Bootstrap の デザインになっているかと思います
手探りで 勉強しているので 間違っていたら ご指摘いただけると助かります!!
