Panduan Yii2, Membuat Form input di Y

Bagian ini menjelaskan tentang bagaimana membuat halaman baru dengan sebuah form untuk mendapatkan data dari user. Halaman tersebut menampilkan form dengan input field nama dan email. Setelah mendapatkan dua informasi tersebut dari user, halaman tersebut akan menampilkan nilai-nilai yang dimasukkan untuk konfirmasi.

Untuk melakukannya, selain membuat sebuah action dan 2 view, anda juga harus membuat sebuah model.

Pada tutorial ini, anda akan mempelajari:

• Bagaimana membuat model untuk merepresentasikan data yang dimasukkan user melalui form.
• Bagaimana mendeklarasikan rules/aturan untuk mem-validasi data yang dimasukkan.
• Bagaimana membangun form HTML dengan view.

Cara Membuat Model di Yii2

Data yang di-request dari user direpresentasikan dengan sebuah EntryForm model class seperti yang dibawah ini dan disimpan dalam file models/EntryForm.php.

<?php

namespace app\models;

use Yii;
use yii\base\Model;

class EntryForm extends Model
{
    public $name;
    public $email;

    public function rules()
    {
        return [
            [['name', 'email'], 'required'],
            ['email', 'email'],
        ];
    }
}

Class tersebut di extend dari yii/base/Model, sebuah base class yang disediakan oleh Yii yang digunakan  untuk mewakili form data.

Class EntryForm memuat 2 public member, yaitu name dan email, yang digunakan untuk menyimpan data yang dimasukkan oleh user. EntryForm juga memuat method bernama rules(), yang mengembalikan rules-rules untuk validasi data. Rule validasi pada script diatas mendefinisikan dua hal:

• name dan email harus diisi.
• email harus berupa alamat email valid.

Jika anda memiliki sebuah object EntryForm  yang diisi data oleh user, anda dapat memanggil validate() untuk menjalankan validasi data. Kesalahan validasi data  akan mengubah nilai hasErrors menjadi true, dan anda juga dapat mengetahui kesalahan apa yang terjadi saat validasi.

<?php
$model = new EntryForm();
$model->name = 'Qiang';
$model->email = 'bad';
if ($model->validate()) {
    // Good!
} else {
    // Failure!
    // Use $model->getErrors()
}

Membuat Action 

Selanjutnya, anda perlu membuat action entry di dalam controller site yang akan menggunakan model baru kita tadi. Proses pembuatan dan penggunaan action dijelaskan dalam bagian Hello World Yii2.

aying Hello section.

load(Yii::$app->request->post()) && $model->validate()) {
            // valid data received in $model

            // do something meaningful here about $model ...

            return $this->render('entry-confirm', ['model' => $model]);
        } else {
            // either the page is initially displayed or there is some validation error
            return $this->render('entry', ['model' => $model]);
        }
    }
}

Pertama-tama, action membuat sebuah object EntryForm. Lalu mencoba untuk memuat model diisi dengan data dari $_POST, disediakan oleh Yii dengan yii\web\Request::post(). Jika model sukses diisi (ketika user sudah men-submit form HTML), action akan memanggil validate() untuk memeriksa apakah nilai yang dimasukkan valid.

Info: expression Yii::$app mewakili instance aplikasi yang dapat diakses secara global. Instance tersebut juga merupakan serice locator yang menyediakan komponen seperti request, response, db dan lain-lain. Untuk mendukung fungsi spesifik. Pada kode diatas, component request dari application instance digunakan untuk mengakses $_POST data.

Jika tidak ada masalah, action akan me-render sebuah view bernama entry-confirm untuk mengkonfirmasi keberhasilan pengiriman data ke user. Jika tidak ada data yang dikirim atau data memuat error, maka view entry lah yang di render. Dimana form HTML ditampilkan beserta pesan kesalahan validasi jika ada kesalahan validasi.

Membuat View 

Terakhir, buat 2 file view bernama entry-confirm dan entry yang akan dirender oleh action entry.

View entry-confirm menampilkan data nama dan email. Disimpan kedalam file views/site/entry-confirm.php.

<?php
use yii\helpers\Html;
?>
<p>You have entered the following information:</p>

<ul>
    <li><label>Name</label>: <?= Html::encode($model->name) ?></li>
    <li><label>Email</label>: <?= Html::encode($model->email) ?></li>
</ul>

View entry menampilkan form HTML. Disimpan kedalam file views/site/entry.php.

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
?>
<?php $form = ActiveForm::begin(); ?>

    <?= $form->field($model, 'name') ?>

    <?= $form->field($model, 'email') ?>

    <div class="form-group">
        <?= Html::submitButton('Submit', ['class' => 'btn btn-primary']) ?>
    </div>

<?php ActiveForm::end(); ?>

View menggunakan widget powerful yang bernama ActiveForm untuk membangun form HTML. Method begin() dan end() digunakan untuk me-render tag pembukaan dan penutup. Diantara dua method call tersebut, input field dibuat dengan menggunakan method field(). Input field pertama untuk data "name", dan yang kedua untk data "email". Setelah input field, method yii\helpers\Html::submitButton dipanggil untuk men-generasi submit button.

Test Hasil

Untuk melihat hasilnya, gunakan browser anda untuk mengakses URL berikut.

Anda akan melihat dua input field. didepan dari setiap input field, ada label yang menunjukkan nama field. Jika anda klik submit tanpa memasukkan apapun atau anda memberikan format email yang salah, anda akan melihat pesan error yang ditampilkan disamping setiap input field yang bermasalah.

Setelah memasukkan nama dan email yang valid dan klik submit button, anda akan melihat halaman baru yang menampilkan data yang baru anda masukkan.

Penjelasan

Mungkin anda bertanya tanya bagaimana cara kerja form HTML dibalik layar, karena secara otomatis dapat menampilkan label untuk setiap input field dan menampilkan pesan error jika anda salah memasukkan data tanpa me-reload halaman.

Berikut penjelasannya. Pertama kali, validasi data dilakukan disisi client menggunakan javascript, dan kemudian validasi juga dilakukan di sisi server dengan PHP. yii\widgets\ActiveForm cukup cerdas untuk mengekstrak rule validasi yang dideklarasikan di EntryForm, mengubahnya menjadi kode executable javascript, dan menggunakan javascript untuk melakunan validasi data. Jika dalam suatu kasus javascript pada sisi browser dimatikan, data tetap akan di validasi di sisi server.

Label untuk setiap input field di generasi oleh method field(), menggunakan nama proprety dari model. Contohnya label Name di generasi untuk property name.

Anda juga dapat mengubah label dalam view menggunakan kode berikut:

<?= $form->field($model, 'name')->label('Your Name') ?>
<?= $form->field($model, 'email')->label('Your Email') ?>

Info: Yii menyediakan banyak widget untuk membantu anda membangun view yang complex dan dinamis dengan cepat.

loading...