Implementasi Sistem Implementasi Perancangan Antar Muka

BAB 4 IMPLEMENTASI DAN PENGUJIAN

Setelah melakukan analisis dan perancangan sistem selanjutnya dilakukan implementasi. Pada bab ini akan membahas tentang hasil yang diperoleh setelah melakukan implementasi.

4.1 Implementasi Sistem

Dalam penelitian ini, penerapan metode Web Scraping dilakukan dengan menggunakan bahasa pemograman PHP, metode Naïve Bayes menggunakan bahasa pemrograman Python, sedangkan untuk antarmuka menggunakan HTML beserta Javascript. 4.1.1 Konfigurasi Perangkat Keras Spesifikasi perangkat keras yang digunakan untuk membangun sistem ini dan agar pengujian dapat berjalan dengan baik, penelitian ini menggunakan lima unit mini komputer raspberry pi 2 dengan spesifikasi perangkat keras yang dapat dilihat pada tabel 4.1. Tabel 4. 1 Konfigurasi perangkat keras yang digunakan No. Jenis Komponen Komponen yang digunakan 1. SoC Broadcom BCM2836 2. CPU 900 MHz quad-core ARM Cortex A7 ARMv7 3. Kartu Grafis - 4. Storage 16GB Sandisk Ultra Class 10 Memory Card 5. Network 10100Mbps Ethernet Universitas Sumatera Utara 4.1.2 Konfigurasi Perangkat Lunak Konfigurasi Perangkat Lunak yang digunakan pada penelitian ini, baik saat proses implementasi maupun pengujian dapat dilihat pada tabel 4.2. Tabel 4. 2Konfigurasi perangkat lunak yang digunakan No. Jenis Software Software yang digunakan 1. Sistem Operasi Microsoft® Windows 10 Pro 64bit 2. Sistem Operasi Server Raspbian Jessie 3. Browser Min. Chrome v42 4. IDE Sublime Text Editor 5. Library SciPy dan NumPy 6. Python Version Python 2.7.12 atau 3.5.1

4.2 Implementasi Perancangan Antar Muka

Berikut akan dijelaskan tampilan dari aplikasi yang dibangun. Pada aplikasi ini, hanya memiliki dua buah tampilan, yaitu tampilan informasi kualitas udara dan halaman informasi mengenai kesehatan terkait pencemaran udara.. Kedua tampilan tersebut dibangun dengan menggunakan bahasa pemograman HTML dan didukung dengan Javascript. Berikut merupakan hasil implementasi dari perancangan yang telah dilakukan : 4.2.1 Tampilan Halaman Informasi Kualitas Udara Hasil dari implementasi berdasarkan rancangan yang dilakukan bab 3 dimana Tampilan halaman Informasi Kualitas Udara dapat dilihat pada Gambar 4.1. Universitas Sumatera Utara Gambar 4. 1 Tampilan halaman utama Kualitas Udara Pada tampilan halaman Informasi kualitas udara, terdapat kotak panel informasi nilai AQI Air Quality Index yang berisi kondisi udara pada saat sekarang didalam kotak yang akan berubah warna sesuai dengan kualitas udara pada saat tersebut. Di dalam panel terdapat kondisi cuaca, suhu, waktu terakhir ketika sistem melakukan update data dan sebuah tombol berwarna biru yang akan menampilkan sebuah dialog untuk menjelaskan indikator warna kualitas udara seperti pada gambar 4.2. Kemudian di dalam halaman yang sama terdapat panel yang berisi tabel nilai konsentrasi dari beberapa parameter polutan. Dan informasi cuaca yang lebih detail dari panel sebelumnya. Lalu dibawah kedua panel terdapat sebuah box yang menampilkan grafik perubahan nilai AQI selama 24 jam terakhir. Grafik tersebut Universitas Sumatera Utara menggambarkan beberapa nilai polutan dan perubahan yang terjadi setiap jam selama proses monitoring. Gambar 4. 2 Tampilan dialog indikator kualitas udara 4.2.2 Tampilan Halaman Informasi Health Concern Selain untuk memberikan gambaran umum tentang nilai kualitas udara pada saat sekarang, user juga membutuhkan informasi yang dapat memberikan pemahaman mengenai bahaya dan dampak dari pencemaran udara pada kesehatan tubuh seperti terdapat pada gambar 4.3. Pada halaman ini, user diberikan sebuah form sederhana berisi dua buah combobox, yang pertama untuk memilih jenis polutan dan yang kedua untuk memilih ambang batas berdasarkan level AQI seperti yang dapat dilihat pada gambar 4.4. Universitas Sumatera Utara Gambar 4. 4 Form Untuk memilih Jenis Polutan dan Level Batas Lalu terdapat sebuah tombol untuk memproses request dari user sehingga ditampilkan informasi mengenai polusi dan dampaknya bagi kesehatan. Ketika tombol di klik, maka tabel disebelah form akan terisi informasi seperti pada gambar 4.5. Gambar 4. 3 Tampilan halaman informasi Health Concern Universitas Sumatera Utara

4.3 Pengujian Sistem