Membuat Aplikasi Pemantauan Kasus Virus Corona 19
Langkah - Langkah Membuat Aplikasi Pemantauan
Penyebaran Covid - 19 di Indonesia menggunakan
PHP, API, JSON, dan AJAX.
1. Pertama aktifkan Xampp terlebuh dahulu.
2. Buatlah folder baru dan beri nama corona simpan didalam folder xampp/htdocs.
3. Selanjutnya extract file img yang sudah didownload sebelumnya didalam folder corona. link download file tambahan https://drive.google.com/file/d/1I5EiTU6BwQ3MowxR5qK0IfSrGBb3viDf/view
4. Buka menu browser untuk mendownload bootstrap atau mengcopy scriptnya untuk kebutuhan tampilan aplikasi url https://getbootstrap.com
5. Selanjutnya buka folder corona lalu buatlah file baru dengan nama index.php yang berguna untuk menampilkan data virus covid-19 di Indonesia, tuliskan script dibawah ini.
!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 Virus Covid-19!</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid bg-danger text-white">
<div class="container text-center">
<h1 class="display-4">COVID-19</h1>
<p class="lead">
<h2>
Pantau Penyebaran Virus COVID-19 Di Indonesia
<br> Secara Real-Time
<br> Mari Kita Basmi Corona Virus
</h2>
</p>
</div>
</div>
<style type="text/css">
.box{
padding: 30px 40px;
border-radius: 5px;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="bg-danger box text-white">
<div class="row">
<div class="col-md-6">
<h5>Positif</h5>
<h2 id="data-kasus"> 1234 </h2>
<h5>orang</h5>
</div>
<div class="col-md-3">
<img src="img/sad.svg" style="width: 100px;">
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="bg-warning box text-white">
<div class="row">
<div class="col-md-6">
<h5>Meninggal</h5>
<h2 id="data-mati"> 1234 </h2>
<h5>orang</h5>
</div>
<div class="col-md-3">
<img src="img/cry.svg" style="width: 100px;">
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="bg-success box text-white">
<div class="row">
<div class="col-md-6">
<h5>Sembuh</h5>
<h2 id="data-sembuh"> 1234 </h2>
<h5>orang</h5>
</div>
<div class="col-md-3">
<img src="img/happy.svg" style="width: 100px;">
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="bg-primary box text-white">
<div class="row">
<div class="col-md-6">
<h5>Dirawat</h5>
<h2 id="data-dirawat"> 1234 </h2>
<h5>orang</h5>
</div>
<div class="col-md-3">
<img src="img/heart.svg" style="width: 100px;">
</div>
</div>
</div>
</div>
</div>
<!--Akhir row-->
<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>Meninggal</th>
<th>Sembuh</th>
</thead>
<tbody id="table-data">
</tbody>
</table>
</div>
</div>
</div>
<!--Akhir Container-->
<footer class="bg-danger text-center text-white mt-3 bt-2 pb-2">
Create by. Patria Deny Saputra @mail. patriaeempok@gmail.com
</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>
<script>
$(document).ready(function(){
//panggil fungsi menampilkan data
semuaData();
dataNegara();
dataProvinsi();
//untuk refresh otomatis
setInterval(function(){
semuaData();
dataNegara();
dataProvinsi();
}, 3000);
function semuaData(){
$.ajax({
url : 'https://coronavirus-19-api.herokuapp.com/countries/indonesia',
success : function(data){
try{
$('#data-kasus').html(data.cases);
$('#data-mati').html(data.deaths);
$('#data-sembuh').html(data.recovered);
$('#data-dirawat').html(data.active);
}catch{
alert('error');
}
}
});
}
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 dirawat =dataNegara.active;
$('#data-id').html('Positif : '+kasus+' orang <br> Meninggal : '+mati+' orang <br> Sembuh : '+sembuh+' orang <br> Dirawat : '+dirawat+' orang')
}
}
}
}catch{
alert('error');
}
}
});
}
function dataProvinsi(){
$.ajax({
url : 'curl.php',
type : 'GET',
success : function(data){
try{
$('#table-data').html(data);
}catch{
alert('error');
}
}
});
}
});
</script>
6. Buat file baru dengan nama curl.php di dalam folder corona untuk menampilkan data virus covid-19 perprovinsi di Indonesia, tuliskan script dibawah ini.
<?php
//Buat Fungsi http_request
function http_request ($url){
//persiapkan CURL
$ch = curl_init();
//set URL
curl_setopt($ch, CURLOPT_URL, $url);
//aktifkan fungsi nilai 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 ke dalam variabel $output
$output = curl_exec($ch);
//tutup CURL
curl_close($ch);
//mengembalikan hasil curl
return $output;
}
//panggil fungsi http_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
}
?>
7. Kemudian jalankan pada menu browser dengan mengunjungi url http://localhost/corona/
Hasil :
Link untuk melihat data kasus Covid-19 di seluruh Negara
Link untuk melihat data kasus Covid-19 di Indonesia
Link untuk melihat data kasus Covid-19 di provinsi Indonesia
Patria Deny Saputra (18753068), Eko Win Kenali, S.Kom., M. Cs.
Komentar
Posting Komentar