ANALISIS DAN PERANCANGAN
3.5. Perancangan Sistem
3.5.1. Use case diagram
Use case diagram merupakan sebuah model yang menggambarkan kebutuhan sistem dan fungsionalitas yang diharapkan dari suatu sistem dari sudut pandang pengguna sistem. Use case dibuat untuk memudahkan pengguna atau pembaca dalam mengerti alur kerja suatu sistem sehingga sistem dapat digunakan sebaik mungkin. Adapun aktor yang berperan pada sistem yang dibangun ini satu orang aktor yaitu user aplikasi yang akan menggunakan sistemuntuk melakukan monitoring dan mengetahui letak lokasi kebocoran pada pipa aliran air bawah tanah. Rancangan use case sistem dapat dilihat pada Gambar 3.5.
21
Gambar 3.5. Sistem Aplikasi Monitoring
Adapun penjelasan mengenai kegiatan-kegiatan di dalam diagram use case
sistem aplikasi monitoring tersebut dapat dilihat pada Tabel 3.1.
Tabel 3.1. Deskripsi Use Case Sistem Aplikasi Monitoring
No Use Case Deskripsi
1 Login Proses yang harus dilalui user untuk masuk ke dalam sistem.
2 Logout Proses untuk keluar dari sistem dan hanya dapat dilakukan apabila user telah login.
3 Forgot Password Proses yang dilakukan user ketika user tidak mengingat password yang dimilikinya.
4 Dashboard Menampilkan data debit aliran air yang sedang mengalir pada pipa dalam bentuk grafik.
22
Tabel 3.1. Deskripsi Use Case Sistem Aplikasi Monitoring (lanjutan)
No Use Case Deskripsi
5 Sensor Menampilkan Informasi sensor yang digunakan dan dimana letak posisi sensor.
6 Notification Menampilkan detail informasi terjadinya kebocoran. berupa informasi waktu, tanggal, dan hasil deteksi letak lokasi kebocoran.
7 Tambah, Edit, Hapus
Proses untuk menambah, mengedit, ataupun menghapus data seperti data sensor dan notifikasi
8 History Menampilkan form tanggal untuk menentukan data debit air yang ingin dilihat sesuai tanggal
9 Submit Proses untuk menampilkan data debit air sesuai tanggal yang telah ditentukan
10 Data History Menampilkan data debit air dan data kebocoran sesuai tanggal yang telah ditentukan
11 Print as Report Proses untuk mencetak data history sebagai laporan
3.5.2. Perancangan database
Perancangan database pada sistem ini digunakan untuk menyimpan informasi- informasi yang berkaitan dengan sistem aplikasi monitoring dan deteksi letak loaksi kebocoran. Penjelasan mengenai tabel-tabel pada database yang dirancang adalah sebagai berikut :
1. Tabel user, berfungsi sebagai tempat penyimpan data-data yang berhubungan dengan proses login seorang user.
2. Tabel stat_note, berfungsi sebagai tempat penyimpanan status notifikasi. 3. Tabel note, berfungsi sebagai tempat penyimpanan notifikasi.
4. Tabel sensor, berfungsi sebagai tempat penyimpanan detail informasi mengenai sensor yang digunakan.
23
5. Tabel water, berfungsi sebagai tempat penyimpanan detail informasi debit air tiap detik hasil kiriman dari microcontroller arduino.
Adapun database relationship dari database yang dirancang untuk sistem aplikasi
monitoring ini dapat dilihat pada Gambar 3.6.
Gambar 3.6. Database Relationship
3.5.3. Rancangan tampilan antarmuka
Tampilan antarmuka merupakan sebuah desain awal dari antarmuka sistem yang akan dibangun.
Rancangan Halaman Login
Pada halaman login, user harus melakukan proses login dengan mengisikan username
dan password yang sesuai lalu menekan tombol “login” untuk menggunakan sistem.
24
Gambar 3.7. Rancangan Halaman Login
Rancangan Halaman Forgot Password
Pada halaman forgot password, user mengisikan alamat email yang sesuai dengan
username yang dimilikinya. lalu menekan tombol “recover” dan sistem akan mengirimkan password user ke alamat email tersebut. Rancangan halaman forgot password dapat dilihat pada Gambar 3.8.
.
Gambar 3.8. Rancangan Halaman Forgot Password
Rancangan 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. Rancangan halaman utama dapat dilihat pada Gambar 3.9.
25
Gambar 3.9. Rancangan Halaman Utama
Keterangan :
a. Jumlah notifikasi yang belum dilihat oleh user.
b. Menu dropdown yang memungkinkan user untuk mengakses halaman profile
dan untuk keluar dari sistem aplikasi dan kembali ke halaman login.
c. Menu “Dashboard” memungkinkan user untuk mengakses halaman dashboard untuk melihat data aliran debit air yang sedang mengalir pada pipa dalam bentuk grafik.
d. Menu “Sensor” memungkinkan user untuk mengakses halaman sensor untuk melihat informasi sensor yang digunakan.
e. Menu “Notification” memungkinkan user untuk mengakses halaman notification untuk melihat detail informasi terjadinya kebocoran.
f. Menu “History” memungkinkan user untuk mengkases halaman history untuk melihat data aliran debit air yang telah tersimpan.
Rancangan Halaman Sensor
Halaman sensor akan muncul apabila user memilih menu sensor. Di halaman ini user
dapat melihat, menambah, mengedit, menghapus informasi sensor yang digunakan serta melihat dimana letak lokasi sensor yang digunakan. Rancangan halaman sensor dapat dilihat pada Gambar 3.10.
26
Gambar 3.10. Rancangan Halaman Sensor
Keterangan:
a. Tabel informasi sensor yang digunakan dan memungkinkan user untuk menambah, mengubah, menghapus informasi sensor serta dapat melihat letak lokasi sensor yang digunakan melalui tombol “show maps”.
b. Form “insert” atau “update” yang memungkinkan user menambah atau mengubah informasi sensor.
c. Halaman “map” yang memungkinkan user untuk melihat letak lokasi sensor melalui map.
Rancangan Halaman Notification
Halaman notification akan muncul apabila user memilih menu notificaiton. Di halaman ini, user dapat melihat detail informasi terjadinya kebocoran berupa informasi waktu, tanggal, hasil deteksi letak lokasi kebocoran, serta menghapus notifikasi. Rancangan halaman notification dapat dilihat pada Gambar 3.11.
27
Gambar 3.11. Rancangan Halaman Notification
Keterangan:
a. Tabel detail informasi terjadinya kebocoran berupa informasi waktu, tanggal, hasil deteksi letak lokasi kebocoran dan memungkinkan user untuk melihat letak lokasi sensor yang mendeteksi kebocoran serta menghapus notifikasi.
Rancangan Halaman History
Halaman history akan muncul apabila user memilih menu history. Di halaman ini,
user dapat melihat data aliran debit air yang telah tersimpan sesuai dengan tanggal yang diinginkan. Rancangan halaman history dapat dilihat pada Gambar 3.12.
28
Gambar 3.12. Rancangan Halaman History
Keterangan:
a. Form tanggal yang memungkinkan user untuk menentukan data aliran debit air pada tanggal berapa yang ingin dilihat.
b. Grafik data aliran debit air yang memungkinkan user untuk melihat data aliran debit air sesuai tanggal yang telah ditentukan.
c. Tabel data kebocoran debit air yang memungkinkan user untuk melihat data kebocoran yang pernah terjadi dalam rentang tanggal tertentu.
d. Tombol ”Print as report” yang memungkinkan user untuk mencetak grafik dan data kebocoran debit air yang pernah terjadi sebagai laporan.
BAB 4