Memulai Pembuatan Aplikasi Web dengan Yii2 (6): Menggunakan Model Form di Yii2

Model adalah bagian dari konsep MVC (Model, View, Controller) yang bertugas untuk memeriksa proses bisnis dan validitas data yang akan disimpan ke dalam tabel. Di Yii2, Model berperang penting dalam proses validasi form yang dikirimkan dari halaman client sebelum akhirnya disimpan ke dalam tabel yang sesuai dengan target Model. Sekarang Anda akan mencoba membuat beberapa form yang memanfaatkan berbagai validator dan widget di Yii2.

Persiapan Coding

Untuk demo kali ini, Anda harus membuat terlebih dahulu sebuah controller dengan nama HelloModelFormController. Simpan controller tersebut dalam sebuah file dengan nama yang sama. Di dalam actionIndex() akan terdapat sebuah proses instansiasi TeamsForm() dan melewatkannya ke view hello-model-form/index.

<?php
namespace app\controllers;
use Yii;
use yii\filters\AccessControl;
use yii\web\Controller;
use app\models\TeamsForm;
use app\models\RegistrationForm;
use app\models\MyProfileForm;
class HelloModelFormController extends Controller
{
public function actions()
{
    return [
        'error' =&gt; [
            'class' =&gt; 'yii\web\ErrorAction',
        ],
    ];
}

public function actionIndex()
{
    $model = new TeamsForm();
    $data = array (
            'model'=&gt;$model,
        );

    if ($model-&gt;load(Yii::$app-&gt;request-&gt;post('TeamsForm')) &amp;&amp; $model-&gt;validate()) {

    } else {

    }

    return $this-&gt;render('index', $data);
}

}

Controller diatas akan digunakan kembali pada bagian lain tutorial ini.

Membuat Form Tambah Tim Sepakbola

Form tambah tim sepakbola yang akan kita buat, terdiri dari tiga field yaitu name, country, dan description. Karena kita tidak menginginkan label yang dibuatkan oleh Yii2, maka kita namai label setiap field di dalam function attributeLabels(). Kemudian kita definisikan berbagai aturan yang akan diperiksa ketika proses validasi. Sekarang silahkan buat sebuah file dengan nama TeamsForm.php di dalam folder models. Dan buat kode berikut di dalam file tersebut:

<?php
namespace app\models;
use yii\base\Model;
class TeamsForm extends Model
{
public $name;
public $country;
public $description;
public function attributeLabels()
{
    return [
        'name' =&gt; 'Nama tim sepakbola',
        'country' =&gt; 'Negara asal',
        'description' =&gt; 'Tentang tim',
    ];
}

public function rules()
{
    return [
        ['name', 'required','message' =&gt; 'Nama tim gak boleh kosong'],
        ['name', 'string','max'=&gt;'20'],
        ['country', 'required','message' =&gt; 'Negara asal tim gak boleh kosong'],
        ['country', 'string','max'=&gt;'25'],
    ];
}

}

Aturan yang digunakan di dalam rules() terdiri dari required dan max length. Pesan error yang akan dikeluarkan jika field dikosongkan telah kita ubah menjadi pesan yang kita atur sendiri. Sedangkan pesan error dalam pemeriksaan max length akan mengeluarkan pesan bawaan dari Yii2.

Lanjutkan kembali, silahkan buat folder dengan nama hello-model-form di views kemudian di dalamnya buat sebuah file dengan nama index.php. Kemudian buat kode berikut di dalam file tersebut:

<?php

$this->title = 'Demo Model & Form';
use yii\helpers\Html;
use yii\widgets\ActiveForm;

?>

<h1>Demo Form Yii2</h1>
<hr />
<p>Contoh form untuk tambah tim sepakbola.</p>

<?php $form = ActiveForm::begin([
        'id' => 'teams-form',
        'options' => ['class' => 'form-horizontal']
    ])
?>

<div class="form-group">
    <div class="col-lg-6">
    <?= $form->field($model, 'name')->hint('Diisi dengan nama yang terdiri dari angka, huruf kecil atau huruf besar'); ?>
    </div>
</div>
<div class="form-group">
    <div class="col-lg-6">
    <?= $form->field($model, 'country')->hint('Diisi dengan karakter hanya huruf kecil atau huruf besar'); ?>
    </div>
</div>
<div class="form-group">
    <div class="col-lg-6">
    <?= $form->field($model, 'description')->TextArea(); ?>
    </div>
</div>
<div class="form-group">
    <div class="col-lg-6">
        <?= Html::submitButton('Simpan', ['class' => 'btn btn-primary']) ?>
    </div>
</div>

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

Bila Anda memperhatikan, untuk mengawali sebuah form maka Anda memanggil ActiveForm::begin() dan diakhiri dengan ActiveForm::end(). Sedangkan untuk field yang akan ditampilkan Anda dapat menggunakan $form->field() diantara kedua tag sebelumnya. Sebuah field memerlukan sebuah model dan nama field yang akan ditampilkan. Method hint() merupakan label pembantu untuk sebuah isian. Secara default $form->field akan menghasilkan sebuah field dengan tipe text. Untuk membuatnya membuatnya menjadi textarea, Anda perlu memanggil method TextArea(). Barisan field tadi akhirnya akan diakhiri dengan sebuah tombol submit yang dihasilkan oleh Html::submitButton().

Berikut adalah screenshot dari form tambah tim sepakbola yang telah kita buat sebelumnya:

Membuat Form Registrasi Member

Tidak berbeda jauh dengan form tambah tim sepakbola, kita akan membuat sebuah form yang ceritanya dipergunakan untuk pendaftaran member. Hal - hal unik yang akan Anda temukan adalah penggunaan widget PasswordInput dan validator email. Silahkan buat sebuah file dengan nama RegistrationForm.php di dalam folder Model. Kemudian buat kode berikut di dalam file tersebut:

<?php
namespace app\models;
use yii\base\Model;
class RegistrationForm extends Model
{
public $username;
public $email;
public $password;
public $confirm_password;
public $website;
public $phone;
public function rules()
{
    return [
        ['username', 'required','message' =&gt; 'Username gak boleh kosong'],
        ['username', 'string','max'=&gt;'20'],
        ['email', 'required','message' =&gt; 'E-mail gak boleh kosong'],
        ['email', 'email'],
        ['password', 'required','message' =&gt; 'Password gak boleh kosong'],
        ['confirm_password', 'required','message' =&gt; 'Confirm password gak boleh kosong'],
    ];
}

}

Kemudian buat sebuah file views dengan nama registration.php di folder views/hello-model-form/. Di dalam kode tersebut, Anda akan menggunakan widget PasswordInput() saat akan menampilkan field password dan confirm_password. Kemudian buat kode berikut di dalam file views tersebut:

<?php

$this->title = 'Demo Model & Form';
use yii\helpers\Html;
use yii\widgets\ActiveForm;

?>

<h1>Demo Form Yii2</h1>
<hr />
<p>Contoh form untuk pendaftaran member.</p>

<?php $form = ActiveForm::begin([
        'id' => 'registration-form',
        'options' => ['class' => 'form-horizontal']
    ])
?>

<div class="form-group">
    <div class="col-lg-6">
    <?= $form->field($model, 'username')->hint('Diisi dengan nama yang terdiri dari angka, huruf kecil atau huruf besar'); ?>
    </div>
</div>

<div class="form-group">
    <div class="col-lg-6">
    <?= $form->field($model, 'email')->hint('Diisi dengan e-mail pribadi Anda'); ?>
    </div>
</div>

<div class="form-group">
    <div class="col-lg-6">
    <?= $form->field($model, 'password')->passwordInput(); ?>
    </div>
</div>

<div class="form-group">
    <div class="col-lg-6">
    <?= $form->field($model, 'confirm_password')->passwordInput(); ?>
    </div>
</div>

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

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

Dan terakhir, kita akan membuat sebuah action bernama actionRegistration() di dalam controller HelloModelFormController. Di dalam action tersebut terdapat pembentukan $model yang diinstansiasi dari RegistrationForm() kemudian melemparkannya ke views registration.

<?php

namespace app\controllers;

use Yii;
use yii\filters\AccessControl;
use yii\web\Controller;
use app\models\TeamsForm;
use app\models\RegistrationForm;
use app\models\MyProfileForm;

class HelloModelFormController extends Controller
{

    ....................................


    public function actionRegistration()
    {
        $model = new RegistrationForm();
        $data = array (
                'model'=>$model,
            );

        if ($model->load(Yii::$app->request->post('RegistrationForm')) && $model->validate()) {

        } else {

        }

        return $this->render('registration', $data);
    }
}

Berikut adalah screenshot dari form pendaftaran member yang telah kita buat sebelumnya:

Membuat Form Edit Profile Member

Untuk form yang ceritanya untuk edit profil member ini makin banyak ragam widget dan validator yang digunakan. Selain menggunakan validator required dan max length, di dalam form ini digunakan juga validator untuk mengecek panjang string berada diantara nilai minimum dan maksimum. Selain itu, terdapat juga validator untuk input file yang memeriksa tipe file yang di-upload dan maksimal ukurannya.

Buatlah file dengan nama MyProfileForm.php di dalam folder model kemudian buat kode berikut di dalam file tersebut:

<?php

namespace app\models;

use yii\base\Model;

class MyProfileForm extends Model
{
    public $username;
    public $email;
    public $phone;
    public $website;
    public $about;

    public $photo;
    public $hobby;
    public $gender;
    public $jobs;

    public function rules()
    {
        return [
            ['username', 'required','message' => 'Username gak boleh kosong'],
            ['username', 'string','max'=>'20'],

            ['email', 'required','message' => 'E-mail gak boleh kosong'],
            ['email', 'email'],

            ['website', 'url'],

            ['phone', 'string', 'length'=>[7, 12]],

            ['about', 'string'],

            ['hobby', 'string'],

            ['gender', 'string'],

            ['jobs', 'string'],

            ['photo', 'file', 'extensions' => ['png', 'jpg', 'gif'], 'maxSize' => 1024*1024],
        ];
    }
}

Sekarang Anda akan mencoba beberapa widget lain seperti RadioList, CheckboxList, FileInput, dan DropDownList. Kita buat file view dengan nama my-profile.php, kemudian buat kode berikut di dalam file tersebut:

<?php

$this->title = 'Demo Model & Form';
use yii\helpers\Html;
use yii\widgets\ActiveForm;

?>

<h1>Demo Form Yii2</h1>
<hr />
<p>Contoh form untuk pengaturan profil member.</p>

<?php $form = ActiveForm::begin([
        'id' => 'my-profile-form',
        'options' => ['class' => 'form-horizontal']
    ])
?>

<div class="form-group">
    <div class="col-lg-6">
    <?= $form->field($model, 'username')->hint('Diisi dengan nama yang terdiri dari angka, huruf kecil atau huruf besar'); ?>
    </div>
</div>

<div class="form-group">
    <div class="col-lg-6">
    <?= $form->field($model, 'email')->hint('Diisi dengan e-mail pribadi Anda'); ?>
    </div>
</div>

<div class="form-group">
    <div class="col-lg-6">
    <?= $form->field($model, 'gender')->radioList([ 
                                                        'Pria' => 'Pria', 
                                                        'wanita' => 'Wanita',
                                                    ]); ?>
    </div>
</div>

<div class="form-group">
    <div class="col-lg-6">
    <?= $form->field($model, 'phone'); ?>
    </div>
</div>

<div class="form-group">
    <div class="col-lg-6">
    <?= $form->field($model, 'website'); ?>
    </div>
</div>

<div class="form-group">
    <div class="col-lg-6">
    <?= $form->field($model, 'jobs')->dropdownList([
                                                    "akuntan"=>"Akuntan", 
                                                    "manager_proyek"=>"Proyek Manager",
                                                    "konsultan_hukum"=>"Konsultan Hukum",
                                                    "dosen"=>"Dosen",
                                                    "administrasi"=>"Administrasi",
                                                ], ['prompt'=>'Pilih pekerjaan Anda saat ini']); ?>
    </div>
</div>

<div class="form-group">
    <div class="col-lg-6">
    <?= $form->field($model, 'hobby[]')->checkboxList([ 
                                                        'baca_buku' => 'Membaca Buku', 
                                                        'futsal' => 'Futsal', 
                                                        'hiking' => 'Naik Gunung',
                                                        'programming' => 'Ngoding Santai di Pantai',
                                                        'sepeda' => 'Bersepeda',
                                                        'fotografi' => 'Popotoan',
                                                        'kuliner' => 'Makan di tempat mahal',
                                                    ]); ?>
    </div>
</div>

<div class="form-group">
    <div class="col-lg-6">
    <?= $form->field($model, 'photo')->fileInput(); ?>
    </div>
</div>

<div class="form-group">
    <div class="col-lg-6">
    <?= $form->field($model, 'about')->textArea(); ?>
    </div>
</div>


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

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

Seperti yang Anda lihat, pada kode diatas kita membuat sebuah checkbox list dan dropdown list dengan pilihan berupa array sebagai parameter. Begitu pun dengan radio list. Dan yang paling unik adalah dengan memanggil fileInput() untuk membuat sebuah field untuk upload file. Terakhir, mari kita buat action-nya di controller HelloModelFormController dengan nama actionMyProfile():

<?php

namespace app\controllers;

use Yii;
use yii\filters\AccessControl;
use yii\web\Controller;
use app\models\TeamsForm;
use app\models\RegistrationForm;
use app\models\MyProfileForm;

class HelloModelFormController extends Controller
{

    .................................

    public function actionMyProfile()
    {
        $model = new MyProfileForm();
        $data = array (
                'model'=>$model,
            );

        if ($model->load(Yii::$app->request->post('MyProfileForm')) && $model->validate()) {

        } else {

        }

        return $this->render('my-profile', $data);
    }
}

Berikut adalah screenshot dari form pendaftaran member yang telah kita buat sebelumnya:

 

Penutup

Dengan memanfaatkan berbagai fitur yang ada di Yii2 Model, Anda mulai dapat menambahkan validasi serta menentukan bisnis proses yang lebih baik untuk aplikasi web Anda. Selain itu, Anda pun sudah dapat memulai untuk menggunakan berbagai widget di Yii2 yang memanfaatkan Model.

(arslan/yiiframework)