PT Proweb Indonesia

Creating websites for over 21 years

Form dengan bootstrap dan Yii 1

Setelah pada artikel sebelumnya kita membahas  Memakai Bootstrap pada Yii 1 (http://www.proweb.co.id/articles/web_application/bootstrap_yii1.html), maka pada kali ini kita akan membuat form dengan bootstrap dan Yii.

Kita akan mengubah form dengan menambahkan class form-horizontal, form-group, col-sm-2, control-label, btn dan btn-default. Misal kita mengubah contact.php seperti berikut ini:
<?php
/* @var $this SiteController */
/* @var $model ContactForm */
/* @var $form CActiveForm */

$this->pageTitle=Yii::app()->name . ‘ – Contact Us’;
$this->breadcrumbs=array(
    ‘Contact’,
);
?>

<h1>Contact Us</h1>

<?php if(Yii::app()->user->hasFlash(‘contact’)): ?>

<div class=”flash-success”>
    <?php echo Yii::app()->user->getFlash(‘contact’); ?>
</div>

<?php else: ?>

<p>
If you have business inquiries or other questions, please fill out the following form to contact us. Thank you.
</p>

<div class=”form-horizontal”>

<?php $form=$this->beginWidget(‘CActiveForm’, array(
    ‘id’=>’contact-form’,
    ‘enableClientValidation’=>true,
    ‘clientOptions’=>array(
        ‘validateOnSubmit’=>true,
    ),
)); ?>

    <p class=”note”>Fields with <span class=”required”>*</span> are required.</p>

    <?php echo $form->errorSummary($model); ?>

    <div class=”form-group”>
        <?php echo $form->labelEx($model,’name’,array(“class”=>”col-sm-2 control-label”)); ?>
        <?php echo $form->textField($model,’name’); ?>
        <?php echo $form->error($model,’name’); ?>
    </div>

    <div class=”form-group”>
        <?php echo $form->labelEx($model,’email’,array(“class”=>”col-sm-2 control-label”)); ?>
        <?php echo $form->textField($model,’email’); ?>
        <?php echo $form->error($model,’email’); ?>
    </div>

    <div class=”form-group”>
        <?php echo $form->labelEx($model,’subject’,array(“class”=>”col-sm-2 control-label”)); ?>
        <?php echo $form->textField($model,’subject’,array(‘size’=>60,’maxlength’=>128)); ?>
        <?php echo $form->error($model,’subject’); ?>
    </div>

    <div class=”form-group”>
        <?php echo $form->labelEx($model,’body’,array(“class”=>”col-sm-2 control-label”)); ?>
        <?php echo $form->textArea($model,’body’,array(‘rows’=>6, ‘cols’=>50)); ?>
        <?php echo $form->error($model,’body’); ?>
    </div>

    <?php if(CCaptcha::checkRequirements()): ?>
    <div class=”form-group”>
        <div class=”col-sm-2″></div>
        <?php $this->widget(‘CCaptcha’); ?>
    </div>
    <div class=”form-group”>
        <?php echo $form->labelEx($model,’verifyCode’,array(“class”=>”col-sm-2 control-label”)); ?>
        <?php echo $form->textField($model,’verifyCode’); ?>
        <?php echo $form->error($model,’verifyCode’); ?>
    </div>
    <?php endif; ?>

    <div class=”form-group”>
        <div class=”col-sm-2″></div>
        <?php echo CHtml::submitButton(‘Submit’,array(“class”=>”btn btn-default”)); ?>
    </div>

<?php $this->endWidget(); ?>

</div><!– form –>

<?php endif; ?>

Tampilan yang terjadi adalah :

Informasi lebih lanjut silahkan mengunjungi
1. http://getbootstrap.com/css/#forms
2. http://getbootstrap.com/css/#forms-horizontal .

Artikel selanjutnya adalah : http://www.proweb.co.id/articles/web_application/bootstrap_cgridview_yii1.html .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

Form dengan bootstrap dan Yii 1