Dasar-dasar Form dengan Yii2

Baca Juga

Kalau tidak mengolah form, lalu apa manfaatnya kita membuat aplikasi berbasis web? Bagaimanapun juga form merupakan satu-satunya cara untuk berkomunikasi dengan pengguna. Terlepas form itu  bentuknya benar-benar terlihat seperti form ataupun yang sama sekali tidak ada miripnya dengan suatu form. Ada beberapa cara membuat form dengan Yii2. Bisa dengan model activerecord, model yang dinamis, atau tanpa model sama sekali. Nah?
Untuk membuat form yang menggunakan model, kita membutuhkan sebuah widget bernama yii\widgets\ActiveForm. Jika Anda menggunakan twitter bootstrap, ada baiknya mengganti widget tersebut dengan yii\bootstrap\ActiveForm. Keduanya sama, tetapi yang bootstrap memiliki koleksi style yang sesuai dengan bootstrap.

Untuk membuat form yang tidak berkaitan dengan model, kita membutuhkan helper bernama yii\helpers\Html.

Form dengan model

Pada Controller:

$model = new User();

Pada view:

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;

$form = ActiveForm::begin([
    'id' => 'login-form',
    'options' => ['class' => 'form-horizontal'],
]) ?>
<?= $form->field($model, 'username') ?>
// input dengan mask password (karakter bintang atau titik)

<?= $form->field($model, 'password')->passwordInput() ?>
    // tambahkan hint atau petunjuak dan modifikasi labelnya
    <?= $form->field($model, 'username')->textInput()->hint('Please enter your name')->label('Name') ?>
    // input email HTML5 email
    <?= $form->field($model, 'email')->input('email') ?>
<div class="form-group">
        <div class="col-lg-offset-1 col-lg-11">
            <?= Html::submitButton('Login', ['class' => 'btn btn-primary']) ?>
        </div>
    </div>
<?php ActiveForm::end() ?>

Pada sintaks di atas, jangan lupa untuk membuka dan menutup form. Analog dengan sebuah form di HTML, dibuka dengan <form> dan ditutup dengan </form>

Contoh-contoh lainnya:

// allow multiple files to be uploaded:
echo $form->field($model, 'uploadFile[]')->fileInput(['multiple'=>'multiple']);

// allow multiple items to be checked:
echo $form->field($model, 'items[]')->checkboxList(['a' => 'Item A', 'b' => 'Item B', 'c' => 'Item C']);

// dropdown list
echo $form->field($model, 'category')->dropdownList($item,
    ['prompt'=>'Select Category']
);
//untuk $item di atas bisa digunakan:

$items = [
    1 => 'item 1', 
    2 => 'item 2'
];
//atau
$items = Category::find()
        ->select(['label'])
        ->indexBy('id')
        ->column();

//radio list
echo $form->field($model, 'category')->radioList([
    1 => 'radio 1', 
    2 => 'radio 2'
]);
//checkbox list
echo $form->field($model, 'category')->checkboxList([
    1 => 'checkbox 1', 
    2 => 'checkbox 2'
]);

Untuk menambahkan lambang asterik (*) pada label, Anda bisa menambahkan style berikut:

div.required label.control-label:after {
    content: " *";
    color: red;
}

Form tanpa model

use yii\helpers\Html:

Html::beginForm('submit.php', 'get', []);
Html::endForm();

Selengkapnya bisa dilihat di: http://www.yiiframework.com/doc-2.0/yii-helpers-basehtml.html

Form dengan widget

Para penggiat Yii ternyata sudah membuat banyak widget yang sangat bermanfaat dalam membuat form yang user friendly. Sebut saja ekstensi besutan Kartik Visweswaran (https://github.com/kartik-v).

Salah satu contohnya adalah sintaks berikut menggunakan widget select2.

use kartik\select2\Select2;

// Normal select with ActiveForm & model
echo $form->field($model, 'state_1')->widget(Select2::classname(), [
    'data' => $data,
    'language' => 'de',
    'options' => ['placeholder' => 'Select a state ...'],
    'pluginOptions' => [
        'allowClear' => true
    ],
]);

Teknik penggunaan form dengan widget karya Kartik akan kita bahas di lain kesempatan.

Selamat mencoba!