Laravel RajaOngkir: Implementasi Cek Ongkir
• 10 min read • 7151 views
Laravel Cek Ongkir - Okey guys, di artikel sebelumnya saya sudah share artikel tentang menyimpan data provinsi dan kota di Indonesia dari RajaOngkir ke laravel project. Nah, di artikel ini saya akan share tentang bagaimana mengimplementasikan cek ongkir dari API RajaOngkir di Laravel.
Sebelum kita coding, saya ingin menjalaskan lagi sedikit tentang RajaOngkir service. Raja Ongkir adalah platform yang menyediakan layanan perhitungan ongkos kirim secara real-time berdasarkan berat barang, jenis layanan pengiriman, dan lokasi pengiriman dan penerimaan.
Baik, sekarang mari kita langsung ke coding 🚀
Table of Contents
Step 1: Generate & Setup Controller
Pertama, mari kita buat Controller yang memiliki fungsi untuk menampilkan data provinsi, kota dan melakukan cek ongkir di Laravel. Jalankan perintah artisan seperti di bawah ini untuk membuat file CheckOngkirController.
php artisan make:controller CheckOngkirControllerKemudian, buka file controller yang baru saja digenerate tersebut dan sesuaikan kodenya menjadi seperti di bawah ini:
<?php
namespace App\Http\Controllers;
use App\Models\Province;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;
class CheckOngkirController extends Controller
{
public function province(Request $request){
try {
$provinces = Province::where('name', 'like', '%'.$request->keyword.'%')->select('id', 'name')->get();
$data = [];
foreach ($provinces as $province) {
$data[] = [
'id' => $province->id,
'text' => $province->name
];
}
return response()->json($data);
} catch (\Throwable $th) {
return response()->json([
'success' => false,
'message' => 'Data Fetch Failed',
'data' => []
]);
}
}
public function city(Request $request){
try {
$cities = Province::find($request->province_id)->cities()
->where('name', 'like', '%'.$request->keyword.'%')
->select('id', 'name')->get();
$data = [];
foreach ($cities as $city) {
$data[] = [
'id' => $city->id,
'text' => $city->name
];
}
return response()->json($data);
} catch (\Throwable $th) {
return response()->json([
'success' => false,
'message' => 'Data Fetch Failed',
'data' => []
]);
}
}
public function checkOngkir(Request $request){
try {
$response = Http::withOptions(['verify' => false,])->withHeaders([
'key' => env('RAJAONGKIR_API_KEY')
])->post('https://api.rajaongkir.com/starter/cost',[
'origin' => $request->origin,
'destination' => $request->destination,
'weight' => $request->weight,
'courier' => $request->courier
])
->json()['rajaongkir']['results'][0]['costs'];
return response()->json($response);
} catch (\Throwable $th) {
return response()->json([
'success' => false,
'message' => $th->getMessage(),
'data' => []
]);
}
}
}Pada CheckOngkirController, kita menambahkan 3 method dengan fungsi:
province: Untuk menampilkan data provinsi dari table provinces.city: Untuk menampilkan data kota dari tabel cities berdasarkan parameter province_id.checkOngkir: Untuk melakukan request cek ongkir ke API RajaOngkir dan menampilkan hasilnya.
Step 2: Setup View
Langkah kedua, mari kita setup view atau silakan buka file welcome.blade.php dan update kode pada file tersebut menjadi seperti di bawah ini:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>
Integrasi RajaOngkir dengan Laravel
</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<main class="py-5">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="fs-5 py-4 text-center">
Integrasi RajaOngkir dengan Laravel
</h2>
<div class="card border rounded shadow">
<div class="card-body">
<form id="form">
<div class="row mb-3">
<strong>Origin</strong>
<div class="col-md-6">
<label for="origin_province" class="form-label">Province</label>
<select name="origin_province" id="origin_province" class="form-select">
<option>Choose Province</option>
</select>
</div>
<div class="col-md-6">
<label for="origin_city" class="form-label">City</label>
<select name="origin_city" id="origin_city" class="form-select">
<option>Choose City</option>
</select>
</div>
</div>
<div class="row mb-3">
<strong>Destination</strong>
<div class="col-md-6">
<label for="destination_province" class="form-label">Province</label>
<select name="destination_province" id="destination_province" class="form-select">
<option>Choose Province</option>
</select>
</div>
<div class="col-md-6">
<label for="destination_city" class="form-label">City</label>
<select name="destination_city" id="destination_city" class="form-select">
<option>Choose City</option>
</select>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label for="courier" class="form-label">Courier</label>
<select name="courier" id="courier" class="form-select">
<option>Choose Courier</option>
<option value="jne">JNE</option>
<option value="pos">POS</option>
<option value="tiki">TIKI</option>
</select>
</div>
<div class="col-md-6">
<label for="weight" class="form-label">Weight (Gram)</label>
<input type="number" name="weight" id="weight" class="form-control">
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" id="checkBtn">Check</button>
</div>
</form>
</div>
</div>
<div id="result" class="mt-3 d-none"></div>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script>
$(document).ready(function(){
$('#origin_province, #destination_province').select2({
ajax: {
url: "{{ route('provinces') }}",
type: 'GET',
dataType: 'json',
delay: 250,
data: function(params){
return {
keyword: params.term
}
},
processResults: function(response){
return {
results: response
}
},
}
});
$('#origin_city, #destination_city').select2();
$('#origin_province').on('change', function(){
$('#origin_city').empty();
$('#origin_city').append('<option>Choose City</option>');
$('#origin_city').select2('close');
$('#origin_city').select2({
ajax: {
url: "{{ route('cities') }}",
type: 'GET',
dataType: 'json',
delay: 250,
data: function(params){
return {
keyword: params.term,
province_id: $('#origin_province').val()
}
},
processResults: function(response){
return {
results: response
}
},
}
});
});
$('#destination_province').on('change', function(){
$('#destination_city').empty();
$('#destination_city').append('<option>Choose City</option>');
$('#destination_city').select2('close');
$('#destination_city').select2({
ajax: {
url: "{{ route('cities') }}",
type: 'GET',
dataType: 'json',
delay: 250,
data: function(params){
return {
keyword: params.term,
province_id: $('#destination_province').val()
}
},
processResults: function(response){
return {
results: response
}
},
}
});
});
$('#checkBtn').on('click', function(e){
e.preventDefault();
let origin = $('#origin_city').val();
let destination = $('#destination_city').val();
let courier = $('#courier').val();
let weight = $('#weight').val();
$.ajax({
url: "{{ route('check-ongkir') }}",
type: 'POST',
dataType: 'json',
data: {
_token: "{{ csrf_token() }}",
origin: origin,
destination: destination,
courier: courier,
weight: weight
},
beforeSend: function(){
$('#checkBtn').html('Loading...');
$('#checkBtn').attr('disabled', true);
},
success: function(response){
$('#result').removeClass('d-none');
$('#checkBtn').html('Submit');
$('#checkBtn').attr('disabled', false);
$('#result').empty();
$('#result').append(`
<div class="col-12">
<div class="card border rounded shadow">
<div class="card-body">
<table class="table table-bordered">
<thead>
<tr>
<th>Service</th>
<th>Description</th>
<th>Cost</th>
<th>ETD</th>
</tr>
</thead>
<tbody id="resultBody">
</tbody>
</table>
</div>
</div>
</div>
`);
$.each(response, function(i, val){
$('#resultBody').append(`
<tr>
<td>${val.service}</td>
<td>${val.description}</td>
<td>${val.cost[0].value}</td>
<td>${val.cost[0].etd}</td>
</tr>
`);
});
},
error: function(xhr){
console.log(xhr.responseText);
}
});
});
});
</script>
</body>
</html>
Step 3: Setup Route
Dan di langkah ketiga, kita perlu mendaftarkan atau menambahkan 3 route yang mengarah ke ketiga method yang telah kita buat pada file CheckOngkirController. Silakan buka file routes/web.php dan tambahkan kode seperti di bawah ini:
Route::get('provinces', [CheckOngkirController::class, 'province'])->name('provinces');
Route::get('cities', [CheckOngkirController::class, 'city'])->name('cities');
Route::post('check-ongkir', [CheckOngkirController::class, 'checkOngkir'])->name('check-ongkir');Jadi, jika kalian perhatikan pada file welcome.blade.php yang telah kita setup sebelumnya, ada beberapa fungsi yang harus melakukan request ke ketiga route baru yang telah kita tambahkan di atas; yaitu get provinces, get cities dan check ongkir.
Step 4: Testing
Okey, sampai di tahap terakhir. Sebelumnya pada step pertama kita telah membuat CheckOngkirController dan telah menambahkan 3 method yang berfungsi; untuk menampilkan data provinsi dalam format JSON, menampilkan data kota dengan parameter province_id dan memformatnya menjadi JSON dan method checkOngkir untuk melakukan request ke API RajaOngkir untuk menghasilkan list jasa pengiriman berdasarkan parameter origin, destination, weight dan courier. Kemudian pada step kedua kita telah melakukan setup file view untuk membuat tampilan form dan menambahkan script AJAX untuk memanggil route check ongkir. Dan di setp ketiga kita juga telah menambahkan route baru di file routes/web.php.
Nah, selanjutnya kita bisa melakukan uji coba atau testing apakah form atau fitur cek ongkir yang telah kita buat ini sudah bisa berjalan sebagaimana mestinya atau belum.
Silakan jalankan laravel project kalian dan buka project tersebut pada browser. Isi field yang ada seperti; province origin, city origin, province destination, city destination, courier, weight dan klik Check. Jika berhasil maka tampilannya akan seperti gambar di bawah ini.
Gambar di atas menunjukkan bahwa fitur cek ongkir yang telah kita buat dengan memanfaatkan API dari RajaOngkir dan mengintegrasikannya di Laravel sudah berhasil.
Dengan langkah-langkah di atas, Kita telah berhasil mengimplementasikan cek ongkir dari API Raja Ongkir di Laravel. User sekarang dapat dengan mudah mengetahui estimasi biaya pengiriman ketika berbelanja di aplikasi web kita, sehingga pengalaman belanja mereka menjadi lebih baik dan transparan. Pastikan untuk selalu memantau dan memperbarui API Key secara berkala agar integrasi tetap berjalan dengan lancar dan akurat. Selamat mencoba dan sampai jumpa di artikel berikutnya 👋
Source Code: Laravel Raja Ongkir
Last updated on June 04, 2026
