Buat Dropdown Tergantung di Laravel

0
58

Dalam beberapa kasus kami mungkin memiliki formulir di mana ada dropdown yang saling bergantung. Contoh umum adalah pemilihan kota, di mana kita harus memilih provinsi terlebih dahulu, lalu mendaftar kota. Daftar kota yang ditampilkan dalam dropdown akan tergantung pada provinsi yang dipilih. Dropdown seperti ini adalah apa yang kita sebut Dependent Dropdown. Dalam tutorial ini kita akan membahas cara membuat Dependent Dropdown di Laravel menggunakan jQuery.

Seperti disebutkan pada pembukaan artikel ini, contoh paling umum untuk menerapkan dropdown dependen adalah pemilihan kota. Kami akan menunjukkan cara membuat dropdown bergantung di Laravel menggunakan contoh kasus ini.

Persiapan Basis Data

Sebelum masuk ke inti diskusi dalam tutorial ini, untuk dapat mendemonstrasikan dropdown dependen, hal pertama yang perlu kita persiapkan adalah tabel dan data yang akan kita gunakan. Kami akan menggunakan data wilayah administratif Indonesia dalam tutorial ini.

Di mana kita bisa mendapatkan daftar wilayah administratif di Indonesia? Ada banyak sumber daya yang menyediakan data tentang daerah di Indonesia, tetapi dalam tutorial ini kami akan menggunakan paket untuk Laravel yang telah menyediakan daftar daerah di Indonesia.

Mode Gelap


Indonesia
(tautan ini terbuka di jendela baru)


oleh
laravolt
(tautan ini terbuka di jendela baru)

Paket Laravel yang berisi data Provinsi, Kabupaten / Kota, dan Kabupaten / Desa di seluruh Indonesia.

14 Pelanggan

195 Watchers

79 garpu

Lihat repositori ini di GitHub.com (tautan ini terbuka di jendela baru)

Paket di atas memiliki data yang kita butuhkan untuk membuat contoh dropdown tergantung. Langkah pertama adalah menginstal paket laravolt / indonesia dengan perintah berikut:

komposer membutuhkan laravolt / indonesia

Kemudian publikasikan migrasi dan konfigurasi yang disediakan oleh paket ini:

vendor artisan php: publish --provider = "Laravolt  Indonesia  ServiceProvider"

Selanjutnya, gunakan perintah di bawah ini untuk melakukan migrasi dari paket ini dan mengeksekusi seeder untuk mengisi data regional.

php tukang bermigrasi
php artisan laravolt: indonesia: seed

Setelah menjalankan perintah di atas, kami sudah memiliki data yang kami butuhkan.

Buat Dropdown Tergantung di Laravel

Dependent Dropdown di Laravel

Setelah persiapan basis data selesai, kita akan mulai pada inti tutorial ini. Langkah pertama kita akan membuat controller dan view untuk menampilkan form.

Pengontrol Dropdown Tergantung

php artisan make: controller DependentDropdownController

Kemudian tambahkan metodenya indeks untuk menampilkan formulir.

indeks fungsi publik ()
{
$ provinsi = Provinsi :: pluck (& ​​# 39; name & # 39 ;, & # 39; id & # 39;);

kembali tampilan (& # 39; dependen-dropdown.index & # 39 ;, [
        'provinces' => $provinces,
    ]);
}

Melihat

Kemudian buat tampilan (sumber daya / tampilan / dependen-dropdown / index.blade.php) menggunakan konten seperti ini:

Rute

Tambahkan Rute untuk menampilkan halaman dropdown dependen.

Rute :: get (& # 39; dependen-dropdown & # 39 ;, & # 39; DependentDropdownController @ index & # 39;)
-> nama (& # 39; dependen-dropdown.index & # 39;);

Setelah menambahkan kode di atas, ketika kita membuka halaman / dependen-dropdownakan terlihat kurang lebih seperti gambar di bawah ini.

Buat Dropdown Tergantung di Laravel

Daftar Kota dropdown

Setelah berhasil menampilkan halaman di atas, langkah selanjutnya yang akan kita bahas adalah bagaimana menampilkan daftar kota berdasarkan provinsi yang dipilih. Untuk itu kita perlu menambahkan permintaan ajax ketika provinsi dipilih. Kita bisa menggunakan acara perubahan di dropdown provinsi.

$ (function () {
$ (& # 39; # provinsi & # 39;). pada (& # 39; ubah & # 39 ;, fungsi () {
// Kode untuk permintaan ajax di sini
});
});

Pengontrol Dropdown Tergantung

Di Pengendali kita perlu menambahkan metode baru untuk kueri tabel kota dan mengembalikan respons hasil kueri ke tampilan.

dapatkan (& # 39; id & # 39;))
-> memetik (& # 39; nama & # 39 ;, & # 39; id & # 39;);

mengembalikan respons () -> json ($ kota);
}
}

Rute

Lalu kami daftar metode di atas pada rute.

Rute :: pos (& # 39; dependen-dropdown & # 39 ;, & # 39; DependentDropdownController @ store & # 39;)
-> nama (& # 39; depended-dropdown.store & # 39;);

Melihat

Langkah terakhir, dalam pandangan tambahkan kode javascript di bawah ini. Dalam contoh ini kita menggunakan perpustakaan aksioma yang sudah ada secara default saat menginstal Laravel.

$ (function () {
$ (& # 39; # provinsi & # 39;). pada (& # 39; ubah & # 39 ;, fungsi () {
axios.post (& # 39; {{route (& # 39; depend-dropdown.store & # 39;)}} & # 39 ;, {id: $ (ini) .val ()})
.then (fungsi (respons) {
$ (& # 39; # city & # 39;). kosong ();

$. masing-masing (response.data, fungsi (id, nama) {
$ (& # 39; # city & # 39;). append (Opsi baru (nama, id))
})
});
});
});

Dalam tutorial ini kami hanya akan membuat dropdown kota yang bergantung pada dropdown provinsi, sehingga Anda dapat lebih memahami cara membuat dropdown dependen di Laravel, silakan lakukan hal yang sama untuk kabupaten dan desa.

Posting Membuat Dropdown Tergantung di Laravel pertama kali muncul di Lab-Informatika.

LEAVE A REPLY

Please enter your comment!
Please enter your name here