Menampilkan Sebaran Data Covid-19 menggunakan Django Dan API Kawal Corona

​Tak lama ini beredar di internet tentang penyebaran virus Covid-19. Kondisi dan situasi taulah sekarang seperti apa, nah untuk mengetahui sebaran data jumlah pasien yang terindikasi maupun dalam pemantauan, sekolompok komunitas Ethical Hacker Indonesia membuat endpoint API agar bisa digunakan oleh umum guna menyebarkan data realtime.

Pada tutorial ini saya akan mencoba menampilkan data tersebut menggunakan framework Django dari endpoint yang telah disediakan kawalcorona.com .

Pertama-tama kita buat projectnya telebih dahulu.

django-admin.py startproject kawalkorona

Nah, selanjutnya kita perlu module request, gunanya untuk menangkap data API.

pip install requests

Setelah itu kita akan mengkonfigurasi untuk templates kita.

Ohya, apa itu template?

Template adalah file yang berisi HTML dan tidak ada kode Python di dalamnya, sama halnya seperti views di MVC.

Kita edit bagian kawalkorona/settings.py pada bagian ini

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Kita ubah pada DIRS, tambahkan templates

'DIRS': ['templates'],

Nah, perintah diatas adalah bagaimana cara kita membuat template pada Django.

Setelah itu kita akan membuat foldernya bernama templates, lokasinya di root folder project kita.

Berikut struktur direktorinya

D:.
?   db.sqlite3
?   manage.py
?
????kawalkorona
?   ?   asgi.py
?   ?   settings.py
?   ?   urls.py
?   ?   views.py
?   ?   wsgi.py
?   ?   __init__.py
?   ?
?   ????__pycache__
?           settings.cpython-38.pyc
?           urls.cpython-38.pyc
?           views.cpython-38.pyc
?           wsgi.cpython-38.pyc
?           __init__.cpython-38.pyc
?
????templates
        home.html

Setelah itu kita akan mengedit pada bagian kawalkorona/urls.py

Mengubah route kita ke views kita buat nanti.

from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.home, name='home'),
]

Kode diatas adalah kita hanya menambahkan 1 line baris saja. yaitu pada

    path('', views.home, name='home'),

Ohya udah tau belum apa itu uls.py pada django?

urls.py merupakan file yang berisi pemetaan URL ke views atau modul yang ada di dalam Django, misal ketika kita ingin mengakses http://localhost:8000/about maka kita akan diarahkan ke urls.py kemudian dia akan melihat views mana yang akan memproses request tersebut, misal nama views-nya adalah views.about . karena kita udah menginisialisasikan dimodule atas.

Setelah itu kita buat views.py pada folder kawalkorona.

views.py

from django.shortcuts import render
import requests

def home(request):
    response = requests.get('https://api.kawalcorona.com/indonesia/provinsi')
    data = response.json()
    kasus = []
    for o in data:
        datanya = {}
        datanya['provinsi'] = o['attributes']['Provinsi']
        datanya['kasus_positif'] = o['attributes']['Kasus_Posi']
        datanya['kasus_sembuh'] = o['attributes']['Kasus_Semb']
        datanya['kasus_meninggal'] = o['attributes']['Kasus_Meni']
        kasus.append(datanya)
    return render(request, 'home.html', {
        'data': kasus,
    })

Sebelumya apa itu views?

Views adalah kumpulan function di dalam suatu modul yang akan memproses request dan memberikan response, sama halnya seperti controller di MVC .

Penjelasan dari kode diatas,

kita buat fungsi baru bernama home. Sesuai yang tadi kita namai pada urls.py.

Lalu panggil endpoint API pada kawalcorona, disini kita menampilkan sebaran data semua provinsi.

lalu kita looping kita apped(masukkan) ke array, nah disini menggunakan konsep dictionaries pada python.

Setelah itu hasilnya kita return ke home html.

Langkah terakhir kita buat home.html masukkan pada folder template tadi yang kita buat.

home.html

<html>
<head>
	<title>Menampilkan Sebaran Data Covid-19 menggunakan Django Dan API Kawal Corona</title>	
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 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>    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">

</head>
<body>
	<center>
		<h1>Menampilkan Sebaran Data Covid-19 menggunakan Django Dan API Kawal Corona</h1>
	</center>
	<br/>
	<br/>
	<div class="container">
		<table id="example" class="table table-striped table-bordered" style="width:100%">
			<thead>
				<tr>			
					<th>Provinsi</th>
					<th>Kasus Positif</th>
					<th>kasus Sembuh</th>
					<th>kasus Meninggal</th>
				</tr>
			</thead>
			<tbody>
                {% for covid in data %}
				<tr>				
					<td>{{covid.provinsi}}</td>
					<td>{{covid.kasus_positif}}</td>
					<td>{{covid.kasus_sembuh}}</td>
					<td>{{covid.kasus_meninggal}}</td>
                </tr>
                {% endfor %}
			</tbody>
		</table>
    </div>
   
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#example').DataTable();
        } );
    </script>
</body>
</html>

Kita jalankan server menggunakan perintah

python manage.py runserver

Sekarang teman-teman bisa cek hasilnya di browser

maka hasilnya kurang lebih seperti ini.

Baik mungkin cukup sekian dulu dari tutorial sederhana ini,bisa dikembang lebih lanjutnya ya.

Terima kasih semoga bermanfaat.

 

FYI .

ada resource API lain untuk menampilkan sebaran data realtime

- https://github.com/mathdroid/covid-19-api

​