Halo teman-teman semuanya, setelah sebelumnya kita berhasil melakukan konfigurasi API Raja Ongkir ke dalam project Laravel, kini kita akan mulai menampilkan data dari API Raja Ongkir ke tampilan (view) Laravel. Pada tutorial kali ini, kita akan fokus terlebih dahulu untuk menampilkan daftar provinsi.
Menampilkan data provinsi adalah langkah awal sebelum nantinya kita bisa menampilkan daftar kota, kecamatan dan menghitung ongkos kirim berdasarkan asal dan tujuan.
Data ini akan kita ambil langsung dari endpoint Raja Ongkir dan kemudian kita kirim ke view untuk ditampilkan dalam bentuk dropdown.
Di tahap ini, kamu akan belajar bagaimana cara:
- Mengambil data provinsi menggunakan HTTP client Laravel,
- Mengirim data tersebut ke view,
- Dan menampilkannya ke dalam HTML secara dinamis.
Langkah 1 - Membuat Controller Raja Ongkir
Pertama, kita akan membuat sebuah controller terlebih dahulu, dimana di dalamnya kita akan melakukan get data provinsi dari Raja Ongkir melalui HTTP client.
Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD.
php artisan make:controller RajaOngkirController
Jika berhasil, maka akan dibuatkan controller baru yang berada di dalam folder app/Http/Controllers.
Silahkan buat file tersebut dan 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'));
}
}
Dar penambahan kode di atas, pertama kita import HTTP Client dari Laravel.
use Illuminate\Support\Facades\Http;
Kemudian kita membuat method baru dengan nama index.
public function index()
{
//...
}
Di dalamnya, kita melakukan get data ke API Raja Ongkir menggunakan HTTP Client.
// 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');
Di atas, untuk Headers kita tambahkan key dan berisi konfigurasi API Key yang sudah kita buat pada artikel sebelumnya.
'key' => config('rajaongkir.api_key'),
Dan endpoint untuk mengambil data provinces, yaitu:
https://rajaongkir.komerce.id/api/v1/destination/province
Jika proses fetch atau get data provinces berhasil dilakukan, maka kita masukkan di dalam variable $provinces.
$provinces = $response->json()['data'] ?? [];
Selanjutnya, kita kirimkan data tersebut ke dalam view yang bernama rajaongkir dan kita gunakan fungsi compact untuk mengirim data tersebut.
return view('rajaongkir', compact('provinces'));
Langkah 2 - Membuat Route Raja Ongkir
Selanjutnya kita akan membuat route yang nanti akan kita gunakan untuk menampilkan data dari Raja Ongkir.
Silahkan buat file routes/web.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', [App\Http\Controllers\RajaOngkirController::class, 'index']);
Di atas, kita rewrite route yang udah ada yaitu / ke dalam controller RajaOngkirController dan method yang digunakan adalah index.
Langkah 3 - Menampilkan Data Provinsi
Sekarang kita tinggal menampilkan data di dalam view, disini kita akan menggunakan Tailwind CSS dari CDN untuk styling UI-nya.
Silahkan buat file baru dengan nama rajaongkir.blade.php di dalam folder resources/views, kemudian masukkan kode berikut ini di dalamnya.
<!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>
</div>
</body>
</html>
Dari penambahan kode di atas, kita memanggil Tailwind CSS dan jQuery secara CDN atau online.
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
Kemudian kita lakukan iterasi atau perulangan data provinsi yang dikirimkan oleh controller menggunakan direktif @foreach.
@foreach($provinces as $province)
<option value="{{ $province['id'] }}">{{ $province['name'] }}</option>
@endforeach
Langkah 4 - Uji Coba Menampilkan Data Provinsi
Silahkan teman-teman buka project-nya, jika berhasil maka akan menampilkan hasil seperti berikut ini.
Kesimpulan
Pada artikel ini kita semua telah belajar banyak hal, seperti membuat controller dan melakukan HTTP request ke API Raja Ongkir, membuat route dan menampilkan data provinsi di dalam view.
Terima Kasih