Cara Menggunakan Select2 dengan Ajax Agar Tidak Memberatkan Load Halaman

Share:

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.

select2 dengan menggunakan ajax
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.

Baca Artikel Lain ✨
📰 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.

implementasi select2 dengan ajax
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> <!-- css untuk select2 --> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <!-- jika menggunakan bootstrap4 gunakan css ini --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@x.x.x/dist/select2-bootstrap4.min.css"> <!-- cdn bootstrap4 --> <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> <!-- wajib jquery --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <!-- js untuk bootstrap4 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"> </script> <!-- js untuk select2 --> <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 //membuat koneksi ke database $koneksi = mysqli_connect('localhost', 'root', '', 'latihan'); //menangkap variabel yang diketik oleh user $cari = $_GET['search']; //jika tidak ada data yang dicari if($cari == null){ echo "data kosong"; //jika ada data yang dicari }else{ //cari sesuai kata yang diketik $data = mysqli_query($koneksi, "select * from siswa where nama_siswa like '%$cari%'"); $list = array(); $key=0; //lakukan looping untuk menampilkan data yang sesuai while($row = mysqli_fetch_assoc($data)) { $list[$key]['text'] = $row['nama_siswa']; $list[$key]['id'] = $row['id']; $key++; } //data ditampilkan dalam bentuk json echo json_encode($list); }



4. Jalankan project kalian di browser, dan lihat hasilnya!. Jika berhasil, maka akan tampak seperti gambar di bawah ini.
select2 dengan ajax
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.
select2 dengan metode ajax
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.


No comments

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik