Biasanya jika kita melakukan submit form secara normal, data akan dikirim ke server dan halaman form tersebut akan dilakukanrefresh. Hal ini akan membuat browser menjadi berat karena pada proses refresh, keseluruhan komponen akan di panggil ulang. Oleh karena itu jika kita melakukan submit melalui ajax, akan membuat beban browser menjadi tidak berat.

Membuat submit form dengan Ajax di framework Yii2

Oke langsung saja kita mulai ngoding, form yang saya buat untuk menyimpan string dan upload file sesuai dengan postingan saya sebelumnya disini. Kita buat terlebih dahulu form yang akan di pakai, jangan lupa beri ID pada form yang akan digunakan.

<div class="tb-blog-form">

    <?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data'],'id'=>'formSubmit']); ?>

    <?= $form->field($model, 'id_kategori')->textInput() ?>

    <?= $form->field($model, 'tanggal')->textInput() ?>

    <?= $form->field($model, 'judul')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'isi')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'status')->textInput() ?>

    <?= $form->field($model, 'gambar')->fileInput() ?>

    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

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

</div>

Kemudian kita buat javascript yang akan digunakan untuk melakukan proses submit. Gunakan new FormData untuk data yang akan dikirim, karena selain string. terdapat juga file yang akan di upload. Jika hanya menyimpan string cukup gunakan SerializeArray.

$('#formSubmit').on("submit",function(e){
      
        var formData = new FormData(this);
        var formURL = $("#formSubmit").attr("action");
        $.ajax(
        {
            url : formURL,
            type: "POST",
            data : formData,
            contentType: false,
            processData: false,
            success:function(data, textStatus, jqXHR) 
            {
                window.location = "{$urlIndex}";
            },
            error: function(jqXHR, textStatus, errorThrown) 
            {
                alert("gagal");      
            }
        });
        e.preventDefault();
        e.unbind(); untuk mencegah berkali kali submit
    });

Sesuaikan controllernya sebagai berikut.

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

        if ($model->load(Yii::$app->request->post())) {
            
            $gambar = UploadedFile::getInstance($model, 'gambar');

            if($model->validate()){
                $model->save();
                if (!empty($gambar)) {
                    $gambar->saveAs(Yii::getAlias('@frontend/web/img/') . 'gambar.' . $gambar->extension);
                    $model->gambar = 'gambar.' . $gambar->extension;
                    $model->save();
                }
            }

            $model->save();
            if(!Yii::$app->request->isAjax){
                return $this->redirect(['view', 'id' => $model->id]);
            }
        } else {
            return $this->render('create', [
                'model' => $model,
            ]);
        }
    }

Percobaan

Kita isikan data pada form yang tersedia serta gambar yang akan di upload.

Membuat submit form dengan Ajax di framework Yii2

Kita lihat hasilnya.

Membuat submit form dengan Ajax di framework Yii2

Data sukses terupload , sekian tutorial dari saya semoga dapat bermanfaat.

Terimakasih.

The post Membuat submit form dengan Ajax di framework Yii2 appeared first on Mr Agus.

Cara penggunaannya juga cukup mudah, ajax bisa di triger melalui sebuah event, atau ketika load sebuah halaman. Pada contoh berikut akan saya praktekan dengan melanjutkan project saya yang kemarin biar lebih cepat hehe .

Menggunakan Ajax dengan Jquery dan Yii2

Disini saya akan mencoba menampilkan data tabel blog dengan filter kategori, untuk struktur tabelnya seperti berikut.

tabel tb_blog.

+-------------+-------------+------+-----+---------+----------------+
| Field       | Type        | Null | Key | Default | Extra          |
+-------------+-------------+------+-----+---------+----------------+
| id          | int(11)     | NO   | PRI | NULL    | auto_increment |
| id_kategori | int(11)     | NO   | MUL | 0       |                |
| tanggal     | date        | YES  |     | NULL    |                |
| judul       | varchar(50) | YES  |     | NULL    |                |
| isi         | varchar(50) | YES  |     | NULL    |                |
| status      | int(11)     | YES  |     | NULL    |                |
+-------------+-------------+------+-----+---------+----------------+

tabel tb_kategori.

+---------------+-------------+------+-----+---------+----------------+
| Field         | Type        | Null | Key | Default | Extra          |
+---------------+-------------+------+-----+---------+----------------+
| id_kategori   | int(11)     | NO   | PRI | NULL    | auto_increment |
| nama_kategori | varchar(50) | NO   |     | NULL    |                |
+---------------+-------------+------+-----+---------+----------------+

Kemudian pertama-tama terlebih dahulu kita buat sebuat action pada controller sites yang berfungsi untuk menampilkan data blog pada Gridview  sesuai dengan filter kategori.

public function actionGetDataTabel($id){
        $data = TbBlog::find()
                ->where(['id_kategori'=>$id]);
        $dataProvider = new ActiveDataProvider([
            'query' => $data,
            'pagination' => [
                'pageSize' => 10
            ]
        ]);

  return $this->renderAjax('_dataBlog',[
         'dataProvider' => $dataProvider
  ]);
}

Jangan lupa untuk menampilkan view menggunakan render ajax karena action di akses melalui ajax , kemudian buat view nya dengan nama _dataBlog.php pada folder sites.

<?php
use yii\grid\GridView;
?>
<?=
 GridView::widget([
  'dataProvider' => $dataProvider,
  'columns' => [
   [
    'class' => 'yii\grid\SerialColumn'
   ],
   [
    'class' => 'yii\grid\DataColumn',
    'header' => 'Kategori',
    'value' => 'kategori.nama_kategori'
   ],
   'tanggal',
   'judul',
   'isi'
  ]
 ])
?>

Untuk memunculkan dropdown kategori pada halaman sites/index, pada action index kita buat terlebih dahulu variabel yang berisi data array (menggunakan array helper) untuk data kategori dan jangan lupa variabel terebut di render ke view.

public function actionIndex(){
        
        $blog = TbBlog::find();

        $kategori = TbKategori::find()->all();
        $kategori = ArrayHelper::map($kategori,'id_kategori','nama_kategori');

        $dataProvider = new ActiveDataProvider([
            'query' => $blog,
            'pagination' => [
                'pageSize' => 10
            ]
        ]);

        return $this->render('dataBlog',[
            'dataProvider' => $dataProvider,
            'kategori' => $kategori
        ]);
    
    }

Pada view dataBlog.php saya menampilkan dropdown dengan menggunakan widget dari Yii2, dropdown ini saya kasih element id kategori.

<?= Html::dropDownList('kategori', null, $kategori,['class'=>'form-control','id'=>'kategori','prompt'=>'- Pilih kategori -']) ?>

Kemudian bungkus gridview pada halaman utama dataBlog.php dengan <div>, element inilah yang nantinya akan di replace dengan tabel yang di munculkan dengan menggunakan ajax, element tersebut saya kasih id tabel.

<div id="tabel">
<?=
 GridView::widget([
  'dataProvider' => $dataProvider,
  'columns' => [
   [
    'class' => 'yii\grid\SerialColumn'
   ],
   [
    'class' => 'yii\grid\DataColumn',
    'header' => 'Kategori',
    'value' => 'kategori.nama_kategori'
   ],
   'tanggal',
   'judul',
   'isi'
  ]
 ])
?>
</div>

Kemudian buat fungsi ajax untuk mereplace element tabel dengan event on change pada dropdown kategori, jangan lupa untuk meregister asset js nya di Yii2.

$this->title = 'Data Blog';

$urlData = Url::to(['sites/get-data-tabel']);
$js=<<<js
   $("#kategori").on("change",function(){
     $.ajax({
       url : "{$urlData}",
       type : "GET",
       data : "id="+$(this).val(),
       success : function(data){
          $("#tabel").html(data);
       }
     });
   });
js;
$this->registerJs($js);

Secara lengkap dataBlog.php akan seperti ini.

<?php
use yii\grid\GridView;
use yii\bootstrap\Modal;
use yii\helpers\Url;
use yii\helpers\Html;

$this->title = 'Data Blog';

$urlData = Url::to(['sites/get-data-tabel']);
$js=<<<js
    $('.modalButton').on('click', function () {
        $('#modal').modal('show')
                .find('#modalContent')
                .load($(this).attr('value'));
    });

    $("#kategori").on("change",function(){
         $.ajax({
             url:"{$urlData}",
             type: "GET",
             data:"id="+$(this).val(),
             success:function(data){
                 $("#tabel").html(data);
             }
         });
     });
js;
$this->registerJs($js);
?>
<div class="row" style="margin-bottom: 30px">
 <div class="col-lg-2">
  <a class="btn btn-info modalButton" value="<?= Url::to(['sites/data-kategori']) ?>">Info Kategori</a>
 </div>
 <div class="col-lg-3">
  <?= Html::dropDownList('kategori', null, $kategori,['class'=>'form-control','id'=>'kategori','prompt'=>'- Pilih kategori -']) ?>
 </div>
</div>
<div id="tabel">
<?=
 GridView::widget([
  'dataProvider' => $dataProvider,
  'columns' => [
   [
    'class' => 'yii\grid\SerialColumn'
   ],
   [
    'class' => 'yii\grid\DataColumn',
    'header' => 'Kategori',
    'value' => 'kategori.nama_kategori'
   ],
   'tanggal',
   'judul',
   'isi'
  ]
 ])
?>
</div>
<?php
    Modal::begin([
        'header' => 'Modal',
        'id' => 'modal',
        'size' => 'modal-md',
    ]);
    echo "<div id='modalContent'></div>";
    Modal::end();

?>

Coba tes dan lihat hasilnya, data pada tabel akan muncul susuai dengan filter dropdown yang kita pilih sangat mudah bukan.

Menggunakan Ajax dengan Jquery dan Yii2

Menggunakan Ajax dengan Jquery dan Yii2

Untuk belajar pemograman sebenarnya sangat mudah, yang penting anda tahu konsep dasarnya, jangan takut untuk mencoba hal hal baru. Sekian tutorial saya mengenai cara Menggunakan Ajax dengan Jquery dan Yii2. Semoga artikel ini bermanfaat Terima Kasih.

The post Menggunakan Ajax dengan Jquery dan Yii2 appeared first on Mr Agus.