Contoh aplikasi seperti invoice atau nota pembelian terkadang membutuhkan form yang kompleks. Disini kita akan coba membuat dynamic form dengan bantuan Yii2 extension yaitu dynamicform.
1. Install yii2-dynamicform extension dari https://github.com/wbraganca/yii2-dynamicform dengan ketikkan perintah berikut di directory advanced :
|
1 |
sudo composer require --prefer-dist wbraganca/yii2-dynamicform "*" |
2. Buat tabel purchase_order dengan tiga field sbb :
3. Buat tabel purchase_order_item :
4. Buat model untuk kedua tabel tersebut dengan gii .
5. Buat CRUD untuk kedua model yang baru dibuat.
6. Modifikasi file _form.php yang berada di folder backend/views/purchaseorder .
|
1 |
use wbraganca\dynamicform\DynamicFormWidget; |
Copy dari web wbraganca :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<div class="panel panel-default"> <div class="panel-heading"><h4><i class="glyphicon glyphicon-envelope"></i> Addresses</h4></div> <div class="panel-body"> <?php DynamicFormWidget::begin([ 'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_] 'widgetBody' => '.container-items', // required: css class selector 'widgetItem' => '.item', // required: css class 'limit' => 4, // the maximum times, an element can be cloned (default 999) 'min' => 1, // 0 or 1 (default 1) 'insertButton' => '.add-item', // css class 'deleteButton' => '.remove-item', // css class 'model' => $modelsAddress[0], 'formId' => 'dynamic-form', 'formFields' => [ 'full_name', 'address_line1', 'address_line2', 'city', 'state', 'postal_code', ], ]); ?> <div class="container-items"><!-- widgetContainer --> <?php foreach ($modelsAddress as $i => $modelAddress): ?> <div class="item panel panel-default"><!-- widgetBody --> <div class="panel-heading"> <h3 class="panel-title pull-left">Address</h3> <div class="pull-right"> <button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button> <button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button> </div> <div class="clearfix"></div> </div> <div class="panel-body"> <?php // necessary for update action. if (! $modelAddress->isNewRecord) { echo Html::activeHiddenInput($modelAddress, "[{$i}]id"); } ?> <?= $form->field($modelAddress, "[{$i}]full_name")->textInput(['maxlength' => true]) ?> <div class="row"> <div class="col-sm-6"> <?= $form->field($modelAddress, "[{$i}]address_line1")->textInput(['maxlength' => true]) ?> </div> <div class="col-sm-6"> <?= $form->field($modelAddress, "[{$i}]address_line2")->textInput(['maxlength' => true]) ?> </div> </div><!-- .row --> <div class="row"> <div class="col-sm-4"> <?= $form->field($modelAddress, "[{$i}]city")->textInput(['maxlength' => true]) ?> </div> <div class="col-sm-4"> <?= $form->field($modelAddress, "[{$i}]state")->textInput(['maxlength' => true]) ?> </div> <div class="col-sm-4"> <?= $form->field($modelAddress, "[{$i}]postal_code")->textInput(['maxlength' => true]) ?> </div> </div><!-- .row --> </div> </div> <?php endforeach; ?> </div> <?php DynamicFormWidget::end(); ?> </div> |
Kita akan memodifikasi file di atas, namun sebelumnya kita modifikasi PurchaseorderController.php terlebih dahulu.
7. Modifikasi PurchaseorderController.php pada actionCreate() :
|
1 |
$modelsPoItem = [new PurchaseOrderItem]; |
|
1 |
use backend\models\PurchaseOrderItem; |
|
1 |
'modelsPoItem' => (empty($modelsPoItem)) ? [new PurchaseOrderItem] : $modelsPoItem |
8. Modifikasi file create.php di viewnya :
|
1 |
'modelsPoItem' => $modelsPoItem, |
9. Kembali ke _form.php dan modifikasi sehingga _form.php menjadi seperti ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<?php use yii\helpers\Html; use yii\widgets\ActiveForm; use wbraganca\dynamicform\DynamicFormWidget; /* @var $this yii\web\View */ /* @var $model backend\models\PurchaseOrder */ /* @var $form yii\widgets\ActiveForm */ ?> <div class="purchase-order-form"> <?php $form = ActiveForm::begin(['id' => 'dynamic-form']); ?> <?= $form->field($model, 'po_no')->textInput(['maxlength' => true]) ?> <?= $form->field($model, 'description')->textarea(['rows' => 6]) ?> <div class="row"> <div class="panel panel-default"> <div class="panel-heading"><h4><i class="glyphicon glyphicon-envelope"></i> PO Items</h4></div> <div class="panel-body"> <?php DynamicFormWidget::begin([ 'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_] 'widgetBody' => '.container-items', // required: css class selector 'widgetItem' => '.item', // required: css class 'limit' => 4, // the maximum times, an element can be cloned (default 999) 'min' => 1, // 0 or 1 (default 1) 'insertButton' => '.add-item', // css class 'deleteButton' => '.remove-item', // css class 'model' => $modelsPoItem[0], 'formId' => 'dynamic-form', 'formFields' => [ 'po_item_no', 'quantity', ], ]); ?> <div class="container-items"><!-- widgetContainer --> <?php foreach ($modelsPoItem as $i => $modelsPoItem): ?> <div class="item panel panel-default"><!-- widgetBody --> <div class="panel-heading"> <h3 class="panel-title pull-left">Po Item</h3> <div class="pull-right"> <button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button> <button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button> </div> <div class="clearfix"></div> </div> <div class="panel-body"> <?php // necessary for update action. if (! $modelsPoItem->isNewRecord) { echo Html::activeHiddenInput($modelsPoItem, "[{$i}]id"); } ?> <div class="row"> <div class="col-sm-6"> <?= $form->field($modelsPoItem, "[{$i}]po_item_no")->textInput(['maxlength' => true]) ?> </div> <div class="col-sm-6"> <?= $form->field($modelsPoItem, "[{$i}]quantity")->textInput(['maxlength' => true]) ?> </div> </div><!-- .row --> </div> </div> <?php endforeach; ?> </div> <?php DynamicFormWidget::end(); ?> </div> </div> </div> <div class="form-group"> <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?> </div> <?php ActiveForm::end(); ?> </div> |
Maka form akan muncul seperti ini :
Kita akan lanjutkan di bagian kedua nanti.
Tutorial ini sebagai dokumentasi dan pembelajaran pribadi sekalian belajar terjemahin bahasa Inggris, dan siapa tahu bermanfaat buat orang lain. Sumber lengkapnya diambil dari Youtube DoingITEasy Channel.