Halo semuanya, kembali lagi di sahretech. 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.sahretech.com/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.
terjadi kesalahan pada, bagaimana itu gan?
ReplyDelete{$cari = $_GET['search'];}
Notice: Undefined index: search in D:\xampp\htdocs\studikasus\ajax\data.php on line 7
data kosong
variabel searchnya tidak ditemukan, kemungkinan tidak terkirim saat melakukan pencarian. kebetulan juga sudah saya coba, alhamdulillah berjalan lancar. mungkin masnya bisa copas saja
Deletejadi silahkan cek kembali pada halaman index.php, terutama di bagian-bagian bawah. coba dicek baris-perbaris mas.
Deleteada yang error scriptnya gan.
ReplyDeleteKalau ingin menampilkan dua fields bisa pak?. Misal dalam table ada nama dan nim, saat kita ketik di pencarian maka yg muncul nama juga nim-nya.
ReplyDelete