Tutorial Cara Menggunakan Ajax Jquery dengan Codeigniter, Lengkap !!!

<div class="container" style="margin-top:100px;">
  <h1>Ambil Data dengan AJAX Jquery (Inponow Tutorial)</h1>
</div> <br>
<div class="container">
  <div class="input-group"> <input type="text" name="keyword" class="form-control" id="search_inponow" placeholder="Cari data ?">
    <div class="input-group-append"> <button type="button" class="btn btn-primary" name="button" onclick="SearchAjax()">Search</button> </div>
  </div>
  <div class="row" style="margin-top:40px;">
    <div class="col-md-1"></div>
    <div class="col-md-10"> <b>Hasil Penelusuran :</b> <br> <br> <br>
      <div class="hasilSearch">
        <!-- element ini digunakan untuk memunculkan element yang di Request dari ajax -->
      </div>
    </div>
    <div class="col-md-1"></div>
  </div>
</div>

<script src = "http://localhost/CI-INPONOW/assets/js/jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
  function SearchAjax() {
    var isi = $('#search_inponow').val();
    console.log(isi);
    $.ajax({
      method: 'POST',
      dataType: 'json',
      url: 'http://localhost/CI-INPONOW/getDataFromAjx',
      data: {
        input_ajx: isi
      },
      success: function(result) {
        console.log(result);
        if (result == '') {
          $("h6").remove();
          $("h5").remove();
          $("br").remove();
          var isivalue = "<h6 style='border:2px solid #fb1732;'> Tidak Ada di Database ;)</h6><br>";
          $(".hasilSearch").append(isivalue);
        } else {
          $("h6").remove();
          $("h5").remove();
          $("br").remove();
          for (var i = 0; i < result.length; i++) {
            var isivalue = "<h5 style='border-bottom:1px solid #878787;margin-top:20px;'>" + result[i].nama + " | " + result[i].jurusan + "</h5><br>";
            $(".hasilSearch").append(isivalue);
          }
        }
      }
    })
  }
</script>

Baca Juga : Cara Kirim Email Dengan Codeigniter (Mengirim Pesan Text dan File)

Lanjut lagi ya. Kemudian saya menambahkan variable isi dengan yang isinya itu maksudnya menganbil value/nilai dari form input yang memiliki nama id search_inponow. lalu untuk mengecek function event onclick kita jalan atau tidak kita cek dengan console.log(isi). Pengecekannya di console browser anda (tekan f12 atau fn + f12).

Ketiga, saya akan jelaskan yang ada didalam scope $.ajax({}). Pertama method saya setting “POST” untuk mengirimkan data secara langsung dari form inputan. Kemudian dataType saya memilih json karena memiliki syntax pendek dan mudah dalam penulisannya.

Lalu url, saya isikan alamat menuju function controller (karena saya menggunakan CI). Untuk data, disebelah kiri input_ajx itu nama yang akan dikirim ke controller dan yang kanan isikan variabel isi. Data bisa berisi lebih dari satu nilai ya, jadi menyesuaikan kebutuhan saja.

Kemudian pada settingan success inilah kita akan mengeksekusi data ketika data telah berhasil di ambil dari database. Data yang berhasil akan di tampung sebagai array di parameter result,( function(result) {} ).

Anda dapat mengecek data terkirim atau belum dengan console.log(result). Tapi sebelum itu kita akan membuat function getDataFromAjx untuk mengambil data dari input_ajx. Berikut ini contoh source codenya.

public function getDataFromAjx() { 
  $data = $this->input->post('input_ajx'); 
  // bisa juga menggunakaan-> $_POST['input_ajx'] 
  $ini = $this->M_inponow->getdataAjaxInponow($data); 
  echo json_encode($ini); 
}

Source code diatas dari framework php codeigniter. Variable $data untuk menampung data dari input_ajx. Sedangkan didalam variable $ini digunakan untuk mengirim data ke model untuk mengeksekusi query. Jangan lupa kita kirimkan hasil data dengan echo json_encode($ini). Karena melalui inilah kita akan mengirimkan data ke js sebagai (result).


Dan jika anda masih bingun mengenai konsep MVC Codeigniter anda dapat mempelajari di artikel saya sebelumnya yaitu Tutorial Codeigniter Lengkap Part 1. Dengan menggunakan framework kita akan lebih dimudahkan .

Lanjut kita lakukan konfigurasi query yang ada di model. Berikut source code yang ada di model.

public function getdataAjaxInponow($data) { 

$queryaku = "SELECT nama, jurusan FROM tabel_inponow WHERE nama LIKE '$data%' OR jurusan LIKE '$data%'"; 
$query = $this->db->query($queryaku); 

return $query->result_array(); 

}

Seperti yang anda dapat lihat $queryku itu berisi query untuk mengambil data dari database dengan memfilter berdasarkan nama dan jurusan. Ok kita balik lagi ke konfigurasi ajax dan sekarang anda dapat mengecek data yang ada di parameter console.log(result).

Di dalam scope success, saya membuat 2 kondisi yaitu ketika data yang dicari tidak ada dan ketika data ada. Jika ketika data ditemukan, maka akan memunculkan nama dan jurusan. Saya mengunakan perlangan for untuk mengambil data yang memiliki kemungkinan data muncul lebih dari 1.

  if (result == '') {
    $("h6").remove();
    $("h5").remove();
    $("br").remove();
    var isivalue = "<h6 style='border:2px solid #fb1732;'> Tidak Ada di Database ;)</h6><br>";
    $(".hasilSearch").append(isivalue);
  } else {
    $("h6").remove();
    $("h5").remove();
    $("br").remove();
    for (var i = 0; i < result.length; i++) {
      var isivalue = "<h5 style='border-bottom:1px solid #878787;'>" + result[i].nama + " | " + result[i].jurusan + "</h5><br>";
      $(".hasilSearch").append(isivalue);
    }
  }

Didalam variabel isivalue saya sengaja memasukan sekaligus atribut h5 agar data tertata dengan rapi yang kemudian saya appent kedalam class hasilSearch. Uji coba hasil coding kalian, lakukan pengecekan dengan baik di setiap pemanggilan datanya ok. Berikut ini merupakan hasil dari codingan kita di atas.

Hasil Akhir

Lihat vidio tutorial cara implementasi dari artikel ini di bawah ini :

Ok itulah penjelasan dan cara menggunakan ajax jquery. Sekian dari artikel Apa itu ajax? Mari Belajar Ajax dan Cara Menggunakan Ajax dengan Jquery kurang lebihnya saya mohon maaf. Jika ada yang kurang tepat atau ada yang ingin ditanyakan tinggalkan opini dan komentar anda di kolom komentar anda. Terima kasih dan semoga bermanfaat.