Halo teman-teman semuanya, di tutorial sebelumnya kita sudah berhasil menampilkan daftar provinsi dari API Raja Ongkir. Nah, kali ini kita akan lanjut ke tahap berikutnya, yaitu menampilkan data kota atau kabupaten berdasarkan provinsi yang dipilih.
Untuk melakukannya, kita akan menggunakan bantuan Ajax dengan jQuery. Dengan cara ini, saat user memilih salah satu provinsi, kita bisa langsung mengambil dan menampilkan daftar kota/kabupaten tanpa perlu reload halaman. Jadi, prosesnya akan terasa lebih cepat dan interaktif.
Langkah 1 - Mendapatkan Data Kota / Kabupaten
Sekarang kita akan menambahkan method baru di dalam controller, pada method tersebut kita akan menerima sebuah parameter yaitu ID dari data provinsi.
ID Provinsi tersebut akan kita gunakan sebagai parameter untuk mendapatkan list data kota atau kabupaten sesuai dengan provinsi yang dipilih.
Silahkan buka file app/Http/Controllers/RajaOngkirController.php, kemudian ubah 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'] ?? []);
}
}
}
Dari perubahan kode di atas, kita menambahkan method baru dengan nama getCities dan di dalamnya terdapat parameter $provinceId.
public function getCities($provinceId)
{
//...
}
Di dalamnya, kita melakukan get data kota / kabupaten berdasarkan ID dari data provinsi yang dikirim yaitu $provinceId dan kita menggunakan HTTP Client dari Laravel.
// 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}");
Jika proses fetch atau get data dari API Raja Ongkir berhasil dilakukan, maka kita return ke dalam format JSON.
return response()->json($response->json()['data'] ?? []);
Langkah 2 - Membuat Route Get Cities
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']);
Dari perubahan kode di atas, kita menambahkan route baru dengan path /cities/{provinceId} dan method yang digunakan adalah GET.
Langkah 3 - Menampilkan Data Kota / Kabupaten Berdasarkan Provinsi
Sekarang kita tinggal menampilkan data kota / kabupaten berdasarkan provinsi yang dipilih menggunakan Ajax jQuery.
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>
</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>`);
}
});
});
</script>
</body>
</html>
Dari perubahan kode di atas, kita menambahkan select dropdown yang nanti digunakan untuk menampilkan data kota atau kabupaten.
<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>
Selanjutnya, di dalam JavaScript kita membuat sebuah event dimana ketika ada perubahan pada sebuah select dropdown dengan name province_id, maka kita akan memanggil sebuah Ajax.
$('select[name="province_id"]').on('change', function() {
//...
});
Di dalamnya, kita ambil nilai dari provinceId dari select dropdown yang dipilih.
let provinceId = $(this).val();
Setelah itu, kita panggil Ajax untuk mendapatkan data kota / kabupaten berdasarkan provinceId.
jQuery.ajax({
url: `/cities/${provinceId}`,
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 city_id.
$.each(response, function(index, value) {
$('select[name="city_id"]').append(`<option value="${value.id}">${value.name}</option>`);
});
Langkah 4 - Uji Coba Menampilkan Data Kota / Kabupaten
Silahkan teman-teman buka project-nya, jika berhasil maka teman-teman akan bisa menampilkan data kota / kabupaten berdasarkan provinsi yang dipilih.
Kesimpulan
Pada artikel kali ini, kita semua telah belajar bagaimana cara menampilkan data kota / kabupaten berdasarkan provinsi ID menggunakan Ajax di Raja Ongkir.
Terima Kasih