Sabtu, 20 Juni 2020

Implementasi Sistem 3-Tier (Membuat Web Tracking Covid-19 Menggunakan API)

Pemrograman Basis Data




A. Pengertian Virus Corona

Coronavirus adalah kumpulan virus yang bisa menginfeksi sistem pernapasan. Pada banyak kasus, virus ini hanya menyebabkan infeksi pernapasan ringan, seperti flu. Namun, virus ini juga bisa menyebabkan infeksi pernapasan berat, seperti infeksi paru-paru (pneumonia). Selain virus SARS-CoV-2 atau virus Corona, virus yang juga termasuk dalam kelompok ini adalah virus penyebab Severe Acute Respiratory Syndrome (SARS) dan virus penyebab Middle-East Respiratory Syndrome (MERS). Meski disebabkan oleh virus dari kelompok yang sama, yaitu coronavirus, COVID-19 memiliki beberapa perbedaan dengan SARS dan MERS, antara lain dalam hal kecepatan penyebaran dan keparahan gejala. 

B. Pengertian Restful API

RESTful API / REST API merupakan implementasi dari API (Application Programming Interface).REST (Representional State Transfer) adalah suatu arsitektur metode komunikasi yang menggunakan protokol HTTP untuk pertukaran data dan metode ini sering diterapkan dalam pengembangan aplikasi. Dimana tujuannya adalah untuk menjadikan sistem yang memiliki performa yang baik, cepat dan mudah untuk di kembangkan (scale) terutama dalam pertukaran dan komunikasi data. 

C. Pengerian Arsitektur 3-Tier
Three Tier-System atau bisa disebut Multitier architecture, merupakan sebuah tipe dalam arsitektur software yang terdiri dari tiga layer dari komponen logic yang saling berkaitan. Three Tier-System lebih dikenal dengan konsep Client Server Programming, dan biasa digunakan dalam aplikasi, dikarenakan memiliki keuntungan tersendiri dalam penggunaannya, menyediakan User Interface yang memudahkan client, fleksibilitas dalam akses ke server dan Database, serta keuntungan dalam proses pembuatan dan pengembangan sebuah aplikasi.



D. Implementasi Sistem 3-Tier (Studi Kasus Data Covid19 dengan Konsep JSON)

1. Langkah pertama yaitu saya membuat sebuah folder,yang akan saya gunakan untuk menyimpan hasil projectyang akan saya buat, Disini saya membuat dengan nama folder covid19 yang diletakan didalam folder xampp/htdocs, lalu siapkan komponen yang akan saya butuhkan untuk membuat projek seperti text editor dan webserver. Saya menggunakan text editor Microsoft Visual Studio Code dan WebServer menggunakan apache yang terdapat pada aplikasi XAMPP. 

2. Langkah kedua, saya siapkan data API mengenai covid 19, data API biasanya berupa JSON yang berisikan data-data Array yang terupdate secara realtime. Disini saya menggunakan beberapa alamat website yang menyediakan data API terkait covid19 seperti berikut ini. 

https://api.covid19api.com/summary (Data API corona seluruh dunia). 

3. Langkah ketiga, setelah komponen/bahan dalam pembuatan aplikasi sudah lengkap selanjutnya saya akan langsung coding/proses pembuatan aplikasi untuk tampilan awal yang biasa nya file tersebut saya beri dengan nama index.php. seperti gambar dibawah ini. Disini saya juga menggunakan CSS native, bootstrap 4 serta JQuery untuk memperindah dan membuat rapih tampilan pada halaman web saya. 


4. Pada tahap keempat ini, saya akan membuat sebuah navbar yang menampilkan menu pilihan pada halaman website saya. Pada file index.php code yang saya gunakan seperti gambar dibawah ini. 

Hasilnya sebagai berikut.


5. Selanjutnya saya akan membuat menu tampilan beranda yang berisikan sebuah tampilan pembuka dan menampilkan data covid terkini yang ada di Indonesia. Pada file index.php, code yang saya gunakan seperti gambar dibawah ini. 

 


Hasilnya sebagai berikut.


 
 

6. Pada langkah keenam ini saya akan menjelaskan bagaimana cara mengambil data API dari sebuah website, terdapat 2 cara yang saya gunakan untuk pengambilan data API yaitu: 

a. Menggunakan command php yaitu file_get_contents(‘Alamat url data API’) untuk mengambil alamat url yang berisikan data API, kemudian menggunakan command php json_decode() untuk mengambil data dari url yang sudah saya ambil menggunakan command php file_get_contents(). 

b. Menggunakan jQuery.ajax(); 

7. Langkah ketujuh yaitu saya membuat tampilan cara pencegahan penularan virus corona. Pada file index.php, code yang saya gunakan seperti gambar dibawah ini. 

 
 


Hasilnya sebagai berikut.

 

8. Langkah ke delapan ini saya akan membuat tampilan data virus corona untuk seluruh negara/dunia dan ada yang berupa tabel untuk masing-masing negara. Sebelumnya pada langkah keenam sudah saya jelaskan bagaimana cara memanggil data API, nah pada langkah ini saya akan mencoba untuk memanggilanya menggunakan command php file_get_contents() dan json_decode(). Pada file index.php, code yang saya gunakan adalah seperti gambar dibawah ini. 

 


Hasilnya sebagai berikut.



9. Selanjutnya saya akan membuat tampilan data virus corona untuk masing-masing provinsi yang disajikan dalam berupa tabel. pada langkah ini saya akan mencoba untuk memanggilanya menggunakan command php file_get_contents() dan json_decode(). Pada file index.php, code yang saya gunakan adalah seperti gambar dibawah ini. 

 

Hasilnya sebagai berikut.
 



10. Langkah ke sepeluh ini saya akan memanggil data API virus corona untuk tampilan menu beranda yang menampilkan informasi data virus corona di negara Indonesia, Sebelumnya pada langkah keenam sudah saya jelaskan bagaimana cara memanggil data API, pada langkah ini kita akan mencoba memanggilnya menggunakan jQuery.ajax(). Pada file index.php, code yang saya gunakan adalah sebagai berikut. 

 

Hasilnya merupakan tampilan beranda yang menampilan covid terkini di negera Indonesia seperti gambar dibawah ini.

 

11. Langkah ke sebelas yaitu kita akan membuat footer untuk tampilan halaman website saya. Pada file index.php, code yang saya gunakan seperti gambar dibawah ini. 

 

Hasilnya sebagai berikut.
 

12. Pada langkah terakhir yaitu saya akan menjalankan project yang sudah saya buat menggunakan webserver apache yang terdapat pada aplikasi XAMPP, saya akan menghidupkan apache dan mysql yang terdapat pada XAMPP seperti gambar dibawah ini.

 

Kemudian kita buka bowser kita, lalu kita jalankan file index.php dengan mengetikkan pada url : localhost:8090/covid19/, maka akan memunculkan hasil dari aplikasi yang sudah dibuat. Cukup sekian cara implementasi sistem 3-Tier pada aplikasi web tracking covid-19 menggunakan API, kurang lebih saya mohon maaf dan mohon kiritakan dan saran yang bersifat membangun untuk saya. Terimakasih.
Previous Post
Next Post

0 komentar: