WebプログラミングV

 目次へ 前へ 次へ

2014/1/21 久米

VCakePHP

5. レイアウト

本節で初めて出てくるメソッド とプロパティ

クラス メソッド プロパティ 備考
C AppController   layout  
M AppModel      
V View fetch title_for_layout  
HtmlHelper charset
meta
css
link
   

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

app>View>Layouts>レイアウト.ctp
ページ全体の基本デザイン(ヘッダー・コンテンツ・フッター)の設定

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

 コンテンツビュー設定
   
 

 
bodyのフッターの設定

 

5.2 Cake全体像

  ファイル コード例 備考
C app>Controller>
NekoYohinsController.php
class NekoYohinsController extends AppController {

    public $layout = "neko22";
    
    public function index() {
		$this->set("header_string", "猫用品一覧";
		$datas = $this->NekoYohin->find('all');
		$this->set('ds',$datas);
    }
}
 
M app>Model>
NekoYohin.php
無ければデフォルトでオブジェクト生成してくれるので。今回は不要  
V app>View>
Layouts>neko22.ctp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<?php echo $this->Html->charset(); ?>
	<title>
		<?php echo $title_for_layout; ?>
	</title>
	<?php
		echo $this->Html->meta('icon');
		echo $this->Html->css('neko22');
		echo $this->fetch('meta');
		echo $this->fetch('css');
		echo $this->fetch('script');
	?>
</head>
<body>
	<div id="container">
		<div id="header">
			<?php echo $header_string; ?>
		</div>
		<div id="content">
			<?php echo $this->Session->flash(); ?>
			<?php echo $this->fetch('content'); ?>
		</div>
		<div id="footer">
			<?php echo $this->Html->link('猫ちゃん本舗', 'http://www.shogidojo.com/'); ?>
		</div>
	</div>
</body>
</html>
default.ctp
を改良した
 
 
$this->fetch('content');
の所にindex.ctpが挿入される
V app>View>
NekoYohins>index.ctp

3.1の全検索と同じもの
<h1>猫用品</h1>
<table>
<?php foreach ($ds as $d): ?>
<tr>
<td><?php echo $d['NekoYohin']['id']; ?></td>
<td><?php echo $d['NekoYohin']['name']; ?></td>
<td><?php echo $d['NekoYohin']['kind']; ?></td>
<td><?php echo $d['NekoYohin']['price']; ?></td>
</tr>
<?php endforeach; ?>
</table>
 
css app>webroot>
css>neko22.css
app>webroot>css>cake.generic.cssを別名保存でneko22.css
 
自分の好きなように変更
 
普通のcss
  アクセス http://localhost/web3cake/neko_yohins/  

 

 

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

 

 

 

演習5

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