Simple AJAX JQUERY Tutorial Dengan Framework Laravel

Simple AJAX JQUERY Tutorial Dengan Framework Laravel - Setelah sempat berkenalan dan belajar sedikit tentang simple laravel application. Kita sekarang akan membahas tentang bagaimana kita menggunakan ajax dengan bantuan dari javascript library yang cukup terkenal yaitu jquery. Untuk yang belum paham tentang teknologi ajax, mungkin akan saya jelaskan secara singkat apa itu ajax.

      Menurut wikipedia ajax adalah 

Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability.

      Jadi secara singkat ajax membantu kita untuk membuat aplikasi berbasis website kita lebih interaktif karena mengurangi loading jika kita melakukan request tertentu. Teknologi ajax ini sekarang sudah sangat umum digunakan dalam perancangan atau development sebuah website. Karena memang sangat membantu dalam optimasi dalam hal performance untuk mengurangi beban sebuah website.

       
          Dalam teknologi ajax kita dapat melakukan transfer data dengan menggunakan method POST dan GET seperti halnya pada method submit form. Tinggal kita sesuaikan saja dengan kasus-kasus umum dalam web development.

Langsung saja kita mulai tutorial AJAX JQUERY Dengan Framework Laravel.

Di sisi front-end :

• Langkah Pertama :

       Kita sediakan aset-aset yang diperlukan seperti bootstrap css framework dan library jquery.

Kemudian kita include kan ke dalam laravel. Masukkan kedua file tersebut ke folder public laravel.
Untuk css kita masukkan ke header dan js ke footer.

• Langkah Kedua :

     Membuat sebuah form sederhana untuk melakukan trigger form post. Dalam kasus saya, saya akan membuat sebuah form untuk update profile info.

Saat kita klik save changes maka akan melakukan trigger untuk melakukan ajax call.

Untuk scriptnya seperti berikut :

<script>
    $('#updatesocial').submit(function(){

        $('.alert').slideUp();

                    $.ajax({

                          type: "POST",

                          url: '{{ URL::to('api/user') }}/123213/social',

                          data: $(this).serialize(),

                          dataType : 'json',

                          cache : false,

                          success : function(hasil){                  
                           

                                $.each(hasil, function(i,e) {

                                  if(e.status === '1'){

                                     $('#modal-general').modal('hide');

                                    $("#formcust").trigger("reset");
                                    $('.alert').removeClass('alert-danger').addClass(e.alert).slideDown().find('#title').html('Operation Success');
                                    $('.alert').find('#reason').html(e.message);

                                    setTimeout(function () {
                                        window.location = "{{ URL::to('member/profile') }}";
                                    }, 3000);

                                  }else{

                                    $('.alert').removeClass('alert-success').addClass('alert-danger').slideDown().find('#title').html('Operation Failed');
                                    $('.alert').find('#reason').html(e);
                                  }

                                });
                       
                          }
                     
                    });

          return false;
    });
  </script>


Sekian dulu tentang artikel Simple AJAX JQUERY Tutorial Dengan Framework Laravel.