Tutorial Integrasi Laravel Dengan RajaOngkir #4 : Proses Integrasi RajaOngkir Menggunakan AJAX - Halo teman-teman semuanya, di artikel sebelumnya kita sudah berhasil membuat migration dan table seeder.
Pada artikel kali ini kita semua akan belajar mengimplementasikan RajaOngkir dan Laravel menggunakan AJAX. langsung saja kita mulai.
Langkah 1 - Membuat Controller
Sekarang silahkan teman-teman jalankan perintah dibwah ini untuk membuat controller baru :
php artisan make:controller CheckOngkirController
Setelah itu, silahkan teman-teman buka controller tersebut di App/Http/Controller/CheckOngkirController.php dan ubahlah kodenya menjadi seperti berikut ini :
<?php
namespace App\Http\Controllers;
use App\City;
use App\Province;
use Illuminate\Http\Request;
use Kavist\RajaOngkir\Facades\RajaOngkir;
class CheckOngkirController extends Controller
{
/**
* @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
*/
public function index()
{
$provinces = Province::pluck('name', 'province_id');
return view('ongkir', compact('provinces'));
}
/**
* @param $id
* @return \Illuminate\Http\JsonResponse
*/
public function getCities($id)
{
$city = City::where('province_id', $id)->pluck('name', 'city_id');
return response()->json($city);
}
/**
* @param Request $request
* @return \Illuminate\Http\JsonResponse
*/
public function check_ongkir(Request $request)
{
$cost = RajaOngkir::ongkosKirim([
'origin' => $request->city_origin, // ID kota/kabupaten asal
'destination' => $request->city_destination, // ID kota/kabupaten tujuan
'weight' => $request->weight, // berat barang dalam gram
'courier' => $request->courier // kode kurir pengiriman: ['jne', 'tiki', 'pos'] untuk starter
])->get();
return response()->json($cost);
}
}
Dari controller di atas, kita sudah berhasil menambahkan 3 fungsi, diantaranya :
-
function index - fungsi ini kita gunakan untuk menampilkan view dari aplikasi kita
-
function getCities - fungsi ini akan kita gunakan untuk mendapatkan data kota berdasarkan kode provinsi dalam bentuk data JSON
-
function check_ongkir - fungsi ini akan kita gunakan untuk menghitung dari ongkos kirim yang mana datanya akan dikembalikan dalam bentuk JSON
Langkah 2 - Membuat View
Sekarang kita akan membuat sebuah view baru, silahkan teman-teman buat file baru dengan nama ongkir.blade.php di dalam folder resources/views dan masukkan kodenya seperti berikut ini :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@1.3.2/dist/select2-bootstrap4.min.css" rel="stylesheet" />
<title>Laravel Raja Ongkir - SantriKoding.com</title>
</head>
<body style="background: #f3f3f3">
<div class="container-fluid mt-5">
<div class="row">
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h3>ORIGIN</h3>
<hr>
<div class="form-group">
<label class="font-weight-bold">PROVINSI ASAL</label>
<select class="form-control provinsi-asal" name="province_origin">
<option value="0">-- pilih provinsi asal --</option>
@foreach ($provinces as $province => $value)
<option value="{{ $province }}">{{ $value }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label class="font-weight-bold">KOTA / KABUPATEN ASAL</label>
<select class="form-control kota-asal" name="city_origin">
<option value="">-- pilih kota asal --</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h3>DESTINATION</h3>
<hr>
<div class="form-group">
<label class="font-weight-bold">PROVINSI TUJUAN</label>
<select class="form-control provinsi-tujuan" name="province_destination">
<option value="0">-- pilih provinsi tujuan --</option>
@foreach ($provinces as $province => $value)
<option value="{{ $province }}">{{ $value }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label class="font-weight-bold">KOTA / KABUPATEN TUJUAN</label>
<select class="form-control kota-tujuan" name="city_destination">
<option value="">-- pilih kota tujuan --</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h3>KURIR</h3>
<hr>
<div class="form-group">
<label>PROVINSI TUJUAN</label>
<select class="form-control kurir" name="courier">
<option value="0">-- pilih kurir --</option>
<option value="jne">JNE</option>
<option value="pos">POS</option>
<option value="tiki">TIKI</option>
</select>
</div>
<div class="form-group">
<label class="font-weight-bold">BERAT (GRAM)</label>
<input type="number" class="form-control" name="weight" id="weight" placeholder="Masukkan Berat (GRAM)">
</div>
</div>
</div>
</div>
<div class="col-md-3">
<button class="btn btn-md btn-primary btn-block btn-check">CEK ONGKOS KIRIM</button>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<div class="card d-none ongkir">
<div class="card-body">
<ul class="list-group" id="ongkir"></ul>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script>
$(document).ready(function(){
//active select2
$(".provinsi-asal , .kota-asal, .provinsi-tujuan, .kota-tujuan").select2({
theme:'bootstrap4',width:'style',
});
//ajax select kota asal
$('select[name="province_origin"]').on('change', function () {
let provindeId = $(this).val();
if (provindeId) {
jQuery.ajax({
url: '/cities/'+provindeId,
type: "GET",
dataType: "json",
success: function (response) {
$('select[name="city_origin"]').empty();
$('select[name="city_origin"]').append('<option value="">-- pilih kota asal --</option>');
$.each(response, function (key, value) {
$('select[name="city_origin"]').append('<option value="' + key + '">' + value + '</option>');
});
},
});
} else {
$('select[name="city_origin"]').append('<option value="">-- pilih kota asal --</option>');
}
});
//ajax select kota tujuan
$('select[name="province_destination"]').on('change', function () {
let provindeId = $(this).val();
if (provindeId) {
jQuery.ajax({
url: '/cities/'+provindeId,
type: "GET",
dataType: "json",
success: function (response) {
$('select[name="city_destination"]').empty();
$('select[name="city_destination"]').append('<option value="">-- pilih kota tujuan --</option>');
$.each(response, function (key, value) {
$('select[name="city_destination"]').append('<option value="' + key + '">' + value + '</option>');
});
},
});
} else {
$('select[name="city_destination"]').append('<option value="">-- pilih kota tujuan --</option>');
}
});
//ajax check ongkir
let isProcessing = false;
$('.btn-check').click(function (e) {
e.preventDefault();
let token = $("meta[name='csrf-token']").attr("content");
let city_origin = $('select[name=city_origin]').val();
let city_destination = $('select[name=city_destination]').val();
let courier = $('select[name=courier]').val();
let weight = $('#weight').val();
if(isProcessing){
return;
}
isProcessing = true;
jQuery.ajax({
url: "/ongkir",
data: {
_token: token,
city_origin: city_origin,
city_destination: city_destination,
courier: courier,
weight: weight,
},
dataType: "JSON",
type: "POST",
success: function (response) {
isProcessing = false;
if (response) {
$('#ongkir').empty();
$('.ongkir').addClass('d-block');
$.each(response[0]['costs'], function (key, value) {
$('#ongkir').append('<li class="list-group-item">'+response[0].code.toUpperCase()+' : <strong>'+value.service+'</strong> - Rp. '+value.cost[0].value+' ('+value.cost[0].etd+' hari)</li>')
});
}
}
});
});
});
</script>
</body>
</html>
Langkah 3 - Menambahkan Route
Selanjutnya kita akan menambah sebuah route baru untuk beberapa function yang sudah kita buat tadi, silahkan buka file routes/web.php dan tambahkan kode dibawah ini :
Route::get('/ongkir', 'CheckOngkirController@index');
Route::post('/ongkir', 'CheckOngkirController@check_ongkir');
Route::get('/cities/{province_id}', 'CheckOngkirController@getCities');
Langkah 4 - Uji Coba Aplikasi
Setelah semuanya selesai, sekarang kita bisa menguji aplikasi kita, silahkan teman-teman jalankan perintah di bawah ini :
php artisan serve
Dan silahkan teman-teman bisa membuka aplikasinya dengan mengetikkan http://localhost:8000/ongkir, jika berhasil kurang lebih tampilannya seperti berikut ini :
Dan silahkan teman-teman mencobanya, disini saya sudah mencobanya dan kurang lebih hasilnya speerti berikut ini :
Sampai disni pembahasan tentang Integrasi Laravel & RajaOngkir Menggunakan AJAX, jika teman-teman masih ada yang bingung atau mengalami error, silahkan bisa bertanya melalui kolom komentar dibawah.
Terima Kasih