Tutorial Yii 2 : Pop Up Form Dengan Modal Bootstrap
Pada tulisan kali ini saya akan memberikan tutorial membuat Pop Up Form Dengan Modal Bootstrap di Yii Framework 2. Untuk membuat Pop Up form dengan Bootstrap kita akan memasang class modal, Helper Url dan Widget Pjax pada view. Untuk memasang class modal, helper url dan widget Pjax silahkan tulis source code berikut di file view anda.
use yii\bootstrap\Modal;
use yii\widget\Pjax;
use yii\helpers\Url;
- use yii\bootstrap\Modal; merupakan script untuk memanggil class modal bootstrap
- use yii\widget\Pjax; merupakan script untuk memanggil widget Pjax
- use yii\helpers\Url; merupakan script untuk memanggil helpers Url
Selanjutnya kita akan membuat link atau button untuk memanggil modal yang berisi form. Berikut contoh source code button untuk memanggil modal.
<?= Html::button('Tambah Siswa', ['value' => Url::to('siswa/create'),'class' => 'btn btn-success','id'=>'modalButton']) ?>
- siswa/create merupakan action yang ada pada controller siswa untuk menampilkan view berupa form. Silahkan anda ganti sesuai action pada controller anda.
- saya tulis siswa/create karena saya menggunakan pretyy url. jika anda tidak menggunakan pretty url silahkan ganti menjadi index.php?r=siswa/create.
masih di dalam view, sekarang kita tambahkan source code untuk modal . Berikut source code untuk modalnya.
<?php
Modal::begin([
'header' => '<h4>Siswa</h4>',
'id' => 'modal',
'size' => 'modal-lg',
]);
echo "<div id='modalContent'><div>";
Modal::end()
?>Untuk bagian view selesai.
Sekarang kita bua action creat untuk menampilkan view berupa form. Berikut source code untuk menampilkan viewnya :
public function actionCreate()
{
return $this->renderajax('create',
);
}
}
return $this->renderajax('create',); akan menampilkan view create.php yang akan ditampilkan didalam modal. Sekarang kita load java script untuk fungsi menampilkan modal. Tambahkan source code berikut di assets/AppAssets.php.
public $js = [
'main.js',
];
$(function(){
//ambil form untuk tambah data
$("#modalButton").click(function(){
$("#modal").modal('show')
.find("#modalContent")
.load($(this).attr('value'));
});
});Untuk menampilkan Pop Up Form Modal silahkan klik button yang ada di view. Sekian tutorial Yii 2 2 mengenai Pop Up Form Dengan Modal Bootstrap. Semoga tutorial ini bermanfaat. Untuk kritik dan saran dari anda jangan segan segan untuk berkomentar di kolom komen yang ada dibwah. Salam Coder kak.
