Featured Post

live streaming
  1. Beranda
    2. »
  2. AJAX
    3. »
  3. Mengambil Tarif Pengiriman TIKI Dengan PHP

Mengambil Tarif Pengiriman TIKI Dengan PHP

Mengambil Tarif Pengiriman TIKI Dengan PHP

Kali ini saya akan share tutorial cara mengambil data tarif pengiriman dari TIKI dengan PHP, disini saya menggunakan autocomplate plugin dari jquery-ui untuk mengambil data nama kabkota ketika anda mengetikan di textbox, kemudian karena disini saya menggunakan proses dengan menggunakan AJAX maka selain menggunakan plugin dari jquery-ui saya juga menggunakan plugin jquery, anda bisa mendownload nya disini untuk plugin jquery, dan klik disini untuk plugin jquery-ui, atau bisa juga langsung mengarahkan link target ke plugin, seperti ini 
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
oh ya saya juga menggunakan class dari simple html dom anda bisa mendownloadnya disini, jika anda ingin mempelajari dokumennya silahkan klik disini, ok langsung ke pembahasan
pertama buatlah projek dengan nama terserah anda, kemudian salin kode di bawah ini dan simpan file dengan nama index.php 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style type="text/css">
 .pesan { display: none; }
</style>
<title>Mengambil Tarif Pengiriman TIKI Dengan PHP</title>
</head>
<body>
<h3>MENGAMBIL DATA TARIF PENGIRIMAN TIKI</h3>
<hr />
<form method="post" class="check-tarif" action="harga.php">
<table border="1">
 <tr>
  <td width="180">Dari</td>
  <td>
   <input type="text" id="f" name="f" label-search=".pesan-f" data-kode="#fc" onkeyup="wilayah(this)"><input type="hidden" id="fc" name="fc">
   <span class="pesan pesan-f">mencari data</span>
  </td>
 </tr>
 <tr>
  <td>Tujuan</td>
  <td>
   <input type="text" id="t" name="t" label-search=".pesan-t" data-kode="#tc" onkeyup="wilayah(this)"><input type="hidden" id="tc" name="tc">
   <span class="pesan pesan-t">mencari data</span>
  </td>
 </tr>
 <tr>
  <td>Berat</td>
  <td><input type="text" id="w" name="w" onkeyup="angka(this)"></td>
 </tr>
 <tr>
  <td>Panjang</td>
  <td><input type="text" id="lt" name="lt" onkeyup="angka(this)"></td>
 </tr>
 <tr>
  <td>Lebar</td>
  <td><input type="text" id="wt" name="wt" onkeyup="angka(this)"></td>
 </tr>
 <tr>
  <td>Tinggi</td>
  <td><input type="text" id="ht" name="ht" onkeyup="angka(this)"></td>
 </tr>
 <tr><td colspan="2"><button id="proses">PROSES</button></td></tr>
</table>
</form>
<div class="reuslt"></div>
<script type="text/javascript">
 window.onload = function() {
  $('.check-tarif').on('submit', function(e) {
   $.ajax({
    'type': 'POST',
    'dataType': 'JSON',
    'url': 'harga.php',
    'data': $(this).serialize(),
    'beforeSend': function() {
     $('#proses').attr('disabled','disabled');
    },
    'success': function(response) {
     $('#proses').removeAttr('disabled');

     draw_data(response);
    }
   });

   e.preventDefault();
  });
 }

 // draw data
 function draw_data(response) {
  var html = '<table border="1">';
  html += '<tr><td colspan="3" align="center"><strong>'+ response.dari +' > '+ response.tujuan +'<br />'+ response.berat +' KG</strong></td></tr>';

  html += '<tr><td width="180">Service</td><td width="180">Harga</td><td width="180">Info</td></tr>';
  for(var i=0; i<response.data.length; i++) {
   html += '<tr><td>'+ response.data[i].service +'</td><td align="right">'+ response.data[i].harga +'</td><td>'+ response.data[i].info +'</td></tr>';
  }

  html += '</table>';
  $('.reuslt').html(html);
 }

 // autocomplate mencari daerah
 function wilayah(el) {
  var el1 = el.getAttribute('data-kode'),
  el2 = el.getAttribute('label-search'),
  kode = $(el1),
  pesan = $(el2);

  // set loading data
  if (el.value.length > 3) {
   loading(pesan, true);
  } else {
   loading(pesan, false);
  }

  $(el).autocomplete({
   'minLength': 4,
   'autoFill': false,
   'source': 'wilayah.php',
   'select': function(s, r) {
    loading(pesan, false);

    el.value = r.item.daerah;
    kode.val(r.item.tariff_code);

    return false;
   }
  }).data('ui-autocomplete')._renderItem = function(ul, item) {
   loading(pesan, false);

   return $('<li>').append(item.daerah).appendTo(ul);
  };
 }

 // wajib angka
 function angka(el) {
  var value = el.value;

  if (isNaN(value)) {
   el.value = 1;
  }
 }

 // loading
 function loading(e, s) {
  if (s == true) {
   e.show();
  } else {
   e.hide();
  }
 }
</script>
</body>
</html>
kemudian kita buat proses untuk mengambil nama kabkota ketika di ketikan di textbox Kota Asal, dan Kota Tujuan.
salin kode berikut dan simpan file dengan nama wilayah.php 

<?php
 // mengambil GET wilayah
 $q = $_GET['term'];

 // set url ke website tiki
 $url = 'https://tiki.id/etc/CariDaerah/'.$q;

 // mengambil response dari wilayah yang di kerim ke tiki
 $json = file_get_contents($url);

 // set response json
 header('Content-Type: application/json');
 echo $json;
dan yang terakhir kita buat proses untuk mengambil jenis data pengiriman, silahkan salin kode berikut dan simpan file dengan nama harga.php 

<?php
 // load library
 require_once __DIR__.'/simple_html_dom.php';

 // get paramters
 $dari = $_POST['f'];
 $kode_dari = $_POST['fc'];

 $tujuan = $_POST['t'];
 $kode_tujuan = $_POST['tc'];

 $berat = (int) $_POST['w'];
 $panjang = (int) $_POST['lt'];
 $lebar = (int) $_POST['wt'];
 $tinggi = (int) $_POST['ht'];

 // set response
 $response = array(
  'dari'=>$dari,
  'kode_dari'=>$kode_dari,
  'tujuan'=>$tujuan,
  'kode_tujuan'=>$kode_tujuan,
  'berat'=>$berat,
  'panjang'=>$panjang,
  'lebar'=>$lebar,
  'tinggi'=>$tinggi,
  'data'=>array()
 );

 // init
 $url = 'https://tiki.id/tarif?f='.$dari.'&t='.$tujuan.'&fc='.$kode_dari.'&tc='.$kode_tujuan.'&w='.$berat.'<='.$panjang.'&wt='.$lebar.'&ht='.$tinggi;
 
 $html = new simple_html_dom();
 $html->load_file($url);

 // class row text-center ada 2
 // 1. info dari dan tujuan
 // 2. info harga
 $row = $html->find('div[class="row text-center"]', 1);

 // class col-xs-12;
 $div = $row->find('div');
 foreach ($div as $dv) {
  // get data services
  @$datas = $dv->find('div strong h2', 0)->innertext;
  $datas = explode('  $service = $datas[0];


  // get data harga
  @$harga = $dv->find('div strong h2 span', 0)->innertext;

  // get info
  @$info = $dv->find('div p small', 0)->innertext;

  if (!empty($service)) {
   array_push($response['data'], array(
    'service'=>$service,
    'harga'=>$harga,
    'info'=>$info
   ));
  }
 }

 // set response json
 header('Content-Type: application/json');
 echo json_encode($response);
Ok. sampai di sini dulu tutorial kali ini, selamat mencoba dan semoga bisa bermanfaat.
Share Share Share Share

KLIK
DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://apaitu10.blogspot.com/. Terima kasih.
Postingan Lebih Baru Postingan Lebih Baru Postingan Lama Postingan Lama

Postingan lainnya

Komentar

Posting Komentar