Cara Membuat Aplikasi Pemantauan Data Covid-19 Secara Realtime

Halo sobat Coding, kali ini Coding Rebahan Coding akan memberikan totorial Aplikasi Pemantauan Data Covid-19 Secara Realtime. Coding Rebahan Coding sebagai software yang user friendly Kali ini kami akan memberikan sebuah tutorial yang pastinya mudah untuk Anda terapkan yaitu cara membuat Aplikasi Pemantauan Data Covid-19 Secara Realtime dengan PHP, API, JSON Decode dan Ajax.

Proses ini berawal dari pengambilan data dari API yang sudah disediakan Developer dan menampilkanya kembali pada Aplikasi berbasis Web kita secara Realtime. Seperti biasa, sebelum menuju ke tutorial, admin akan membahas definisinya terlebih dulu. Jadi, Anda akan lebih paham saat melakukan proses tersebut.

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.

Cara 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

https://coronavirus-19-api.herokuapp.com/countries/

Data Covid-19 Di Indonesia

https://api.kawalcorona.com/indonesia/

Data Covid-19 Berdasarkan Provinsi

https://api.kawalcorona.com/indonesia/provinsi/

Data Covid-19 Di indonesia Lengkap

https://coronavirus-19-api.herokuapp.com/countries/indonesia

Dan terdapat masih banyak API lain-lainya yang diberikan oleh developer. Namun kali ini Coding Rebahan Coding akan memberikan tutorial penggunaan pada API data covid pada Indonesia dan data covid berdasarkan provinsi yang berada di Indonesia.

TUTORIALNYA DISINI

style.css

Sebelum masuk ke source code inti kita buat dulu css nya terlebih dahulu agar tampillanya sungguh begitu keren. copy source code dibawah ini lalu save didalam folder \xamp\htdocs\covid dengan file name style.css

.bg-header {

background: linear-gradient(to right, rgba(112, 252, 57, 0.739), rgba(12, 31, 139, 0.849)), url(https://crukcambridgecentre.org.uk/sites/default/files/news/corona-virus%20Image%20by%20Vektor%20Kunst%20Pixabay.jpg);

}

.bg-footer {

background: linear-gradient(to right, #1aa9d6, #010349)

}

.bg-subhed {

background: linear-gradient(to right, #000046, #1cb5e0);

}

.bg-positif {

background: radial-gradient(circle, #d18c02, #a36d02);

}

.bg-dirawat {

background: radial-gradient(circle, #918c83, #807c75);

}

.bg-sembuh {

background: radial-gradient(circle, #029e1c, #017314);

}

.bg-meninggal {

background: radial-gradient(circle, #de0404, #b50202);

}

Membuat File index.php

Bisa dicopy via web https://getbootstrap.com/docs/4.5/getting-started/introduction/ untuk mempermudah membuat tampilan membuat tampilan agar lebih menarik, setelah masuk di web tersebut, copy starter template.

Atau copy source code dibawah ini lalu masukan di dalam text editor (Sublime) dan save didalam folder \xamp\htdocs\covid dengan file name index.php

<!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">
    <link rel="stylesheet" href="style.css"/>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

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

AKAN MENAMPILKAN

Membuat Header

Bisa dicopy via web https://getbootstrap.com/docs/4.5/components/jumbotron/ untuk menampilkan Fluid jumbotron / header.

Atau copy source code dibawah ini lalu masukan source code pada setelah tag <body>, sesuaikan warna backgound pada header menggunakan bg-header. didalam source code dibawah ini sudah ada fungsi date, yaitu fungsi yang digunakan untuk menamampilkan waktu dan tanggal, tergantung pengembangan dari developer masing masing.

<div class="jumbotron jumbotron-fluid bg-header text-white">

<div class="container text-center" >

<h1 class="display-4">DATA COVID 19</h1>

<p class="lead">

<h2>

PEMANTAUAN DATA DI INDONESIA

<BR>

UPDATE TERBARU

<BR>

</h2>

<?php

$tanggal = mktime(date('m'), date("d"), date('Y'));

echo "Tanggal : <b> " . date("d-m-Y", $tanggal ) . "</b>";

date_default_timezone_set("Asia/Jakarta");

$jam = date ("H:i:s");

echo " | Pukul : <b> " . $jam . " " ." </b><br> ";

$a = date ("H");

if (($a>=6) && ($a<=11)) {

echo "<br> <b> Selamat Pagi </b>";

}else if(($a>=11) && ($a<=15)){

echo "<br> Selamat Pagi ";

}elseif(($a>15) && ($a<=18)){

echo "<br> Selamat Siang ";

}else{

echo " <br><b> Selamat Malam </b>";

}

</p>

</div>

AKAN MENAMPILKAN

Membuat Footer

copy source code dibawah ini lalu masukan source code pada sebelum tag </body>, sesuaikan warna backgound pada footer menggunakan bg-header dikarenakan agar warnaya contrast bagian pembuka dan penutup

<br>

<footer class="bg-header text-center text-white mt-3 bt-2 pb-2">

Development By. Muhammad Aldy Bastian | "Ngoding Rebahan Ngoding"

</footer>

AKAN MENAMPILKAN

Membuat box dan menampilan data dari API

Kegunaanya box itu sendiri yaitu untuk menampilkan data data covid yang nantinya akan terlihat rapih saat data ditampilkan. Didalam box ini, masing masing box akan menampilkan beberapa data dari API yaitu:

Dana nama negara
Data positif
Data dirawat
Data sembuh
Data meninggal
Data positif hari ini
Data meninggal hari ini

Untuk menampilkan data api untuk ini menggunakan dua metode sekaligus, metode yang pertama admin menggunakan json_decode dan metode yang kedua menggunakan ajax.

Copy source code dibawah ini lalu masukan source code sesudah Fluid jumbotron / header untuk metode pertama, sesuaikan warna backgound pada box, masing masing, source codenya sebagai berikut.

<?php

$data = file_get_contents('https://api.kawalcorona.com/indonesia');

$coronalive = json_decode($data, true);

<?php

foreach($coronalive as $datacorona) :

<style type="text/css">

.box{

padding: 30px 40px;

border-radius: 5px;

}

.boxx{

padding: 10px 10px;

border-radius: 5px;

}

</style>

<div>

<div class="container">

<div class="row">

<div class="col-md-12 mt-3">

<div class=" bg-subhed box text-white">

<div class="row">

<div class="col-md-2">

<h1><?php echo $datacorona['name'] ?></h1>

<P><small> Data Covid-19</small></P>

</div>

<DIV class="col-md-1">

<img src="img/indonesia.svg" style=" width: 50px;">

</DIV>

</div>

<div class="col-md-3 mt-3">

<div class=" bg-positif box text-white text-center">

<div class="row">

<div class="col-md-6">

<h5>POSITIF</h5>

<h2 class="count"><?php echo $datacorona['positif'] ?></h2>

<h5> ORANG </h5>

</div>

<div class="col-md-3 mt-3">

<div class=" bg-dirawat box text-white text-center">

<div class="row">

<div class="col-md-6">

<h5>DIRAWAT</h5>

<h2 class="count"><?php echo $datacorona['dirawat'] ?></h2>

<h5> ORANG </h5>

</div>

<div class="col-md-3 mt-3">

<div class=" bg-sembuh box text-white text-center">

<div class="row">

<div class="col-md-6">

<h5>SEMBUH</h5>

<h2 class="count"><?php echo $datacorona['sembuh'] ?></h2>

<h5> ORANG </h5>

</div>

<div class="col-md-3 mt-3">

<div class=" bg-meninggal box text-white text-center">

<div class="row">

<div class="col-md-6">

<h5>MENINGGAL</h5>

<h2 class="count"><?php echo $datacorona['meninggal'] ?></h2>

<h5> ORANG </h5>

</div>

<?php endforeach; ?>

<div class="col-md-6 mt-3">

<div class=" bg-subhed box text-white text-center">

<div class="row">

<div class="col-md-12">

<h5>POSITIF HARI INI<br>

+<big id="data-kasus"></big>

</h5>

</div>

<div class="col-md-6 mt-3">

<div class="bg-footer box text-white text-center">

<div class="row">

<div class="col-md-12">

<h5>MENINGGAL HARI INI<br>

+<big id="data-mati"></big>

</h5>

</div>

untuk metode kedua ajax

mungkin sobat bertanya, kenapa menggunakan 2 metode sekaligus? sedikit admin jelaskan, disini untuk menampilkan data positif maupun meninggal hari ini, yang disediakan API https://api.kawalcorona.com/indonesia/ itu hanya data positif, dirawat, sembuh dan meninggal secara keseluruan, sedangkan admin juga membutuhkan data positif dan meninggal pada hari ini, dan setelah admin riset, api yang menyediakan data tersebut yaitu https://coronavirus-19-api.herokuapp.com/countries/indonesia , kenapa tidak mengambil salah satu dari API yang lengkap dan menggunakan 1 metode saja? jawab admin yang paling simpel yaitu, admin ingin mengkombinasikan kedua metode tersbut. gitu sobat coding. sudah langsung saja next. :D

Copy source code dibawah ini lalu masukan source code pada setelah tag </html>, untuk menampilkan data positif dan meninggal pada hari ini. Source codenya sebagai berikut.

<script>

$(document).ready(function(){

semuaData();

function semuaData(){

$.ajax({

url : 'https://coronavirus-19-api.herokuapp.com/countries/indonesia',

success : function(data){

try{

var json = data;

var kasus = data.todayCases;

var meninggal = data.todayDeaths;

$('#data-kasus').html(kasus);

$('#data-mati').html(meninggal);

}catch{

alert('Errorr');

}

});

}

});

</script>

AKAN MENAMPILKAN

Terakhir, Menampilkan data Provinsi

Untuk menampilkan data provinsi kali ini hanya menggunakan json_decode ni jadi tidak terlalu pusing, pertama tama sobat membuat tabel yang isi tabelnya yaitu no, provinsi, positif, sembuh dan meninggal,

Copy source code dibawah ini lalu masukan source code pada dalam tag <body> Setelah </div> box tadi ni sobat coding, Source codenya sebagai berikut.

<br><br>

<div class="mb-5">

<h3 class="text-uppercase text-center">Covid-19 Terkini Berdasarkan Provinsi</h3>

</div>

<div class="table-responsive">

<table class="table table-bordered table-striped text-center table-dark container">

<tr>

<th>No</th>

<th>Provinsi</th>

<th>Positif</th>

<th>Sembuh</th>

<th>Meninggal</th>

</tr>

<?php

$data = file_get_contents('https://api.kawalcorona.com/indonesia/provinsi/');

$coronalive = json_decode($data, true);

<?php

$no = 1;

foreach($coronalive as $datacorona) :

<tr>

<td><?php echo $no++ ?></td>

<td><?php echo $datacorona['attributes']['Provinsi'] ?></td>

<td><?php echo $datacorona['attributes']['Kasus_Posi'] ?></td>

<td><?php echo $datacorona['attributes']['Kasus_Semb'] ?></td>

<td><?php echo $datacorona['attributes']['Kasus_Meni'] ?></td>

</tr>

<?php endforeach; ?>

</table>

</div>

AKAN MENAMPILKAN

Gimana? bisa

kalo gak bisa, bisa ditanyain ni di kolom komentar, apa dan bagaimana permasalahan dari sobat sekalian, sesuai janji admin, memberikan totorial yang mudah, sobat coding bisa copy seluruh source code diatas tanpa kepotong potong dibawah ini ni.

Semua Source Code index.php

	<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">
	<link rel="stylesheet" href="style.css"/>


	<title>Pemantauan Data Covid-19</title>
	</head>
	<body>

	<div class="jumbotron jumbotron-fluid bg-header text-white">
	<div class="container text-center" >
	<h1 class="display-4">DATA COVID 19</h1>
	<p class="lead">

	<h2>
	PEMANTAUAN DATA DI INDONESIA
	<BR>
	UPDATE TERBARU
	<BR>
	</h2>
			
	<?php 
	$tanggal = mktime(date('m'), date("d"), date('Y'));
	echo "Tanggal : <b> " . date("d-m-Y", $tanggal ) . "</b>";
	date_default_timezone_set("Asia/Jakarta");
	$jam = date ("H:i:s");
	echo " | Pukul : <b> " . $jam . " " ." </b><br> ";
	$a = date ("H");
	if (($a>=6) && ($a<=11)) {
	echo "<br> <b> Selamat Pagi </b>";
	}else if(($a>=11) && ($a<=15)){
	echo "<br> Selamat  Pagi ";
	}elseif(($a>15) && ($a<=18)){
	echo "<br> Selamat Siang ";
	}else{
	echo " <br><b> Selamat Malam </b>";
	}
	?>
	</p>
	</div>	
	</div>

<?php 
    $data = file_get_contents('https://api.kawalcorona.com/indonesia');
    $coronalive = json_decode($data, true);
    ?>

    <?php 
    foreach($coronalive as $datacorona) :
    ?>

	<style type="text/css">
	.box{
	padding:  30px 40px;
	border-radius: 5px;
	}

	.boxx{
	padding:  10px 10px;
	border-radius: 5px;
	}
	</style>
	<div>
	<div class="container">
	<div class="row">

	<div class="col-md-12 mt-3">
	<div class=" bg-subhed box text-white">
	<div class="row">
	<div class="col-md-2">
	<h1><?php echo $datacorona['name']  ?></h1>
	<P><small> Data Covid-19</small></P>
	</div>
	<DIV class="col-md-1">
	<img src="img/indonesia.svg" style=" width: 50px;">
	</DIV>
	</div>
	</div>	
	</div>

	<div class="col-md-3 mt-3">
	<div class=" bg-positif box text-white text-center">
	<div class="row">
	<div class="col-md-6">
	<h5>POSITIF</h5>
	<h2 class="count"><?php echo $datacorona['positif']  ?></h2>
	<h5> ORANG </h5>
	</div>
	</div>
	</div>	
	</div>

	<div class="col-md-3 mt-3">
	<div class=" bg-dirawat box text-white text-center">
	<div class="row">
	<div class="col-md-6">
	<h5>DIRAWAT</h5>
	<h2 class="count"><?php echo $datacorona['dirawat']  ?></h2>
	<h5> ORANG </h5>
	</div>
	</div>
	</div>	
	</div>

	<div class="col-md-3 mt-3">
	<div class=" bg-sembuh box text-white text-center">
	<div class="row">
	<div class="col-md-6">
	<h5>SEMBUH</h5>
	<h2 class="count"><?php echo $datacorona['sembuh']  ?></h2>
	<h5> ORANG </h5>
	</div>
	</div>
	</div>	
	</div>

	<div class="col-md-3 mt-3">
	<div class=" bg-meninggal box text-white text-center">
	<div class="row">
	<div class="col-md-6">
	<h5>MENINGGAL</h5>
	<h2 class="count"><?php echo $datacorona['meninggal']  ?></h2>
	<h5> ORANG </h5>
	</div>
	</div>
	</div>	
	</div>

	<?php endforeach; ?>

	<div class="col-md-6 mt-3">
	<div class=" bg-subhed box text-white text-center">
	<div class="row">
	<div class="col-md-12">
	<h5>POSITIF HARI INI<br>
	+<big id="data-kasus"></big>
	</h5>
	</div>
	</div>
	</div>	
	</div>

	<div class="col-md-6 mt-3">
	<div class="bg-footer box text-white text-center">
	<div class="row">
	<div class="col-md-12">
	<h5>MENINGGAL HARI INI<br>
	+<big id="data-mati"></big>
	</h5>
	</div>
	</div>
	</div>	
	</div>

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

	<br><br>
	<div class="mb-5">
	<h3 class="text-uppercase text-center">Covid-19 Terkini Berdasarkan Provinsi</h3>
	</div>
	<div class="table-responsive">
	<table class="table table-bordered table-striped text-center table-dark container">
	<tr>
	<th>No</th>
	<th>Provinsi</th>
	<th>Positif</th>
	<th>Sembuh</th>
	<th>Meninggal</th>
	</tr>
	<?php 
	$data = file_get_contents('https://api.kawalcorona.com/indonesia/provinsi/');
	$coronalive = json_decode($data, true);
	?>

	<?php 
	$no = 1;
	foreach($coronalive as $datacorona) :
	?>
	<tr>
	<td><?php echo $no++ ?></td>
	<td><?php echo $datacorona['attributes']['Provinsi'] ?></td>
	<td><?php echo $datacorona['attributes']['Kasus_Posi'] ?></td>
	<td><?php echo $datacorona['attributes']['Kasus_Semb'] ?></td>
	<td><?php echo $datacorona['attributes']['Kasus_Meni'] ?></td>
	</tr>

	<?php endforeach; ?>
	</table>
	</div>

	<br>
	<footer class="bg-header text-center text-white mt-3 bt-2 pb-2">
		Development By. Muhammad Aldy Bastian | "Ngoding Rebahan Ngoding"
	</footer>
					

	<div></div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  </body>
</html>

$(document).ready(function(){

semuaData();

function semuaData(){

$.ajax({

url : 'https://coronavirus-19-api.herokuapp.com/countries/indonesia',

success : function(data){

try{

var json = data;

var kasus = data.todayCases;

var meninggal = data.todayDeaths;

$('#data-kasus').html(kasus);

$('#data-mati').html(meninggal);

}catch{

alert('Errorr');

}

});

}

});

</script>

Aplikasi Pemantauan Data Covid-19 Secara Realtime

Nah sekarang Anda sudah pahamkan tentang script atau source code dari Aplikasi Pemantauan Data Covid-19 Secara Realtime tersebut. Mari kita sudahi Tutorialnya guis.

Download Now

Demikian cara mudah untuk membuat Aplikasi Pemantauan Data Covid-19 Secara Realtime. Ikuti terus situs ini untuk mendapatkan berbagai tutorial seputar Coding Rebahan Coding. Semoga dengan tutorial-tutorial dari kami bisa menambah pengetahuan Anda untuk mengoptimalkan pengetahuan tentang bagaimana susahnya ngoding :D. Terus kembangkan sklil kalian stay Coding dan sampai jumpa di Tutorial Aplikasi lainnya.

Cara Membuat Aplikasi Pemantauan Data Covid-19 Secara Realtime

Cara Membuat Aplikasi Pemantauan Data Covid-19 Secara Realtime

style.css

Membuat File index.php

AKAN MENAMPILKAN

Membuat Header

AKAN MENAMPILKAN

Membuat Footer

AKAN MENAMPILKAN

Membuat box dan menampilan data dari API

AKAN MENAMPILKAN

Terakhir, Menampilkan data Provinsi

AKAN MENAMPILKAN

Gimana? bisa

Semua Source Code index.php

Download Now

Posting Komentar

0 Komentar

Mata Kuliah

Subscribe

Cara Membuat Aplikasi Pemantauan Data Covid-19 Secara Realtime

Cara Membuat Aplikasi Pemantauan Data Covid-19 Secara Realtime

style.css

Membuat File index.php

AKAN MENAMPILKAN

Membuat Header

AKAN MENAMPILKAN

Membuat Footer

AKAN MENAMPILKAN

Membuat box dan menampilan data dari API

AKAN MENAMPILKAN

Terakhir, Menampilkan data Provinsi

AKAN MENAMPILKAN

Gimana? bisa

Semua Source Code index.php

Download Now

Posting Komentar

0 Komentar

Social Me

Mata Kuliah

Subscribe