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.

Fungsi anonymous juga bisa dimasukkan dalam sebuah variabel dan bisa di eksekusi denga memanggil variabel tersebut.

anonymous-function

Sebagai contoh fungsi anonymous:

$("#radio").on("change",function(){
     alert("Hello World");
});

Contoh penggunaan fungsi anonymous yang lain :

<?php
$greet = function($name)
{
    printf("Halo %s\r\n", $name);
};

$greet('World');
$greet('PHP');

jadi penggunaan fungsi anonymous tergantung dengan kebutuhannya dan kondisi dalam saat mendevelop sebuah aplikasi, contoh di atas hanya sebagai dasar, dalam prakteknya anonymous function bisa lebih komplek dari contoh di atas. Semoga artikel yang saya share menjadi bermanfaat, Terima kasih.

The post Anonymous Function appeared first on Mr Agus.

Menggunakan Local Storage dan Session Storage

1. window.localStorage : data yang disimpan tidak memiliki waktu expired
2. window.sessionStorage : data yang disimpan akan hilang jika browes ditutup

Pada dasarnya untuk menggunakan localStorage dan sessionStorage sama, terlebih dahulu kita harus mengatur key dan value nya. Langsung saja berikut adalah penjelasan cara Menggunakan Local Storage dan Session Storage.

Penggunaan Local Storage

Untuk dapat menggunakan local storage sangat mudah, berikut adalah contoh cara penggunaan local storage.

//menset localStorage
localStorage.setItem("nama", "Agus");

//mendapatkan value
localStorage.getItem("nama");

//menghapus nilai
localStorage.removeItem("nama");

Penggunaan Session Storage

Sama seperti halnya local storage, script untuk menggunakan session storage juga tidak berbeda jauh. Berikut adalah contoh cara penggunaannya.

//menset localStorage
sessionStorage.setItem("nama", "Agus");

//mendapatkan value
sessionStorage.getItem("nama");

Mudah bukan, selanjutnya anda bisa gunakan sesuai dengan kebutuhan, dalam kasus saya sering saya kombinasikan dengan Jquery. Sekian tutorial saya mengenai cara Menggunakan Local Storage dan Session Storage. Semoga dapat bermanfaat terimakasih.

The post Menggunakan Local Storage dan Session Storage appeared first on Mr Agus.

Seperti penjelasan Quote di atas, Kali ini saya akan sharing tentang sebuah framework javascript yang sering saya gunakan . JQuery merupakan merupakan framework javascript yang biasanya digunakan pada interface, sobat pasti tau sendiri bagimana pusing nya jika menggunakan javascript, tetapi Jquery memberikan semua kemudahan yang anda inginkan, sehingga akan sangat mudah membuat aplikasi web base yang interaktif.

Dasar Jquery

Langsung saja pada pembahasan, seperti yang saya ketahui jquery biasanya berjalan saat menggunakan event. Macam-macam eventnya seperti click, change, keyup, keypress, keydown dsb.

<html>
  <script>
      $("#tombol").on("click",function(){
          alert("hello wolrd");
      });
  </script>
  <body>
    <button id="tombol">klik saya</button>
  </body>
</html>

Pada contoh di atas saya menggunakan event click untuk memanggil sebuah fungsi pada jquery. Sebuah identifier untuk memanggil sebuah jquery biasanya menggunakan class dan id. Untuk memanggil jquery melalui class adalah dengan menggunakan tanda ” . ” dan untuk memanggil jquery melalui id adalah dengan menggunakan tanda ” # “.

Contoh pemanggilan fungsi menggunakan Id :

<html>
    <script>
          $("#cek").on("keyup", function(){
                  alert($(this).val());
          });
    </script>
    <body>
           <input id="cek" type="text" name="tes">
    </body>
</html>

Contoh pemanggilan fungsi menggunakan class :

<html>
    <script>
          $(".cek").on("click", function(){
                  alert($(this).val());
          });
    </script>
    <body>
           <input class="cek" type="radio" name="cek" value="tes pertama">
           <input class="cek" type="radio" name="cek" value="tes kedua">
    </body>
</html>

Untuk pembahasan yang lebih dalam akan saya lanjutkan pada artikel selanjutnya. See u….

Quote di kutip dari https://jquery.com/

The post Dasar Jquery appeared first on Mr Agus.