Halo teman-teman semuanya, setelah sebelumnya kita berhasil menampilkan data provinsi dan kota/kabupaten dari API Raja Ongkir, pada tutorial kali ini kita akan melanjutkan proses integrasi dengan menampilkan data kecamatan berdasarkan kota/kabupaten yang dipilih oleh user.
Teknik yang kita gunakan masih sama, yaitu menggunakan Ajax jQuery agar data kecamatan bisa dimuat secara dinamis tanpa perlu me-reload halaman. Fitur ini sangat penting ketika kita membuat form pengiriman barang atau checkout di toko online, di mana pengguna perlu memilih lokasi tujuan secara bertahap: provinsi → kota/kabupaten → kecamatan.
Langkah-langkahnya akan kita bahas secara detail, mulai dari menambahkan method di Controller hingga menampilkan data kecamatan ke dalam elemen <select> di view menggunakan Ajax jQuery.
Langkah 1 - Mendapatkan DataKecamatan
Silahkan teman-teman buka file app/Http/Controllers/RajaOngkirController.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;
class RajaOngkirController extends Controller
{
/**
* Menampilkan daftar provinsi dari API Raja Ongkir
*
* @return \Illuminate\View\View
*/
public function index()
{
// Mengambil data provinsi dari API Raja Ongkir
$response = Http::withHeaders([
//headers yang diperlukan untuk API Raja Ongkir
'Accept' => 'application/json',
'key' => config('rajaongkir.api_key'),
])->get('https://rajaongkir.komerce.id/api/v1/destination/province');
// Memeriksa apakah permintaan berhasil
if ($response->successful()) {
// Mengambil data provinsi dari respons JSON
// Jika 'data' tidak ada, inisialisasi dengan array kosong
$provinces = $response->json()['data'] ?? [];
}
// returning the view with provinces data
return view('rajaongkir', compact('provinces'));
}
/**
* Mengambil data kota berdasarkan ID provinsi
*
* @param int $provinceId
* @return \Illuminate\Http\JsonResponse
*/
public function getCities($provinceId)
{
// Mengambil data kota berdasarkan ID provinsi dari API Raja Ongkir
$response = Http::withHeaders([
//headers yang diperlukan untuk API Raja Ongkir
'Accept' => 'application/json',
'key' => config('rajaongkir.api_key'),
])->get("https://rajaongkir.komerce.id/api/v1/destination/city/{$provinceId}");
if ($response->successful()) {
// Mengambil data kota dari respons JSON
// Jika 'data' tidak ada, inisialisasi dengan array kosong
return response()->json($response->json()['data'] ?? []);
}
}
/**
* Mengambil data kecamatan berdasarkan ID kota
*
* @param int $cityId
* @return \Illuminate\Http\JsonResponse
*/
public function getDistricts($cityId)
{
// Mengambil data kecamatan berdasarkan ID kota dari API Raja Ongkir
$response = Http::withHeaders([
//headers yang diperlukan untuk API Raja Ongkir
'Accept' => 'application/json',
'key' => config('rajaongkir.api_key'),
])->get("https://rajaongkir.komerce.id/api/v1/destination/district/{$cityId}");
if ($response->successful()) {
// Mengambil data kecamatan dari respons JSON
// Jika 'data' tidak ada, inisialisasi dengan array kosong
return response()->json($response->json()['data'] ?? []);
}
}
}
Dari perubahan kode di atas, kita menambahkan method baru dengan nama getDistricts dan terdapat parameter $cityId.
public function getDistricts($cityId)
{
//...
}
Di dalamnya, kita melakukan get data district atau kecamatan ke API Raja Ongkir menggunakan HTTP Client dari Laravel.
// Mengambil data kecamatan berdasarkan ID kota dari API Raja Ongkir
$response = Http::withHeaders([
//headers yang diperlukan untuk API Raja Ongkir
'Accept' => 'application/json',
'key' => config('rajaongkir.api_key'),
])->get("https://rajaongkir.komerce.id/api/v1/destination/district/{$cityId}");
Jika berhasil, maka kit akan return dalam format JSON.
return response()->json($response->json()['data'] ?? []);
Langkah 2 - Membuat Route Get Districts
Sekarang kita lanjutkan membuat route-nya. Silahkan buka file routes/web.php, kemudian ubah kode-nya menjadi seperti berikut ini.
<?php
use Illuminate\Support\Facades\Route;
//index route for RajaOngkirController
Route::get('/', [App\Http\Controllers\RajaOngkirController::class, 'index']);
//route to get cities based on province ID
Route::get('/cities/{provinceId}', [App\Http\Controllers\RajaOngkirController::class, 'getCities']);
//route to get districts based on city ID
Route::get('/districts/{cityId}', [App\Http\Controllers\RajaOngkirController::class, 'getDistricts']);
Dari perubahan kode di atas, kita menambahkan route baru dengan path /districts/{cityId} dan method yang digunakan adalah GET.
Langkah 3 - Menampilkan Data Kecamatan Berdasarkan Kota / Kabupaten
Silahkan buka file resources/views/rajaongkir.blade.php, kemudian ubah semua kode-nya 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 name="csrf-token" content="{{ csrf_token() }}">
<title>Raja Ongkir V2 - SantriKoding.com</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<style>
.loader{border:4px solid #f3f3f3;border-top:4px solid #4f46e5;border-radius:50%;width:30px;height:30px;animation:spin 1s linear infinite;margin:0 auto;display:none}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
</style>
</head>
<body class="bg-gray-200 min-h-screen flex items-center justify-center p-4">
<div class="bg-white p-8 rounded-xl shadow w-full max-w-2xl">
<h1 class="text-3xl font-bold text-center text-gray-800 mb-8">Kalkulator Ongkos Kirim (V2)</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<!-- Dropdown Provinsi -->
<div>
<label for="province" class="block text-sm font-medium text-gray-700 mb-1">Provinsi Tujuan</label>
<select id="province" name="province_id" class="mt-1 block w-full pl-3 pr-10 py-2 text-base bg-gray-200 border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md shadow">
<option value="">-- Pilih Provinsi --</option>
@foreach($provinces as $province)
<option value="{{ $province['id'] }}">{{ $province['name'] }}</option>
@endforeach
</select>
</div>
<!-- Dropdown Kota / Kabupaten -->
<div>
<label for="city" class="block text-sm font-medium text-gray-700 mb-1">Kota / Kabupaten Tujuan</label>
<select id="city" name="city_id" class="mt-1 block w-full pl-3 pr-10 py-2 text-base bg-gray-200 border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md shadow-sm disabled:bg-gray-50 disabled:cursor-not-allowed">
<option value="">-- Pilih Kota / Kabupaten --</option>
</select>
</div>
<!-- Dropdown Kecamatan -->
<div>
<label for="district" class="block text-sm font-medium text-gray-700 mb-1">Kecamatan Tujuan</label>
<select id="district" name="district_id" class="mt-1 block w-full pl-3 pr-10 py-2 text-base bg-gray-200 border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md shadow-sm disabled:bg-gray-50 disabled:cursor-not-allowed">
<option value="">-- Pilih Kecamatan --</option>
</select>
</div>
</div>
<script>
$(document).ready(function() {
// Inisialisasi dropdown kota/kabupaten
$('select[name="province_id"]').on('change', function() {
let provinceId = $(this).val();
if (provinceId) {
jQuery.ajax({
url: `/cities/${provinceId}`,
type: "GET",
dataType: "json",
success: function(response) {
$('select[name="city_id"]').empty();
$('select[name="city_id"]').append(`<option value="">-- Pilih Kota / Kabupaten --</option>`);
$.each(response, function(index, value) {
$('select[name="city_id"]').append(`<option value="${value.id}">${value.name}</option>`);
});
}
});
} else {
$('select[name="city_id"]').append(`<option value="">-- Pilih Kota / Kabupaten --</option>`);
}
});
// Inisialisasi dropdown kecamatan
$('select[name="city_id"]').on('change', function() {
let cityId = $(this).val();
if (cityId) {
jQuery.ajax({
url: `/districts/${cityId}`,
type: "GET",
dataType: "json",
success: function(response) {
$('select[name="district_id"]').empty();
$('select[name="district_id"]').append(`<option value="">-- Pilih Kecamatan --</option>`);
$.each(response, function(index, value) {
$('select[name="district_id"]').append(`<option value="${value.id}">${value.name}</option>`);
});
}
});
} else {
$('select[name="district_id"]').append(`<option value="">-- Pilih Kecamatan --</option>`);
}
});
});
</script>
</body>
</html>
Dari perubahan kode di atas, pertama kita tambahkan select dropdown yang nanti kita gunakan untuk menampilkan data kecamatan.
<select id="district" name="district_id" class="mt-1 block w-full pl-3 pr-10 py-2 text-base bg-gray-200 border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md shadow-sm disabled:bg-gray-50 disabled:cursor-not-allowed">
<option value="">-- Pilih Kecamatan --</option>
</select>
Selanjutnya, di dalam JavaScript kita membuat sebuah event dimana ketika ada perubahan pada sebuah select dropdown dengan name city_id, maka kita akan memanggil sebuah Ajax.
$('select[name="city_id"]').on('change', function() {
//...
});
Di dalamnya, kita ambil nilai dari cityId dari select dropdown yang dipilih.
let cityId = $(this).val();
Setelah itu, kita panggil Ajax untuk mendapatkan data kecamatan berdasarkan cityId.
jQuery.ajax({
url: `/districts/${cityId}`,
type: "GET",
dataType: "json",
//...
})
Jika data berhasil di dapatkan, maka kita akan lakukan perulangan menggunakan each dan kita append ke dalam select dropdown yang bernama district_id.
$.each(response, function(index, value) {
('select[name="district_id"]').append(`<option value="${value.id}">${value.name}</option>`);
});
Langkah 4 - Uji Coba Menampilkan Kecamatan
Silahkan teman-teman buka project-nya, jika berhasil maka teman-teman akan bisa menampilkan data kecamatan berdasarkan provinsi dan kota yang dipilih.
Kesimpulan
Pada artikel kali ini, kita semua telah belajar bagaimana cara menampilkan data kecamatan berdasarkan kota / kabupaten menggunakan Ajax di Raja Ongkir.
Terima Kasih