MASIGNASUKAv102
7345699749361123385

Cara Menampilkan Data Update Covid-19 Indonesia Di Website

Cara Menampilkan Data Update Covid-19 Indonesia Di Website
Add Comments
24 March 2020
Data covid-19 di blogspot

Menampilkan Data Covid-19 Di Website - Covid-19, wabah virus yang kini menghantui manusia di muka bumi. Bagaimana tidak, covid-19 atau yang akrab disebut virus corona ini cepat sekali penyebarannya. Covid-19 atau virus corona juga mudah sekali mencari korban jiwa. Sejak artikel ini ditulis, sebanyak 378.679 orang di dunia telah positif corona, 100.985 telah sembuh dan sebanyak 16.572 orang telah meninggal karena virus corona.

Di Indonesia sendiri, covid-19 atau virus corona ini telah menghinggapi 579 orang dengan total sembuh 30 orang dan meninggal 49 orang.  Angka-angka tersebut diperkirakan akan terus bertambah mengingat vaksin tersebut belum ditemukan.

Dengan latar belakang ini, Informasi-informasi mengenai jumlah korban corona sangat diperlukan. Informasi-informasi korban corona antara lain seperti yang ada pada widget kulo.online atau yang ada pada halaman https://www.kulo.online/p/corona.html.

Di artikel ini Kulo akan membagikan bagaimana cara menampilkan data update covid-19 atau corona Indonesia pada website. Di percobaan ini, Kulo mempraktikkannya pada blogspot.

Untuk menampilkan data covid-19 atau corona dengan style marque seperti pada widget kulo.online, kamu bisa menggunakan script atau source code seperti di bawah ini.

<!doctype html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<script>
$(document).ready(function(){
var d = new Date();
$("#date").html(d.getDate() + "/" + (d.getMonth()+1+ "/" + d.getFullYear());
    $.ajax({url"https://api.kawalcorona.com/indonesia/"successfunction(result){
     $("#positif").html(result[0].positif + " orang");
     $("#sembuh").html(result[0].sembuh + " orang");
     $("#meninggal").html(result[0].meninggal + " orang");
    }});
});
</script>
<div class="card bg-info text-white shadow">
    <div class="card-body">
        <marquee behavior="" direction="left">Data Covid-19 Indonesia per tanggal
<span id="date"></span> | Positif: <span id='positif'></span> | Sembuh:
<span id="sembuh"></span> | Meninggal: <span id="meninggal"></span></marquee>
     
    </div>
  </div>
      </!doctype>

Jika diterapkan di blogspot kamu bisa masuk ke Tata Letak, di widget sidebar pilih Tambahkan Gadget dengan tipe Gadget HTML/Javascript.

Atau jika ingin menampilkan data covid-19 atau corona Indonesia seperti disini kamu bisa menggunakan script atau source code seperti di bawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">

<script>
$(document).ready(function(){
var d = new Date();
$("#date").html(d.getDate() + "/" + (d.getMonth()+1+ "/" + d.getFullYear());
    $.ajax({url"https://api.kawalcorona.com/indonesia/"successfunction(result){
     $("#positif").html(result[0].positif + " orang");
     $("#sembuh").html(result[0].sembuh + " orang");
     $("#meninggal").html(result[0].meninggal + " orang");
    }});
});

</script>

</head>

<body id="page-top">
  <div id="wrapper">
    <div id="content-wrapper" class="d-flex flex-column">
      <div id="content">
        <div class="container-fluid">
          <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">Data Covid-19 Indonesia</h1>
          </div>
          <div class="row">
            <div class="col-xl-4 col-md-6 mb-4">
              <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                  <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Positif</div>
<div class="h5 mb-0 font-weight-bold text-gray-800"><span id="terjangkit"></span>
</div>
                    </div>
                    <div class="col-auto">
                      <i class="fas fa-calendar fa-2x text-gray-300"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-4 col-md-6 mb-4">
              <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                  <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">Sembuh</div>
<div class="h5 mb-0 font-weight-bold text-gray-800"><span id="sembuh"></span> </div>
                    </div>
                    <div class="col-auto">
                      <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-4 col-md-6 mb-4">
              <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                  <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Meninggal
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800"><span id="meninggal"></span>
</div>
                    </div>
                    <div class="col-auto">
                      <i class="fas fa-comments fa-2x text-gray-300"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Jika diterapkan di blogspot seperti yang ada pada halaman kulo.online atau seperti yang ada pada tampilan ini https://www.kulo.online/p/corona.html , kamu bisa masuk ke menu halaman kemudian pilih halaman baru atau tambah halaman kemudian pilih tipe HTML dan masukkan source code di atas.

Untuk menampilkan data covid-19 atau virus corona secara update, kamu bisa menggunakan API dari kawalcorona.com.

Data covid-19 di blogspot

Ada beberapa data covid-19 atau virus corona yang bisa ditampilkan dari situs kawal corona, antara lain:
1. Data covid-19 Indonesia
Untuk menampilkan data covid-19 Indonesia, kita bisa menggunakan API
https://api.kawalcorona.com/indonesia

2. Data covid-19 Indonesia Berdasarkan Provinsi
Untuk menampilkan data covid-19 atau virus corona Indonesia berdasarkan provinsi bisa menggunakan API
https://api.kawalcorona.com/indonesia/provinsi

3. Data covid-19 Global
Untuk data covid-19 Global bisa menggunakan API
https://api.kawalcorona.com/

4. Data covid-19 Global (Positif)
https://api.kawalcorona.com/positif

5. Data covid-19 Global (Sembuh)
https://api.kawalcorona.com/sembuh

6. Data covid-19 Global (Meninggal)
https://api.kawalcorona.com/meninggal


Referensi:
Hilmi Hidayat

"If something's important enough, you should try. Even if you - the probable outcome is failure." - Elon Musk