Implementasi Sistem IMPLEMENTASI DAN PENGUJIAN

BAB 4 IMPLEMENTASI DAN PENGUJIAN

Bab ini membahas hasil yang didapatkan dari implementasi dan pengujian sistem dalam melakukan monitoring dan mendeteksi lokasi kebocoran pada pipa saluran air bersih bawah tanah sesuai dengan analisis dan perancangan yang telah dibahas pada Bab 3.

4.1. Implementasi Sistem

Pada tahap implementasi sistem, monitoring diimplementasikan menggunakan bahasa pemrograman PHP dan untuk mendeteksi letak lokasi kebocoran menggunakan bahasa pemrograman C. 4.1.1. Spesifikasi perangkat keras dan perangkat lunak yang digunakan Spesifikasi perangkat keras dan perangkat lunak yang digunakan pada pembangunan sistem adalah sebagai berikut. 1. Processor Intel Core i3-2330 CPU 1.80GHz. 2. Sistem Operasi Windows 7 Ultimate 32-bit. 3. Memory 2.00 GB RAM DDR3. 4. Kapasitas harddisk 500GB. 5. PHP 5.4.7. 6. Arduino 1.6.1. 7. XAMPP versi 3.1.0. 4.1.2. Implementasi perancangan antarmuka Adapun implementasi perancangan antarmuka pada sistem yang telah dibangun adalah sebagai berikut. Universitas Sumatera Utara 30 Halaman Login Halaman ini merupakan halaman awal saat sistem dijalankan. Pengguna harus melakukan proses login terlebih dahulu untuk menggunakan sistem dengan cara memasukkan username dan password. Halaman login dapat dilihat pada Gambar 4.1. Gambar 4.1. Halaman Login Halaman Forgot Password Halaman ini merupakan halaman yang diakses ketika pengguna tidak mengingat password yang digunakannya. Pengguna akan mengisi email sesuai username yang dimilikinya dan sistem akan mengirimkan password pengguna ke email pengguna. Halaman forgot password dapat dilihat pada Gambar 4.2. Gambar 4.2. Halaman Forgot Password Universitas Sumatera Utara 31 Halaman Utama Setelah user berhasil login, maka user akan masuk ke halaman utama sekaligus halaman dashboard. Pada halaman utama ini terdapat menu-menu yaitu menu dashboard , menu sensor, menu notification, menu history, dan sebuah menu dropdown nama user dengan submenu profile dan log out yang dapat diakses oleh user untuk menggunakan sistem. Pada halaman ini juga terdapat nama logo aplikasi. Halaman utama dapat dilihat pada Gambar 4.3. Gambar 4.3. Halaman Utama Halaman Sensor Halaman sensor merupakan halaman dimana user dapat melihat, menambah, mengedit, menghapus informasi sensor yang digunakan serta melihat dimana letak lokasi sensor yang digunakan. Halaman sensor dapat dilihat pada Gambar 4.4. Universitas Sumatera Utara 32 Gambar 4.4. Halaman Sensor Halaman Notification Halaman notification merupakan halaman untuk melihat detail informasi terjadinya kebocoran berupa informasi waktu, tanggal, hasil deteksi letak lokasi kebocoran, ,melihat dimana letak lokasi sensor yang digunakan serta menghapus notifikasi. Halaman notification dapat dilihat pada Gambar 4.5. Universitas Sumatera Utara 33 Gambar 4.5. Halaman Notification Halaman History Halaman history merupakan halaman untuk melihat data aliran debit air yang telah tersimpan sesuai dengan tanggal yang diinginkan. Halaman history dapat dilihat pada Gambar 4.6. Gambar 4.6. Halaman History Pada halaman history terdapat sebuah form tanggal yang digunakan untuk menentukan data debit air yang ingin dilihat. Setelah tanggal ditentukan, user akan Universitas Sumatera Utara 34 menekan tombol submit. Tombol ini akan memproses halaman history untuk menampilkan data debit air sesuai tanggal dalam bentuk grafik dan menampilkan data kebocoran air yang pernah terjadi dalam rentang waktu tanggal tersebut. Tampilan data debit air sesuai tanggal ini dapat dilihat pada Gambar 4.7. Gambar 4.7. Tampilan Data Debit Air Untuk mencetak halaman ini sebagai laporan, disediakan sebuah tombol print as report di bagian bawah halaman. Tampilan laporan yang akan dicetak dapat dilihat pada Gambar 4.8. Universitas Sumatera Utara 35 Gambar 4.8. Tampilan Laporan Tampilan notifikasi kebocoran Ketika terdeteksi adanya kebocoran, akan tampil sebuah notifikasi berupa notifikasi suara dan notifikasi popup message. Pada notifikasi popup message terdapat sebuah tombol More Details. Fungsi tombol ini adalah untuk melakukan navigasi ke halaman notification melihat informasi kebocoran yang dideteksi secara lebih lengkap dan dapat terlihat pada grafik bahwa ketika terdeteksi adanya kebocoran, grafik akan berwarna merah menandakan adanya penurunan debit air. Halaman tampilan notifikasi kebocoran dapat dilihat pada Gambar 4.9. Gambar 4.9. Tampilan Notifikasi Kebocoran Universitas Sumatera Utara 36 Ketika user menekan tombol More Details, maka user akan berpindah ke halaman notification dan melihat informasi terkait tentang kebocoran yang dideteksi. Halaman notification dapat dilihat pada Gambar 4.10. Gambar 4.10. Tampilan Halaman Notification

4.2. Pengujian Kinerja Sistem