Sabtu, 10 Januari 2015

Ajax 2 Combobox saling berhubungan pada Codeigniter

Pada kesempatan kali ini saya ingin berbagi bagaimana membuat dua buah combobox yang saling berhubungan dengan AJAX yang datanya di ambil dari database dan diterapkan pada Framework Codeigniter, maksutnya saling berhubungan adalah ketika combobox yang pertama di pilih maka combobox yang kedua akan menampilkan pilihan sesuai dengan yang di tetapkan untuk setiap pilihan pada combobox pertama. Untuk lebih jelasnya perhatikan ilustrasi berikut.

Pada gambar di atas, ketika combobox Kelas di pilih X, maka combobox Matapelajaran akan menampilkan daftar Matapelajaran untuk kelas X. dari pada panjang lebar, saya akan menerangkan setiap langkah penerapannya pada Framework Codeigniter 2.1.0
Saya menganggap anda sudah bisa menginstall Codeigniter dan konfigurasi databasenya ya… :D
Oke yang pertama kali yang perlu di siapkan adalah Jquery, bisa di dapatkan di http://code.jquery.com/jquery-1.7.js, copy dan simpan dengan nama jquery-1.7.js kemudian letakkan di root project.
Pada contoh ini saya menggunakan dua buah tabel yaitu tabel Kelas dan Matapelajaran berikut SQLnya
Tabel Kelas :
CREATE TABLE IF NOT EXISTS `kelas` (
`kelas_id` tinyint(3) NOT NULL AUTO_INCREMENT,
`kelas_nama` varchar(20) NOT NULL,
PRIMARY KEY (`kelas_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

INSERT INTO `kelas` (`kelas_id`, `kelas_nama`) VALUES
(1, 'X'),
(2, 'XI');
Tabel Matapelajaran
CREATE TABLE IF NOT EXISTS `matapelajaran` (
  `matapelajaran_id` tinyint(3) NOT NULL AUTO_INCREMENT,
  `matapelajaran_nama` varchar(20) NOT NULL,
  `kelas_id` tinyint(3) NOT NULL,
  PRIMARY KEY (`matapelajaran_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

INSERT INTO `matapelajaran` (`matapelajaran_id`, `matapelajaran_nama`, `kelas_id`) VALUES
(1, 'Matematika', 1),
(2, 'Bahasa Indonesia', 1),
(3, 'Geografi', 2),
(4, 'Bahasa Inggris', 2);
Dari SQL di atas terlihat bahwa kelas X mempunyai matapelajaran Matematika dan Bahasa Indonesia, kelas XI mempunyai matapelajaran Geografi dan Bahasa Inggris.
Kemudian Buat Sebuah model dengan nama Mmapel, berikut Kode dan penjelasannya

Setelah model di buat, lanjut buat sebuah controller dengan nama mapel berikut kode dan penjelasannya

Langkah terahir adalah buat sebuah file dengan nama tambah_mapel.php kemudia letakkan di folder views pada application anda, berikut kode dan penjelasannya

Anda tidak usah mengetikkan semua code yang tertera di atas, saya sudah menyediakan filenya tinggal di download, dan silahkan di coba… Saya sertakan 4 file : mapel.php(Controller), mmapel.php(Model), tambah_mapel.php(View), db2combobox_ajax.sql(Database).

sumber : https://dokumenary.wordpress.com/2012/01/20/ajax-2-combobox-saling-berhubungan-pada-codeigniter/