TUTORIAL

PHP

Tutorial Membuat Cek Ongkos Kirim Memanfaatkan API Raja Ongkir Menggunakan PHP Native, Bootstrap, Select2, JQuery, Datatables dan AJAX

11-08-2020 23:03:05 BY Alfikri Read 4463x 17 min read

Halo Klinik Coders...

Ditutorial ini kita akan mempelajari cara membuat cek ongkos kirim memanfaatkan API Raja Ongkir menggunakan PHP Native, Bootstrap, Select2, JQuery, Datatables dan AJAX.

Tahap#1 - Pendahuluan

Apa itu Raja Ongkir ?. RajaOngkir merupakan sebuah situs dan web service (API) yang menyediakan informasi ongkos kirim dari berbagai kurir di Indonesia seperti POS Indonesia, JNE, TIKI, PCP, ESL, dan RPX.  Keunikan dari sistem RajaOngkir adalah data yang terpadu. Anda cukup sekali saja menginputkan nama kota asal, kota tujuan, dan berat, sistem RajaOngkir otomatis melakukan pengecekan ke semua kurir yang didukung. RajaOngkir menghemat waktu dan tenaga Anda! (Sumber : Raja Ongkir).

Tahap#2 - Persiapan

Sebelum kita memanfaat Web Services Raja Ongkir, kita diwajibkan untuk mendaftar akun di https://rajaongkir.com agar kita mendapatkan api key. Berikut gambar halaman pendaftaran Raja Ongkir :


Setelah selesai melakukan proses daftar anda akan diminta untuk aktivasi via email. Setelah berhasil anda bisa melakukan login di Raja Ongkir. Selanjutnya ada bisa masuk ke halaman panel untuk mendapatkan API keynya. Bisa anda lihat seperti gambar berikut ini :



Untuk Raja Ongkir memiliki 3 Tipe Akun yaitu :

Disini kita hanya menggunakan Akun starter untuk pembelajaran.

Tahap#3 - Struktur Aplikasi

Untuk struktur aplikasi kita hanya membuat 3 buah file yaitu :

  1. function.php
    Didalam file ini terdapat class yang kita berinama dengan "rajaongkir". Class ini terdapat 3 fungsi yaitu
    - array_sort_by_column (Berfungsi untuk mengurutkan nilai dari array [ Disini saya contohkan untuk mengurutkan berdasarkan tarif ongkir ])
    - get_city (Berfungsi untuk mengambil data kota )
    - get_cost (Berfungsi untuk megambil data biaya ongkir berdasarkan kota asal, kota tujuan, berat dan kurir)
  2. cost.php
    File ini berfungsi untuk memproses data ongkir dan ditampilkan kedalam Library Datatables.
  3. index.php
    File ini berfungsi untuk menampilkan Form cek ongkir berdasarkan Kota Asal, Kota Tujuan dan Berat (Gram).

Tahap#4 - Membuat file function.php

Ditahap ini kita akan membuat class rajaongkir. Disini terdapat 3 Fungsi yaitu :


/**
 * Author           : Alfikri
 * Created By       : Alfikri
 * E-Mail Primary   : alfikri.name@gmail.com
 * E-Mail Secondary : klinik.code@gmail.com
 * Blog             : https://klinikcode.com
 */

// Class rajaongkir
class rajaongkir
{

  private $key      = '33b4623ebaec869103303a234d1a6ddb'// API Key dari rajaongkir
  private $city_url = 'https://api.rajaongkir.com/starter/city'// Url untuk mengambil data kota
  private $cost_url = 'https://api.rajaongkir.com/starter/cost'// Url untuk mengambil biaya ongkir

  // Untuk sorting array
  function array_sort_by_column(&$arr, $col, $dir = SORT_DESC)
  {
    $sort_col = array();
    foreach ($arr as $key => $row) {
      $sort_col[$key] = $row[$col];
    }

    array_multisort($sort_col$dir$arr);
  }

  // Untuk mengambil data kota
  function get_city()
  {
    $curl = curl_init();

    curl_setopt_array($curlarray(
      CURLOPT_URL => $this->city_url,
      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: {$this->key}"
      ),
    ));

    $response = curl_exec($curl);
    $err = curl_error($curl);

    curl_close($curl);

    if ($err) {
      return "cURL Error #:" . $err;
    } else {
      return $response;
    }
  }

  // Untuk mengambil data biaya ongkir berdasarkan kota asal, kota tujuan, berat dan kurir
  function get_cost($id_kota_asal, $id_kota_tujuan, $berat, $courir)
  {
    $curl = curl_init();

    curl_setopt_array($curlarray(
      CURLOPT_URL => $this->cost_url,
      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={$id_kota_asal}&destination={$id_kota_tujuan}&weight={$berat}&courier=$courir",
      CURLOPT_HTTPHEADER => array(
        "content-type: application/x-www-form-urlencoded",
        "key: {$this->key}"
      ),
    ));

    $response = curl_exec($curl);
    $err = curl_error($curl);

    curl_close($curl);

    if ($err) {
      return "cURL Error #:" . $err;
    } else {
      return $response;
    }
  }
}


Tahap#5 - Membuat file cost.php

Ditahap ini kita akan membuat file cost.php yang berfungsi untuk memproses biaya kirim dan kita tampilkan dalam bentuk JSON ke Datatables.


/**
 * Author           : Alfikri
 * Created By       : Alfikri
 * E-Mail Primary   : alfikri.name@gmail.com
 * E-Mail Secondary : klinik.code@gmail.com
 * Blog             : https://klinikcode.com
 */

// Memanggil function
require_once 'function.php';

$data   = new rajaongkir(); // Inisiasi objek dari class rajaongkir. 

$kota_asal    = isset($_POST['kota_asal']) ? $_POST['kota_asal'] : ''// kota asal
$kota_tujuan  = isset($_POST['kota_tujuan']) ? $_POST['kota_tujuan'] : ''// kota tujuan
$berat        = isset($_POST['berat']) ? $_POST['berat'] : ''// berat

$list_courir = ['jne''pos''tiki']; // Untuk tipe akun starter ada 3 pilhan kurir

$cost_per_courir = [];

// Perulangan untuk memanggil fungsi get_cost berdasarkan list kurir
for ($i = 0$i < 3$i++) :
  $result = json_decode($data->get_cost($kota_asal$kota_tujuan$berat$list_courir[$i]), true);
  $cost_per_courir[] = $result['rajaongkir']['results'][0];
endfor;

$data->array_sort_by_column($cost_per_courir'costs'); // Sort berdasarkan costs
$row  = [];
$no = 0;

foreach ($cost_per_courir as $key => $value) :
  $no++;
  $row[$key][]  = $no;
  $row[$key][]  = $value['name'];
  $row[$key][]  = $value['costs'][0]['description'];
  $row[$key][]  = 'Rp.' . number_format($value['costs'][0]['cost'][0]['value']);
endforeach;

// Tampilkan ke datatables
$output = [
  "draw"              => isset($_POST['draw']),
  "recordsTotal"      => count($cost_per_courir),
  "recordsFiltered"   => count($cost_per_courir),
  "data"              => $row,
];

echo json_encode($output); // Konversi array ke json


Tahap#6 - Membuat file index.php

Pada tahap ini kita akan membuat desain form untuk proses data ongkir dan kita tampilkan ke dalam datatables. Disini kita menggunakan JQuery, Bootstrap 4.5.2, Select2, Select2 Theme Bootstrap dan Datatables.

Untuk proses disini saya menggunakan ajax. Untuk script lengkapnya bisa dibuat seperti ini :


/**
 * Author           : Alfikri
 * Created By       : Alfikri
 * E-Mail Primary   : alfikri.name@gmail.com
 * E-Mail Secondary : klinik.code@gmail.com
 * Blog             : https://klinikcode.com
 */

// Memanggil function
require_once 'function.php';

$data = new rajaongkir(); // Inisiasi objek dari class rajaongkir. 

$kota = $data->get_city(); // Ambil data kota

$kota_array   = json_decode($kotatrue);

// Cek api berdasarkan status jika akses api kita sudah dilimit perharinya
if ($kota_array['rajaongkir']['status']['code'] == 200) :
  $kota_result  = $kota_array['rajaongkir']['results'];
else :
  die('This key has reached the daily limit.');
endif;
?>

doctype html>
<html lang="en">

<head>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  <title>Cek Ongkos Kirimtitle>
  
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://select2.github.io/select2-bootstrap-theme/css/select2-bootstrap.css">
  
  <link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
head>

<body>
  <div class="container">
    <div class="row mt-3">
      <div class="col-md-4">
        <div class="card">
          <div class="card-header">
            Cek Ongkos Kirim
          div>
          <div class="card-body">
            <form id="form-cek-ongkir">
              <div class="form-group">
                <label for="kota_asal">Kota Asallabel>
                <select name="kota_asal" id="kota_asal" class="form-control" required="true">
                  <option value="">option>
                   foreach ($kota_result as $key => $value) : ?>
                    <option value=" $value['city_id']; ?>"> $value['city_name']; ?>option>
                   endforeach?>
                select>
              div>
              <div class="form-group">
                <label for="kota_tujuan">Kota Tujuanlabel>
                <select name="kota_tujuan" id="kota_tujuan" class="form-control" required="true">
                  <option value="">option>
                   foreach ($kota_result as $key => $value) : ?>
                    <option value=" $value['city_id']; ?>"> $value['city_name']; ?>option>
                   endforeach?>
                select>
              div>
              <div class="form-group">
                <label for="berat">Berat Kiriman (Gram)label>
                <input type="number" id="berat" name="berat" class="form-control" min="1" max="30000" required="true">
              div>
              <div class="form-group">
                <button type="submit" id="btn-periksa-ongkir" class="btn btn-primary">Periksa Ongkirbutton>
              div>
            form>
          div>
        div>
      div>
      <div class="col-md-8">
        <div class="card">
          <div class="card-header" id="hasil-pengecekan">
            Hasil Pengecekan
          div>
          <div class="card-body">
            <table id="tabel-hasil-pengecekan" class="display">
              <thead>
                <tr>
                  <th width="1%">Noth>
                  <th>Kurirth>
                  <th>Jenis Layananth>
                  <th>Tarifth>
                tr>
              thead>
              <tbody>
              tbody>
            table>
          div>
        div>
      div>
    div>
  div>

  
  
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous">script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">script>
  
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js">script>
  
  <script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js">script>
  <script>
    // Fungsi untuk mereset form dan select2
    function resetForm(formselect2 = []) {
      $('#' + form)[0].reset();
      if (select2.length > 0) {
        $.each(select2function(keyvalue) {
          $('#' + value).val('').trigger('change');
        });
      }
    }

    // Saat halaman telah diload
    $(document).ready(function() {
      // Select2 untuk kota asal
      $('#kota_asal').select2({
        placeholder: "Pilih Kota Asal",
        theme: "bootstrap"
      });
      // Select2 untuk kota tujuan
      $('#kota_tujuan').select2({
        placeholder: "Pilih Kota Tujuan",
        theme: "bootstrap"
      });
    });

    // Event saat form cek ongkir di submit
    $('#form-cek-ongkir').on('submit'function(e) {
      e.preventDefault();

      $('#btn-periksa-ongkir').prop('disabled'true)
        .text('Loading...');
      let kota_asal = $('#kota_asal').select2('data')[0].text;
      let kota_tujuan = $('#kota_tujuan').select2('data')[0].text;
      let berat = $('#berat').val();

      $('#hasil-pengecekan').html(`Hasil pengecekan ${kota_asal} ke ${kota_tujuan} @${berat} gram`);

      hasil_pengecekan(); // Panggil fungsi hasi pengecekan
    });

    // Fungsi hasil pengecekan untuk menampilkan data ke datatables
    function hasil_pengecekan() {
      $('#tabel-hasil-pengecekan').DataTable({
        processing: true,
        serverSide: true,
        bDestroy: true,
        responsive: true,
        ajax: {
          url: 'cost.php',
          type: "POST",
          data: {
            kota_asal: $('#kota_asal').val(),
            kota_tujuan: $('#kota_tujuan').val(),
            berat: $('#berat').val(),
          },
          complete: function(data) {
            resetForm('form-cek-ongkir', ['kota_asal''kota_tujuan']);

            $('#btn-periksa-ongkir').prop('disabled'false)
              .text('Periksa Ongkir');

          },
        },
        columnDefs: [{
            targets: [0],
            orderable: false,
          },
          {
            width: "1%",
            targets: [0],
          },
          {
            className: "dt-nowrap",
            targets: [12],
          },
          {
            className: "dt-right",
            targets: [-1],
          },
        ],

      });
    }
  script>
body>

html>


Tahap#7 - Eksekusi

Jika tahapan diatas telah dilakukan dengan benar makan akan terlihat hasilnya sebagai berikut :

Tahap#8 - Uji coba dengan Raja Ongkir

Untuk membuktikan apakah aplikasi kita sudah berjalan dengan baik, maka kita perlu mengeceknya melalui Ongkir yang ada pada Raja Ongkir. Untuk hasilnya bisa kita lihat seperti gambar dibawah ini :

Bagi teman-teman yang masih belum paham bisa cek di tutorial video berikut ini 


Demikianlah tutorial ini saya buat, mudah-mudahan bermanfaat bagi teman-teman. Mohon maaf jika ada kekurangan dalam penjelasan kode-kode yang saya buat. Jika ada pertanyaan, kritik dan saran silahkan berkomentar dibawah ini.

Let's Coding...


About author

Alfikri

Saya seorang web developer. Saya sangat suka tantangan untuk mempelejari hal-hal baru dalam dunia pemograman.



Comments

Scroll to Top