Yii Framework: 新規登録ページビューを、Twigと素のPHPとで表現してみた

YiiでTwigを利用するにあたり yiiext / twig-renderer を使っています。設置、設定等は、リンクを参考にしてください。

まず protected/config/main.php にて、CHtml::?? などの記述をすっきり見せるために諸々のショートカットを設定します (twig-renderer / ETwigViewRenderer.php が参考になります) 。

	<?php
	return array(
	'components' => array(
	...
	'viewRenderer' => array(
	'class' => 'ext.ETwigViewRenderer',
	'globals' => array(
	'Yii' => 'Yii',
	'Captcha' => 'CCaptcha',
	),
	'functions' => array(
	'link' => 'CHtml::link',
	'form' => 'CHtml::beginForm',
	'endform' => 'CHtml::endForm',
	'sform' => 'CHtml::statefulForm',
	'errors' => 'CHtml::errorSummary',
	'_text' => 'CHtml::textField',
	'label' => 'CHtml::activeLabel',
	'text' => 'CHtml::activeTextField',
	'password' => 'CHtml::activePasswordField',
	'checkbox' => 'CHtml::activeCheckBox',
	'submit' => 'CHtml::submitButton',
	),
	),
	...

view raw main.php hosted with ❤ by GitHub

これは素のPHPを使っての新規登録ページの例

	<?php if (Yii::app()->user->hasFlash('error')): ?>
	<div class="flash-error">
	<div class="center">
	<?php echo Yii::app()->user->getFlash('error'); ?><br />
	<?php echo CHtml::link('新規登録画面に戻る', array('/user/register')); ?>
	</div><!-- /.center -->
	</div><!-- /.flash-error -->
	<?php else: ?>
	<p>
	新規登録を行います<br />
	以下のフォームに必要な情報を入力してください
	</p>
	<div class="form">
	<?php echo CHtml::statefulForm(); ?>
	<?php echo CHtml::errorSummary($model); ?>
	<div class="row">
	<?php echo CHtml::activeLabel($model, 'username'); ?>
	<?php echo CHtml::activeTextField($model, 'username', array('maxlength' => 32)); ?>
	</div><!-- /.row -->
	<div class="row">
	<?php echo CHtml::activeLabel($model, 'email'); ?>
	<?php echo CHtml::activeTextField($model, 'email', array('maxlength' => 64)); ?>
	</div><!-- /.row -->
	<div class="row">
	<?php echo CHtml::activeLabel($model, 'password'); ?>
	<?php echo CHtml::activePasswordField($model, 'password', array('maxlength' => 64)); ?>
	</div><!-- /.row -->
	<div class="row">
	<?php echo CHtml::activeLabel($model, 'verifyPassword'); ?>
	<?php echo CHtml::activePasswordField($model, 'verifyPassword', array('maxlength' => 64)); ?>
	</div><!-- /.row -->
	<?php if (CCaptcha::checkRequirements()): ?>
	<div class="row">
	<?php $this->widget('CCaptcha'); ?>
	<?php echo CHtml::activeLabel($model, 'verifyCode'); ?>
	<?php echo CHtml::activeTextField($model,'verifyCode'); ?>
	</div><!-- /.row -->
	<?php endif; ?>
	<div class="row buttons">
	<?php echo CHtml::submitButton('登録内容を確認する', array('name' => 'confirm')); ?>
	</div><!-- /.row buttons -->
	<?php echo CHtml::endForm(); ?>
	</div><!-- /.form -->
	<?php endif; ?>

view raw register.php hosted with ❤ by GitHub

これは twig-renderer を使っての新規登録ページの例

	{% if App.user.hasFlash('error') %}
	<div class="flash-error">
	<div class="center">
	{{ App.user.getFlash('error') }}<br />
	{{ link('新規登録画面に戻る', ['/user/register']) }}
	</div><!-- /.center -->
	</div><!-- /.flash-error -->
	{% else %}
	<p>
	新規登録を行います<br />
	以下のフォームに必要な情報を入力してください
	</p>
	<div class="form">
	{{ sform() }}
	{{ errors(model) }}
	<div class="row">
	{{ label(model, 'username') }}
	{{ text(model, 'username', {'maxlength': 32}) }}
	</div><!-- /.row -->
	<div class="row">
	{{ label(model, 'email') }}
	{{ text(model, 'email', {'maxlength': 64}) }}
	</div><!-- /.row -->
	<div class="row">
	{{ label(model, 'password') }}
	{{ password(model, 'password', {'maxlength': 64}) }}
	</div><!-- /.row -->
	<div class="row">
	{{ label(model, 'verifyPassword') }}
	{{ password(model, 'verifyPassword', {'maxlength': 64}) }}
	</div><!-- /.row -->
	{% if Captcha.checkRequirements %}
	<div class="row">
	{{ this.widget('CCaptcha', [], true) }}
	{{ label(model, 'verifyCode') }}
	{{ text(model, 'verifyCode') }}
	</div><!-- /.row -->
	{% endif %}
	<div class="row buttons">
	{{ submit('登録内容を確認する', {'name': 'confirm'}) }}
	</div><!-- /.row buttons -->
	{{ endform() }}
	</div><!-- /.form -->
	{% endif %}

view raw register.twig hosted with ❤ by GitHub

twig-renderer とショートカットを利用することで、より見やすくなりました。これくらい見やすいと、使おうかなという気になってきます。

また、Yii では twig-renderer の他にもコアの CPradoViewRenderer や yiiextでは Smarty view renderer、Dwoo view renderer、Quicky view renderer などがあるみたいです。