InformasiScript PHPScript ProgrammingTutorialTutorial PHP

Source Code API Menampilkan Data Covid-19 di Indonesia

Afid Arifin – Halo teman-teman jumpa lagi bersama kami INTBYTE. Kali ini saya tidak akan panjang lebar lagi dalam memberi informasi seputar dunia programming akan tapi kali ini kami akan berbagi source code untuk menampilkan data Covid-19 di Indonesia.

Baca Juga

5 Bahasa Pemrograman Web Developer Dasar

Data ini diambil menggunakan sistem ajax dari API (Application Program Interface) dari situs https://api.kawalcorona.com. Baiklah, bagi Anda yang ingin menampilkan informasi Covid-19 di Indonesia ke halaman website Anda maka silahkan ikuti tutorial berikut ini.

Langkah Pertama

Buatlah file dengan nama index.html atau sesuaikan sengan selera Anda, kemudiam copykan program berikut.

<!DOCTYPE html>
	<html lang="en">
		<head>
			<title>
				Data Covid-19 di Indonesia | Afid Arifin
			</title>
			<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
			<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
			<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" name="viewport"/>
			<meta property="og:url" content="https://covid-19.intbyte.com"/>
			<meta property="og:title" content="Data Covid-19 di Indonesia | INTBYTE"/>
			<meta property="og:description" content="Monitoring data kasus Covid-19 di Indoensia..."/>
			<meta property="og:image" content="http://www.unpad.ac.id/wp-content/uploads/2020/03/Coronavirus-COVID-19-300x221.jpg"/>
			<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
		 	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
			<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
			<script src="ajax.js"></script>
		</head>
		<body>
			<div class="row">
				<div class="col-12">
					<table class="table table-striped table-bordered">
						<thead class="thead-dark">
							<tr>
								<th colspan="3">
									<center>
										<b>Covid-19 di Indonesia</b>
									</center>
								</th>
							</tr>
							<tr>
								<th>
									<center>Positif</center>
								</th>
								<th>
									<center>Sembuh</center>
								</th>
								<th>
									<center>Meninggal</center>
								</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>
									<center><span id="positif" class="badge badge-warning"></span> Orang</center>
								</td>
								<td>
									<center><span id="sembuh" class="badge badge-success"></span> Orang</center>
								</td>
								<td>
									<center><span id="meninggal" class="badge badge-danger"></span> Orang</center>
								</td>
							</tr>
						</tbody>
						<tfoot>
							<tr>
								<th colspan="3">
									<center>Sumber: https://kawalcorona.com/api/</center>
								</th>
							</tr>
						</tfoot>
					</table>
				</div>
			</div>
		</body>
	</html>

Lalu save program di atas.

Langkah Terakhir

Langkah terakhir untuk pemanggilan ajax-nya, silahkan buat satu file lagi dengan nama ajax.js lalu copykan program berikut ini.

$(document).ready(function() {
	
	var d = new Date();
	var month = new Array();
	
	month[0] = "Januari";
	month[1] = "Februari";
	month[2] = "Maret";
	month[3] = "April";
	month[4] = "Mei";
	month[5] = "Juni";
	month[6] = "Juli";
	month[7] = "Agustus";
	month[8] = "September";
	month[9] = "Oktober";
	month[10] = "November";
	month[11] = "Desember";
	
	$("#date").html(d.getDate() + " " + month[d.getMonth()] + " " + d.getFullYear());
	
	$.ajax({
		async: true,
		cache: true,
		url: "https://api.kawalcorona.com/indonesia/",
		success: function(result) {
			$("#positif").html(result[0].positif);
			$("#sembuh").html(result[0].sembuh);
			$("#meninggal").html(result[0].meninggal);
			
			}});
   });

Pastikan ikut langkah di atas dengan benar agar informasi yang ditampilkan akan seperti gambar berikut ini.

Source Code API Menampilkan Data Covid-19 di Indonesia
Source Code API Menampilkan Data Covid-19 di Indonesia

Apabila Anda ingin melihat versi online dari source code yang saya bagikan ini, Anda dapat mengunjungi https://covid-19.intbyte.com.

Akhir kata, semoga wabah virus corona ini segera musnah di muka bumi ini.

Tags
Show More

Related Articles

One Comment

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Back to top button
Close
Close