WebプログラミングⅢ

　目次へ　前へ　次へ

2016/2/1 久米

ⅢCakePHP

5. レイアウト

 

5.1 レイアウトとコンテンツビュー

src>Template>Layout>レイアウト名.ctp
ページ全体の基本デザイン（ヘッダー・コンテンツ・フッター）の設定

htmlのheadタグなどの設定
bodyのヘッダーの設定
bodyのコンテンツの設定
　
src>Template>テーブル>アクション.ctp

　コンテンツビュー設定
　 　
　

　
bodyのフッターの設定

 

5.2 Cake全体像

  ファイル コード例 備考
C src>Controller>
NekoChansController.php		 
use App\Controller\AppController;

class NekoChansController extends AppController{
    
    public function initialize(){
        parent::initialize();
        $this->viewBuilder()->layout('neko22');
        $this->set('header', '猫大好き');
        $this->set('footer', 'copyright 2016 猫ちゃん本舗');
    }

    public function index(){
	$nekoChans = $this->NekoChans->find();
	$this->set('nekoChans', $nekoChans);
    }

}
 initializeで初期化
viewBuilder()->layout('neko22');
で独自レイアウト設定
M src>Model>Table>
NekoChansTable.php		 無ければデフォルトでオブジェクト生成してくれるので。今回は不要  
V src>Template>NekoChans>
index.ctp		 
<h1>猫ちゃんず</h1>
<table>
<tr><th>id</th><th>名前</th><th>特技</th><th>年齢</th></tr>
<?php foreach($nekoChans as $nekoChan): ?>
    <tr>
    <td><?= $nekoChan->id ?></td>
    <td><?= h($nekoChan->name) ?></td>
    <td><?= h($nekoChan->tokugi) ?></td>
    <td><?= h($nekoChan->age) ?></td>
    </tr>
<?php endforeach; ?>
</table>
  
V src>Template>Layout>
neko22.ctp		 
<!DOCTYPE html>
<html>
<head>
    <?= $this->Html->charset() ?>
    <title>
    <?= $this->fetch('title') ?>
    </title>
    <?= $this->Html->css('neko2222.css') ?>
    <?= $this->fetch('meta') ?>
    <?= $this->fetch('css') ?>
    <?= $this->fetch('script') ?>
</head>
<body>
<div id="header"><?= _($header) ?></div>

    <?= $this->Flash->render() ?>
    <?= $this->fetch('content') ?>

<div id="footer"><?= _($footer) ?></div>
</body>
</html>
 $this->fetch('content');
の所にindex.ctpなどが挿入される

下記3つは可変部分として
Viewに追加した時に読み込むようにしている
<?= $this->fetch('meta') ?>
<?= $this->fetch('css') ?>
<?= $this->fetch('script') ?>
今はあってもなくても無関係
V webroot>css>
neko2222.css		 
body {
    font-size:16px;
    color:#15848F;
}
 
h1 {
    font-size:20px;
    font-style:bold;
    background:#15848F;
    color:white;
    padding:5px 10px;
}

#header {
    font-size:12px;
    color:#15848F;
    text-align:center;
}
 
#footer {
    font-size:12px;
    color:#666666;
    text-align:right;
    border:1px solid #999999;
    border-width:1px 0px 0px 0px;
    margin: 50px 0px 0px 0px;
}
 普通のcss
  アクセス http://localhost/web3/caketest/neko-chans/  

 

 

技

  技 コード例 備考
1 input枠を編集できないように echo $this->Form->input('title', ['label' => 'タイトル', 'disabled' =>true]);  
2 編集リンクを設置 echo $this->Html->link('編集', '/neko-chans/edit/'.$nekoChan->id, ['class'=>'something']);
echo $this->Html->link('編集', ['controller'=>'NekoChans', 'action'=>'edit', $nekoChan->id], ['class'=>'something'])		  
3 改行コードをbrに echo nl2br(h($nekoChan->tokugi)); h()はhtmlspecialchars()
のラッパー。CakePHP独自

 

 

 

演習5

  1. 演習１で作った××の××cakeアプリを改造して、全体像を作ってみよ。