1. Laravel
  2. PHP

Membuat Dependent Dropdown di Laravel

Untuk beberapa kasus kita mungkin memiliki sebuah form di mana terdapat dropdown yang bergantung satu sama lain. Contoh umum adalah pemilihan kota, di mana kita harus memilih provinsi terlebih dahulu, dan kemudian daftar kota. Daftar kota yang ditampilkan pada dropdown akan bergantung pada provinsi yang dipilih. Dropdown seperti inilah yang kita sebut sebagai Dependent Dropdown. Pada tutorial kali ini kita akan membahas bagaimana cara Membuat Dependent Dropdown di Laravel menggunakan jQuery.

Sebagaimana telah disebutkan pada pembuka artikel ini, contoh paling umum untuk mengimplementasikan dependent dropdown adalah pemilihan kota. Kita akan mendemonstrasikan bagaimana membuat dependent dropdown di Laravel dengan menggunakan contoh kasus ini.

Persiapan Database

Sebelum masuk ke inti dari pembahasan pada tutorial kali ini, untuk bisa mendemonstrasikan dependent dropdown, hal pertama yang perlu kita persiapkan adalah table dan data yang akan kita gunakan. Kita akan menggunakan data wilayah administratif Indonesia pada tutorial ini.

Dimana kita bisa mendapatkan daftar wilayah administratif di Indonesia? Ada banyak resource yang menyediakan data mengenai wilayah di Indonesia, akan tetapi pada tutorial ini kita akan menggunakan sebuah package untuk Laravel yang telah menyediakan daftar wilayah di Indonesia.

Dark Mode

indonesia (this link opens in a new window) by laravolt (this link opens in a new window)

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

Package diatas memiliki data-data yang kita perlukan untuk membuat contoh dependent dropdown. Langkah pertama instal package laravolt/indonesia dengan perintah dibawah ini:

composer require laravolt/indonesia

Kemudian publish migration dan config yang disediakan oleh package ini:

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

Selanjutnya gunakan perintah dibawah ini untuk mengeksekusi migration dari package ini dan mengeksekusi seeder untuk mengisi data wilayah.

php artisan migrate
php artisan laravolt:indonesia:seed

Setelah mengeksekusi perintah diatas, kita telah memiliki data-data yang kita perlukan.

Membuat Dependent Dropdown di Laravel

Dependent Dropdown di Laravel

Setelah persiapan database selesai, kita akan mulai pada inti dari tutorial kali ini. Langkah pertama kita akan membuat sebuah controller dan view untuk menampilkan form.

Dependent Dropdown Controller

php artisan make:controller DependentDropdownController

Kemudian tambahkan method index untuk menampilkan form.

public function index()
{
    $provinces = Province::pluck('name', 'id');

    return view('dependent-dropdown.index', [
        'provinces' => $provinces,
    ]);
}

View

Kemudian buat sebuah view (resources/views/dependent-dropdown/index.blade.php) menggunakan konten seperti dibawah ini:

<form>
    <div class="form-group row">
        <label for="name" class="col-md-4 col-form-label">Province</label>

        <div class="col-md-6">
            <select name="province" id="province" class="form-control">
                <option value="">== Select Province ==</option>
                @foreach ($provinces as $id => $name)
                    <option value="{{ $id }}">{{ $name }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div class="form-group row">
        <label for="name" class="col-md-4 col-form-label">City</label>

        <div class="col-md-6">
            <select name="city" id="city" class="form-control">
                <option value="">== Select City ==</option>
            </select>
        </div>
    </div>
</form>

Route

Tambahkan Route untuk menampilkan halaman dependent dropdown.

Route::get('dependent-dropdown', 'DependentDropdownController@index')
    ->name('dependent-dropdown.index');

Setelah menambahkan kode diatas, ketika kita membuka halaman /dependent-dropdownakan terlihat kurang lebih seperti gambar dibawah ini.

Membuat Dependent Dropdown di Laravel

Dropdown Daftar Kota

Setelah berhasil menampilkan halaman diatas, langkah selanjutnya kita akan membahas bagaimana menampilkan daftar kota berdasarkan provinsi yang dipilih. Untuk itu kita perlu menambahkan sebuah ajax request ketika provinsi di pilih. Kita bisa menggunakan event change pada dropdown provinsi.

$(function () {
    $('#province').on('change', function () {
        // Kode untuk ajax request disini 
    });
});

Dependent Dropdown Controller

Pada Controller kita perlu menambahkan sebuah method baru untuk melakukan query pada table kota dan mengembalikan response dari hasil query ke view.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Laravolt\Indonesia\Models\City;
//

class DependentDropdownController extends Controller
{
    //
    public function store(Request $request)
    {
        $cities = City::where('province_id', $request->get('id'))
            ->pluck('name', 'id');
    
        return response()->json($cities);
    }
}

Route

Lalu kita daftarkan method diatas pada route.

Route::post('dependent-dropdown', 'DependentDropdownController@store')
    ->name('dependent-dropdown.store');

View

Langkah terakhir, pada view tambahkan kode javascript dibawah ini. Pada contoh ini kita menggunakan library axios yang sudah ada secara default pada saat menginstal Laravel.

$(function () {
    $('#province').on('change', function () {
        axios.post('{{ route('dependent-dropdown.store') }}', {id: $(this).val()})
            .then(function (response) {
                $('#city').empty();

                $.each(response.data, function (id, name) {
                    $('#city').append(new Option(name, id))
                })
            });
    });
});

Pada tutorial kali ini kita hanya akan membuat dropdown kota yang tergantung pada dropdown provinsi, agar lebih memahami cara membuat dependent dropdown di Laravel silahkan lakukan hal yang sama untuk kabupaten dan desa.

Comments to: Membuat Dependent Dropdown di Laravel

    Your email address will not be published. Required fields are marked *

    Attach images - Only PNG, JPG, JPEG and GIF are supported.