Tutorial Codeigniter – Cara Sederhana Membuat Tombol Dropdown Dengan Ajax dan MySQL

February 15, 2018 / Diposting Oleh TondanoWeb.com / Codeigniter, PHP


Halo sobat…

Dalam tutorial kali ini kita akan belajar cara menampilkan data yang ada di database berdasarkan pilihan yang ada di dalam tombol dropdown atau bahasa kerennya “Chained Dropdown”, dan dalam kesempatan kali ini kita akan mengaplikasikannya di dalam framework Codeigniter serta akan menggunakan bantuan Ajax dan Jquery.

 

Oke.. langsung saja.

Pastikan sobat sudah mendownload Framework Codeigniter dan sudah meng-ekstraknya di dalam local server milik sobat. Jika belum silahkan download di situs resminya disini

Jika menggunakan Ubuntu dan saudara-saudaranya tempatkan di /var/www/html/{folder_project} dan jika menggunakan windows dan menginstall XAMPP silahkan tempatkan di  C:\xampp\htdocs\{folder_project}.

 

Membuat Database dan Tabel

Sebelum lanjut kita persiapkan dulu struktur data nya silahkan sobat gunakan tool untuk mengoperasikan database MySQL, di tutorial ini kami cukup menggunakan phpMyAdmin, buat database baru terserah apa saja namanya kemudian pastekan script SQL di bawah ini :

 

Setelah database dibuat kemudian kita masuk ke dalam pengaturan standar pada framework codeigniter.

Masuk ke folder application > config > buka file config.php kemudian cari baris $config[‘base_url’] jika sudah ditemukan isikan parameternya dengan url local server kemudian diikuti dengan lokasi direktori dimana aplikasi berada misal : http://localhost/{folder_project} dan nantinya baris tersebut menjadi seperti ini $config[‘base_url’] = ‘http://localhost/dropdown_chained/’;

Masih tetap di dalam folder config tadi, buka file autoload.php dan karena kita akan melakukan operasi database kita harus mengaktifkan library database yang ada di Framework Codeigniter ini. Cari baris $autoload[‘libraries’] = array(); kemudian tambahkan parameter ‘database’ di dalam array sehingga menjadi seperti ini $autoload[‘libraries’] = array(‘database’);.  Dan cari baris $autoload[‘helper’] = array(); kemudian tambahkan parameter ‘url’ di dalam array sehingga menjadi $autoload[‘helper’] = array(‘url’);

 

Menghubungkan Database MySQL dengan Framework Codeigniter

Pada tahap ini kita akan menghubungkan database dengan framework codeigniter, ini masih tetap berada di dalam folder application > config buka file database.php kemudian isi parameter username, password, serta nama database berdasarkan konfigurasi database milik sobat.

Contoh sederhananya seperti ini :

Cukup sampai disitu untuk konfgurasi dengan database.

 

Oke, pada kali ini alurnya adalah ada dua tombol dropdown, yang pertama tombol drodpown nama pelanggan, yang kedua adalah tombol dropdown nama barang, jadi ketika tombol dropdown pelanggan dipilih maka tombol dropdown nama barang akan menampilkan data barang berdasarkan nama pelanggan.

 

Buat 3 buah file :

Dropdown.php disimpan di dalam folder Controller

Model_dropdown.php disimpan di dalam folder Model

tampil_dropdown.php disimpan di dalam folder Views

 

Setelah ketiga file tersebut dibuat, buka file Dropdown.php yang berada di dalam folder Controller kemudian pastekan script dibawah ini :

 

Potongan script ini gunanya untuk memuat/memanggil file Model_dropdown secara otomatis setiap kali saat file Dropdown.php ini dijalankan.

 

Untuk potongan script yang ini gunanya untuk mengambil data hasil query di dalam Model_dropdown.php kemudian mengirimkannya ke dalam View untuk ditampilkan hasil querynya.

 

Buka file Model_dropdown.php yang berada di dalam folder Model kemudian pastekan script dibawah ini :

Script dibawah ini berguna untuk melakukan query pengambilan data dari database, dan pada function tampil_data melakukan query untuk mengambil data yang berada di dalam Tabel Pelanggan.

 

Kemudian buka file tampil_dropdown.php di dalam folder View kemudian pastekan script dibawah ini :

Script ini untuk menampilkan hasil query tadi kedalama tag Option Select.

Silahkan sobat jalankan, jika tidak ada error tampilannya akan seperti ini, untuk dropdown pertama datanya sudah muncul yaitu data nama-nama pelanggan dan tombol dropdown yg kedua masih kosong.

Langkah selanjutnya kita akan menampilkan data nama barang ke dalam tombol dropdown barang berdasarkan pilihan pada dropdown nama pelanggan.

Buka kembali file Model_dropdown.php kemudian tambahkan potongan script dibawah ini. Script dibawah ini untuk melakukan query pengambilan data di dalam tabel barang berdasarkan id_pelanggan.

Full script dari file Model_dropdown.php akan seperti ini.

 

Selanjutnya buka file Dropdown.php yang berada di folder Controller dan tambahkan baris kode dibawah ini :

Potongan kode diatas adalaha menangkap parameter id yang dikirim dari halaman tampil_dropdown.php melalui Ajax kemudian disimpan kedalam variable $id selanjutnya menjalankan perintah query ke dalam Model_dropdown dengan menyertakan variable $id, hasilnya kemudian ditampilkan menggunakan fungsi foreach.

Full kode dari Dropdown.php seperti dibawah ini.

 

Langkah selanjutnya sobat buka file tampil_dropdown.php yang berada di dalam folder View kemudian pastekan potongan script dibawah ini.

Disini kita menggunakan Ajax untuk mengirim data id_pelanggan ke file Dropdown.php function tampil_chained.

 

url : diisi dengan url file tujuan

type :  diisi dengan method apa yang ingin digunakan. Bisa menggunakan GET ataupun POST

data : data yang akan dikirim ke file yang dituju, disini kita mengirim id pelanggan

success : function(){} : ketika proses pengiriman selesai, lakukan aksi selanjutnya tampilkan data kedalam atribut id barangs

 

Kode full dari tampil_dropdown.php seperti ini :

Jika tidak ada error hasilnya akan seperti dibawah ini.

Download full source code nya disini.

Demikian untuk tutorial singkat kali ini, terima kasih sudah membacanya. Selamat mencoba 🙂

jika sobat memilik kritik, saran, pertanyaan, maupun masukkan silahkan menuliskannya di dalam kolom komentar dibawah atau menghubungi kami via halaman kontak.

Baca Juga :


Tags: , , , , , , , , , ,