Halo semuanya, kembali lagi di tulisan saya. Baiklah pada kesempatan kali ini kita akan belajar cara mengimplementasikan library select2 dengan metode ajax, sehingga tidak memberatkan load halaman nantinya. Penasaran?, ayo ikuti tutorialnya berikut ini!.
Sebelumnya, saya sudah menulis tutorial tentang select2 di link berikut ini https://www.fromsunda.eu.org/2021/04/membuat-pencarian-dalam-option-select.html. Nah sekarang, saya akan membahas select2 yang lebih advance lagi, dimana perbedaan select2 yang saya tulis sebelumnya dengan select2 yang menggunakan metode ajax adalah pada kecepatan load datanya.
Jika kalian memiliki ribuan data, maka tentu tidak efisien jika semua data ditampilkan di dalam sebuah halaman. Namun, jika kalian menggunakan metode ajax, maka data akan direquest terlebih dahulu ke server berdasarkan kata kunci yang kalian ketik, kemudian barulah data tersebut ditampilkan. Hal ini bisa kalian buktikan dengan melihat source code halaman dengan menekan CTRL + U secara bersamaan.
 |
| perbedaan select2 dengan ajax dan select2 biasa |
Dalam jumlah data yang sedikit(di bawah 100). Perbedaan select2 biasa dengan select2 dengan ajax tidak terlalu terlihat, dalam sisi performa pun demikian. Tapi jika data yang kalian miliki sudah lebih dari 1000, maka akan terjadi penurunan performa.
| 📰 1. Membuat Notifikasi Realtime dengan php dan Jquery read more |
| 📰 2. Cara Membuat Hide/Show Input Password dengan Javascript dan Bootstrap read more |
| 📰 3. Cara Mencegah Multiple Submit dan Cara Menggunakan Spinner Bootstrap sebagai Indicator Loading pada Php read more |
Cara Menggunakan Select2 dengan Teknik Ajax
1. Buatlah sebuah database baru dengan nama latihan, lalu buatlah sebuah tabel di dalam database latihan dengan nama siswa, untuk struktur tabelnya, bisa kalian lihat pada gambar di bawah ini.
 |
| Tabel siswa |
Oh ya, jangan lupa untuk menambahkan beberapa data di dalamnya, jika perlu tambahkan sebanyak mungkin data agar kalian bisa membandingkan select2 biasa dengan select2 menggunakan teknik ajax.
2. Buatlah sebuah folder baru dengan nama latihan_select2_ajax di dalam folder htdocs. Lalu buat sebuah halaman baru dengnan nama index.php. Copy script di bawah ini dan paste ke dalam file terseut.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@x.x.x/dist/select2-bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="card">
<div class="card-body">
<div class="form-group">
<label>Cari Nama Siswa</label>
<select id="siswa" name="id" class="form-control">
</select>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function () {
$('#siswa').select2({
theme: 'bootstrap4',
allowClear: true,
placeholder: 'cari nama siswa',
ajax: {
dataType: 'json',
url: 'data.php',
delay: 800,
data: function (params) {
return {
search: params.term
}
},
processResults: function (data, page) {
return {
results: data
};
},
}
})
});
</script>
</body>
</html>
3.Selanjutnya buatlah sebuah file baru dengan nama data.php, data.php ini berfungsi untuk menangkap pencarian yang dimasukkan user di halaman index.php lalu diproses untuk mendapatkan data yang sesuai dan akan ditampilkan pada halaman index.php. Copy dan paste script di bawah ini.
<?php
$koneksi = mysqli_connect('localhost', 'root', '', 'latihan');
$cari = $_GET['search'];
if($cari == null){
echo "data kosong";
}else{
$data = mysqli_query($koneksi, "select * from siswa where nama_siswa like '%$cari%'");
$list = array();
$key=0;
while($row = mysqli_fetch_assoc($data)) {
$list[$key]['text'] = $row['nama_siswa'];
$list[$key]['id'] = $row['id'];
$key++;
}
echo json_encode($list);
}
4. Jalankan project kalian di browser, dan lihat hasilnya!. Jika berhasil, maka akan tampak seperti gambar di bawah ini.
 |
| Hasil akhir |
Data akan diload setiap kali kalian mengetika sesuatu pada form pencariannya. Jika kalian buka inspect element(CTRL + Shift + i) lalu beralih ke tab network, maka kalian akan mendapati bahwa data hanya akan ditampilkan jika ada request saja.
 |
| Simulasi data select2 dengan ajax |
Sekian tutorial cara menggunakan select2 dengan ajax agar tidak memberatkan load halaman. Semoga tutorial kali ini bermanfaat. Jika ada yang ingin didiskusikan, silahkan tinggalkan pesan kalian di kolom komentar di bawah post ini. Sampai jumpa di tutorial pemrograman web lainnya.
Posting Komentar