Tutorial Membuat Fitur Pencarian Data Mahasiswa Menggunakan AJAX dan CodeIginiter

Suggested by SMS

Assalamu’alaikum wr. wb, para pembaca yang budiman. Pada artikel kali ini kita akan mempelajari bagaimana cara membuat fitur pencarian data mahasiswa menggunakan AJAX dan framework CodeIgniter. Tujuan artikel tutorial ini adalah agar pembaca paham bagaimana cara membuat fitur pencarian (search) yang dapat menampilkan hasilnya secara instan tanpa membuka laman baru.

Fitur search di artikel ini berdasarkan keyword yang diketik, lalu muncul daftar NIM yang sesuai keyword. Begitu salah satu NIM di-klik, data mahasiswa langsung ditampilkan di laman yang sama. Secara garis besar, tahap-tahapnya adalah sebagai berikut:

1. Tampilkan daftar NIM di form
2. Buat fungsi AJAX di view (form.php) untuk request ke server
3. Buat fungsi di controller (mahasiswa.php) untuk menyajikan data
4. Tampilkan data di view yang lain (view_mhs.php)

Pertama-tama yang dilakukan tentunya adalah menampilkan form untuk mencari data mahasiswa. Dimulai dari controller mahasiswa.php di fungsi index() seperti berikut ini

Yang perlu diperhatikan adalah fungsi untuk mengambil daftar NIM mahasiswa yaitu data_all_mhs() yang ada di models/model_mahasiswa.php. Fungsi ini menghasilkan daftar semua mahasiswa, termasuk NIM tentunya. Berikut adalah implementasi fungsinya:

Fungsi data_all_mhs() ini sederhana, hanya mengambil data dari tabel mahasiswa, dimana statusnya adalah ‘Aktif’ dan diurutkan berdasarkan NIM secara ascending (membesar).

Jika data sudah didapatkan, maka selanjutnya tinggal menampilkannya di views/form.php

Bisa dilihat pada bagian select (dropdown) ada class “chzn-select,” class tersebut adalah bawaan template yang bisa menampikan daftar teks lalu jika di-klik akan menampikan data mahasiswa. Berikut tampilannya:

pencarian

Sedangkan data yang ditampilkan di dropdown berasal dari variabel $all_mhs yang dioper (passed) dari controller.

Sekarang kita akan buat event di Javascript yang akan melakukan request ke server ketika salah satu dari NIM di-klik. Tambahkan script berikut di atas tag

yang pertama di file form.php:

Fungsi chosen() di element ber-class “chzn-select” berguna untuk menampilkan dropdown, jika fungsi chosen() tidak dipanggil, dropdown tidak akan ditampilkan. Kemudian callback yang dipanggi pada dropdown “cari_nim” ini adalah “change()” yang akan berjalan ketika ada perubahan di pemilihan dropdown atau dengan lain, ketika NIM di-klik (dipilih). Di dalam callback change() ada AJAX request yang me-request data dari controller “mahasiswa”, tepatnya di fungsi cari_mhs(). Parameter yang dioper ke cari_mhs() adalah “nim” yang diambil dari element dengan id=”cari_nim”. Jika request sukses, maka data berupa HTML (bukan JSON) akan dimasukkan ke div dengan id=”info_mhs” yang ada di paling bawah.

Sekarang kita lihat isi dari fungsi cari_mhs() yang ada di controller “mahasiswa”

Inti dari fungsi cari_mhs() di atas adalah mengambil data mahasiswa berdasarkan NIM lalu ditampilkan di view bernama “view_mhs.php. Berikut adalah isi template view_mhs.php:

Seperti bisa dilihat, data yang akan ditampilkan adalah nomor, tahun akademik, NIM, nama, jenis kelamin, dan prodi. Jika semua sudah benar, maka tampilannya adalah sebagai berikut:

tabel pencarian

Bagaimana dengan struktur data tabel mahasiswa dan prodi ? Ini dia query untuk membuat tabelnya:

Bagaimana, mudah bukan membuatnya? Sekian untuk tutorial Inoout kali ini, sampai bertemu di lain kesempatan!

Wassalamu’alaikum wr. wb.

(Visited 1,114 times, 2 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *