Pengertian Ajax dan Tutorial Cara Menggunakan Ajax Jquery dengan Codeigniter - Ajax kepanjangan dari Asynchronous dan XML JavaScript. Ajax adalah sekumpulan teknik pengembangan web (web development) yang dapat membantu kita dalam memuat data dari server tanpa melakukan refresh pada halaman browser anda. Keren bukan?
Untuk menjalankan konsep ajax ini kita akan lakukan di bahasa pemrograman javascript. Karena apa ? Karena salah satu fungsi dari javascript yaitu dapat mengelola konten dinamis serta dapat berjalan secara asynchronous di dalam ajax.
Pengertian Ajax dan Tutorial Cara Menggunakan Ajax Jquery
Apa hubungannya dengan jquery? Jadi saya mengguankan jquery sebagai alat / cara untuk mempermudah dalam menggunakan konsep ajax ini teman. Untuk informasi saja, Jquery adalah pustaka JavaScript lintas-platform yang didesain untuk menyederhanakan client-side scripting pada HTML (wikipedia).
Contohnya apaan bang? Jadi gini contoh umum yang biasa anda – anda sekalian temui yaitu ketika anda melakukan search di google dengan memasukan keyword tertentu. Lalu akan muncul search recomendasi di bawah kolom pencarian. Nah itu contohnya teman teman.
Baca Juga : Belajar Membuat CRUD di Codeigniter
Kali ini saya akan mencontohkan penggunaan ajax dengan kasus mengambil data dari database kemudian dimunculkan di halaman web (just like search engine). Dan tentunya tanpa menemui proses reload halaman. Mari simak ilmu ini.
Kali ini saya hanya akan menampilakan data pada kolom nama dan kolom jurusan. Mari kita proses codingnya. Pertama kita buat terlebih dahulu tampilan halaman untuk form inputan search dan button search.
Dalam pembuatan tampilan saya masih menggunakan framework bootstrap agar proses styling menjadi lebih cepat dan efisien. Berikut ini merupakan source code untuk tampilan form search.
Hasilnya kurang lebih akan seperti contoh di atas teman-teman. Yang perlu diperhatikan saat pembuatan tampilan yaitu terdapat attribut id="search_inponow" di form input dan attribut onclick="SearchAjax()" di button Search.
Attribut id akan digunakan sebagai element untuk mangambil data dari form inputan ke javascript ajax. Lalu attribut onclick untuk menjalankan perintah ketika element html (dan kasus kali ini botton) di klik.
Kemudian apa yang akan dijalankan ketika tombol botton tersebut di klik? Jadi ketika terdapat event onclick / ketika botton di klik maka attribut tersebut akan menjalankan function yang penulisannya menggunakan bahasa pemrograman javascript.
Untuk menjalankannya saya menggunakan bantuan library jquery. Agar apa coba? Jadi maksud penggunaan jquery ini untuk mempersingkat waktu dalam penulisan script ajax ajax yang akan kita buat. Karena lebih ringkas dan lebih mudah digunakan. Dan berikut ini merupakan script perintah ajax yang telah saya buat.
Perlu anda ketahui bahwa dalam pembuatan search ajax ini saya meletakkan antara script html dan javascript dalam satu file. Dimana script saya letakkan di bagian paling bawah. Ok saya akan jelaskan secara sederhana mengenai contoh script di atas.
Pada baris pertama yaitu (script src) saya gunakan untuk memanggil library jquery yang saya letakkan di (CI-INPONOW/assets/js/jquery-3.4.1.min.js). Kedua, saya membuat function dengan nama yang sama seperti yang ada di botton onclick yaitu SearchAjax().
Ingat event yang saya gunakan adalah onclinck. Maka perintah yang ada di function ini akan berjalan ketika botton Search di Klik. Untuk ilmu tambahan saja nih, event itu terdapat beberapa macam yaitu onchange, onclick, onmouseover, onmouseout, onkeydown dan onload. Untuk penjelasan dan contoh lengkapnya pelajari di w3school.
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.
Untuk menjalankan konsep ajax ini kita akan lakukan di bahasa pemrograman javascript. Karena apa ? Karena salah satu fungsi dari javascript yaitu dapat mengelola konten dinamis serta dapat berjalan secara asynchronous di dalam ajax.
Pengertian Ajax dan Tutorial Cara Menggunakan Ajax Jquery
Apa hubungannya dengan jquery? Jadi saya mengguankan jquery sebagai alat / cara untuk mempermudah dalam menggunakan konsep ajax ini teman. Untuk informasi saja, Jquery adalah pustaka JavaScript lintas-platform yang didesain untuk menyederhanakan client-side scripting pada HTML (wikipedia).
Contohnya apaan bang? Jadi gini contoh umum yang biasa anda – anda sekalian temui yaitu ketika anda melakukan search di google dengan memasukan keyword tertentu. Lalu akan muncul search recomendasi di bawah kolom pencarian. Nah itu contohnya teman teman.
Apa yang diperlukan untuk dapat menggunakan ajax ?
Ok dapat menggunakan ajax yang diperlukan hanya php, javascript, html dan library jquery. Pada kesempatan kali ini saya akan menggunakan juga framework Codeigniter 3 untuk mempermudah dalam proses pembuatan aplikasi berbasis web. Jika anda belum mengerti mengenai codeigniter anda dapat membaca artikel saya sebelumnya.Baca Juga : Belajar Membuat CRUD di Codeigniter
Kali ini saya akan mencontohkan penggunaan ajax dengan kasus mengambil data dari database kemudian dimunculkan di halaman web (just like search engine). Dan tentunya tanpa menemui proses reload halaman. Mari simak ilmu ini.
Cara menggunakan Ajax dengan JQuery
Pertama, kita siapkan terlebih dahulu database yang akan kita ambil datanya nanti. Pada kasus kali ini saya akan menggunakan database yang telah saya gunakan sebelumnya. Yaitu database local saya inponow dengan nama tablenya tabel_inponow.Kali ini saya hanya akan menampilakan data pada kolom nama dan kolom jurusan. Mari kita proses codingnya. Pertama kita buat terlebih dahulu tampilan halaman untuk form inputan search dan button search.
Dalam pembuatan tampilan saya masih menggunakan framework bootstrap agar proses styling menjadi lebih cepat dan efisien. Berikut ini merupakan source code untuk tampilan form search.
<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>
 |
| Hasil Layout |
Attribut id akan digunakan sebagai element untuk mangambil data dari form inputan ke javascript ajax. Lalu attribut onclick untuk menjalankan perintah ketika element html (dan kasus kali ini botton) di klik.
Kemudian apa yang akan dijalankan ketika tombol botton tersebut di klik? Jadi ketika terdapat event onclick / ketika botton di klik maka attribut tersebut akan menjalankan function yang penulisannya menggunakan bahasa pemrograman javascript.
Untuk menjalankannya saya menggunakan bantuan library jquery. Agar apa coba? Jadi maksud penggunaan jquery ini untuk mempersingkat waktu dalam penulisan script ajax ajax yang akan kita buat. Karena lebih ringkas dan lebih mudah digunakan. Dan berikut ini merupakan script perintah ajax yang telah saya buat.
<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>
Perlu anda ketahui bahwa dalam pembuatan search ajax ini saya meletakkan antara script html dan javascript dalam satu file. Dimana script saya letakkan di bagian paling bawah. Ok saya akan jelaskan secara sederhana mengenai contoh script di atas.
Pada baris pertama yaitu (script src) saya gunakan untuk memanggil library jquery yang saya letakkan di (CI-INPONOW/assets/js/jquery-3.4.1.min.js). Kedua, saya membuat function dengan nama yang sama seperti yang ada di botton onclick yaitu SearchAjax().
Ingat event yang saya gunakan adalah onclinck. Maka perintah yang ada di function ini akan berjalan ketika botton Search di Klik. Untuk ilmu tambahan saja nih, event itu terdapat beberapa macam yaitu onchange, onclick, onmouseover, onmouseout, onkeydown dan onload. Untuk penjelasan dan contoh lengkapnya pelajari di w3school.
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.
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.
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.
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.
Lihat vidio tutorial cara implementasi dari artikel ini di bawah ini :
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.