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.

14 Subscribers 195 Watchers 79 Forks Check out this repository on GitHub.com (this link opens in a new window)

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.

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.

<?php

namespace App\Http\Controllers;

use Laravolt\Indonesia\Models\Province;

class DependentDropdownController extends Controller
{
    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.

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.

Pastikan jquery dan axios sudah di load pada view yang digunakan.

$(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. Berikut ini merupakan contoh implementasi dari tutorial diatas.

Dark Mode

laravel-dependent-dropdown-demo (this link opens in a new window) by Lab-Informatika (this link opens in a new window)

Laravel dependent dropdown demo

1 Subscriber 0 Watchers 0 Forks Check out this repository on GitHub.com (this link opens in a new window)

Agar lebih memahami cara membuat dependent dropdown di Laravel silahkan lakukan hal yang sama untuk kabupaten dan desa.

FAQ

Berikut ini beberapa error yang dialami oleh pengguna yang mencoba mengikuti artikel ini.

Uncaught ReferenceError: $ is not defined

Error ini terjadi karena kode javascript yang digunakan pada artikel ini diload sebelum library jquery diload. Pastikan library jquery sudah diload pada layout/view yang digunakan.

Kasus lain, library jQuery sudah diload, akan tetapi menggunakan tag defer (script akan dieksekusi setelah parsing HTML selesai).

<script src="{{ asset('js/app.js') }}" defer></script>

Untuk kasus ini, kita perlu merubah kode javascript yang kita punya agar di eksekusi setelah parsing HTML selesai.

window.addEventListener('DOMContentLoaded', function() {
    $(function () {
        $('#province').on('change', function () {
            //
        });
    });
});

Uncaught ReferenceError: axios is not defined

Error ini terjadi karena library axios tidak ada, Laravel secara default menyertakan library ini. Jika anda tidak menggunakan library axios ini, anda bisa menggunakan jQuery untuk request ajax.

$(function () {
    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
    });

    $('#province').on('change', function () {
        $.ajax({
            url: '{{ route('dependent-dropdown.store') }}',
            method: 'POST',
            data: {id: $(this).val()},
            success: function (response) {
                $('#city').empty();

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

Alfa Adhitya Member since December 18, 2019

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter – Eric S