1週間以上も間を空けてしまいましたが、前回 #09に引き続いて画面表示周りです。デフォルトのレイアウトやHTML Helperに関することを書いてみます。今回のエントリはちょっと長くなっちゃいました。
前回は、
/cake/libs/view/templates/layouts/
にあるデフォルトのレイアウト テンプレートファイル(default.thml)を
/app/view/layouts/
にコピーしました。ほぼデフォルト状態のままなんですけど、default.thmlは次のようになりました。
<!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>
<title><?php echo $title_for_layout; ?></title>
<?php echo $html->charset(); ?>
<link rel="icon" href="<?php echo $this->webroot . 'favicon.ico'; ?>" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo $this->webroot . 'favicon.ico'; ?>" type="image/x-icon" />
<?php echo $html->css('default'); ?>
</head>
<body>
<div id="contents">
<div id="header">
<h1><?php echo $html->image("title.png", array("alt" => "GEUSET BOOK")) ?></h1>
</div>
<?php
if ($session->check('Message.flash')) {
$session->flash();
}
echo $content_for_layout;
?>
<div id="footer">
<a href="http://www.cakephp.org/"><?php echo $html->image('cake.power.png', array('alt'=>"CakePHP(tm) : Rapid Development Framework", 'border'=>"0")); ?></a>
</div>
</div>
<?php echo $cakeDebug; ?>
</body>
</html>
最初のdefault.thmlからコメント行を削って整形してから、ちょっとだけ変更を加えてあります。
CSS、Image、Java Scriptなどの保存場所。
書くのを忘れていましたが、ビューのテンプレートファイルから参照するCSS、Image、Java Scriptなどなどの保存場所は
/app/webroot/
├ css
├ files
├ img
└ js
といった具合に/app/webroot/以下に保存されています。とりあえず画像などを使って少しだけレイアウトやビュー周りをカスタマイズしてみた。
それっぽくないんですけど、↑なかんじなゲストブックになった。今回の学習編などで使用しているHTMLヘルパー関連を以下に書いておこう。
ビュー周りでよく使いそうな HTML Helperなど。
最初はヘルパーではありませんが
$this->pageTitle
HTMLのHEAD内のTITLE要素の設定をします。
$this->pageTitle = "Strings";
コントローラーのaction内で指定します。指定しない場合はコントローラー名になります。
$html->charset()
レイアウト内にてHTMLのHEAD要素内のMETA指定用です。
HtmlHelper::charset($charset = null,
$return = false)
使用例
<?php echo $html->charset(); ?>
出力結果
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
$this->webroot
/app/webroot/のPATHを返します。デフォルトのレイアウトファイルではfaviconを指定するところで使われていました。
使用例
<link rel="icon" href="<?php echo $this->webroot . 'favicon.ico'; ?>" type="image/x-icon" />
出力結果
<link rel="icon" href="/guestbook/favicon.ico" type="image/x-icon" />
$html->css()
指定したCSSファイルへのPATHを返します。
HtmlHelper::css($path,
$rel = 'stylesheet',
$htmlAttributes = array(),
$return = false)
使用例 :: <?php echo $html->css('default'); ?>
出力結果
<link rel="stylesheet" type="text/css" href="/guestbook/css/default.css" />
$html->image()
Imageタグ要素を出力するHTMLヘルパーになります。CSSのヘルパは拡張子を指定しませんでしたが、Imageのヘルパは拡張子の指定をすることに注意してください。
HtmlHelper::image($path,
$htmlAttributes = array(),
$return = false)
使用例
<?php echo $html->image("title.png", array("alt" => "GEUSET BOOK", "width" => "339", "height" => "57")) ?>
出力結果
<img src="/guestbook/img/title.png" alt="GEUSET BOOK" width="339" height="57" />
$html->url()
コントローラーのアクションパラメータを渡すとURLが返ってきます。
HtmlHelper::url($url = null,
$return = false)
使用例
<form method="post" action="<?php echo $html->url("/boards/post") ?>">
出力結果
<form method="post" action="/guestbook/boards/post">
$html->input()
フォーム部品のテキストボックスを生成します。$fieldNameはMODEL部分に基づいて「Modelname/fieldname」と指定をします。
HtmlHelper::input($fieldName,
$htmlAttributes = array(),
$return = false)
使用例
<?php echo $html->input("Board/title", array("size" => "35")) ?>
出力結果
<input name="data[Board][title]" size="35" value="" type="text" id="BoardTitle" />
$html->textarea()
フォーム部品のテキストエリアボックスを生成します。
HtmlHelper::textarea($fieldName,
$htmlAttributes = array(),
$return = false)
使用例
<?php echo $html->textarea("Board/body", array("rows" => "5", "cols" => "35")) ?>
出力結果
<textarea name="data[Board][body]" rows="5" cols="35" id="BoardBody"></textarea>
$html->password()
フォーム部品のパスワードボックスを生成。
HtmlHelper::password($fieldName,
$htmlAttributes = array(),
$return = false)
使用例
<?php echo $html->password("Board/pwd", array("size" => "8")); ?>
出力結果
<input type="password" name="data[Board][pwd]" size="8" value="" id="BoardPwd" />
以下のヘルパーと同等。
<?php echo $html->input("Board/pwd", array("size" => "8", "type" => "password" )) ?>
$html->hidden()
フォーム部品のhidden要素を生成
HtmlHelper::hidden($fieldName,
$htmlAttributes = array(),
$return = false)
使用例
<?php echo $html->hidden("Board/id") ?>
出力結果
<input type="hidden" name="data[Board][id]" value="" id="BoardId" />
$html->submit()
フォーム部品のサブミットボタンを生成。
HtmlHelper::submit($caption = 'Submit',
$htmlAttributes = array(),
$return = false)
使用例
<?php echo $html->submit("投稿", array("class" => "sb")) ?>
出力結果
<input type="submit" class="sb" value="投稿" />
$html->link()
アンカータグを生成します。
HtmlHelper::link($title,
$url = null,
$htmlAttributes = array(),
$confirmMessage = false,
$escapeTitle = true,
$return = false)
使用例
<?php echo $html->link($post["Board"]["title"], "/boards/view/" . $post["Board"]["id"]) ?>
出力結果
<a href="/guestbook/boards/view/1">テスト</a>
この使用例では引数に$titleと$urlしか指定していません。$confirmMessageはリンクをクリックしたあとにJavascriptでYES、NOの確認のAlartを表示します。
<?php echo $html->link($post["Board"]["title"], "/boards/view/" . $post["Board"]["id"], array("title" => $post["Board"]["title"]), "サイト外へ移動します。") ?>
こんな感じで使います。ちょっと長くなっちゃいますけど･･･。でも削除や編集のときのちょっとした確認にも使えるので便利ですよね。
他にもHTMLヘルパーはまだまだあるんですけど、今回のエントリー群で使用したもののみを取り上げてみました。
BUFFALO TurboUSB/耐衝撃/巻きピタケーブル収納 USB2.0用 ポータブルHDD 120GB ホワイト HD-PF120U2-WH
