Yii2 : Submit Form Pada Modal Menggunakan Ajax

Kita akan mencoba membuat sebuah feature CRUD pada yiiframework dan melakukan kustomisasi pada proses create nya. Berbeda dari CRUD hasil generate generator gii, proses create data akan kita buat dalam bentuk modal dan proses submit form akan kita handle dengan ajax, kemudian setelah submit form, gridview yang menampilkan list data akan otomatis refresh supaya bisa menampilkan data baru yang sebelumnya diinput. Proses refresh gridview ini akan menggunakan pjax.

Untuk studi kasus nya kita akan membuat aplikasi daftar kontak sederhana.

Buat projek baru

Silahkan buat projek menggunakan yiiframework, atau gunakan projek yiiframework yang sudah ada. Untuk buat baru, copy paste command berikut pada terminal atau cmd.

composer create-project --prefer-dist yiisoft/yii2-app-basic ajaxform

Buat tabel kontak

Buat tabel kontak, silahkan dump sql di bawah ini pada database.

CREATE TABLE `kontak` (
  `id` INT NOT NULL AUTO_INCREMENT , 
  `nama` VARCHAR(30) NOT NULL , 
  `telepon` VARCHAR(15) NOT NULL , 
  `alamat` TEXT NOT NULL , 
  PRIMARY KEY (`id`), INDEX (`nama`)
) ENGINE = InnoDB;

Jangan lupa atur config database pada aplikasi nya.

Generate model dan CRUD

Masuk ke aplikasi generator gii, lalu generate model Kontak dan generate CRUD model Kontak. seperti di bawah ini.

model kontak

crud kontak

Implementasi submit form ajax

Update view

Tambahkan class modal dan pjax pada views/kontak/index.php

use yii\bootstrap\Modal;
use yii\widgets\Pjax;

Tambahkan skrip pjax dengan id ‘kontak‘ pada gridview data kontak di views/kontak/index.php.

    <?php Pjax::begin(['id'=>'kontak']);?> <!--add pjax-->
    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],

            'id',
            'nama',
            'telepon',
            'alamat:ntext',

            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>
    <?php Pjax::end();?> <!--add pjax-->

Di atas gridview, kita hapus link create lalu ganti dengan tombol seperti di bawah ini.

<?= Html::button('tambah kontak',['class'=>'btn btn-primary btn-md create']) ?>

Kita tambahkan class ‘create‘ pada tombol di atas untuk mentrigger event click ketika tombol diklik.

Kemudian kita tambahkan skrip modal, simpan di bagian paling bawah saja supaya mudah terbaca.

<?php
Modal::begin([
    'header' => '<h4>Form Kontak</h4>',
    'id' => 'modal-create',
    'size' => 'modal-md',
]);
echo "<div id='modalContent'></div>";
Modal::end();
?>

Modal diatas akan tampil ketika tombol create diklik. Untuk menampilkan modal nya kita akan gunakan javascript. Oke, tambahkan skrip berikut di bagian paling bawah setelah skrip modal.

<?php
//buat variabel untuk menampung url create kontak
$url = \yii\helpers\Url::toRoute(['/kontak/create']);
$script = <<< JS
    //tampilkan modal saat button dengan class 'create' diklik
    //tampilkan isi modal berupa view url create kontak
    $('body').on('click', '.create', function() {
       $("#modal-create").modal('show').find("#modalContent").load('$url');
    });
JS;

$this->registerJs($script);
?>

Kita ingin saat modal keluar, isi modal menampilkan form tambah kontak, Oleh karena itu kita akan load url create-kontak dengan perintah load() seperti skrip di atas.

Update KontakController

Secara default, actionCreate() pada KontakController akan merender halaman web utuh, sehingga ketika action ini diload ke dalam modal maka modal akan menampilkan view utuh satu halaman. Supaya yang diload ke dalam modal hanya form nya saja, kita ganti render() menjadi renderAjax(). Kemudian hapus atau beri tanda komentar pada skrip redirect url saat data yang disubmit berhasil disimpan tentunya untuk mencegah browser redirect ke halaman lain.

    public function actionCreate()
    {
        $model = new Kontak();

        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            //return $this->redirect(['view', 'id' => $model->id]);
        }

        return $this->renderAjax('create', [
            'model' => $model,
        ]);
    }

 

Update view submit form

Terakhir kita akan update file views/kontak/_form.php untuk mengimplementasi ajax submit form.

Tambahkan id pada form dengan nama ‘add-form’.

<?php $form = ActiveForm::begin([
   'id'=>'add-form' //tambahkan id
]); ?>

Kemudian tambahkan skrip ajax berikut ke bagian paling bawah untuk menghandle proses submit pada form tersebut.

<?php
$script = <<< JS
    $('#add-form').on('beforeSubmit', function(e) {
        var form = $(this);
        //siapkan data form input untuk dipost via ajax
        var formData = form.serialize();
        //submit form via ajax
        $.ajax({
            url: form.attr("action"),
            type: form.attr("method"),
            data: formData,
            success: function (data) {
                //ketika submit berhasil,modal dihidden 
                $("#modal-create").modal('hide');
                //lalu refreh gridview dg idpjax=kontak
                $.pjax({container: '#kontak'});
               
            },
            error: function () {
                alert("Something went wrong");
            }
        });

    }).on('submit', function(e){
       //ini mencegah halaman redirect ke url action pada form
        e.preventDefault();
   });
JS;

$this->registerJs($script);
?>

Secara singkat skrip di atas akan mensubmit data form menggunakan ajax, lalu setelah proses submit berhasil maka modal akan kembali dihide lalu grid akan direfresh dengan $.pjax({container: ‘#kontak’}). Dan yang paling penting command e.preventDefault() akan mencegah form untuk redirect ke url action form, dalam hal ini adalah url create-kontak.

submit form dengan ajax

Selesai, selamat mencoba

 

 

 

 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *