Cara Simpel Membuat Chained Dropdown dengan Codeigniter dan MySQL
Sebelum lanjut ke tutorial pembuatannya, saya akan jelaskan apa itu chained dropdown, Chained Dropdown adalah 2 buah dropdown / combo box yang keduanya saling terhubung atau berelasi. Misalnya saya memiliki combo box Provinsi dan combo box Kota. Nah combo box kota tadi isi pilihannya akan menyesuaikan dengan apa yang dipilih pada combo box provinsi. Jadi pilihan pada combo box kota tergantung apa yang dipilih pada combo box provinsi. Kurang lebih seperti itu gambaran mengenai chained dropdown ini. Sekarang kita lanjut ke langkah-langkah pembuatannya.
DEMO
Sebelum membaca tutorialnya, mungkin ada yang ingin melihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Lihat Demo.
STEP 1 – PERSIAPAN
Buat sebuah folder dengan nama chained_dropdown lalu simpan pada folder xampp/htdocs/
Buat sebuah folder dengan nama images, lalu simpan pada folder xampp/htdocs/chained_dropdown/.
Buat sebuah folder dengan nama js, lalu simpan pada folder xampp/htdocs/chained_dropdown/.
Download plugin JQUERY, klik link berikut : Download.
Bingung cara downloadnya? klik disini untuk melihat caranya.
Copy and paste file jquery.min.js yang telah di download tadi ke dalam folder xampp/htdocs/chained_dropdown/js/.
Download gambar loading, klik link berikut : Download.
Bingung cara downloadnya? klik disini untuk melihat caranya.
Copy and paste file loading.gif yang telah di download tadi ke dalam folder xampp/htdocs/chained_dropdown/images/.
Download Framework Codeigniter, klik link berikut : download.
Bingung cara downloadnya? klik disini untuk melihat caranya.
Copy and paste file codeigniter_v3.7z yang telah di download tadi ke folder xampp/htdocs/chained_dropdown.
Ekstrak file codeigniter_v3.7z nya.
STEP 2 – DATABASE
Pada step ini, kita akan membuat databasenya. ikuti langkah-langkah berikut ini :
Buat sebuah database dengan nama mynotescode
Buat sebuah tabel dengan nama provinsi. Struktur tabelnya sebagai berikut :
Struktur Tabel Provinsi - Cara Simpel Membuat Chained Dropdown dengan Codeigniter dan MySQL
CREATE TABLE IF NOT EXISTS `provinsi` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
);
Buat sebuah tabel lagi dengan nama kota. Struktur tabelnya sebagai berikut :
Struktur Tabel Kota - Cara Simpel Membuat Chained Dropdown dengan Codeigniter dan MySQL
CREATE TABLE IF NOT EXISTS `kota` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`id_provinsi` int(11) NOT NULL,
`nama` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
);
STEP 3 – KONFIGURASI
Karena dibuat dengan Codeigniter, pertama kita harus melakukan konfigurasi terlebih dahulu pada framework codeigniternya.
Baca Juga:
Tutorial Codeigniter Bahasa Indonesia Lengkap Plus Source Code
Tutorial PHP Bahasa Indonesia Lengkap Plus Source Code
Cara Membuat Export Data Ke Excel Dengan PHPExcel dan Codeigniter
Cara Mudah Menghitung Nilai IPK Menggunakan Pascal
Buka folder xampp/htdocs/chained_dropdown/application/config/
Buka file config.php
Cari kode berikut $config['base_url'] = '';Ubah kode tersebut jadi seperti ini :
$config['base_url'] = 'http://localhost/chained_dropdown/';
Kode diatas digunakan untuk menset baseurlnya.
Lalu simpan file tersebut.
Buka file autoload.php
Cari kode berikut ini :
$autoload['libraries'] = array();
$autoload['helper'] = array();
Ubah jadi seperti ini :
$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');
Kode diatas digunakan untuk memuat (menload) class database dan url.
Lalu simpan file tersebut.
Buka file routes.php
Cari kode berikut ini :
$route['default_controller'] = 'welcome';
Ubah jadi seperti ini :
$route['default_controller'] = 'form';
Kode diatas digunakan untuk menset controller mana yang akan diload pertama kali. Secara default, Codeigniter telah menset default controller yaitu welcome. Disini kita set default controller menjadi form.
Lalu simpan file tersebut.
Buka file database.php
Cari kode berikut ini :
'hostname' => 'localhost',
'username' => '',
'password' => '',
'database' => '',
Ubah jadi seperti ini :
'hostname' => 'localhost', // Nama host
'username' => 'root', // Username
'password' => '', // Jika menggunakan password isi, jika tidak kosongkan saja
'database' => 'mynotescode', // Nama databasenya
Kode diatas digunakan untuk koneksi ke database.
Lalu simpan file tersebut.
STEP 4 – BUAT MODEL
#1 Pertama kita akan membuat model untuk provinsi. Buat sebuah file dengan nama ProvinsiModel.php, lalu simpan pada folder xampp/htdocs/chained_dropdown/application/models/. Berikut ini kodenya :
db->get('provinsi')->result(); // Tampilkan semua data yang ada di tabel provinsi
}
}
Pada kode diatas, kita membuat sebuah fungsi view(). dimana didalamnya terdapat kode return $this->db->get(‘provinsi’)->result(). Kode tersebut berfungsi untuk menampilkan semua data pada tabel provinsi. Struktur dasar penulisannya seperti ini : return $this->db->get(‘nama_tabel‘)->result(). Lalu pada kode diatas juga ada kode return, kode tersebut digunakan untuk mengeluarkan hasil dari sebuah fungsi. Pada kasus diatas, hasil yang dikeluarkan oleh return yaitu data-data provinsi.
Baca Juga:
Tutorial Codeigniter Bahasa Indonesia Lengkap Plus Source Code
Tutorial PHP Bahasa Indonesia Lengkap Plus Source Code
Cara Membuat Crop Gambar Plus Upload dengan PHP
Cara Membuat Pencarian Tanpa Refresh Halaman dengan PHP dan AJAX
#2 Kedua kita akan buat model untuk kota. Buat sebuah file dengan nama KotaModel.php, lalu simpan pada folder xampp/htdocs/chained_dropdown/application/models/. Berikut ini kodenya :
db->where('id_provinsi', $id_provinsi);
$result = $this->db->get('kota')->result(); // Tampilkan semua data kota berdasarkan id provinsi
return $result;
}
}
Hampir sama seperti fungsi view() di model provinsi. Hanya saja, pada fungsi viewByProvinsi() disini, kita akan menampilkan semua data kota berdasarkan provinsinya. Pada kode diatas terdapat kode $this->db->where(‘id_provinsi’, $id_provinsi);, kode ini yang berguna untuk menyeleksi data kota berdasarkan provinsi. Jadi tidak akan semua kota yang munculnya. Pada fungsi ini juga, kita membutuhkan parameter $id_provinsi, id tersebut adalah ID Provinsi yang nantinya akan kita ambil dari controller.
STEP 5 – BUAT CONTROLLER
Pada tahap ini, kita akan membuat controllernya. Buat sebuah file dengan nama Form.php, lalu simpan pada folder xampp/htdocs/chained_dropdown/application/controllers/. Berikut ini kodenya :
load->model('ProvinsiModel');
$this->load->model('KotaModel');
}
public function index(){
$data['provinsi'] = $this->ProvinsiModel->view();
$this->load->view('form', $data);
}
public function listKota(){
// Ambil data ID Provinsi yang dikirim via ajax post
$id_provinsi = $this->input->post('id_provinsi');
$kota = $this->KotaModel->viewByProvinsi($id_provinsi);
// Buat variabel untuk menampung tag-tag option nya
// Set defaultnya dengan tag option Pilih
$lists = "";
foreach($kota as $data){
$lists .= ""; // Tambahkan tag option ke variabel $lists
}
5
$callback = array('list_kota'=>$lists); // Masukan variabel lists tadi ke dalam array $callback dengan index array : list_kota
echo json_encode($callback); // konversi varibael $callback menjadi JSON
}
}
Pada controller ini, kita membuat 3 fungsi. fungsi pertama yaitu public function __construct(){, fungsi ini berfungsi untuk menjalankan suatu aksi ketika controller main diload. Didalam fungsi ini, terdapat kode $this->load->model(‘ProvinsiModel’); dan kode $this->load->model(‘KotaModel’);, kode tersebut berfungsi untuk memuat (meload) model provinsi dan kota (yang pada step sebelumnya kita buat) agar kita bisa mengakses fungsi-fungsi yang ada didalam model tersebut.
Fungsi yang kedua yaitu public function index(). Dalam fungsi ini ada kode $data[‘provinsi’] = $this->ProvinsiModel->view();, kode tersebut digunakan untuk mengambil hasil query sql dari fungsi view() yang ada pada model provinsi (ProvinsiModel.php) lalu memasukannya ke dalam array data dengan index provinsi ($data[‘provinsi’]). Pada fungsi index() ini juga, terdapat kode $this->load->view(‘form’, $data);. Kode tersebut berfungsi untuk memuat (meload) file form.php yang ada di folder views (file ini akan kita buat pada step selanjutnya) dan mengirimkan array data ($data) tadi ke file tersebut.
Fungsi yang kedua yaitu public function listKota(). Fungsi ini berguna untuk menampilkan data kota berdasarkan provinsi yang dikirim oleh Ajax dari form. Alur dari request dengan ajax ini adalah Pertama, kita telah memberi sebuah kode dengan event onchange pada combo box provinsi. Kode tersebut akan mengeksekusi kode ajax yang digunakan untuk mengirim data ID Provinsi yang diplih oleh user ke file option_kota.php. Di file tersebut akan dilakukan proses query sql untuk menampilkan data kota berdasarkan ID Provinsi yang di kirim tadi. Lalu file fungsi listKota() ini akan menghasilkan sebuah tag-tag option kota yang kemudian di konversi menjadi JSON untuk nantinya di ambil kembali hasil JSON tadi oleh AJAX. Lalu AJAX akan me-replace isi dari tag select kota sesuai JSON yang diterima tadi dari option_kota.php.
STEP 6 – BUAT FORM
Selanjutnya kita akan buat sebuah file untuk menampilkan form dropdown provinsi dan kota. Buat file baru dengan nama form.php, lalu simpan pada folder xampp/htdocs/chained_dropdown/application/views/. Berikut ini kode dan tampilannya :
Form - Cara Simpel Membuat Chained Dropdown dengan Codeigniter dan MySQL
form.php, lalu simpan pada folder xampp/htdocs/chained_dropdown/application/views/. Berikut ini kode dan tampilannya :
Chained Dropdown
Chained Dropdown
Provinsi
Kota
Loading...
Pada kode diatas terdapat kode foreach($provinsi as $data){, kode tersebut akan manampilkan satu per satu data provinsi sampai data provinsi yang terakhir.
echo “
Loading...
Apa itu Framework? Framework secara sederhana dapat diartikan kumpulan dari fungsi-fungsi/prosedur-prosedur dan class-class untuk tujuan ...
Tidak ada komentar:
Posting Komentar