assalamualaikum kawan kali ini saya akan mencoba memberikan tutorial membuat aplikasi monitoring covid 19
sebelumya pelajari :
APA ITU PHP?
PHP Adalah bahasa scripting server-side, Bahasa pemrograman yang digunakan untuk mengembangkan situs web statis atau situs web dinamis atau aplikasi Web. PHP singkatan dari Hypertext Pre-processor, yang sebelumnya disebut Personal Home Pages.
APA ITU API?
API adalah singkatan dari Application Programming Interface yaitu sebuah software yang memungkinkan para developer untuk mengintegrasikan dan mengizinkan dua aplikasi yang berbeda secara bersamaan untuk saling terhubung satu sama lain.
APA ITU JSON?
JSON (JavaScript Object Notation) adalah sebuah format data yang digunakan untuk pertukaran dan penyimpanan data.
APA ITU AJAX?
AJAX (Asynchronous JavaScript and XML) adalah metode pertukaran data dengan server dan memperbarui bagian-bagian halaman web tanpa memuat ulang seluruh halaman.
Setelah mengetahui definisinya, langsung saja menuju ke pembahasan utama. Di bawah ini adalah langkah mudah membuat Aplikasi Pemantauan Data Covid-19 Secara Realtime.
Berikut ini API yang diberikan oleh beberapa Developer yang bisa kalian gunakan.
Data Covid-19 Di Dunia
dan ini copykan ke text editor kalian
<!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>MONITOR PENYEBARAN VIRUS COVID-19</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid bg-primary text-white">
<div class="container text-center ">
<h1 class="display-4">CORONA VIRUS</h1>
<p class="lead">
<h2>
PANTAU PENYEBAYAN VIRUS COVID-19
<br>SECARA REAL TIME
<br>mari menjaga kesehatan diri kita.
</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-4">
<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-4">
<img src="img/sad.svg" style="width: 100px;">
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="bg-info 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-4">
<img src="img/cry.svg" style="width: 100px;">
</div>
</div>
</div>
</div>
<div class="col-md-4">
<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-4">
<img src="img/happy.svg" style="width: 100px;">
</div>
</div>
</div>
</div>
<div class="col-md-12 mt-3 ">
<div class="bg-primary box text-white">
<div class="row">
<div class="col-md-3">
<h2>INDONESIA</h2>
<h5 id="data-id">positif : 12 orang <br>
meninggal : 20 orang <br> meninggal : 3 orang <br> </h5>
</div>
<div class="col-md-4">
<img src="img/indonesia.svg" style="width: 150px;">
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-primary text-white text-center mt-3 bt-2 pd-2 ">
create by akhfadz juan reza | 18753007
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" ></script>
</body>
</html>
<script>
$(document).ready(function(){
//panggil fungsi menampilkan semua data global
semuaData();
dataNegara();
// untuk auto refresh
setInterval(function(){
semuaData();
dataNegara();
},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)
}catch{
alert('errorr');
}
}
});
}
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;
$('#data-id').html(
'positif : '+kasus+' orang <br> meninggal : '+mati+' orang <br> sembuh : '+sembuh+' orang')
}
}
}
}catch{
alert('errorr');
}
}
});
}
});
</script>
jika sudah save dengan nama index.php
dan jangan lupa aktifkan xampp kalian
jika sudah uji coba maka hasinya seharusnya begini
selesai
