Cara Menggunakan API Covid-19 Dari Kawalcorona Terbaru, dengan API tersebut Anda dapat melihat perkembangan Coronavirus Disease 2019 secar...
Cara Menggunakan API Covid-19 Dari Kawalcorona Terbaru
Selasa, Maret 24, 2020
Daftar Isi [Tampil]
Cara Menggunakan API Covid-19 Dari Kawalcorona Terbaru, dengan API tersebut Anda dapat melihat perkembangan Coronavirus Disease 2019 secara real time pada blog Anda.
Tapi sebelum kita mulai ke tutorialnya mari kita bahas sedikit mengenai Coronavirus Disease 2019.
Apa Itu Coronavirus Disease 2019(Covid-19)?
Coronavirus Disease 2019 atau disingkat menjadi Covid-19 adalah virus yang berasal dari Wuhan sebuah kota di Provinsi Hubei Cina, yang kemudian menyebar ke berbagai Negara.
Dan virus tersebut menyebabkan syndrome coronavirus 2 (SARS-CoV-2) atau gangguan pernapasan akut yang sangat parah bahkan orang yang positif terkena virus Corona ini bisa meninggal dunia.
Dan yang mengerikan-nya virus Corona ini sudah banyak menyebar di Indonesia.
Nah oleh sebab itu kita harus mengetahui perkembangan virus Corona tersebut di Indonesia, salah satu caranya adalah dengan menggunakan API Covid-19 Dari Kawalcorona Terbaru.
Jadi dengan API tersebut kita bisa membuat sebuah aplikasi atau program yang real time tentang perkembangan Covid-19 di Indonesia.
Sekarang sebelum lanjut ke tutorialnya langsung apakah Anda tahu apa itu API?, jika belum tahu mari kita bahas dulu sedit apa itu API?
Apa Itu API(Application Programming Interface)?
Application Programming Interface atau yang biasanya disingkat dengan API adalah sebuah program perangkat lunak yang mengizinkan dua aplikasi atau lebih saling terhubung.
Jadi dengan menggunakan API ini Anda dapat membuat sebuah sistem yang saling terhung antar aplikasi yang berbeda.
Dan hal ini tentunya dapat memudahkan pekerjaan seorang developer dan memaksimalkan fungsi aplikasi yang dibuat.
API memiliki banyak kelebihan yang sangat membantu sekali dalam pemrograman, simak kelebihan-nya dibawah ini.
Apa Kelebihan API?
1. Kinerja Aplikasi Lebih Cepat
Kenapa lebih cepat?, karena dengan API ketika kita ingin membuat sebuah fitur yang datanya sama seperti aplikasi lain maka kita tidak perlu membuat source code aplikasi tersebut didalam aplikasi kita.
Dengan menggunakan API kita bisa langsung mendapatkan data dari aplikasi lain yang langsung terhubung dengan aplikasi kita.
2. Kemudahan Kustomisasi
Jadi dengan API Anda bisa memilih data mana yang ingin Anda gunakan dari aplikasi lain yang terhubung dengan aplikasi Anda.
3. Fleksibel
Dengan API maka aplikasi Anda menjadi lebih fleksibel. Karena API mendukung data migrasi yang lebih baik, dan real time.
4. Integrasi / integration
API dapat memberikan pengalaman yang terintegrasi bagi user-nya, karena API dapat menjamin pengiriman atau penerimaan data lebih lancar.
Apa Itu Kawalcorona?
Kawalcorona adalah sebuah website yang memberikan berbagai informasi mengenai perkembangan Virus Corona baik itu di Indonesia maupun di Dunia.
Dan kawalcorona juga memberikan API-nya untuk developer website untuk di pergunakan membagikan informasi tentang perkembangan Virus Corona.
Bagaimana sudah cukup banyak yang Anda tahu tentang Covid-19, API dan Kawalcorona, yuk sekarang kita mulai ke tutorial utamanya.
Cara Menggunakan API Covid-19 Dari Kawalcorona
Cara Menggunakan API Covid-19 Dari Kawalcorona Terbaru sebenarnya sangat mudah sekali, kita hanya mengunakan ajax dan jquery dan html saja untuk program intinya.
Namun tampilan-nya akan kurang menarik, nah oleh sebab itu kita juga perlu css agar tampilan-nya menjadi lebih menarik dan responsive.
API yang di berikan oleh Kawalcorona cukup banyak dan bervariatif sesuai dengan ketegori penyebaran corona yang ada di website kawalcorona tersebut.
Berikut ini API yang diberikan oleh Kawalcorona untuk Developer.
API Covid-19 Dari Kawalcorona
Data Virus Corona Di Indonesia :
https://api.kawalcorona.com/indonesia
Data Virus Corona DiIndonesia Berdasarkan Provinsi:
https://api.kawalcorona.com/indonesia/provinsi
Data Virus Corona Di Dunia:
https://api.kawalcorona.com/
Data Yang Positif Terkena Virus Corona Di Dunia:
https://api.kawalcorona.com/positif
Data Yang Sembuh Dari Virus Corona Di Dunia:
https://api.kawalcorona.com/sembuh
Data Yang Meninggal Akibat Virus Corona Di Dunia:
https://api.kawalcorona.com/meninggal
Dari sekian banyak API yang diberikan oleh Kawalcorona, panduancode pada tutoria kali ini hanya akan mempraktekkan penggunaan satu API saja, yaitu API Data Virus Corona Di Indonesia.
Sekarang mari kita mulai pembahasan cara menggunakan API Covid-19 Indonesia, yaitu mulai dari source code-nya.
Source Code Penggunaan API Covid-19 Indonesia
<style>
.datax #show1{
width: 31%;
float: left;
text-align: center;
}.datax #show2{
width: 31%;
float: left;
text-align: center;
}.datax #show3{
width: 31%;
float: left;
text-align: center;
}
.positif, .sembuh, .meninggal {
margin: 1%;
border-radius: 5px;
box-shadow: 0 1px 2px 2px rgba(0,0,0,.5);
text-overflow: ellipsis;
overflow: hidden;
color: white;
font-family: cursive;
}
.datax .positif {
background: #ed2828;
}
.datax .sembuh {
background: #4166F1;
}
.datax .meninggal {
background: #000000;
}
#show1 .angka {
font-size: 2em;
font-weight: 700;
text-shadow: 2px 2px 4px #000000;
}
#show2 .angka {
font-size: 2em;
font-weight: 700;
text-shadow: 2px 2px 4px #000000;
}
#show3 .angka {
font-size: 2em;
font-weight: 700;
text-shadow: 2px 2px 4px #000000;
}
#show1 .detail {
background: white;
width: 100%;
display: block;
color: black;
box-shadow: 0px -2px 4px 1px #66c7ff;
}
#show2 .detail {
background: white;
width: 100%;
display: block;
color: black;
box-shadow: 0px -2px 4px 1px #66c7ff;
}
#show3 .detail {
background: white;
width: 100%;
display: block;
color: black;
box-shadow: 0px -2px 4px 1px #66c7ff;
}
.datax .title {
text-align: center;
text-transform: uppercase;
font-family: monospace;
font-size:1em;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(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);
}});
});
</script>
<div class="datax">
<div class="title">
<h1>covid-19 indonesia : <span id="date"></span></h1>
</div>
<div id="show1" class="positif">
<div id="positif" class="angka">
</div>
<span class="detail">Positif</span>
</div>
<div id="show2" class="sembuh">
<div id="sembuh" class="angka"></div>
<span class="detail">Sembuh</span>
</div>
<div id="show3" class="meninggal">
<div id="meninggal" class="angka"></div>
<span class="detail">Meninggal</span>
</div>
</div>
Cara Pasang Widget Corona Di Blog Terbaru
Source Code Penggunaan API Covid-19 Indonesia diatas bisa Anda terapkan langsung di blogspot loh.
Caranya Anda buka tata letak dan buat widget baru dengan memilih HTML/ JavaScript, dan pastekan source code diatas.
Untuk lebih jelasnya lihat pada gambar dibawah ini dan pada contoh ini panduancode menerapkan-nya di widget paling atas dibawah navigasi blog, dan mungkin pada setiap template blog penempatan wigdet-nya berbeda, jadi Anda bebas memilih lokasi widgetnya.
Kemudian Anda save widget tersebut, dan selesai.
Untuk lebih jelasnya lihat pada gambar dibawah ini.
Bagaimana mudah bukan cara pasang widget corona di blog terbaru dari panduancode?, setelah itu coba Anda buka blog Anda maka akan tampil wigdet corona yang responsive dan real time karena menggunakan API.
Contoh gambar widget corona di blog panduancode.
Cara pasang widget update corona diblog Anda sudah tahu, nah sekarang apakah Anda paham Source Code Penggunaan API Covid-19 Indonesia diatas?, jika belum paham mari kita bahas penjelasan dari source code update corona otomatis diatas.
Penjelasan Source Code Penggunaan API Covid-19 Indonesia
1. Source Code Yang Mengatur Tampilan
Source code yang mengatur tampilan pada wigdet corona diatas yaitu code-code yang terletak didalam <style>....</style>.
Dan kenapa source code dibawah ini yang mengatur tampilan hampir sama semua cuma bedanya #show1, #show2, dan #show3.
.datax #show1{
width: 31%;
float: left;
text-align: center;
}.datax #show2{
width: 31%;
float: left;
text-align: center;
}.datax #show3{
width: 31%;
float: left;
text-align: center;
}
Alasan-nya karena #show1, #show2, dan #show3 pada code diatas akan digunakan sebagai id pada bagian code <div id="show1" class="positif">.....</div>, <div id="show2" class="sembuh">....</div>, dan <div id="show3" class="meninggal">.
Dan Source code dibawah ini yang hampir sama dengan source code css diatas juga berfungsi sebagai id unik yang membedakan id satu dengan id lain-nya paga bagian yang menampilkan angka data corona.
#show1 .angka {
font-size: 2em;
font-weight: 700;
text-shadow: 2px 2px 4px #000000;
}
#show2 .angka {
font-size: 2em;
font-weight: 700;
text-shadow: 2px 2px 4px #000000;
}
#show3 .angka {
font-size: 2em;
font-weight: 700;
text-shadow: 2px 2px 4px #000000;
}
Masih ada lagi source code yang hampir sama yaitu source code css yang di jadikan id juga tapi pada bagian detail yang menampilkan status virus corona.
#show1 .detail {
background: white;
width: 100%;
display: block;
color: black;
box-shadow: 0px -2px 4px 1px #66c7ff;
}
#show2 .detail {
background: white;
width: 100%;
display: block;
color: black;
box-shadow: 0px -2px 4px 1px #66c7ff;
}
#show3 .detail {
background: white;
width: 100%;
display: block;
color: black;
box-shadow: 0px -2px 4px 1px #66c7ff;
}
Untuk source code css lain-nya juga berfungsi menurut class-nya masing masing, dan antara source code css yang satu dengan yang lain-nya itu saling berhubungan satu sama lain-nya.
2. Source Code Penggunaan API Covid-19
Source code penggunaan API Covid-19 diatas itu menggunakan bahasa pemrograman JavaScript, yang di kelompokkan menjadi beberapa jenis yatitu Ajax, dan Jquery.
Untuk lebih jelasnya lihat contoh source code-nya dibawah ini
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(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);
}});
});
</script>
Dari contoh source code diatas terdapat code untuk menampilkan tanggal, dan code untuk menampilkan data dari API yang kita pakai, yaitu API Covid-19 Di Indonesia.
Lihat juga bagian source code-nya dibawah ini, source code tersebut memanggil data dari API yang kita gunakan dan menampilkannya dengan menggunakan variabel yang sama.
$("#positif").html(result[0].positif);
$("#sembuh").html(result[0].sembuh);
$("#meninggal").html(result[0].meninggal);
Kenapa variabel pemanggilan data dari API dan variabel untuk menampilakan-nya di samakan?
Alasannya agar mempermudah saja, dan agar sama dengan variabel code css yang ada agar tampilan-nya menjadi menarik, dan responsive.
Dari Variabel-variabel diatas yang telah di tentukan baik itu variabel dari css maupun dari ajax-nya kita tampilkan data nya menggunakan source code dibawah ini.
<div class="datax">
<div class="title">
<h1>covid-19 indonesia : <span id="date"></span></h1>
</div>
<div id="show1" class="positif">
<div id="positif" class="angka">
</div>
<span class="detail">Positif</span>
</div>
<div id="show2" class="sembuh">
<div id="sembuh" class="angka"></div>
<span class="detail">Sembuh</span>
</div>
<div id="show3" class="meninggal">
<div id="meninggal" class="angka"></div>
<span class="detail">Meninggal</span>
</div>
</div>
Bagaimana apakah Anda paham dengan penjelasan singkat mengenai Source Code Penggunaan API Covid-19 Indonesia tersebut?.
Pastinya Anda sudah paham ataupun ada gambaran walaupun tidak terlalu paham semua tentang source code Penggunaan API Covid-19 yang panduancode sampaikan.
Sekarang mari kita belajar menggunakan API Covid-19 berdasarkan Provinsi di Indonesia, simak pembahasannya dibawah ini.
Sekarang mari kita belajar menggunakan API Covid-19 berdasarkan Provinsi di Indonesia, simak pembahasannya dibawah ini.
Cara Menggunakan API Corona Berdasarkan Provinsi
Cara menggunakan API Corona Berdasarkan Provinsi di Indonesia ini juga sangat mudah penggunaannya.
Kita masih memakai Ajax untuk menggunakan API Corona berdasarkan Provinsi di Indonesia ini.
Hanya saja scriptnya berbeda dengan script pertama tentang cara menggunakan API Covid-19 Indoneia.
Pada script kali ini kita akan menggunakan tabel dan untuk tampilannya kita akan menggunakan css murni, tanpa menggunakan bootstrap.
Sekarang mari kita mulai tutorialnya dibawah ini, ikuti dengan benar ya langkah-langkah nya dan baca terlebih dahulu instruksinya.
1. Buat File Html Baru
Buat file html baru di teks editor Anda, dan save dengan nama covid-19-provinsi.html
2. Copy Script Corona Berdasarkan Provinsi
Copy script atau source code update corona berdasarkan provinsi dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Update Corona Berdasarkan Provinsi</title>
<style>
.auto_num {counter-reset: serial-number;} .auto_num td:first-child:before {counter-increment: serial-number;content: counter(serial-number); } .tablecovid{ background-color: #fff; box-shadow: 0 7px 16px 0 rgba(50,50,50,0.2); border-radius: 15px; text-align: center;} tr:nth-child(even){background-color: #f2f2f2;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
async: true,
cache: true,
url: "https://api.kawalcorona.com/indonesia/provinsi/",
success: function (obj) {
for(var i=0;i<obj.length;i++) {
var tr="<tr>";
var auto_num="<td></>";
var td1="<td>"+"<span>"+obj[i].attributes['Provinsi']+"</span>"+"</td>";
var td2="<td>"+obj[i].attributes['Kasus_Posi']+"</td>";
var td3="<td>"+obj[i].attributes['Kasus_Semb']+"</td>";
var td4="<td>"+obj[i].attributes['Kasus_Meni']+"</td></tr>";
$("#dataProv").append(tr+auto_num+td1+td2+td3+td4);
}
}});
});
</script>
</head>
<body>
<div class="tablecovid">
<br>
<table border="1" id="auto_num" align="center" style="border-collapse: collapse; width: 95%;">
<thead>
<tr>
<th valign="center" height="30px" width="10%">
<div align="center">
<b><span>NO</span></b></div>
</th>
<th valign="center" height="30px" width="40%">
<div align="center">
<b><span>Provinsi</span></b></div>
</th>
<th valign="center" height="30px" width="10%">
<div align="center">
<b><span>Positif</span></b></div>
</th>
<th valign="center" height="30px" width="10%">
<div align="center">
<b><span>Sembuh</span></b></div>
</th>
<th valign="center" height="30px" width="10%">
<div align="center">
<b><span>Meninggal</span></b></div>
</th>
</tr>
</thead>
<tbody class="auto_num" id="dataProv">
</tbody></table>
<br />
</div>
</body>
</html>
3. Paste Script Corona Berdasarkan Provinsi
Paste script atau source code corona berdasarkan provinsi di Indonesia tersebut pada file html tadi yang telah Anda buat dengan nama covid-19-provinsi.html
4. Save Script Corona Berdasarkan Provinsi
Save script atau source code corona berdasarkan provinsi di Indonesia tesebut, kemudian coba Anda jalankan di browser dan pastikan ada koneksi internet.
Maka akan terlihat seperti pada gambar dibawah ini.
5. Cara menggunakan API Corona Berdasarkan Provinsi Selesai
Cara menggunakan API Corona Berdasarkan Provinsi di Indonesia sekarang sudah selesai Anda praktekan.
Tapi apakah Anda sudah paham mengenai script atau source code yang pandua ncode berikan tersebut?
Jika belum paham yuk mari kita bahas penjelasan dari script atau source code Corona berdasarkan provinsi di Indonesia, di bawah ini.
Penjelasan Script Corona Berdasarkan Provinsi
Untuk Anda yang kurang paham tentang script corona berdasarkan provinsi di Indonesia diatas Anda bisa membaca dan memahami penjelasan berikut dari panduan code.
1. Struktur Html Dasar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Update Corona Berdasarkan Provinsi</title>
</head>
<body>
</body>
</html>
Script html diatas adalah struktur dasar html5 yang dibagi menjadi beberapa bagian, berikut ini bagian-bagian nya.
1. Pembungkus seluruh script html yaitu <!DOCTYPE html> <html lang="en">...</html>
Script atau code tersebut adalah code yang menandakan bahwa itu adalah file html.
2. Pembungkus head script html yaitu <head>...</head>
Script yang ada didalam tag atau code <head>...</head> adalah script seperti javascript, css, favicon, title(judul), dan meta tag html lainnya yang berguna untuk SEO halaman html.
3. Pembungkus body script html yaitu <body>...</body>
Script yang ada didalam code tersebut adalah script utama halaman html yang akan terlihat ketika halaman html itu di buka.
2. Script Css
Script Css adalah script yang berfungsi untuk mengatur tampilan halaman html kita.
Berikut inilah script css yang kita pakai untuk mengatur halaman Update Corona Berdasarkan Provinsi tersebut.
<style>
.auto_num {counter-reset: serial-number;} .auto_num td:first-child:before {counter-increment: serial-number;content: counter(serial-number); } .tablecovid{ background-color: #fff; box-shadow: 0 7px 16px 0 rgba(50,50,50,0.2); border-radius: 15px; text-align: center;} tr:nth-child(even){background-color: #f2f2f2;}
</style>
Setiap script css yang ada di head pasti harus menggunakan tag atau code <style>...</style>, karena itulah yang menandakan bahwa code yang ada didalam tag tersebut adalah script css.
3. Script Javascript
Javascript inilah yang dapat memanggil data dari API yang kita gunakan dari kawalcorona tersebut.
Lebih tepatnya kita menggunakan Ajax untuk memanggil data dari API tersebut, berikut inilah code javascriptnya.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
async: true,
cache: true,
url: "https://api.kawalcorona.com/indonesia/provinsi/",
success: function (obj) {
for(var i=0;i<obj.length;i++) {
var tr="<tr>";
var auto_num="<td></>";
var td1="<td>"+"<span>"+obj[i].attributes['Provinsi']+"</span>"+"</td>";
var td2="<td>"+obj[i].attributes['Kasus_Posi']+"</td>";
var td3="<td>"+obj[i].attributes['Kasus_Semb']+"</td>";
var td4="<td>"+obj[i].attributes['Kasus_Meni']+"</td></tr>";
$("#dataProv").append(tr+auto_num+td1+td2+td3+td4);
}
}});
});
</script>
4. Script Tabel
Script tabel dibawah inilah yang berfungsi untuk menampilkan data Update Corona Berdasarkan Provinsi yang telah kita panggil dengan javascript tadi.
<div class="tablecovid">
<br>
<table border="1" id="auto_num" align="center" style="border-collapse: collapse; width: 95%;">
<thead>
<tr>
<th valign="center" height="30px" width="10%">
<div align="center">
<b><span>NO</span></b></div>
</th>
<th valign="center" height="30px" width="40%">
<div align="center">
<b><span>Provinsi</span></b></div>
</th>
<th valign="center" height="30px" width="10%">
<div align="center">
<b><span>Positif</span></b></div>
</th>
<th valign="center" height="30px" width="10%">
<div align="center">
<b><span>Sembuh</span></b></div>
</th>
<th valign="center" height="30px" width="10%">
<div align="center">
<b><span>Meninggal</span></b></div>
</th>
</tr>
</thead>
<tbody class="auto_num" id="dataProv">
</tbody></table>
<br />
</div>
Nah sekarang Anda sudah pahamkan tentang script atau source code Update Corona Berdasarkan Provinsi di Indonesia tersebut.
Oleh karena itu sampai disini saja tutorial tentang Cara Menggunakan API Covid-19 Dari Kawalcorona Terbaru dari panduan code.
Semoga apa yang panduancode sampaikan ini dapat bermanfaat untuk Anda.
Akhir kata dari panduan code jangan lupa titik koma.
Sumber Source Code sebelum di sempurnakan oleh panduan code :
https://www.tips-if.id/2020/03/cara-memasang-widget-update-virus-corona.html
Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.