Yii2-Series

PHP, WEBPROGRAMMING, PROGRAMMING, Yii2
View Comments

Pada tulisan ini saya akan membuat series mengenai pemrograman dengan Yii Framework. Series ini akan disusun untuk membuat sebuah program sederhana yang memanfaatkan fitur-fitur umum yang sangat mungkin digunakan di banyak kasus. Tulisan ini akan menggunakan Basic Template Yii2 (yang menurut saya penggunaannya sedikit lebih sulit daripada advance template Yii2).

Secara garis besar (dan mungkin akan bertambah sesuai keperluan yang mungkin terjadi) outline dari seri tulisan ini akan terdiri dari hal berikut.

  1. Prainstalasi
  2. Instalasi YiiFramework 2.0
  3. Login
  4. Login dengan Database pada Yii2
  5. Bekerja dengan Gii
  6. Module pada Yii2
  7. Layout dasar dan Manipulasinya pada Yii2
  8. Costum Asset dan Asset Bundle pada Yii2
  9. Alias pada Yii2
  10. Bekerja dengan Form
  11. Timestamp, Blameable, dan Sluggable Behavior pada Yii2
  12. Menggunakan Rich Text Input CkEditor dan Alternatifnya pada Yii2
  13. Gridview dan Listview
  14. SEO Friendly Url dengan slug
  15. Scenario pada Model Yii2
  16. Retrieve data pada Yii2
  17. Relasi Database pada Yii2
  18. Menggunakan Bootstrap4
  19. Widget Kartik dan Kartik Gridview
  20. Select2 dengan Kartik Ekstension
  21. Dependent Dropdown pada Yii2
  22. Bekerja dengan Modals
  23. Membuat Costum Template untuk Gii
  24. Mengupload File
  25. Mengupload File dengan Kartik Widget
  26. Gridview atau Datatables?
  27. Session dan Cookie pada Yii2
  28. Menggunakan AdminLTE pada Yii2
  29. Membuat Themes pada Yii2
  30. Menggunakan GoogleMaps API pada Yii2
  31. Menggunakan Socket.io pada Yii2
  32. Handling Error
  33. Bekerja dengan AuthClient
  34. Menggunakan Amazon S3 pada Yii2
  35. Mengirim Email dengan Swiftmailer pada Yii2
  36. Middleware pada Yii2
  37. Mengenal RBAC pada Yii2
  38. Implementasi RBAC pada Yii2
  39. Notifikasi Real Time dengan Socket.io pada Yii2

Anda dapat mengunduh dan memantau progress dari series ini lewat repositori Github belajararief-yii2series. Silahkan bintangi (star) untuk dapat lebih mudah memantau perkembangan repositori.

Requirement

Untuk memudahkan anda dalam memahami petunjuk ini, maka beberapa hal yang perlu diperhatikan diantaranya:

  1. Sistem Operasi yang saya gunakan adalah Windows 10 64bit dengan terminal menggunakan powershell terminal (beberapa command seperti cd dapat berbeda dengan command prompt biasa), namun saya akan berusaha sebisa mungkin mencontohkan perintah pada sistem operasi lain jika memunkinkan.
  2. Stack yang digunakan adalah Wamp Server (Apache 2.2, MySQL, PHP 7).
  3. Yii yang digunakan adalah Yii 2.0 dengan catatan jquery yang digunakan bukan jquery3. Beberapa perintah jquery akan berbeda pada jquery3, dan beberapa extensions yang saya gunakan sepertinya belum mendukung jquery3

 Form pada Yii2

Form merupakan salah satu hal yang menarik dan mungkin pembeda dari Yii2 dengan framework lainnya (namun beberapa framework memiliki fitur yang mirip. Yii2 sendiri sepertinya mengadopsi workflow dari cakePHP). Form di Yii2 dapat dikatakan sangat opiniated. Yii2 memberikan konvensi bahwa form menggunakan bootstrap template (dengan class form-control), menggunakan client-side-validation dan server-side-validation yang diatur melalui model, dan setiap field pada form merupakan objek dari sebuah model. Membingungkan? Tenang, setelah ini akan kita bahas satu-per-satu.

Menggunakan form pada Yii2 diutamakan dengan menggunakan Active Form (yii\widgets\ActiveForm). ActiveForm merupakan salah satu widget pada Yii2 yang mungkin akan banyak digunakan pada aplikasi kita. Pendekatan dengan ActiveForm akan sangat baik digunakan untuk mempermudah tujuan kita ketika form dibuat berdasarkan model.

Walaupun form terlihat hanya view, namun dengan penggunaan ActiveForm maka form melibatkan juga model dan controller. Sebelumnya kita telah membuat Gii yang sudah memberikan output secara lengkap mengenai model, controller, dan view untuk form yang akan mengumpulkan input dari user. Oleh karena itu kita akan membahas form dimulai dari Model, kemudian action pada Controller, dan terakhir View.

Untuk itu pada contoh kali ini kita akan mengubah form hasil Gii yang semula hanya berupa field textinput biasa akan menggunakan dropdown list (pada created_by dan updated_by) dan datepicker (pada created_at dan updated_at).

Model dan Rules pada Model

Pada Yii2 ActiveForm, semua field akan dihubungkan dengan Model, baik itu kolom pada tabel maupun kolom lainnya. Salah satu peran model adalah untuk memberikan rule validasi dari input yang diberikan user. Rules hasil output Gii (pada app\models\Blog.php) adalah seperti di bawah ini.

    public function rules()
    {
        return [
            [['slug', 'title', 'body'], 'required'],
            [['body'], 'string'],
            [['created_at', 'updated_at', 'created_by', 'updated_by'], 'integer'],
            [['slug'], 'string', 'max' => 2048],
            [['title'], 'string', 'max' => 512],
        ];
    }

Model hasil generate Gii memperlakukan created_at, updated_at, created_by dan updated_by sebagai integer. Karena input created_at dan updated_at akan menerima input berupa tanggal, yang nantinya akan dikonversi menjadi unix_timestamp maka rules dari model tersebut akan kita ubah menjadi seperti di bawah ini.

    public function rules()
    {
        return [
            [['slug', 'title', 'body'], 'required'],
            [['body'], 'string'],
            [[ 'created_by', 'updated_by'], 'integer'], 
            ['created_at', 'date', 'timestampAttribute' => 'created_at'], 
            ['updated_at', 'date', 'timestampAttribute' => 'updated_at'], 
            [['slug'], 'string', 'max' => 2048],
            [['title'], 'string', 'max' => 512],
        ];
    }

Perubahan tersebut akan membuat Model kita menerima format date dan pada saat menyimpan akan mengkonversi input menjadi timestampAttribute.

Kemudian selain fungsi rules, hasil output dari Gii juga membuat fungsi attributeLabels(). AttributeLabels digunakan untuk membuat label dari tiap form yang akan digenerate oleh ActiveForm dan nama field pada Yii2 widget lainnya (seperti DetailView, GridVIew dan lain-lain).

Controller sebagai Jembatan Model dan View

Controller merupakan tempat dimana kita menyimpan hampir semua logika workflow dari aplikasi kita. Controller juga menjadi jembatan antara Model dan View. Semua data yang akan ditampilkan pada view sebisa mungkin dibuat di controller.

Saat membuat form dengan ActiveForm maka kita perlu membuat/mengambil data dari model. Pada Controller akan ada dua halaman yang memerlukan form yang nantinya akan menyimpan data dari pengguna, yaitu create dan update. Pada actionCreate kita akan membuat data baru. Oleh karena itu kita membuat Class baru dari model Blog seperti baris berikut.

    public function actionCreate()
    {
        $model = new Blog();
        // ...

Selanjutnya pada actionUpdate kita tidak membuat data baru, namun mengubah data yang sudah ada. Oleh karena itu kita melakukan load data dengan perintah findOne() dengan perintah berikut. Dengan binding data seperti ini, nantinya value form pada ActiveForm juga akan otomatis terisi tanpa harus kita set value pada masing-masing field.

    public function actionUpdate($id)
    {
        $model = $this->findModel($id);
        // ...

Selanjutnya karena kita akan membuat dropdown list yang akan menampilkan user yang membuat artikel. Untuk itu kita menambahkan baris berikut pada actionCreate dan actionUpdate.

use app\models\User; 

// ....
        
        $users = User::find()->select(['id', 'username'])->all();

        return $this->render('create', [ 
            'model' => $model, 
            'users' => $users, 
        ]);

Ketika data disimpan, Yii2 akan mengikat semua atribut yang di Post sesuai dengan Model yang akan disimpan dengan perintah berikut.

        if (
		$model->load(Yii::$app->request->post())  // perintah ini akan binding Post dengan Object yang sama dengan model
		&& 
		$model->save() // perintah ini akan menyimpan data sesuai dengan $model
	) {
            return $this->redirect(['view', 'id' => $model->id]); // redirect setelah simpan
        }

Dengan begitu selesai sudah proses pengambilan data dan penyimpanan di controller.

Kostumasi Form dengan Dropdown List

Selanjutnya kita akan membuat dropdown list pada field created_by dan updated_by. Jika anda perhatikan, pada \app\modules\administrator\views\blog maka ada 2 view yang akan kita modifikasi, yaitu create.php dan update.php. Jika anda membuka kedua file tersebut, maka terlihat bahwa view tersebut melakukan renderPartial pada view lain, yaitu _form.php. Karena sebelumnya kita sudah menambahkan variabel $users untuk dropdown list, maka kita juga harus melakukan passing data $users ke _form.php pada file create.php dan update.php sehingga kedua file tersebut terlihat seperti di bawah ini.

    .....

    <?= $this->render('_form', [
        'model' => $model,
        'users' => $users,
    ]) ?>

    .....

Kemudian kita akan mengubah field created_by dan updated_by kita menjadi dropdown list. Ubah \app\modules\administrator\views\blog\_form.php sehingga file tersebut menjadi seperti dibawah ini.

use yii\helpers\ArrayHelper;

....

<?= $form->field($model, 'created_by')->dropdownList(ArrayHelper::map($users, 'id', 'username'), ['prompt'=>'Select User']); ?>


<?= $form->field($model, 'updated_by')->dropdownList(ArrayHelper::map($users, 'id', 'username'),['prompt'=>'Select User']); ?>

Pada contoh di atas kita mengganti textInput dengan dropdownlist. Pada kode di atas kita mengubah objek $users menjadi array dengan menggunakan helper ArrayHelper::map() yang akan menyusun ulang objek $users sehingga memiliki key yang merupakan value dari objek 'id' dan value yang merupakan value dari objek 'username'. Membingungkan? Ikuti saja dulu ya.

Kostumasi Form dengan Widget Jui-DatePicker

Selanjutnya kita akan mengubah field created_at dan updated_at menjadi datepicker dengan bantuan dari ekstensions jQuery UI - Datepicker. Untuk itu terlebih dahulu kita melakukan instalasi ekstension yii2-jui dengan perintah berikut.

$ composer require yiisoft/yii2-jui

Kemudian kita akan mengubah field created_by dan updated_by kita menjadi dropdown list. Ubah \app\modules\administrator\views\blog\_form.php sehingga file tersebut menjadi seperti dibawah ini.

use yii\jui\DatePicker;

....

<?= $form->field($model, 'created_at')->widget(DatePicker::className(), ['options' => ['class' => 'form form-control']]) ?>

<?= $form->field($model, 'updated_at')->widget(DatePicker::className(), ['options' => ['class' => 'form form-control']]) ?>

Dengan cara tersebut kita akan mendapati bahwa ketika fokus diubah ke field created_at dan updated_at akan memunculkan datepicker yang dapat kita gunakan untuk membantu memudahkan pemilihan tanggal.

Baiklah itu tadi pembahasan seputar pembuatan form. Semoga membantu dan Happy Coding!