Implementasi Sistem Implementasi Perancangan Antarmuka

BAB 4 IMPLEMENTASI DAN PENGUJIAN Bab ini membahas hasil yang didapatkan dari implementasi dan pengujian sistem dalam melakukan monitoring dan pengendalian suplai air bersih pada kamar mandi 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 pengendalian suplai air bersih 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-3217U CPU 1.80GHz. 2. Sistem Operasi Windows 7 Ultimate 64-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.2.2. Universitas Sumatera Utara

4.2. Implementasi Perancangan Antarmuka

Adapun implementasi perancangan antarmuka pada sistem yang telah dibangun adalah sebagai berikut. 4.2.1. Halaman Utama Tampilan halaman utama merupakan salah satu tampilan yang ada pada aplikasi yang dibangun. Pada halaman utama ini terdapat beberapasubmenu yaitu menugrafik penggunaan air, menu tabel pemakaian air, menu gambar sensor.Tampilan yang akan muncul pada saat membuka halaman utama adalah tampilan sub menu grafik penggunaan air. Adapun beberapa tombol yang ada pada halaman ini, seperti tombol log out bergunauntuk keluar dari halaman web tersebut, dan tombol untuk memperbesar dan memperkecil tampilan grafik pada web tersebut. Tampilan halaman utama dapat dilihat pada Gambar 4.1. Gambar 4.1. Halaman UtamaGrafik Penggunaan Air Universitas Sumatera Utara 4.2.2. Halaman Tabel Pemakaian Air Halaman Tabel Pemakaian Air merupakan halaman dimana penggunadapat melihatdan mencari informasi mengenai hasil pemakaian air, seperti melihat jumlah pemakaian air berdasarkan tanggal dan jam pemakaian air sesuai yang diinginkan oleh pengguna dan akan ditampilkan dalam bentuk tabel. Pada halaman ini terdapat beberapatombol, seperti tombolrefreshyang berguna untuk memperbaharuiinformasi atau jumlah pemakaian air yang terbaru, dan tombol search yang berfungsi untuk mencari informasi sesuai yang dibutuhkan oleh pengguna.Informasi yang dicari ataupun yang dibutuhkan oleh pengguna dapat dilihat berdasarkan tanggal ataupun jam pemakaian air yang terakhir. Halaman tabel pemakaian air dapat dilihat pada Gambar 4.2. Gambar 4.2. Halaman Hasil Tabel Pemakaian Air 4.2.3. Halaman Gambar Sensor HalamanGambar Sensormerupakan salah satu halaman tambahan pada aplikasi yang dibangun, dimana pada halaman inipengguna dapat melihat informasi secara spesifik mengenai sensor yang digunakan dalam pembangunan alat tersebut. Pada halaman ini Universitas Sumatera Utara akan menampilkan gambar sensor yang digunakan, nama sensor serta spesifikasi dari sensor tersebut. Halaman gambar sensor dapat dilihat pada Gambar 4.3. Gambar 4.3. Halaman Gambar Sensor 4.2.4. Tampilan Grafik Penggunaan Air Pada tampilan ini akan menunjukkan jumlah pemakaian air dalam bentuk grafik. Grafik ini digunakan untuk memantau suplai air yang dikeluarkan oleh alat yang dibangun secara real-time sehingga pengguna dapat memantau berapa jumlah air yang terpakai dalam satuan mili liter per detiknya. Tampilan halaman grafik pemakaian airdapat dilihat pada Gambar 4.4. Universitas Sumatera Utara Gambar 4.4. Halaman Grafik Pemakaian air 4.2.5. Tampilan Tabel Pemakaian Air Pada bagian ini akan menampilkan jumlah pemakaian air dalam bentuk tabel. Pada tampilan ini terdapat tombol refresh yang berguna untuk memperbaharui data terbaru mengenai jumlah pemakaian air yang digunakan. Pada bagian ini juga terdapat menu search yang berguna untuk mencari data atau pemakaian air yang kita inginkan berdasarkan waktu maupun pemakaian air yang kita gunakan. Tampilan tabel pemakaian air ini hanya menampilkan jumlah pemakaian air dan waktu pemakaian air. Tampilan tabel pemakaian air dapat dilihat pada Gambar 4.5. Universitas Sumatera Utara Gambar 4.5. Halaman Tabel Pemakaian air 4.2.6. Tampilan Gambar Grafik Penggunaan Air pada Saat Alat Bekerja Pada tampilan ini akan menampilkan grafik jumlah pemakaian air yang terpakai hanya pada saat alat bekerja.Pada tampilan ini grafik akan tampak turun karna adanya interaksi atau pir mendeteksi adanya keberadaan manusia pada ruangan tersebut, sehingga air yang ada pada tabung akan berkurang. Dapat dilihat pada Gambar 4.6. Gambar 4.6 Tampilan Gambar Grafik Penggunaan Air Universitas Sumatera Utara 4.2.7. Tampilan gambar grafik penggunaan air pada saat alat tidak bekerja Tampilan ini merupakan salah satu tampilan grafik penggunaan air pada saat tidak adanya penggunaan pemakaian air atau pada saaat alat tidak bekerja. Grafik akan bergerak lurus secara horizontal apabila tidak adanya air yang keluar dari alat yang dibangun. Tampilan grafik penggunaan air pada saat alat tidak bekerja dapat dilihat pada Gambar 4.7 Gambar 4.7 Tampilan Gambar Grafik Penggunaan Air Pada Saat Alat Tidak Bekerja 4.2.8. Tampilan Tabel Pemakaian Air Tampilan ini merupakan salah satu tampilan jumlah pemakaian air yang ditampilkan dalam bentuk tabel dimana terdapat kolom nomor, pemakaian dan waktupada tampilan ini. Pada tampilan ini terdapat pula tombol refresh yang dimana fungsi tombol tersebut untuk memperbaharui data terbaru dari jumlah pemakaian air yang digunakan. Data yang ditampilkan merupakan data atau jumlah pemakaian air hanya pada saat digunakan saja, atau hanya pada saat alat bekerja dan wifi shield connect ke internet sehingga data tersebut dapat dikirimkan ke dalam web yang telah disediakan. Data tersebut akan ditampilkan sesuai dengan jumlah pemakaiannya dan tanggal pemakaian. Tampilan tabel pemakaian air dapat dilihat pada Gambar 4.8 Universitas Sumatera Utara Gambar 4.8 Tampilan Tabel Pemakaian Air 4.2.9. Tampilan tabel pemakaian air pada saat wifi shield tidak terhubung pada internet Tampilan ini merupakan tampilan tabel pemakaian air pada saat wifi shield tidak connect internet, maka alat akan tetap bekerja namun data pemakaian air akan tetap 0 karna data pemakaian air tidak dapat dikirimkan ke web karna wifi shield yang dihubungkan pada arduino tidak terhubung maupun tidak terhubung dengan internet. Dapat dilihat pada Gambar 4.9 Universitas Sumatera Utara Gambar 4.9 .Tampilan Tabel Pemakaian Air pada saat Wifi Shield Tidak Terhubung dengan Internet

4.3 Pengujian Kinerja Sistem