Press "Enter" to skip to content

laravolt/indonesia – Library Yang Menyimpan Seluruh Wilayah Indonesia + Sample Koding

Published April 9, 2023 by fadli
fadli 0
laravolt/indonesia - Library Yang Menyimpan Seluruh Wilayah Indonesia + Sample Koding

laravolt/indonesia – Library Yang Menyimpan Seluruh Wilayah Indonesia.

Halo semua nya, kali ini mimin akan memperkenalkan sebuah library yang bernama laravolt/indonesia.

Library ini berisikan data seeder yang akan menyimpan seluruh wilayah yang ada di indonesia kedalam database kita, mulai dari provinsi, kabupaten/kota, dan kecamatan/desa dari seluruh indonesia.

laravolt/indonesia

Kita akan coba install library ini kedalam project laravel kita.

Tapi sebelum itu, sebagai informasi, disini mimin menggunakan laravel versi 10, buat kalian yang menggunakan versi laravel dibawah 10 seperti 9/8/7/6/5, masih tetap bisa menggunakan library ini.

Proses Instalasi Via Composer

Kita akan coba melakukan instalasi library nya via composer, jalankan perintah berikut:

....
composer require laravolt/indonesia
....

Publish Config & Migration

Jika proses instalasi nya sudah selesai, sekarang kalian perlu mempublish file migration dan file config nya, jalankan perintah berikut:

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

Setelah perintah diatas dijalankan, maka akan muncul beberapa file migrations dan 1 buah file config.

laravolt/indonesia - Library Yang Menyimpan Seluruh Wilayah Indonesia + Sample Koding

Trending
Cara Looping Diantara 2 Tanggal Menggunakan PHP

Jalankan Migration

Sekarang jalankan migration nya.

....
php artisan migrate
....

Maka nanti didalam database kita, akan muncul 4 buah table baru seperti berikut:

laravolt/indonesia - Library Yang Menyimpan Seluruh Wilayah Indonesia + Sample Koding

Tapi table tersebut masih lah kosong, belum ada isi nya.

Nah untuk mengisi data-data nya, kita perlu menjalankan seeder nya terlebih dahulu.

Menjalankan Seeder

Untuk menjalankan seeder nya laravolt, bisa dengan menjalankan perintah berikut:

....
php artisan laravolt:indonesia:seed
....

Tunggu beberapa saat sampai proses nge-seed nya selesai.

Setelah itu, kalian bisa cek 4 table tadi, dan seharusnya sekarang sudah ada data nya, contoh nya adalah seperti berikut ini:

laravolt/indonesia - Library Yang Menyimpan Seluruh Wilayah Indonesia + Sample Koding

Kalau kalian ingin menambahkan seeder nya kedalam file DatabaseSeeder.php, bisa dengan cara seperti berikut ini:

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use Laravolt\Indonesia\Seeds\CitiesSeeder;
use Laravolt\Indonesia\Seeds\VillagesSeeder;
use Laravolt\Indonesia\Seeds\DistrictsSeeder;
use Laravolt\Indonesia\Seeds\ProvincesSeeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        $this->call([
            ProvincesSeeder::class,
            CitiesSeeder::class,
            DistrictsSeeder::class,
            VillagesSeeder::class,
        ]);
    }
}

Contoh Singkat Script Get Data

Berikut mimin paparkan beberapa contoh singkat untuk get data nya.

Get Data Provinsi

Untuk get all data provinsi, kalian bisa gunakan script berikut ini:

....
\Indonesia::allProvinces()
....

Untuk get data provinsi dengan pagination, kalian bisa gunakan script seperti berikut ini, contoh misalkan get data provinsi dengan row per page nya adalah 10:

....
\Indonesia::paginateProvinces(10)
....

Get detail provinsi berdasarkan id nya:

....
\Indonesia::findProvince($provinceId, $with = null) // array $with : ['cities', 'districts', 'villages', 'cities.districts', 'cities.districts.villages', 'districts.villages']
....

Diatas terdapat parameter kedua yang bisa kalian isi dengan membawa relasi data nya.

Get Data Kota

Get semua data kota:

....
\Indonesia::allCities()
....

Get data kota dengan pagination:

....
\Indonesia::paginateCities(15)
....

Get detail kota berdasarkan id nya, dan kalian bisa membawa relasi data nya pada parameter kedua:

....
\Indonesia::findCity($cityId, $with = null) // array $with : ['province', 'districts', 'villages', 'districts.villages']
....

Get Data Kecamatan

Get all data kecamatan:

....
\Indonesia::allDistricts()
....

Get data kecamatan dengan pagination:

....
\Indonesia::paginateDistricts(15)
....

Get detail data kecamatan dengan id nya:

....
Indonesia::findDistrict($districtId, $with = null) // array $with : ['province', 'city', 'city.province', 'villages']
....

Get Data Kelurahan

Get all data kelurahan:

....
\Indonesia::allVillages()
....

Get all data kelurahan dengan pagination:

....
\Indonesia::paginateVillages(15)
....

Get detail data kelurahan berdasarkan id nya:

....
\Indonesia::findVillage($villageId, $with = null) // array $with : ['province', 'city', 'district', 'district.city', 'district.city.province']
....

Untuk lebih lengkap dan lebih jelas nya, serta gimana cara implementasi nya, bisa cek dibawah ini.

Contoh Koding Implementasi Laravolt (Studi Kasus)

Sekarang kita akan masuk kedalam contoh koding nya.

Kita akan membuat sebuah form untuk penginputan alamat, dimulai dari pemilihan provinsi nya.

Kemudian menampilkan data kota berdasarkan provinsi yang dipilih.

Menampilkan data kecamatan berdasarkan kota yang dipilih.

Dan juga menampilkan data kelurahan berdasarkan kecamatan yang dipilih.

Untuk preview project nya adalah seperti berikut ini:

Get Data Provinsi

Pertama, dimulai dari pemilihan data provinsi nya terlebih dahulu, kita akan tampilkan semua data provinsi nya serta akan kita bungkus kedalam form select option.

Buat route nya terlebih dahulu seperti berikut ini:

<?php

use App\Http\Controllers\LaravoltController;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::get('contoh-laravolt', [LaravoltController::class, 'index'])->name('laravolt.index');
....

Pada baris ke-21, kita membuat sebuah route baru dengan endpoint “/contoh-laravolt“, mengarah ke file LaravoltController, method index.

Selanjutnya kalian buat file controller baru dengan nama LaravoltController.

...
php artisan make:controller LaravoltController
....

Kalian buat method index, dan isi seperti berikut ini:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Collection;

class LaravoltController extends Controller
{
    public function index()
    {
        $provinsi = \Indonesia::allProvinces()->sortBy('name')->pluck('name', 'id');

        return view('laravolt.index', compact('provinsi'));
    }
}

Pada script diatas, di baris ke-12, kita nge-get seluruh data provinsi yang ada di indonesia dengan menggunaka perintah:

....
\Indonesia::allProvinces()
....

Perintah diatas akan me-return data Collection yang bersumber dari table “indonesia_provinces“, tapi hasil urutan nya masih acak.

Nah mimin ingin data yang dilempar sudah di sort by name secara ascending, oleh karena nya mimin menambahkan perintah “->sortBy(‘name’)” dibelakang nya.

....
\Indonesia::allProvinces()->sortBy('name')
....

Kemudian karena data provinsi ini nanti nya akan ditampilkan kedalam sebuah form select option, maka mimin hanya butuh “id” dan “name” nya saja, sehingga mimin menambahkan perintah “->pluck(‘name’, ‘id’)” dibelakang nya.

....
$provinsi = \Indonesia::allProvinces()->sortBy('name')->pluck('name', 'id');
....

Kalau kalian dump variable $provinsi diatas, maka hasilnya adalah seperti berikut:

laravolt/indonesia - Library Yang Menyimpan Seluruh Wilayah Indonesia + Sample Koding

Kemudian selanjutnya pada method index diatas, kita me-return sebuah view yang mengarah ke file “../resources/views/laravolt/index.blade.php“, kalian isi seperti berikut:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <br>
                <fieldset>
                    <legend>Form Wilayah Dengan Laravolt By: sangcahaya.id</legend>

                    <div class="box-body">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Pilih Provinsi</label>
                            {!! Form::select('provinsi', $provinsi, '', [
                                'class' => 'form-control',
                                'placeholder' => 'Pilih Provinsi',
                            ]) !!}
                        </div>
                    </div>
                </fieldset>

            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"
        integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>
</body>

</html>

Sekarang coba kalian akses route tersebut, maka hasilnya seharusnya seperti berikut ini:

laravolt/indonesia - Library Yang Menyimpan Seluruh Wilayah Indonesia + Sample Koding

Get Kota Berdasarkan province_id nya (Via Ajax)

Sekarang selanjutnya kita akan menarik data kota nya berdasarkan provinsi tertentu.

Misalkan ketika kita memilih provinsi jawa barat, maka yang muncul adalah kota-kota yang ada di provinsi tersebut.

Bagaimana caranya? gampang banget.

Oh ya sedikit informasi, untuk proses get data kota nya, kita menggunakan jquery ajax ya, biar terlihat lebih menarik, tanpa reload browser.

Pertama kalian buat route nya terlebih dahulu seperti berikut ini:

laravolt/indonesia - Library Yang Menyimpan Seluruh Wilayah Indonesia + Sample Koding

Kemudian pada file LaravoltController, kalian buat sebuah method baru dengan nama get_kota, dan isi seperti berikut ini:

....
public function get_kota()
{
    $province_id = request('province_id');
    $kota = \Indonesia::findProvince($province_id, ['cities'])->cities->sortBy('name')->pluck('name', 'id');

    return view('laravolt.list_kota', compact('kota'));
}
....

Pada baris ke-4, kita tangkep province_id nya berdasarkan form data yang dikirim melalui request ajax nya.

....
$province_id = request('province_id');
....

Kemudian pada baris ke-5, kita get data kota nya berdasarkan provinsi tertentu, diurutkan secara ascending berdasarkan nama kota nya, dan kita ambil name dan id nya saja untuk ditampilkan di form select option nya.

....
$kota = \Indonesia::findProvince($province_id, ['cities'])->cities->sortBy('name')->pluck('name', 'id');
....

Dan pada baris ke-7, kita return sebuah view “../laravolt/list_kota.blade.php” yang isi nya seperti berikut ini:

<label for="exampleInputEmail1">Pilih Kota</label>
{!! Form::select('city_id', $kota, '', [
    'class' => 'form-control',
    'placeholder' => 'Pilih Kota',
    'id' => 'city_id',
]) !!}

Oh ya pada method index nya, ada yang perlu ditambahkan juga seperti berikut ini:

laravolt/indonesia - Library Yang Menyimpan Seluruh Wilayah Indonesia + Sample Koding

Kita membuat sebuah variable yang menampung route untuk request get data kota nya, yang mana variable tersebut juga kita passing kedalam view nya.

Kemudian pada view “../laravolt/index.blade.php” nya, kalian modifikasi hingga menjadi seperti berikut ini:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <br>
                <fieldset>
                    <legend>Form Wilayah Dengan Laravolt By: sangcahaya.id</legend>

                    <div class="box-body">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Pilih Provinsi</label>
                            {!! Form::select('provinsi', $provinsi, '', [
                                'class' => 'form-control',
                                'placeholder' => 'Pilih Provinsi',
                                'id' => 'province_id',
                            ]) !!}
                        </div>

                        <div class="form-group" id="form-kota">

                        </div>
                    </div>
                </fieldset>

            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"
        integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>

    <script>
        $(document).ready(function() {
            $('body').on('change', '#province_id', function() {
                let id = $(this).val();
                let route = "{{ $route_get_kota }}";

                $.ajax({
                    type: 'get',
                    url: route,
                    data: {
                        province_id: id
                    },
                    success: function(data) {
                        $('#form-kota').html(data);
                    }
                })
            })
        })
    </script>
</body>

</html>

Diatas, pada baris ke-54, kita melakukan sebuah request ajax ketika data provinsi nya dipilih.

Sekarang coba kalian akses, maka seharusnya akan tampil seperti berikut ini:

laravolt/indonesia - Library Yang Menyimpan Seluruh Wilayah Indonesia + Sample Koding

Get Data Kecamatan Berdasarkan Kota Yang Dipilih (Via Ajax)

Narik data kota nya udah, maka sekarang selanjutnya kita akan narik data kecamatan nya berdasarkan kota yang dipilih.

Kita buat route baru terlebih dahulu seperti berikut ini:

laravolt/indonesia - Library Yang Menyimpan Seluruh Wilayah Indonesia + Sample Koding

Kemudian pada file LaravoltController nya, pada method index nya, ada penambahan sedikit menjadi seperti berikut ini:

laravolt/indonesia - Library Yang Menyimpan Seluruh Wilayah Indonesia + Sample Koding

Ada penambahan variable untuk menampung route get data kecamatan nya.

Kemudian masih didalam file LaravoltController nya, kita buat method baru dengan nama get_kecamatan seperti berikut ini:

public function get_kecamatan()
{
    $city_id = request('city_id');
    $kecamatan = \Indonesia::findCity($city_id, ['districts'])->districts->sortBy('name')->pluck('name', 'id');

    return view('laravolt.list_kecamatan', compact('kecamatan'));
}

Diatas pada baris ke-3, kita tangkep nilai city_id nya yang dikirim melalui form request ajax nya.

....
$city_id = request('city_id');
....

Kemudian pada baris ke-4 adalah perintah untuk get data kecamatan nya, di sort by name, dan diambil field name dan id nya saja.

....
$kecamatan = \Indonesia::findCity($city_id, ['districts'])->districts->sortBy('name')->pluck('name', 'id');
....

Dan pada baris ke-6 kita return sebuah view yang mengarah ke file “../resources/views/laravolt/list_kecamatan.blade.php“, dan isi seperti berikut ini:

<label for="exampleInputEmail1">Pilih Kecamatan</label>
{!! Form::select('kecamatan_id', $kecamatan, '', [
    'class' => 'form-control',
    'placeholder' => 'Pilih Kecamatan',
    'id' => 'kecamatan_id',
]) !!}

Kemudian pada view “../laravolt/index.blade.php” kalian ubah menjadi seperti berikut ini:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <br>
                <fieldset>
                    <legend>Form Wilayah Dengan Laravolt By: sangcahaya.id</legend>

                    <div class="box-body">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Pilih Provinsi</label>
                            {!! Form::select('provinsi', $provinsi, '', [
                                'class' => 'form-control',
                                'placeholder' => 'Pilih Provinsi',
                                'id' => 'province_id',
                            ]) !!}
                        </div>

                        <div class="form-group" id="form-kota">

                        </div>

                        <div class="form-group" id="form-kecamatan">

                        </div>
                    </div>
                </fieldset>

            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"
        integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>

    <script>
        $(document).ready(function() {
            $('body').on('change', '#province_id', function() {
                let id = $(this).val();
                let route = "{{ $route_get_kota }}";

                $.ajax({
                    type: 'get',
                    url: route,
                    data: {
                        province_id: id
                    },
                    success: function(data) {
                        $('#form-kota').html(data);
                    }
                })
            })

            $('body').on('change', '#city_id', function() {
                let id = $(this).val();
                let route = "{{ $route_get_kecamatan }}";

                $.ajax({
                    type: 'get',
                    url: route,
                    data: {
                        city_id: id
                    },
                    success: function(data) {
                        $('#form-kecamatan').html(data);
                    }
                })
            })
        })
    </script>
</body>

</html>

Diatas, pada baris ke-74 kita melakukan sebuah request ajax untuk get data kecamatan nya.

Sekarang kalau kalian reload halaman nya, seharusnya akan menjadi seperti ini:

laravolt/indonesia - Library Yang Menyimpan Seluruh Wilayah Indonesia + Sample Koding

Get Data Kelurahan Berdasarkan Kecamatan Nya (Via Ajax)

Sekarang yang terakhir yaitu kita akan get data kelurahan nya berdasarkan kecamatan yang dipilih.

Kita buat dulu route nya seperti berikut ini:

laravolt/indonesia - Library Yang Menyimpan Seluruh Wilayah Indonesia + Sample Koding

Kemudian seperti biasa, kita melakukan modifikasi pada file LaravoltController nya.

Pada method index nya ada perubahan sedikit menjadi seperti berikut ini:

laravolt/indonesia - Library Yang Menyimpan Seluruh Wilayah Indonesia + Sample Koding

Diatas kita buat sebuah variable baru untuk menampung route get data kelurahan nya.

Kemudian kita buat method baru dengan nama get_kelurahan seperti berikut ini:

public function get_kelurahan()
{
    $kecamatan_id = request('kecamatan_id');
    $kelurahan = \Indonesia::findDistrict($kecamatan_id, ['villages'])->villages->sortBy('name')->pluck('name', 'id');

    return view('laravolt.list_kelurahan', compact('kelurahan'));
}

Setelah itu buat file view baru dengan nama “../laravolt/list_kelurahan.blade.php“, dan isi seperti berikut ini:

<label for="exampleInputEmail1">Pilih Kelurahan</label>
{!! Form::select('kelurahan_id', $kelurahan, '', [
    'class' => 'form-control',
    'placeholder' => 'Pilih kelurahan',
    'id' => 'kelurahan_id',
]) !!}

Kemudian pada file view “../laravolt/index.blade.php” nya, kalian modifikasi hingga menjadi seperti berikut ini:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <br>
                <fieldset>
                    <legend>Form Wilayah Dengan Laravolt By: sangcahaya.id</legend>

                    <div class="box-body">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Pilih Provinsi</label>
                            {!! Form::select('provinsi', $provinsi, '', [
                                'class' => 'form-control',
                                'placeholder' => 'Pilih Provinsi',
                                'id' => 'province_id',
                            ]) !!}
                        </div>

                        <div class="form-group" id="form-kota">

                        </div>

                        <div class="form-group" id="form-kecamatan">

                        </div>

                        <div class="form-group" id="form-kelurahan">

                        </div>
                    </div>
                </fieldset>

            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"
        integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>

    <script>
        $(document).ready(function() {
            $('body').on('change', '#province_id', function() {
                let id = $(this).val();
                let route = "{{ $route_get_kota }}";

                $.ajax({
                    type: 'get',
                    url: route,
                    data: {
                        province_id: id
                    },
                    success: function(data) {
                        $('#form-kota').html(data);
                    }
                })
            })

            $('body').on('change', '#city_id', function() {
                let id = $(this).val();
                let route = "{{ $route_get_kecamatan }}";

                $.ajax({
                    type: 'get',
                    url: route,
                    data: {
                        city_id: id
                    },
                    success: function(data) {
                        $('#form-kecamatan').html(data);
                    }
                })
            })

            $('body').on('change', '#kecamatan_id', function() {
                let id = $(this).val();
                let route = "{{ $route_get_kelurahan }}";

                $.ajax({
                    type: 'get',
                    url: route,
                    data: {
                        kecamatan_id: id
                    },
                    success: function(data) {
                        $('#form-kelurahan').html(data);
                    }
                })
            })
        })
    </script>
</body>

</html>

Sekarang kalau kalian reload halaman nya, maka akan menjadi seperti berikut ini:

laravolt/indonesia - Library Yang Menyimpan Seluruh Wilayah Indonesia + Sample Koding

Gimana? keren kan?

Untuk mengunjungi halaman resmi dari library nya, bisa kalian kunjungi disini..

Support Us

Jika artikel ini bermanfaat untuk kamu, membantu menyelesaikan masalah yang sedang kamu hadapi, kamu juga bisa dukung kami melalui halaman berikut: https://saweria.co/sangcahayaid

 

 

 

 

 

 

fadli

fadli

Published in Tutorial Laravel

Leave a Reply

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

%d bloggers like this: