Membuat Dropdown List Bertingkat dengan j. Query- AJAXDiantara jenis antarmuka form HTML kita pasti pernah mengenal apa itu dropdown list. Log into Facebook to start sharing and connecting with your friends, family, and people you know. Gmail is email that's intuitive, efficient, and useful. 15 GB of storage, less spam, and mobile access. Mobile toplist for mobile web sites. We have over 2000 registered sites. Atau jika belum kenal istilah dropdown list, mungkin suatu kali Anda pernah…5. Diantara jenis antarmuka form HTML kita pasti pernah mengenal apa itu dropdown list. Atau jika belum kenal istilah dropdown list, mungkin suatu kali Anda pernah mendapati sebuah form pendaftaran online yang berupa daftar pilihan yang sudah ditentukan. Dengan kata lain, suatu dropdown list ketika di klik akan menampilkan beberapa pilihan yang harus dipilih oleh user. Lalu apa itu dropdown list bertingkat? Dropdown list bertingkat dapat diibaratkan sebagai beberapa dropdown list yang saling berhubungan. Ketika Anda memilih salah satu pilihan pada dropdown list yang levelnya lebih tinggi, maka isi dropdown list yang levelnya lebih rendah akan mengikuti sesuai dengan pilihan dropdown list di atasnya. Sebagai contoh ketika Anda memilih alamat yang terdiri dari daftar pilihan negara, provinsi, dan kabupaten. Berikut adalah salah satu contoh dropdown list bertingkat. Secara default, HTML tidak mendukung pembuatan form untuk dropdown list bertingkat. Untuk mengakalinya, kita dapat memanfaatkan script, salah satunya dengan menggunakan script j. Query& Ajax. Untuk lebih jelasnya, mari kita ikuti tutorialberikut untuk membuat dropdown list bertingkat. Tutorial kali ini akan mengambil contoh kasus pembuatan dropdownlist bertingkat untuk memilih negara, provinsi, dan kabupaten. Menyiapkan database. Database yang digunakan pada tutorial kali ini adalah My. SQL. Nama database pada tutorial kali ini adalah ‘alamat’. Database terdiri dari tiga tabel, yaitu tabel ‘negara’, ‘provinsi’, dan ‘kota’. Jika diperhatikan pada script query SQL berikut, engine database yang digunakan adalah Inno. DB. Agar ketiga tabel tersebut dapat saling terhubung, maka perlu dibuat primary key. Dalam hal ini, tabel yang mempunyai level tertinggi adalah negara, sehingga tabel ‘negara’ akan berhubungan dengan tabel ‘provinsi’. Sedangkan tabel ‘provinsi’ akan berhubungan dengan tabel ‘kota’.- - Membuat struktur tabel `kota`. CREATE TABLE IF NOT EXISTS `kota` (. Kota` int(5) NOT NULL. Kota` varchar(3. 0) NOT NULL. Provinsi` int(5) NOT NULL. PRIMARY KEY (`id. Kota`). KEY `id. Provinsi` (`id. Provinsi`). ) ENGINE=Inno. DB DEFAULT CHARSET=latin. Membuat struktur tabel `provinsi`. CREATE TABLE IF NOT EXISTS `provinsi` (. Provinsi` int(5) NOT NULL. Provinsi` varchar(3. NOT NULL. `id. Negara` int(5) NOT NULL. PRIMARY KEY (`id. Provinsi`). KEY `id. Negara` (`id. Negara`). ENGINE=Inno. DB DEFAULT CHARSET=latin. Membuat struktur tabel `negara`. CREATE TABLE IF NOT EXISTS `negara` (. Negara` int(5) NOT NULL. Negara` varchar(3. NOT NULL. PRIMARY KEY (`id. Negara`). ) ENGINE=Inno. DB DEFAULT CHARSET=latin. Agar tabel tersebut dapat dimanfaatkan untuk uji coba, maka kita harus memasukkan data dummy ke dalam tabel tersebut. Berikut adalah script untk memasukkan data dummy untuk tiap- tiap tabel.- - Memasukkan data dummy untuk tabel `negara`. INSERT INTO `negara` (`id. Negara`, `nama. Negara`) VALUES. Indonesia'). (2, 'Australia'). Memasukkan data dummy untuk tabel `provinsi`. INSERT INTO `provinsi` (`id.Provinsi`, `nama.Provinsi`, `id. Negara`) VALUES. Milestone Shooting Collection 2 Wii . Aceh', 1). (2, 'Sumatera Utara', 1). Sumatera Barat', 1). Riau', 1). (5, 'Jambi', 1). Memasukkan data dummy untuk tabel `kota`. INSERT INTO `kota` (`id. Kota`, `nama. Kota`, `id. Provinsi`) VALUES. Kab. Aceh Barat', 1). Kab. Aceh Barat Daya', 1); Setting koneksi ke database. Simpan script berikut ke dalam file db. Name = "alamat"; /*nama database*/. Tidak bisa konek DB'). DB = mysql_select_db($db. Name,$koneksi) or die ('DB tidak ada'). Membuat dropdown list Provinsi. Berikut ini adalah isi script get. Provinsi. php. Pada dasarnya script ini berfungsi untuk memilih list provinsi yang bersesuaian dengan pilihan dropdown list negara. Query ditentukan berdasarkan ‘id. Negara’.< ? php. Negara = $_POST['id. Negara']. if($id. Negara == ''){. SELECT. Provinsi. nama. Provinsi. WHERE. id. Negara = '$id. Negara'. ORDER BY nama. Provinsi. $get. Nama. Provinsi = mysql_query($sql,$koneksi) or die ('Query Gagal'). Nama. Provinsi)){. Provinsi'].'"> '.$data['nama. Provinsi'].'< /option> '. Membuat Dropdown list kabupaten/kota. Berikut ini adalah isi script get. Kota. php. Pada dasarnya script ini berfungsi untuk memilih list kabupaten/kota yang bersesuaian dengan pilihan dropdown list provinsi. Query ditentukan berdasarkan ‘id. Provinsi’.< ? php. Provinsi = $_POST['id. Provinsi']. if($id. Provinsi == ''){. SELECT. id. Kota. Kota. kota. WHERE. Provinsi = '$id. Provinsi'. ORDER BY nama. Kota. Nama. Kota = mysql_query($sql,$koneksi) or die ('Query Gagal'). Nama. Kota)){. echo '< option value="'.$data['id. Kota'].'"> '.$data['nama. Kota'].'< /option> '. Membuat form HTMLScript berikut ini akan disimpan ke dalam file index. Pada script ini juga akan dimasukkan script Ajax yang berfungsi untuk mengontrol dropdown list bertingkat. Jangan lupa untuk mendownload dahulu script j. Query di sini, pilih versi yang paling baru, kemudian di- include- kan ke dalam script berikut.< ? Negara. ORDER BY nama. Negara. $get. Combo. Negara = mysql_query($sql,$koneksi) or die ('Query Gagal'). DOCTYPE HTML>. < meta http- equiv="content- type" content="text/html; charset=iso- 8. Shortcut Icon" href="favicon. Dropdown List Bertingkat dengan j. Query- AJAX< /title>. Include Script j. Query, sesuaikan nama versi j. Query yang digunakan pada bagian src - ->. Script Ajax untuk Mengontrol Dropdown List Bertingkat - ->. Negara"). change(function(){. Load"). show(). var id. Negara = $(this). POST". data. Type: "html". Provinsi. php". data: "id. Negara="+id. Negara. Provinsi"). html('< option value=""> -- Pilih Provinsi- -< /option> '). Kota"). html('< option value=""> -- Pilih Kota- -< /option> '). Provinsi"). html(msg). Load"). hide(). get. Ajax. Alamat(). }). Provinsi"). change(get. Ajax. Alamat). function get. Ajax. Alamat(){. $("img#img. Load. Merk"). show(). Provinsi = $("#cmb. Provinsi"). val(). POST". data. Type: "html". Kota. php". data: "id. Provinsi="+id. Provinsi. Kota"). html('< option value=""> -- Pilih Kota- -< /option> '). Kota"). html(msg).Load. Merk"). hide().Dropdown List Bertingkat dengan j.Query- AJAX< /h. Psp Vintage Warmer Download Crack Gta . Form">. < td width="1. Nama< /td>. < td> < input type="text" name="nama" id="nama" size="3. Negara< /td>. Negara" id="cmb. Negara">. Pilih Negara- -< /option>. Combo. Negara)){. Negara'].'"> '.$data['nama. Negara'].'< /option> '. Load" style="display: none; " />. Provinsi< /td>. Provinsi" id="cmb. Provinsi" width="3. Pilih Provinsi- -< /option>. Load. Merk" style="display: none; " />. Kota/Kabupaten< /td>. Kota" id="cmb. Kota">. Pilih Kota- -< /option>.Semua file di atas masukkan dalam satu folder, kemudian akseslah melalu web browser kesayangan Anda. on this page. Hasil akhir dari tutorial ini seharusnya tampak seperti gambar berikut: Hasil dropdown. Penutup. Melalui contoh tutorial ini penulis berharap dapat membantu para pembaca sekalian untuk mengembangkan dropdown list bertingkat secara lebih lanjut. Tentu akan ada banyak manfaat yang diperoleh dengan adanya bentuk antarmuka dropdown list bertingkat semacam ini. Dropdown list bertingkat ini dapat dikembangkan sesuai dengan kebutuhan dan tujuan tertentu. Akan tetapi, jangan lupa bahwa penggunaan antarmuka dropdown list ini hanya dapat digunakan ketika dalam suatu form, pilihan- pilihan isiantelah ditentukan terlebih dahulu dan user hanya diperbolehkan memilih salah satu pilihan. Selamat berkarya!
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
November 2017
Categories |