Panduan praktis dan terstruktur mengenai panduan laravel raja ongkir v2: menampilkan data kecamatan berdasarkan kota / kabupaten (part 5) berstandar enterprise. Pelajari konsep, implementasi kode modern, dan tips arsitektur enterprise siap produksi.
Selamat datang di seri tutorial engineering SiHubung! Pada artikel ini, kita akan membedah secara komprehensif implementasi Panduan Laravel Raja Ongkir V2: Menampilkan Data Kecamatan Berdasarkan Kota / Kabupaten (Part 5) Berstandar Enterprise dengan standar kode bersih (clean code), performa tinggi, dan arsitektur siap produksi.
Membangun aplikasi web di era modern memerlukan pondasi yang kokoh. Framework modern memberikan fleksibilitas luar biasa bagi developer untuk menghadirkan fitur kompleks secara cepat tanpa mengabaikan aspek keamanan dan keandalan sistem.
Tahapan Implementasi & Walkthrough Kode
Berikut adalah langkah demi langkah teknis yang dapat Anda ikuti langsung pada codebase Anda:
Tahap 1: Penulisan Kode & Konfigurasi
<?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'] ?? []);
}
}
}Tahap 2: Penulisan Kode & Konfigurasi
public function getDistricts($cityId)
{
//...
}Tahap 3: Penulisan Kode & Konfigurasi
// 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}");Tahap 4: Penulisan Kode & Konfigurasi
return response()->json($response->json()['data'] ?? []);Tahap 5: Penulisan Kode & Konfigurasi
<?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']);Tahap 6: Penulisan Kode & Konfigurasi
<!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>Tahap 7: Penulisan Kode & Konfigurasi
<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>Tahap 8: Penulisan Kode & Konfigurasi
$('select[name="city_id"]').on('change', function() {
//...
});Tahap 9: Penulisan Kode & Konfigurasi
let cityId = $(this).val();Tahap 10: Penulisan Kode & Konfigurasi
jQuery.ajax({
url: `/districts/${cityId}`,
type: "GET",
dataType: "json",
//...
})Tahap 11: Penulisan Kode & Konfigurasi
$.each(response, function(index, value) {
('select[name="district_id"]').append(`<option value="${value.id}">${value.name}</option>`);
});
💡 Tips Rekayasa Perangkat Lunak (SiHubung Engineering Best Practice)
Selalu gunakan pendekatan deklaratif, validasi input seawal mungkin di boundary layer, dan lakukan logging terstruktur untuk memudahkan observability ketika sistem dijalankan di lingkungan cloud produksi.
Kesimpulan
Dengan mengikuti langkah-langkah terstruktur di atas, implementasi modul Anda akan jauh lebih rapi, aman dari bug umum, serta siap diskalakan ke lingkungan produksi.
Nantikan artikel tutorial praktis lainnya seputar fullstack development, microservices, dan otomasi AI di Blog Engineering SiHubung. Selamat mencoba!
