API Cek Ongkir
Pernahkah kalian berbelanja di shopee atau tokopedia?, jika iya, kalian pasti tau total ongkir yang kalian harus bayar dari tempat si penjual ke tempat kalian saat melakuan checkout, dan harga ongkir tersebut selalu dinamis mengikuti panjang jarak, jenis kurir, dan berat paket. Dan yang pastinya menjadi pertanyaan kita adalah darimana e-commerce tersebut bisa mendapatkan harga pasti?.Jawabnya adalah dengan menggunakan API dari setiap web kurir. Hal ini dilakukan agar e-commerce dapat selalu mengikuti kebijakan harga setiap kurir tanpa harus mengganti kodingannya secara manual. Cara ini tentunya lebih efektif dan efisien. Pada kesempatan kali ini kita akan membuat aplikasi cek ongkos kirim sederhana dengan memanfaatkan API rajaongkir.
Cara Membuat Aplikasi Cek Ongkos Kirim
Kita akan membuat aplikasi cek ongkir atau cek ongkos kirim dengan tampilan sederhana. Terdapat form disebelah kiri dan tabel biaya atau ongkir di sebelah kanan. Disini kita juga akan menggunakan metode ajax dengan jquery sehingga pengambilan dan pengiriman data jadi lebih cepat tanpa proses reload. Untuk melihat hasilnya silahkan scroll ke bagian paling bawah.1. Kunjugi web https://rajaongkir.com/ lalu buat akun seperti biasa. Lalu buka profil kalian masing-masing dan copy api key yang diberikan. Api key ini berguna sebagai kunci untuk mengakses data jadi harus disimpan.
|
| API Key Rajaongkir |
2. Selanjutnya buatlah sebuah folder baru di dalam htdocs dengan nama
apk_cek_ongkir atau dengan nama bebas. Lalu buatlah file index.html di
dalamnya dan copy script di bawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="Description" content="Enter your description here" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<link
href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"
rel="stylesheet"
/>
<style type="text/css">
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
.loading {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font: 14px arial;
}
</style>
<title>Aplikasi Ongkos Kirim</title>
</head>
<body>
<!-- SPINNER LOADER AKAN DITAMPILKAN SEBELUM DATA KOTA SELESAI DILOAD -->
<div class="preloader">
<div class="loading">
<div class="spinner-border" role="status">
</div>
<br><br>
<span>Loading...</span>
</div>
</div>
<div class="container">
<div class="row mt-5">
<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h3>Cek Ongkir</h3>
</div>
<div class="card-body">
<form id="form">
<div class="form-group">
<label for="">Kota Asal</label>
<select class="form-control select2" id="kota_asal" required></select>
</div>
<div class="form-group">
<label for="">Kota Tujuan</label>
<select class="form-control select2" id="kota_tujuan" required></select>
</div>
<div class="form-group">
<label for="">Berat(gram)</label>
<input type="number" class="form-control" id="berat" required/>
</div>
<div class="form-group">
<label for="">Kurir</label>
<select class="form-control" id="kurir" required>
<option value="jne">JNE</option>
<option value="tiki">TIKI</option>
<option value="pos">POS INDONESIA</option>
</select>
</div>
<button class="btn btn-sm btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="card">
<div class="card-header">
<h3>Biaya Ongkir</h3>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>No</th>
<th>Layanan</th>
<th>Deskripsi</th>
<th>Harga</th>
<th>Estimasi(Hari)</th>
</tr>
</thead>
<!-- DATA ONGKIR AKAN DITAMPILKAN DISINI -->
<tbody id="data_table"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function () {
$(".select2").select2({
placeholder: "Pilih kota/kabupaten",
language: "id",
});
//MENGAMBIL DATA KOTA/KABUPATEN DENGAN AJAX
$.ajax({
type: "GET",
url: "kota.php",
success: function (res) {
$(".preloader").hide()
var data_option = "";
//MENGAMBIL STRING JSON DAN MENGKONVERSI KE JAVASCRIPT OBJECT
var data = JSON.parse(res);
//MAPPING
data.rajaongkir.results.map((value) => {
//MASUKAN DATA KE DALAM variable data_option
data_option += `<option value="${value.city_id}">${value.type} ${value.city_name}</option>`;
});
//TAMPILKAN DATA DI DALAM DROPDOWN SELECT
$("#kota_asal").html(data_option);
$("#kota_tujuan").html(data_option);
},
});
});
//KETIKA FORM DISUBMIT
form.onsubmit = (e) => {
//CEGAH HALAMAN MELAKUKAN RELOAD
e.preventDefault();
//TAMPILKAN LOADER
$(".preloader").show()
//KIRIM DATA DENGAN AJAX
$.ajax({
type: "POST",
url: "cek_ongkir.php",
data: {
//MENGAMBIL DATA DARI FORM
kota_asal: $("#kota_asal").val(),
kota_tujuan: $("#kota_tujuan").val(),
berat: $("#berat").val(),
kurir: $("#kurir").val(),
},
//PROMISE IF SUCCESS
success: function (res) {
//HILANGKAN LOADER
$(".preloader").hide()
var data_table = "";
////MENGAMBIL STRING JSON DAN MENGKONVERSI KE JAVASCRIPT OBJECT
var data = JSON.parse(res);
//MAPPING
data.rajaongkir.results.map((value) => [
value.costs.map((value2, index) => {
//MASUKAN DATA KE DALAM VAR data_table
data_table += `<tr>
<td>${index + 1}</td>
<td>${value2.service}</td>
<td>${value2.description}</td>
<td>Rp. ${Intl.NumberFormat().format(value2.cost[0]["value"])}</td>
<td>${value2.cost[0]["etd"]}</td>
</tr>`;
}),
]);
//TAMPILKAN DATA PADA TABEL
$("#data_table").html(data_table);
},
});
};
</script>
</body>
</html>
3. Lalu buatlah sebuah file baru dengan nama kota.php. Lalu ikuti
scriptnya seperti di bawah ini. Script di bawah ini berfungsi untuk mengambil
seluruh data kota se-Indonesia. Jika dijalankan maka akan menampilkan data
json kota-kota se-Indonesia.
<?php
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "https://api.rajaongkir.com/starter/city",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => array(
"key: API KEY"
),
));
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}
4. Terakhir, buatlah sebuah file baru dengan nama cek_ongkir.php. Lalu
ikuti scriptnya seperti di bawah ini. Script ini berfungsi untuk mengambil
data cost/biaya dengan menggunakan paramter: kota asal, kota tujuan, berat,
dan jenis kurir.
5. Semua step sudah kita lalui, penjelasan sudah saya tulis di masing-masing script. Untuk sisa yang tidak kalian mengerti bisa tanya langsung di kolom komentar atau di fanspage sahretec. Sekarang saatnya kita melakukan uji coba. Jika berhasil maka tampilannya akan tampak seperti di bawah ini.
<?php
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "https://api.rajaongkir.com/starter/cost",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS => "origin=".$_POST['kota_asal']."&destination=".$_POST['kota_tujuan']."&weight=".$_POST['berat']."&courier=".$_POST['kurir']."",
CURLOPT_HTTPHEADER => array(
"content-type: application/x-www-form-urlencoded",
"key: API KEY"
),
));
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}
5. Semua step sudah kita lalui, penjelasan sudah saya tulis di masing-masing script. Untuk sisa yang tidak kalian mengerti bisa tanya langsung di kolom komentar atau di fanspage sahretec. Sekarang saatnya kita melakukan uji coba. Jika berhasil maka tampilannya akan tampak seperti di bawah ini.
|
| Hasil Akhir |
Ok, sekarang kalian sudah bisa membuat aplikasi cek ongkir sederhana. Sisanya bisa kalian improvisasi secara mandiri dengan menambahkan berbagai macam atribut dan fitur. Saya juga menulis artikel pemrograman lainnya tentang flutter dan mobile app, silahkan ikuti link di bawah ini.
| Baca Artikel Lain ✨ |
| 📰 1. Cara Paling Mudah Membuat Login Google di Flutter read more |
| 📰 2. CRUD Flutter + PHP + MySQL Part 2, Membuat Mobile App read more |
|
📰 3. Membuat Aplikasi CRUD dengan Flutter dan SQFlite read more |
Sekian artikel kali ini tentang cara membuat aplikasi cek ongkir atau ongkos kirim dengan ajax dan php. Semoga bermanfaat, jika ada kesulitan silahkan tanya di kolom komentar atau tanya langsung di fanspage sahretech. Sekian dan terima kasih.
Hallo pak...ijin bertanya,bagaimana cara memasukkan hasil pilihan ongkir ke database
ReplyDeleteterimakasih
sebenarnya mudah saja klo masnya mengerti konsep CRUD ke dalam database dengan menggunakan ajax. Pertama ambil data hasil pencarian pastinya menggunakan javascript, lalu lakukan penyimpanan data menggunakan teknik Ajax atau sebelum disimpan diolah terlebih dahulu.
DeleteDi blog ini saya sudah menulis beberapa artikel tentang cara CRUD ke dalam database menggunakan teknik Ajax: https://www.sahretech.com/2020/12/input-dan-menampilkan-datatanpa-reload.html
Untuk menuliskan cara memasukan hasil pilihan ongkir disini tidak memungkinkan, karena akan terlalu panjang.
ijin tanya mas kenapa isi dari kota asal dan tujuan kosong ya ?? alhasil gabisa input.
ReplyDeletemasnya bisa cek errornya di console log. klik kanan -> inspect element -> pilih tab console log. Nanti keliatan errornya apa, tanya lagi ke saya nanti
DeleteDevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND
DeleteUncaught SyntaxError: Unexpected token c in JSON at position 1
at JSON.parse ()
at Object.success ((index):132:37)
at fire (jquery.js:1037:30)
at Object.fireWith [as resolveWith] (jquery.js:1148:7)
at done (jquery.js:8074:14)
at XMLHttpRequest.callback (jquery.js:8598:8)
ini log error nya mas
sahretech lokasinya dimana console.lognya???
Deleteklik kanan -> inspect element -> pilih tab console(tab ini ada di bagian atas). klo tulisan warna merah, itu errornya
Deleteini apa ya extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js?
ReplyDeleteapi nya sudah gak valid mas, ada alternatif lain gak ya
ReplyDeletemasih bisa mas, pake api key yang valid untuk mengakses api. di situs raja ongkir sudah dijkelaskan. terima kasih :)
Deleteini kok loading terus yak sudah mengikuti script dari atas mohon solusi
ReplyDeletesamaa kenapa ya kak?
DeleteTutorial nya berhasil gan, tapi kalo pakai link dan api raja ongkir pro jadi tidak berfungsi gan. apa yang perlu diubah atau ditabahkan ya ?
ReplyDeleteKalo untuk yg pro saya belum pernah nyoba gan. Emang errornya apa?
Deletekak ini kenapa loading terus ya?
ReplyDeletetekan ctrl + shift + i, pada tab console liat yg warna merah itu tandanya error. copy dan paste disini apa masalahnya
Delete