Menyimpan Data Pada Laravel Tanpa Refresh Halaman Menggunakan JQuery yang Mudah dan Sederhana!

Ini merupakan catatan-catatan coding saya ketika menemukan masalah-masalah dalam melakukan coding. Mohon maaf jika artikel ini hanya seadanya.

Untuk membuat input data tanpa refresh pada Laravel 8 tanpa refresh page kita perlu menyiapkan beberapa script yaitu sebagai berikut :

1. Tabel

Sebelumnya kita perlu menyiapkan tabel untuk menampilkan data kita. Kita akan menempatkan data dari ajax ke dalam tag <tbody> pada tabel. jadi pastikan tabel yang akan dibuat itu harus memiliki tag tbody.

 <table class="table mb-4">  
    <tbody id="data">   // nanti data dari jquery akan tampil disini.                
   </tbody>  
 </table>  

2. Form Tambah

Membuat form tambah data menggunakan modal.

 <div class="modal fade" id="modalPenyelenggara" data-keyboard="false" data-backdrop="static">  
      <div class="modal-dialog modal-dialog-centered modal-lg">  
           <div class="modal-content">  
                <div class="modal-header nfont" style="background: #04325A;">  
                     <h4 class="modal-title white-font">Update Data</h4>  
                     <button type="button" class="close white-font" data-dismiss="modal" aria-label="Close">  
                          <span aria-hidden="true">&times;</span>  
                     </button>  
                </div>  
                <div class="modal-body">  
                     {{ csrf_field() }}   
         <div class="form-group">  
           <label>Satuan Kerja</label>  
           <select class="form-control select2" name="opd_id" data-minimum-results-for-search="-1" required id="penyelenggara">  
             <option id="opsi_opd"> - Pilih OPD - </option>  
           </select>  
           <input type="hidden" name="pse_id" value="{{ $id }}" id="pse_id">  
         </div>      
                </div>            
                <div class="modal-footer text-right">  
                     <button class="btn btn-info" id="simpan_penyelenggara">Simpan</button>  
                </div>  
           </div>  
      </div>  
 </div>  

2. Controller

Controler yang dibuat berisi 2 function yaitu untuk menampilkan data dan menyimpan data melalui JQuery.

   public function get_penyelenggara($id) // untuk menampilkan data penyelenggara 
   {  
     $id = decrypt($id);  
     $data = DB::select("SELECT * FROM penyelenggara WHERE pse_id='$id'");  
     return response()->json($data, 200);  
   }  
   public function create_penyelenggara(Request $request)  
   {  
     $id = $request->opd_id;  
     $pse_id = decrypt($request->pse_id);  
     $opd = DB::select("SELECT * FROM opd WHERE id_opd='$id'");  
     $data = new Penyelenggara();  
     $data->instansi     = $opd[0]->instansi;  
     $data->nama_satker   = $opd[0]->nama_satker;  
     $data->alamat      = $opd[0]->alamat;  
     $data->provinsi     = $opd[0]->provinsi;  
     $data->kab_kota     = $opd[0]->kab_kota;  
     $data->kode_pos     = $opd[0]->kode_pos;  
     $data->no_telepon    = $opd[0]->no_telepon;  
     $data->website     = $opd[0]->website;  
     $data->created_by    = Auth::user()->user_id;  
     $data->save();  
     if ($data) {  
       return response()->json([  
         'status'   => 'success']);  
     } else {  
       return response()->json([  
         'status' => 'error']);  
     }  
   }  

3. JQuery untuk Menampilkan Data

JQuery yang berfungsi untuk menampilkan data json yang dibuat pada controller diatas pada tag tbody tabel yang telah kita buat.

     tampil_data()  // menjalankan fungsi tampil data 
     function tampil_data(){  // fungsi tampil data -> letakkan dibawah $(document).ready(function() {}
       $.ajax({  
         type : 'GET',  
         url  : "{{ route('penyelenggara.get', $id) }}",  
         async : true,  
         dataType : 'json',  
         success : function(data){  
           console.log(data);  
           var html = '';  
           var i;  
           for(i=0; i<data.length; i++){  
             html += '<tr>'+  
                 '<td>Instansi Penyelenggara Negara</td><td>'+data[i].instansi+'</td>'+  
                 '</tr>'+  
                 '<tr>'+  
                 '<td>Nama Satuan Kerja</td><td>'+data[i].nama_satker+'</td>'+  
                 '</tr>'+  
                 '<tr>'+  
                 '<td>Alamat</td><td>'+data[i].alamat+'</td>'+  
                 '</tr>'+  
                 '<tr>'+  
                 '<td>Provinsi</td><td>'+data[i].provinsi+'</td>'+  
                 '</tr>'+  
                 '<tr><td>Kota / Kabupaten</td>'+  
                 '<td>'+data[i].kab_kota+'</td>'+  
                 '</tr>'+  
                 '<tr>'+  
                 '<td>Kode POS</td><td>'+data[i].kode_pos+'</td>'+  
                 '</tr>'+  
                 '<tr><td>No Telepon</td>'+  
                 '<td>'+data[i].no_telepon+'</td>'+  
                 '</tr>'+  
                 '<tr>'+  
                 '<td>Website</td><td>'+data[i].website+'</td>'+  
                 '</tr>';  
           }  
           $('#data').html(html);  // menampilkan data pada tabel dengan id = data
         }  
       });  
     }  

4. JQuery untuk Menambahkan Data

JQuery untuk menyimpan data dari form select ke dalam database kemudian refresh data tanpa refresh halaman.

     $('#simpan_penyelenggara').on('click', function () {  // jika tombol simpan pada form di klik
       var opd_id=$('#penyelenggara').val();  
       var pse_id=$('#pse_id').val();  
       $.ajax({  
         type : "POST",  
         headers:{'X-CSRF-TOKEN':'{{csrf_token()}}'},  
         url : "{{ route('penyelenggara.create') }}",  
         dataType : "JSON",  
         data : {opd_id:opd_id, pse_id:pse_id},  
         success: function(data){  
           $('#modalPenyelenggara').modal('hide');  
           tampil_penyelenggara()  // ini untuk menjalankan fungsi tampil data tanpa refresh page
         },  
         error: function(data){  
           console.log(data)  
           alert("Error")  
         }  
       });  
       return false;  
     });