Membuat Web Tracking Covid-19 Menggunakan API


Implementasi Sistem 3-Tier
 (Studi kasus Data Covid-19 menggunakan JSON)

Dosen Pengapu Mata Kuliah Pemrograman Basis Data

Eko Win Kenali,S.kom.,M.Cs

A.    RESTful API

RESTful API merupakan implementasi dari API. RESTful itu protokol/aturan untuk melakukan REST. Jadi RESTful itu udah pasti REST, namun REST belum tentu bisa disebut RESTful. Walaupun terlihat sama tetapi mereka berbeda.
API adalah singkatan dari Application Programming Interface. Merupakan suatu “penghubung” yang memungkinkan suatu aplikasi untuk berinteraksi dengan aplikasi lainnya dan berbagi data.
Output dari RESTful ada XML dan JSON.JSON (JavaScript Object Notation), beberapa ciri-ciri JSON.
1.      Mudah di urai, bahkan oleh javascript pada sisi client, hanya object biasa
2.      Data transport lebih kecil
3.      Proses urai lebih cepat.

B.     Arsitektur 3-Tier

Karena arsitektur sebelumnya memiliki cukup banyak kelemahan, maka dikembangkanlah arsitektur three tier ini yang akan membantu mengatasi kelemahan dari arsitektur two-tier. Arsitektur three-tier memiliki 3 lapisan. Kelebihan dari arsitektur ini adalah memiliki skala yang besar, transfer informasi antara web server dan server database optimal, tidak akan menyebabkan lapisan lain terkontaminasi salah jika salah satu lapisan terdapat kesalahan. Dan kekurangannya, arsitektur ini lebih sulit untuk merancang, lebih sulit untuk mengatur dan lebih mahal.

C.     Membuat Web Tracking

1. Pertama kita dapat melihat informasi tentang perkembangan terbaru COVID-19 yang bersumber dari website sumber. Sebagai contoh disini saya menggunakan website API : https://coronavirus-19-api.herokuapp.com/countries dan https://coronavirus-19-api.herokuapp.com/all.

2. Untuk Melakukan Webtracking, Saya menggunakan aplikasi :
    a. Xampp, jika belum dapat mendownload disini.
    b. Sublime Text ,  jika belum dapat mendownload disini.

 3. Kemudian kita akan membuat folder didalam Xampp/htdocs, sebagai contoh saya membuat folder Corona_18753006. Kemudian buat file baru didalam folder tersebut dengan nama index.php.

  
4. Kemudian kita buat tampilan sesuai keinginan kita dengan menggunakan bootstrap agar tampilan lebih menarik dan konfigurasi agar terkoneksi dengan API yang kita gunakan.

<!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">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Pantau Penyebaran COVID-19  </title>
  </head>
  <body>
  <div class="jumbotron jumbotron-fluid bg-secondary text-white">
  <div class="container text-center">
    <p class="lead">
    <h2> WEB PEMANTAUAN VIRUS COVID-19 DI INDONESIA
    <br> SECARA REAL-TIME
    </h2><br>
    <h3> Oleh Ahmad Shobirin </h3>
    </p>
  </div>
</div>
<style type="text/css">
.box{
padding: 30px 40px;
border-radius:10px;
}
</style>



<div class="container">
<div class="row">
<div class="col-md-12 mt-3">
<div class="bg-info box text-white">
<center>
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<img src="img/dunia.png" style="width: 200px ">
</div>
<h2>DUNIA</h2>
<h5 id="data-dunia"> Positif : 12 Orang <br> Meninggal : 20 Orang <br> Sembuh : 3 Orang </h5>
</div>
</div>
</div>
</div>
</center>
<div class="col-md-4 mt-3">
<div class="bg-warning box text-white">
<center>
<div class="row">
<div class="col-md-12">
<h5>Positif</h5>
<h2 id="data-kasus">1234</h2>
<h5>Orang</h5>
</div>
</div>
</div>
</div>
</center>
<div class="col-md-4 mt-3">
<div class="bg-danger box text-white">
<center>
<div class="row">
<div class="col-md-12">
<h5>Meninggal</h5>
<h2 id="data-mati">1235</h2>
<h5>Orang</h5>
</div>
</div>
</div>
</div>
</center>
<div class="col-md-4 mt-3">
<div class="bg-success box text-white">
<center>
<div class="row">
<div class="col-md-12">
<h5>Sembuh</h5>
<h2 id="data-sembuh">1235</h2>
<h5>Orang</h5>
</div>
</div>
</div>
</div>
</center>

<div class="col-md-12 mt-3">
<div class="bg-info box text-white">
<center>
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<img src="img/indonesia.svg" style="width: 150px ">
</div>
<h2>INDONESIA</h2>
<h5 id="data-id"> Positif : 12 Orang <br> Meninggal : 20 Orang <br> Sembuh : 3 Orang </h5>
</div>

</div>
</div>
</div>
</center>

<div class="col-md-4 mt-3">
<div class="bg-warning box text-white">
<center>
<div class="row">
<div class="col-md-12">
<h5>Positif</h5>
<h2 id="data-kasus-id">1234</h2>
<h5>Orang</h5>
</div>
</div>
</div>
</div>
</center>
<div class="col-md-4 mt-3">
<div class="bg-danger box text-white">
<center>
<div class="row">
<div class="col-md-12">
<h5>Meninggal</h5>
<h2 id="data-mati-id">1235</h2>
<h5>Orang</h5>
</div>
</div>
</div>
</div>
</center>
<div class="col-md-4 mt-3">
<div class="bg-success box text-white">
<center>
<div class="row">
<div class="col-md-12">
<h5>Sembuh</h5>
<h2 id="data-sembuh-id">1235</h2>
<h5>Orang</h5>
</div>
</div>
</div>
</div>
</center>
<div class="col-md-4 mt-3">
<div class="bg-warning box text-white">
<center>
<div class="row">
<div class="col-md-12">
<h5>Rawat</h5>
<h2 id="data-rawat-id">1235</h2>
<h5>Orang</h5>
</div>
</div>
</div>
</div>
</center>
<div class="col-md-4 mt-3">
<div class="bg-danger box text-white">
<center>
<div class="row">
<div class="col-md-12">
<h5>Hari ini</h5>
<h2 id="data-hari-id">1235</h2>
<h5>Orang</h5>
</div>
</div>
</div>
</div>
</center>

</div>
<div class="card mt-3">
  <div class="card-header bg-danger text-white">
    <b> Data Kasus Corona Virus di Indonesia Berdasarkan Provinsi</b>
  </div>
  <div class="card-body">
   <table class="table table-bordered">
<thead>
<th>No</th>
<th>Nama Provinsi</th>
<th>Positif</th>
<th>Sembuh</th>
<th>Meninggal</th>
</thead>
<tbody id="table-data"></tbody>
</table>
  </div>
</div>




</div>

<footer class="bg-secondary text-center text-white mt-3 bt-2 pb-2">
Ahmad Shobirin Al-ansyori | Website : 18753006.blogspot.com | Copyright &copy2020
</footer>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 
  </body>
</html> 

5. Berikut konfigurasi untuk menampilkan data di seluruh dunia yang terkoneksi langsung dengan API https://coronavirus-19-api.herokuapp.com/all.
<script>
$(document).ready(function(){

//Fungsi menampilakan & memanggil Data

semuaData();
dataNegara();
dataProvinsi();

//Auto update data
setInterval(function(){
semuaData();
dataNegara();
dataProvinsi();
}, 3000);

function semuaData(){
$.ajax({
url : 'https://coronavirus-19-api.herokuapp.com/all',
success : function(data){
try{
var json = data;
var kasus = data.cases;
var Meninggal = data.deaths;
var Sembuh = data.recovered;

$('#data-kasus').html(kasus);
$('#data-mati').html(Meninggal);
$('#data-sembuh').html(Sembuh);


$('#data-dunia').html(
'Positif : '+kasus+' orang <br> Meninggal : '+Meninggal+' orang <br> Sembuh : '+Sembuh+' orang')

}catch{
alert('Errorr');
}
}

});
}

 6. Berikut konfigurasi untuk menampilkan data di indonesia yang terkoneksi langsung dengan API https://coronavirus-19-api.herokuapp.com/countries.

function dataNegara(){
$.ajax({
url : 'https://coronavirus-19-api.herokuapp.com/countries',
success : function(data){
try{
var json = data;
var html = [];


if(json.length > 0){
var i;
for(i = 0; i < json.length; i++){
var dataNegara = json[i];
var namaNegara = dataNegara.country;

if(namaNegara === 'Indonesia'){
var kasus = dataNegara.cases;
var mati = dataNegara.deaths;
var Sembuh = dataNegara.recovered;
var rawat = dataNegara.active;
var hari = dataNegara.todayCases;


$('#data-kasus-id').html(kasus);
$('#data-mati-id').html(mati);
$('#data-sembuh-id').html(Sembuh);
$('#data-rawat-id').html(rawat);
$('#data-hari-id').html(hari);

$('#data-id').html(
'Positif : '+kasus+' orang <br> Meninggal : '+mati+' orang <br> Sembuh : '+Sembuh+' orang <br> Rawat : '+rawat+' orang <br> Hari ini : '+hari+' orang')
}
}
}


}catch{
alert('Errorr');
}
}

});
}

7. Agar hasil dari koneksi kita terupdate datanya secara otomatis tanpa harus merefresh halaman web yang kita buat. Kita kofigurasi dengan waktu per-3 detik update.

Berikut Scriptnya :
//Auto update data
setInterval(function(){
semuaData();
dataNegara();
dataProvinsi();
}, 3000);

8. Untuk menampilkan data berdasarkan provinsi di Indonesia, disini saya menggunakan function tambahan yang ditampung dalam file baru dengan nama curl.php.

Berikut Scriptnya :
<?php

//buat fungsi http_request
function http_request($url){


//persiapkan CURL
$ch = curl_init();
//Set URL
curl_setopt($ch, CURLOPT_URL,$url);

//Aktifkan fungsi transfer nilai yang berupa string
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

//Setting agar dapat dijalankan pada localhost
//mematikan ssl verify(https)
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);


//tampung hasil kedalam variabel $output
$output = curl_exec($ch);

//tutup CURL
curl_close($ch);

//menampilkan hasil curl
return $output;

}
//panggil fungsi htttp_request(url / link api)
$data = http_request("https://api.kawalcorona.com/indonesia/provinsi/");

//ubah format json
$data = json_decode($data, TRUE);

//echo "</pre>";
// print_r($data);
//echo "</pre>";

//tampung jumlah data
$jumlah = count($data);

$nomor = 1;

for($i = 0; $i < $jumlah; $i++){

$hasil = $data[$i]['attributes'];
?>

<tr>
<td><?=$nomor++?></td>
<td><?=$hasil['Provinsi']?></td>
<td><?=$hasil['Kasus_Posi']?></td>
<td><?=$hasil['Kasus_Semb']?></td>
<td><?=$hasil['Kasus_Meni']?></td>

</tr>
<?php

}

?>

9. Berikut Konfigurasi Untuk menampilkan data di Indonesia berdasarkan provinsi yang terkoneksi langsung dengan API https://coronavirus-19-api.herokuapp.com/countries.
function dataProvinsi(){
$.ajax({
url : 'curl.php',
type : 'GET' ,
success : function(data){
try{
$('#table-data').html(data);

}catch{
alert('Errorr');
}
}

});
}
});
</script>

10. Untuk menjalankan file tersebut kita harus menjalankan Xampp terlebih dahulu.


11. Kemudian kita buka bowser kita, lalu kita jalankan file index.php dengan mengetikkan pada url : localhost:81/Corona_18753006/. (Disini portnya saya rubah menjadi 81)

12. Tampilan data COVID-19 di seluruh dunia menggunakan API : https://coronavirus-19-api.herokuapp.com/all.

13. Tampilan data COVID-19 di seluruh Indonesia berdasarkan provinsi menggunakan API : https://coronavirus-19-api.herokuapp.com/countries.


Source Code : https://github.com/ramapuja052/pbd-api-covid-19.git
Hasil Implementasi Aplikasi Web : http://18753006.rf.gd/?i=1 (Mohon Tunggu 15-20 detik untuk hasil Pemantauan Provinsi)

Komentar

Posting Komentar