About Contact Disclaimer Privacy Policy
.web.id Just My Simple Artwork

Cara Menampilkan Data Realtime COVID-19 Menggunakan Javascript

Share Share Share

Cara Menampilkan Data Realtime COVID-19 Menggunakan Javascript – Beberapa bulan terakhir, Indonesia dan dunia sedang berjuang hebat mengahadapi pandemi virus corona (Covid-19). Banyak cara yang dapat kita lakukan untuk ikut membantu, salah satunya dengan membagikan informasi perkembangan kasus Covid-19 di Indonesia. Dengan turut membagikan informasi semacam ini, saya rasa itu akan sangat bermanfaat. Saat ini telah terdapat banyak situs web terpercaya yang menampilkan perkembangan kasus covid 19 di Indonesia contohnya seperti yang ada pada situs : https://covid19.go.id/.

Bagi kalian yang ingin ikut menampilkan informasi perkembangan kasus covid-19 di Indonesia melalui situs web, kalian dapat memanfaatkan teknologi “Fetch” pada Javascript serta API Data Covid-19 yang telah disediakan oleh orang-orang baik. Berikut caranya !

 

API Data Covid-19 Indonesia

Untuk datanya, kita memerlukan sumber yang benar dan akurat. Ada beberapa Web API yang menyediakan data realtime kasus covid-19 di indonesia, salah satu yang saya temukan adalah API milik mathdroid yang saya rasa datanya benar dan akurat karena bersumber dari data global covid-19 milik esri.

adapun endpoint yang akan kita gunakan adalah sebagai berikut :

Ringkasan kasus Covid-19 seluruh Indonesia : https://indonesia-covid-19.mathdro.id/api

Data Kasus Covid-19 per-Provinsi : https://indonesia-covid-19.mathdro.id/api/provinsi

Untuk mengambil data dari API tersebut kita akan memanfaatkan fungsi fetch() pada javascript. Fungsi inilah yang akan menangani metode request data dari layanan API.

 

Membuat Halaman HTML

Pertama kita akan membuat sebuah halaman HTML dengan nama “index.html”. Data covid-19 nantinya akan kita tampilkan pada halaman ini.

<html>
<head>
    <title>Data Covid 19</title>
</head>
<body>
    <h1>DATA COVID 19 INDONESIA</h1>
            
    Positif : <span id="data-positif"></span> <br>
    Sembuh : <span id="data-sembuh"></span> <br>
    Meninggal : <span id="data-meninggal"></span><br>
    
    <table border="1" id="table-provinsi">
        
    </table>

</body>
</html>

di atas adalah contoh halaman HTML sederhana untuk menampilkan data yang kita ambil dari API. Jika mau, kalian dapat mengubah tampilannya agar menjadi lebih menarik.

 

Membuat File api.js

Sekarang kita buat sebuah file baru dengan nama “api.js” pada folder yang sama dengan file “index.html”. File ini bertugas untuk mengambil data dari API sebelum ditampilkan pada halaman “index.html”. Nah, method fetch() yang sebelumnya sudah kita singgung sedikit akan diletakkan di dalam file ini :

function getDataIndonesia() {
    fetch('https://indonesia-covid-19.mathdro.id/api')
    .then(response => response.json())
    .then(data => {
        console.log(data)

        let positif = data.jumlahKasus
        let sembuh = data.sembuh
        let meninggal = data.meninggal
        
        document.getElementById("data-positif").innerHTML = positif
        document.getElementById("data-sembuh").innerHTML = sembuh
        document.getElementById("data-meninggal").innerHTML = meninggal  
    })
    .catch(err => {
        console.log(err)
    });
}

Perhatikan pada bagian fetch(). pada baris ini kita akan mengambil data dari endpoint https://indonesia-covid-19.mathdro.id/api/. Data yang telah didapat, masing-masingnya akan ditampilkan pada element dengan id “data-positif”, “data-sembuh”, dan “data-meninggal” yang ada di halaman “index.html”

 

Kemudian buka kembali file “index.html”. Tambahkan kode berikut tepat di atas tag </body> di dalam file “index.html”

<script src="api.js"></script>  
<script>
    document.addEventListener("DOMContentLoaded", function() {
        getDataIndonesia();
    })
</script>

kode di atas digunakan untuk memuat file “api.js” ke dalam file “index.html”. Perhatikan pada blok event DOMContentLoaded, di bagian ini kita menjalankan method getDataIndonesia() setelah seluruh halaman selesai dimuat. Simpan file ini.

 

Sekarang kita coba jalankan file “index.html” melalui browser. Jika berhasil, data realtime Covid-19 di Indonesia akan ditampilkan pada halaman ini. Untuk keakuratan data, kalian dapat mengeceknya sendiri dengan melihat situs-situs resmi yang juga menayangkan data kasus covid-19, misalnya https://covid19.go.id/. Bandingkan data yang ditampilkan, sama bukan? tentu saja.

Cara Menampilkan Data Realtime COVID-19

 

Menampilkan Data per-Provinsi

Sekarang kita akan mencoba menampilkan data kasus covid-19 di indonesia berdasarkan masing-masing Provinsi, caranya tak jauh berbeda. Pada file “api.js” tambahkan method berikut :

function getDataProvinsi() {

    let dataProvinsi = "<tr><th>Provinsi</th><th>Positif</th><th>Sembuh</th><th>Meninggal</th></tr>";

    fetch('https://indonesia-covid-19.mathdro.id/api/provinsi')
    .then(response => response.json())
    .then(data => {
        console.log(data)
        data.data.forEach(function(item) {
            dataProvinsi += '<tr>'
            dataProvinsi += '<td>'+ item.provinsi + '</td>'
            dataProvinsi += '<td>'+ item.kasusPosi + '</td>'
            dataProvinsi += '<td>'+ item.kasusSemb + '</td>'
            dataProvinsi += '<td>'+ item.kasusMeni + '</td>'
            dataProvinsi += '</tr>'
        })

        document.getElementById("table-provinsi").innerHTML = dataProvinsi
    })
    .catch(err => {
        console.log(err)
    });
}

Pada method getDataProvinsi kita juga menggunakan fetch(), hanya saja endpointnya berbeda dengan sebelumnya. Kali ini endpointnya kita arahkan ke https://indonesia-covid-19.mathdro.id/api/provinsi untuk mengambil data kasus covid-19 per-provinsinya.

 

Langkah terakhir, jalankan juga method getDataProvinsi Pada file “index.html”. Ubah blok DOMContentLoaded menjadi seperti berikut :

document.addEventListener("DOMContentLoaded", function() {
    getDataIndonesia();
    getDataProvinsi();
})

Sekarang, coba kalian jalankan kembali file “index.html” melalui browser. Data sebaran covid-19 berdasarkan provinsi akan ditampilkan secara realtime !

Cara Menampilkan Data Realtime COVID-19

Selesai ! begitulah Cara Menampilkan Data Realtime COVID-19 Menggunakan Javascript. Hanya dengan memanfaatkan fungsi fetch() dan API, kita sudah dapat menampilkan informasi kasus covid-19 di indonesia. Jika ada yang perlu kalian tanyakan tentang tulisan ini, silahkan diskusikan melalui kolom komentar di bawah artikel ini, ya. semoga bermanfaat.



Share Share Share


Muhammad Niko

Hi!, saya adalah lulusan S1 Sistem Informasi yang memiliki minat tinggi terhadap Web Development. Belajar tentang Web Development adalah bagian dari hobi saya, sedangkan IT Technical Support adalah pekerjaan saya sehari-hari.

Leave a Reply

Your email address will not be published. Required fields are marked *

10 Comments


  • Minta Saran says:

    Pak saya praktekan ini keweb api lain kok ndak bisa yah pak, mohon sarannya… saya sudah kirim email kebapak…

  • Rafliano ZA says:

    Pak, bagaimana cara menampilkan data corona di hanya satu provinsi? Contohnya hanya menampilkan data corona jakarta

  • maizul fairuzi says:

    kalo mengguanakan fitur pencarian per-provinsi bagaimana mas?? saya sudah erulang kali mencobanya tetap saja error

  • Maba Ilkom says:

    Terimakasih ilmunya mas, sangat bermanfaat sekali buat mengerjakan tugas saya πŸ˜€

  • Nan says:

    Maaf, mas.
    Saya boleh minta penjelasan tentang
    “data.data.forEach(function(item)” dan “dataProvinsi +=” ?
    Saya sedikit kesulitan mempraktekan code ini karena web api yang dijadikan contoh sudah tidak aktif.
    Terima kasih.

    • hi, maaf baru bisa jawab ya..
      β€œdata.data.forEach(function(item)” itu buat looping data json dari API. itemnya mengikuti return data json dari APInya, coba diliat api yg kamu pakai itu return jsonnya seperti apa, tinggal disesuaikan.
      “dataProvinsi +=” itu maksudnya buat menggabungkan value baru ke value yg ada di dalam variable dataProvinsi. Contoh lain :
      gabungText = ‘mohon’
      gabungText += ‘ Maaf’
      maka saat variabel gabungText ditampilkan akan menghasilkan text “mohon Maaf”. gituuu.