My Course — Membangun Website Food Store Dengan Laravel Filament, Livewire dan Payment Gateway

Menampilkan Data Kota By Provinsi

Setelah data provinsi berhasil ditampilkan maka sekarang kita akan belajar menampilkan data kota / kabupaten yang terkait dengan data provinsi yang dipilih atau bisa disebut dengan dependent select dropdown.

Langkah 1 - Menambahkan Public Properti

Pertama, kita akan menambahkan public properti di dalam class component, dimana nanti akan berfungsi untuk menyimpan ID kota yang dipilih pada select option.

Silahkan buka file app/Livewire/Web/Checkout/Index.blade.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.


        
php

        

            
        

     
<?php

namespace App\Livewire\Web\Checkout;

use Livewire\Component;
use App\Models\Province;

class Index extends Component
{
    public $address;
    public $province_id;
    public $city_id;


    public function render()
    {
        //get provinces
        $provinces = Province::query()->get();

        return view('livewire.web.checkout.index', compact('provinces'));
    }
}

Di atas, kita menambahkan public properti baru.


        
php

        

            
        

     
public $city_id;

Langkah 2 - Menampilkan Data Kota / Kabupaten By Provinsi

Sekarang kita akan menampilkan data kota / kabupaten berdasarkan provinsi yang dipilih. Silahkan teman-teman buka file resources/views/livewire/web/checkout/index.blade.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.


        
typescript

        

            
        

     
@section('title')
Checkout - Eat Your Favorite Foods
@stop

@section('keywords')
Food Store, Eat Your Favorite Foods
@stop

@section('description')
Checkout - Food Store - Eat Your Favorite Foods
@stop

@section('image')
{{ asset('images/logo.png') }}
@stop

<div>
    <div class="container">

        <div class="row justify-content-center mt-0" style="margin-bottom: 320px;">
            <div class="col-md-6">

                <div class="bg-white rounded-bottom-custom shadow-sm p-3 sticky-top mb-3">
                    <div class="d-flex justify-content-start">
                        <div>
                            <x-buttons.back />
                        </div>
                    </div>
                </div>

                <div class="card rounded shadow-sm border-0 mb-4">
                    <div class="card-body">
                        <h6>
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-geo-alt mb-1" viewBox="0 0 16 16">
                                <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A32 32 0 0 1 8 14.58a32 32 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10" />
                                <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4m0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6" />
                            </svg>
                            Shipping Information
                        </h6>
                        <hr />

                        <select class="form-select rounded mb-3" wire:model.live="province_id">
                            <option value="">-- Select Province --</option>
                            @foreach ($provinces as $province)
                                <option value="{{ $province->id }}">
                                    {{ $province->name }}
                                </option>
                            @endforeach
                        </select>

                        <select class="form-select rounded mb-3" wire:model.live="city_id" wire:key="{{ $province_id }}">
                            <option value="">-- Select City --</option>
                            @foreach (\App\Models\City::where('province_id', $province_id)->get() as $city)
                                <option value="{{ $city->id }}">{{ $city->name }}</option>
                            @endforeach
                        </select>

                        <div class="mb-3">
                            <textarea class="form-control rounded" wire:model.live="address" rows="3" placeholder="Address:  Jl. Kebon Jeruk No. 1, Jakarta Barat"></textarea>
                        </div>

                    </div>
                </div>

            </div>

        </div>
    </div>

    

</div>

Di atas kita menambahkan select option baru untuk menampilkan data kota / kabupaten.


        
csharp

        

            
        

     
<select class="form-select rounded mb-3" wire:model.live="city_id" wire:key="{{ $province_id }}">

	//...
	
</select>

Di atas, teman-teman perhatikan kita menambahkan event wire:key yang berisi properti $province_id, artinya jika ada perubahan pada properti tersebut maka akan dilakukan reset pada select option kota / kabupaten.

Kemudian di dalam select option di atas, kita menampilkan data kota / kabupaten berdasarkan province id / $province_id.


        
php

        

            
        

     
@foreach (\App\Models\City::where('province_id', $province_id)->get() as $city)
    
    <option value="{{ $city->id }}">{{ $city->name }}</option>

@endforeach

Langkah 3 - Uji Coba Menampilkan Data Kota / Kabupaten

Silahkan reload halaman checkout, kemudian pilih salah satu data provinsi, maka nanti akan menampilkan list data kota / kabupaten yang terkait dengan provinsi yang dipilih.

SELESAI & LANJUTKAN