Membuat Aplikasi Cek Ongkir Dengan Ajax dan Php

Share:
Membuat Aplikasi Cek Ongkir Dengan Ajax dan Php
Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini, kita akan belajar cara membuat aplikasi pencarian ongkos kirim dengan menggunakan API rajaongkir. Caranya cepat, mudah dan menyenangkan. Ayo ikuti pembahasannya berikut ini.



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 Rajaongkir
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.
    
<?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.

Aplikasi Cek Ongkir
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.

16 comments:

  1. Hallo pak...ijin bertanya,bagaimana cara memasukkan hasil pilihan ongkir ke database
    terimakasih

    ReplyDelete
    Replies
    1. 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.

      Di 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.

      Delete
  2. ijin tanya mas kenapa isi dari kota asal dan tujuan kosong ya ?? alhasil gabisa input.

    ReplyDelete
    Replies
    1. masnya bisa cek errornya di console log. klik kanan -> inspect element -> pilih tab console log. Nanti keliatan errornya apa, tanya lagi ke saya nanti

      Delete
    2. DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND

      Uncaught 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

      Delete
    3. sahretech lokasinya dimana console.lognya???

      Delete
    4. klik kanan -> inspect element -> pilih tab console(tab ini ada di bagian atas). klo tulisan warna merah, itu errornya

      Delete
  3. ini apa ya extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js?

    ReplyDelete
  4. api nya sudah gak valid mas, ada alternatif lain gak ya

    ReplyDelete
    Replies
    1. masih bisa mas, pake api key yang valid untuk mengakses api. di situs raja ongkir sudah dijkelaskan. terima kasih :)

      Delete
  5. ini kok loading terus yak sudah mengikuti script dari atas mohon solusi

    ReplyDelete
  6. Tutorial nya berhasil gan, tapi kalo pakai link dan api raja ongkir pro jadi tidak berfungsi gan. apa yang perlu diubah atau ditabahkan ya ?

    ReplyDelete
    Replies
    1. Kalo untuk yg pro saya belum pernah nyoba gan. Emang errornya apa?

      Delete
  7. kak ini kenapa loading terus ya?

    ReplyDelete
    Replies
    1. tekan ctrl + shift + i, pada tab console liat yg warna merah itu tandanya error. copy dan paste disini apa masalahnya

      Delete

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik

Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi