カテゴリ

0 Comments 1623 Views

Posted by jamband in 初心者向け on 2012年10月27日8:12:42 JST

CHtmlの使い方

はじめに

CHtmlはHTMLビューを作成するヘルパーメソッドです。
おそらく多くは、ビューでリンクやフォームなどを作るときに使います。
このページでは、CHtmlでよく使うメソッドをピックアップして、簡単に説明していきます。

(フォーム作成時などに使用されるヘルパーに関しては、モデルと関連のあるものは active…() というメソッドになります。)

CHtml::link()
CHtml::encode()
CHtml::beginForm()
CHtml::endForm()
CHtml::errorSummary()
CHtml::error()
CHtml::activeLabel()
CHtml::activeTextField()
CHtml::activeTextArea()
CHtml::activePasswordField()
CHtml::activeFileFiled()
CHtml::listData()
CHtml::activeRadioButtonList()
CHtml::activeDropDownList()
CHtml::activeCheckBoxList()
CHtml::submitButton()
CHtml::imageButton()

CHtml::link()

ハイパーリンクタグを生成します … 詳しく

public static string link(string $text, mixed $url='#', array $htmlOptions=array())

//特定のコントローラ、アクションに行きたい場合;
<?php echo CHtml::link('Link Text', array('/controller/action')); ?>
//HTML出力
<a href="/yii-chtml-sample/index.php?r=controller/action">Link Text</a>
 
 
//特定のモジュール、コントローラ、アクションに行きたい場合
<?php echo CHtml::link('Link Text', array('/module/controller/action')); ?>
//HTML出力
<a href="/yii-chtml-sample/index.php?r=module/controller/action">Link Text</a>
 
 
//特定のコントローラにいて、別のアクションに行きたい場合 (この場合はコントローラ名は省略可)
<?php echo CHtml::link('Link Text', array('action')); ?>
//HTML出力
<a href="/yii-chtml-sample/index.php?r=controller/action">Link Text</a>
 
 
//アクションにパラメータを追加したい場合
<?php echo CHtml::link('Link Text', array('action', 'param1' => 'value1')); ?>
//HTML出力
<a href="/yii-chtml-sample/index.php?r=controller/action&param1=value1">Link Text</a>
 
 
//classを追加したい場合
<?php echo CHtml::link('Link Text', '#', array('class' => 'value')); ?>
//HTML出力
<a class="value" href="#">Link Text</a>
 
 
//特定のページの、特定の場所にジャンプしたい
<?php echo CHtml::link('Link Text', array('/controler/action', '#' => 'hoge')); ?>
//HTML出力
<a href="/yii-chtml-sample/index.php?r=controler/action#hoge">Link Text</a>
 
 
//確認ダイアログを使用して、POST経由でコントローラアクションへのリンクを作成
<?php echo CHtml::link('削除', '#', array('submit' => array('delete', 'id' => $hoge->id), 'confirm' => '削除してもよろしいですか？')); ?>
//HTML出力 (あと、フッター部分でjQueryのコードが追加されます。これはそれぞれで確認してください)
<a href="#" id="yt0">削除</a>
 
//別のサイトなどに行きたい場合 (array()を除きます)
<?php echo CHtml::link('Yii Framework', 'http://www.yiiframework.com'); ?>
// HTML出力
<a href="http://www.yiiframework.com">Yii Framework</a>
 
 
//リンクを新しいページで開きたい場合
<?php echo CHtml::link('Yii Framework', 'http://www.yiiframework.com', array('target' => '_blank')); ?>
// HTML出力
<a target="_blank" href="http://www.yiiframework.com">Yii Framework</a>

メモ

リンクタグに何かを追加したい場合、たいてい第3引数の$htmlOptionsに書くことになります。
特定のサイトなどのリンクを作成する場合に、CHtml::link()を使う利点はあまりありません。

CHtml::encode()

これはソースを見たほうがわかりやすいと思います … 詳しく

public static string encode(string $text)

public static function encode($text) 
{ 
    return htmlspecialchars($text,ENT_QUOTES,Yii::app()->charset); 
}

CHtml::beginForm()

フォームの開始タグを生成します … 詳しく

public static string beginForm(mixed $action='', string $method='post', array $htmlOptions=array())

// /protected/views/hoge/create.phpにいる場合
<?php echo CHtml::beginForm(); ?>
//HTML出力
<form action="/yii-chtml-sample/index.php?r=hoge/create" method="post">
 
 
//input要素のtype属性にfileを使用する場合
<?php echo CHtml::beginForm('', 'post', array('enctype' => 'multipart/form-data')); ?>
//HTML出力
<form enctype="multipart/form-data" action="/yii-chtml-sample/index.php?r=hoge/create" method="post">
 
 
//検索を含んだページ移行などで、再度検索時に1ページ目に戻したい場合
//ページ移行時に付加されるURLパラメータをクリアにするためにYii::app()->createUrl($this->route)を利用します
<?php echo CHtml::beginForm(Yii::app()->createUrl($this->route)); ?>
//HTML出力
<form action="/yii-chtml-sample/index.php?r=hoge/create" method="post">

メモ

CHtml::beginForm() のショートカットとして CHtml::form() を使うことができます。

CHtml::endForm()

フォームの終了タグを生成します … 詳しく

public static string endForm()

<?php CHtml::endForm(); ?>
//HTML出力
</form>

CHtml::errorSummary()

モデルのバリデーションエラーをまとめて表示します … 詳しく

public static string errorSummary(mixed $model, string $header=NULL, string $footer=NULL, array $htmlOptions=array())

// /protected/config/main.php で 'language'=>'ja' になっていると過程して
<?php echo CHtml::errorSummary($model); ?>
//バリデーションエラー発生時のHTML出力の例
 <div class="errorSummary"><p>以下の入力エラーを修正してください:</p>
 <ul>
 <li>Attribute1 は空白ではいけません。</li>
 <li>Attribute2 は空白ではいけません。</li>
 </ul>
 </div>
 
 
// class名を変更したい場合
<?php echo CHtml::errorSummary($hoge, null, null, array('class' => 'errors')); ?>
//バリデーションエラー発生時のHTML出力の例
 <div class="errors"><p>以下の入力エラーを修正してください:</p>
 <ul>
 <li>Attribute1 は空白ではいけません。</li>
 <li>Attribute2 は空白ではいけません。</li>
 </ul>
 </div>
 
 
// ヘッダー部分を省略したい場合
<?php echo CHtml::errorSummary($model, ''); ?>
//バリデーションエラー発生時のHTML出力の例
 <div class="errorSummary">
 <ul>
 <li>Attribute1 は空白ではいけません。</li>
 <li>Attribute2 は空白ではいけません。</li>
 </ul>
 </div>

メモ

ヘッダーを省略したい場合の第2引数の $header は null 以外の値ならなんでもかまいません

CHtml::error()

モデル属性の最初のバリデーションエラーを表示します … 詳しく

public static string error(CModel $model, string $attribute, array $htmlOptions=array())

<?php echo CHtml::error($model, 'attribute1'); ?>
//バリデーションエラー発生時のHTML出力の例
 <div class="errorMessage">Attribute1 は空白ではいけません。</div>
 
 
//class名を変更したい場合
<?php echo CHtml::error($model, 'attribute1', array('class' => 'error')); ?>
//バリデーションエラー発生時のHTML出力の例
 <div class="error">Attribute1 は空白ではいけません。</div>

CHtml::activeLabel()

モデル属性のラベルタグを生成します … 詳しく

public static string activeLabel(CModel $model, string $attribute, array $htmlOptions=array())

//コントローラから特定のモデルのインスタンスをビューに送っている場合
<?php echo CHtml::activeLabel($model, 'attribute1'); ?>
//HTML出力
<label for="Hoge_attribute1">Attribute1</label>
//バリエーションエラー発生時のHTML出力。class="error"が付加されます。
<label class="error" for="Hoge_attribute1">Attribute1</label>
 
 
//class="error"を付加させつつ、ラベルの文字列を変えたい場合
<?php echo CHtml::activeLabel($model, 'attribute1', array('label' => 'fuga')); ?>
//HTML出力
<label for="Hoge_attribute1">fuga</label>
//バリエーションエラー発生時のHTML出力
<label class="error" for="Hoge_attribute1">fuga</label>

メモ

必須項目にしたい場合は CHtml::activeLabelEx() が用意されています。

CHtml::activeTextField()

モデル属性のテキストフィールドを生成します … 詳しく

public static string activeTextField(CModel $model, string $attribute, array $htmlOptions=array())

//コントローラから特定のモデルのインスタンスをビューに送っている場合
<?php echo CHtml::activeTextField($model, 'attribute1'); ?>
//HTML出力。maxlengthの値はモデルのrules()で指定したlengthのmaxの値になります
<input name="Hoge[attribute1]" id="Hoge_attribute1" type="text" maxlength="50" />
//バリエーションエラー発生時のHTML出力
<input name="Hoge[attribute1]" id="Hoge_attribute1" type="text" maxlength="50" value="" class="error" />
 
 
//maxlengthを変更したい場合
<?php echo CHtml::activeTextField($model, 'attribute1', array('maxlength' => 64)); ?>
//HTML出力
<input maxlength="64" name="Hoge[attribute1]" id="Hoge_attribute1" type="text" />
 
 
//classを付加させたい場合
<?php echo CHtml::activeTextField($model, 'attribute1', array('class' => 'fuga')); ?>
//HTML出力
<input class="fuga" name="Hoge[attribute1]" id="Hoge_attribute1" type="text" maxlength="50" value="" />
//バリエーションエラー発生時のHTML出力
<input class="fuga error" name="Hoge[attribute1]" id="Hoge_attribute1" type="text" maxlength="50" value="" />

CHtml::activeTextArea()

モデル属性のテキストエリアを生成します … 詳しく

public static string activeTextArea(CModel $model, string $attribute, array $htmlOptions=array())

//コントローラから特定のモデルのインスタンスをビューに送っている場合
<?php echo CHtml::activeTextArea($model, 'attribute1'); ?>
//HTML出力
<textarea name="Hoge[attribute1]" id="Hoge_attribute1"></textarea>
 
 
//サイズなどを変えたい場合
<?php echo CHtml::activeTextArea($model, 'attribute1', array('rows'=>6, 'cols'=>50)); ?>
//HTML出力
<textarea rows="6" cols="50" name="Hoge[attribute1]" id="Hoge_attribute1"></textarea>

CHtml::activePasswordField()

モデル属性のパスワードフィールドを生成します … 詳しく

public static string activePasswordField(CModel $model, string $attribute, array $htmlOptions=array())

//コントローラから特定のモデルのインスタンスをビューに送っている場合
<?php echo CHtml::activePasswordField($model, 'attribute1'); ?>
//HTML出力
<input name="Hoge[attribute1]" id="Hoge_attribute1" type="password" maxlength="20" />

CHtml::activeFileField()

モデル属性のファイルフィールドを生成します … 詳しく

public static string activeFileField(CModel $model, string $attribute, array $htmlOptions=array())

//コントローラから特定のモデルのインスタンスをビューに送っている場合
<?php echo CHtml::activeFileField($model, 'attribute1'); ?>
//HTML出力
<input id="ytHoge_attribute1" type="hidden" value="" name="Hoge[attribute1]" />
<input name="Hoge[attribute1]" id="Hoge_attribute1" type="file" />

CHtml::listData()

$key=>$value形式を使用して、ドロップダウンやチェックボックス、ラジオボタンのデータをリスト化します … 詳しく

public static array listData(array $models, string $valueField, string $textField, string $groupField='')

//例えば都道府県デーブル(pref)があって、リストデータ化する場合
<?php var_dump(CHtml::listData(Pref::model()->findAll(), 'id', 'name')); ?>
//var_dumpの出力
array (size=47)
  1 => string '北海道' (length=9)
  2 => string '青森県' (length=9)
  3 => string '岩手県' (length=9)
  ...
 
//グループ化したりもできます
<?php var_dump(CHtml::listData(Pref::model()->findAll(), 'id', 'name', 'group')); ?>
//var_dumpの出力
array (size=9)
  '北海道地方' => 
    array (size=1)
      1 => string '北海道' (length=9)
  '東北地方' => 
    array (size=6)
      2 => string '青森県' (length=9)
      3 => string '岩手県' (length=9)
      4 => string '宮城県' (length=9)
      5 => string '秋田県' (length=9)
      6 => string '山形県' (length=9)
      7 => string '福島県' (length=9)
  '関東地方' => 
    array (size=7)
      8 => string '茨城県' (length=9)
      9 => string '栃木県' (length=9)

メモ

基本的には特定のモデルで getPrefOptions() などのメソッドを作成して、CHtml::listData() でリスト化したデータをreturnし、ビューでその値を取得する、という形がYiiでは一般化しています。

CHtml::activeRadioButtonList()

モデル属性のラジオボタンを生成します … 詳しく

public static string activeRadioButtonList(CModel $model, string $attribute, array $data, array $htmlOptions=array())

//コントローラから特定のモデルのインスタンスをビューに送っている場合
<?php echo CHtml::activeRadioButtonList($model, 'attribute1', array('1'=>'男', '2'=>'女')); ?>
//HTML出力
 <input id="ytHoge_attribute1" type="hidden" value="" name="Hoge[attribute1]" />
 <span id="Hoge_attribute1">
 <input id="Hoge_attribute1_0" value="1" type="radio" name="Hoge[attribute1]" />
 <label for="Hoge_attribute1_0">男</label><br/>
 <input id="Hoge_attribute1_1" value="2" type="radio" name="Hoge[attribute1]" />
 <label for="Hoge_attribute1_1">女</label>
 </span>

メモ

デフォルトではリストの区切りに 改行タグ が使われています。変更したい場合は$htmlOptionsで 'separator' => '区切り文字' と書き加えます。また template というオプションを使ってラベルの位置など、細かな部分の微調整ができるようになっています。

CHtml::activeDropDownList()

モデル属性のドロップダウンを生成します … 詳しく

public static string activeDropDownList(CModel $model, string $attribute, array $data, array $htmlOptions=array())

//コントローラから特定のモデルのインスタンスをビューに送っている場合
<?php echo CHtml::activeDropDownList($model, 'attribute1', array('1'=>'男', '2'=>'女')); ?>
//HTML出力
 <select name="Hoge[attribute1]" id="Hoge_attribute1">
 <option value="1">男</option>
 <option value="2">女</option>
 </select>
 
 
//「選択してください」みたいな文字を出しておきたい場合
<?php echo CHtml::activeDropDownList($model, 'attribute1', array('1'=>'男', '2'=>'女'), array(
    'prompt' => '選択してください',
 
)); ?>
//HTML出力
 <select name="Hoge[attribute1]" id="Hoge_attribute1">
 <option value="">選択してください</option>
 <option value="1">男</option>
 <option value="2">女</option>
 </select>
 
 
//デフォルトの選択値を指定したい場合
<?php echo CHtml::activeDropDownList($model, 'attribute1', array('1'=>'男', '2'=>'女'), array(
    'options' => array(
        '2' => array('selected' => true),
    ),
)); ?>
//HTML出力
 <select name="Hoge[attribute1]" id="Hoge_attribute1">
 <option value="1">男</option>
 <option value="2" selected="selected">女</option>
 </select>

メモ

<?php echo CHtml::dropDownList('name', $select, $data, array('submit' => '')); ?> と書くとsubmitボタンのフォームなどを書かなくても選択時にsubmitしてくれたりします。 'submit' => '' は現在のURLを指定していることになります。

CHtml::activeCheckboxList()

モデル属性のチェックボックスを生成します … 詳しく

public static string activeCheckBoxList(CModel $model, string $attribute, array $data, array $htmlOptions=array())

//コントローラから特定のモデルのインスタンスをビューに送っている場合
<?php echo CHtml::activeCheckBoxList($model, 'attribute1', array('1'=>'a', '2'=>'b')); ?>
//HTML出力
 <input id="ytHoge_attribute1" type="hidden" value="" name="Hoge[attribute1]" />
 <span id="Hoge_attribute1">
 <input id="Hoge_attribute1_0" value="1" type="checkbox" name="Hoge[attribute1][]" />
 <label for="Hoge_attribute1_0">a</label>
 <br/>
 <input id="Hoge_attribute1_1" value="2" type="checkbox" name="Hoge[attribute1][]" />
 <label for="Hoge_attribute1_1">b</label>
 </span>
 
 
//「すべて選択」のチェックボックスを追加する場合
<?php echo CHtml::activeCheckBoxList($model, 'attribute1', array('1'=>'a', '2'=>'b'), array(
    'checkAll' => 'すべて選択',
)); ?>
//HTML出力
 <input id="ytHoge_attribute1" type="hidden" value="" name="Hoge[attribute1]" />
 <span id="Hoge_attribute1">
 <input id="Hoge_attribute1_all" value="1" type="checkbox" name="Hoge_attribute1_all" />
 <label for="Hoge_attribute1_all">すべて選択</label>
 <br/>
 <input id="Hoge_attribute1_0" value="1" type="checkbox" name="Hoge[attribute1][]" />
 <label for="Hoge_attribute1_0">a</label>
 <br/>
 <input id="Hoge_attribute1_1" value="2" type="checkbox" name="Hoge[attribute1][]" />
 <label for="Hoge_attribute1_1">b</label>
 </span>

メモ

細かなデザインなどは radioButtonList() と同様に、template, separatorなどのオプションが用意されています。

CHtml::submitButton()

送信ボタンを生成します … 詳しく

public static string submitButton(string $label='submit', array $htmlOptions=array())

<?php echo CHtml::submitButton('Create'); ?>
//HTML出力
<input type="submit" name="yt0" value="Create" />
 
 
//classを付加させたい場合
<?php echo CHtml::submitButton('Create', array('class' => 'fuga')); ?>
//HTML出力
<input class="fuga" type="submit" name="yt0" value="Create" />

メモ

上記のようなコードの場合 <?php echo CHtml::button('Create', array('type' => 'submit')); ?> と書いても同様のHTML出力になります。

CHtml::imageButton()

画像送信ボタンを生成します … 詳しく

public static string imageButton(string $src, array $htmlOptions=array())

<?php echo CHtml::imageButton(Yii::app()->baseUrl.'/images/search.png'); ?>
//HTML出力
<input src="/yii-chtml-sample/images/search.png" type="image" name="yt0" value="submit" />

終わりに

ざっと、よく使われるであろう代表的なCHtmlヘルパーを簡単に紹介しましたが、もっと詳しく知りたい場合はCHtmlクラスのAPIを見てみてください。また、わからないところがあれば、こちらのサイトで質問するなり、Yiiのオフィシャルのフォーラムで検索するなり、APIを見るなりすると解決するかもしれません。

他には、Yiiのバージョン1.1.11から HTML5のサポートも始まっていたり、また、CHtmlでのフォームに慣れてくれば是非 CActiveForm を使ってのフォーム作りなどにも挑戦してみてください。

参考リンク

Comments (0)

No comments posted yet. Be the first!

You must be logged in to post comments.