29
BAB III
PEMBAHASAN
3.1. Tinjauan Desa
BumDes merupakan salah satu bentuk usaha atau sebuah kegiatan yang di
dalamnya dapat menghasilkan penghasilan, yang mana penghasilan tersebut akan
masuk ke dalam penghasilan desa. Dalam tinjauan instansi ini akan dibahas mengenai
BumDes yang bergerak pada pengelolaan sarana air bersih atau yang sering disebut
Program Nasiolan Penyediaan Air Minum dan Sanitasi Berbasis Masyarakat
(PAMSIMAS). Berikut adalah sejarah, visi-misi dan struktur organisasi pada BumDes
yang mengelola sarana air bersih yang ada di Desa Kebocoran Kecamatan
Kedungbanteng.
3.1.1. Sejarah PAMSIMAS
Awal mula berdirinya PAMSIMAS di Desa Kebocoran yaitu adanya sebuah
mata air yang terdapat di Desa tersebut. Yang mana mata air tersebut sangat banyak
menghasilkan air. Mata air tersebut dari dulu mampu mengairi sawah-sawah dan
kolam-kolam ikan yang ada di sekitarnya. Pada akhirnya sampai ada perusahaan air
minum yang akan membayarnya untuk dijadikan sebuah bahan untuk air minum
kemasan.
Setelah ada petemuan antara pihak air minum dan kepala desa pada waktu itu.
Akhirnya kepala desa dan warga sepakat untuk tidak menerima perusahaan air minum
tersebut. Dan pada akhirnya mata air tersebut dikelola sendiri oleh pihak desa. Sudah
satu tahun yang lalu, mulai dibuatkan bak yang sangat besar, untuk menampung akhir
yang keluar dari mata air tersebut, yang nantinya akan di alirkan ke warga.
30
Berikut adalah visi dan misi PAMSIMAS:
1. Visi
Terciptanya masyarakat yang sejahtera, bersih dan terpenuhinya kebutuhan air
untuk masyarakat Desa Kebocoran.
2. Misi
a. Meningkatkan kesejahteraan masyarakat.
b. Menciptakan lingkungan yang bersih dan sehat.
c. Memenuhi kebutuhan masyarakat dengan adanya air bersih.
d. Menciptakan masyarakat agar peduli dengan lingkungan.
e. Mencukupi kebutuhan air masyarakat dengan biaya yang terjangkau
3.1.2. Struktur Organisasi dan Fungsi
Struktur organisasi merupakan sebuah kerangka untuk menjalankan fungsi dari
organisasi tersebut. Dengan adanya struktur organisasi maka suatu organisasi akan
menjadi tertib dan teratur karena jabatan atau posisi yang ada akan ditempati oleh
orang-orang yang ahli dalam bidangnya. Dengan struktur organisasi yang ada,
BumDes Desa Kebocoran Kecamatan Kedungbanteng dapat menjalankan visi dan
misinya dengan baik untuk kemajuan pada masa yang akan datang.
31
Struktur organisasi BumDes Desa Kebocoran sebagai berikut:
Gambar III. 1. Struktur Organisasi BumDes Desa Kebocoran
Kedudukan, Tugas dan Fungsi dari masing-masing bagian sebagai berikut:
1. Kasi Pemberdayaan
Tugas: Yang mempunyai kekuasaan tentang BumDes yang ada di Desa
Kebocoran.
2. Ketua BumDes
Tugas: Yang mengatur adanya BumDes dan mengelolanya.
3. Ketua PAMSIMAS
Tugas: Yang mengelola pengelolaan sarana air bersih yang ada di Desa
Kebocoran.
4. Sekretaris PAMSIMAS
Tugas: Yang menulis semua data pelanggan yang memasang air bersih.
32
5. Bendahara PAMSIMAS
Tugas: Yang memegang uang setoran dari petugas penarik.
6. Petugas PAMSIMAS
Tugas: Yang menagih tagihan bulanan pelanggan setiap bulan.
3.2. Analisa Kebutuhan
3.2.1. Analisa Kebutuhan Pengguna
Melalui website dan aplikasi android pengelolaan pembayaran sarana air bersih
di Desa Kebocoran, memudahkan pengelola dan masyarakat dalam proses
pembayaran dan juga pengecekan penggunaan air yang terpakai. Dengan adanya
website tersebut, pengelola lebih mudah dalam mengelola data dan laporan. Berikut
kebutuhan pengguna dari sistem informasi pengelola sarana air bersih berbasis
website.
1. Admin
a. Admin dapat melakukan login admin.
b. Admin dapat mengelola semua isi website meliputi menambah, mengedit
dan menghapus data.
c. Admin dapat melakukan transaksi pembayaran.
d. Admin dapat mencetak semua laporan, meliputi laporan data petugas,
laporan data pelanggan dan laporan pembayaran.
e. Admin dapat mengelola database website tersebut.
2. Petugas
a. Petugas dapat melakukan login petugas sesuai wilayah masing-masing.
b. Petugas dapat melakukan transaksi pembayaran sesuai dengan wilayah
masing-masing.
33
c. Petugas dapat mencetak laporan pembayaran.
3. Pelanggan
a. Pelanggan dapat melakukan login pelanggan.
b. Pelanggan dapat mengecek tagihan sebelum petugas datang.
c. Pelanggan dapat mencetak laporan pembayaran.
3.2.2. Analisa Kebutuhan Sistem
Website sistem informasi pengelola sarana air bersih Desa Kebocoran memiliki
kebutuhan sistem sebagai berikut:
1. Data
Data merupakan sebuah file yang digunakan untuk mempermudah dalam
pembuatan website. Data-data yang dibutuhkan untuk dapat diolah adalah:
a. Data Admin
Data admin diperoleh dari petugas pengelola sarana air bersih atau
PAMSIMAS yang ditugaskan sebagai admin. Admin bertugas mengelola
website , yang di dalamnya terdapat data-data dan laporan.
b. Data Petugas
Data petugas terdiri dari daftar petugas yang sudah ditugaskan setiap
wilayah Desa Kebocoran, untuk melakukan penagihan bulanan.
c. Data Pelanggan
Data pelanggan diperoleh dari data warga yang memasang alat meteran air
bersih.
d. Data Transaksi
Data transaksi yaitu data perhitungan untuk menentukan biaya atau
pembayaran yang dikenakan oleh pelanggan.
34
2. Hak Akses
Sistem informasi pengelola sarana air bersih dibuat untuk dapat di akses
pengguna. Pengguna akan memperoleh menu sesuai dengan hak aksesnya. Hak akses
tersebut yaitu:
a. Admin
Admin bertanggung jawab untuk mengatur semua data yang ada di dalam
website. Misalnya, menambahkan, mengubah, dan menghapus semua data.
b. Petugas
Petugas dapat mengakses data pelanggan yang masuk ke dalam wilayah
petugas dan dapat melakukan transaksi tagihan pembayaran.
c. Pelanggan
Pelanggan dapat mengakses tagihan pembayaran sementara dan laporan
tagihan pembayaran.
3. Keamanan
Sistem keamanan dalam website sistem informasi pengelola sarana air bersih
ini bertujuan agar terhindat dari pihak-pihak yang tidak bertanggung jawab dan tidak
memiliki hak akses untuk masuk ke dalam sistem tersebut, sistem keamanan yang
dimaksud yaitu:
a. Login admin diisi dengan username admin dan password admin.
b. Login petugas diisi dengan username petugas dan password petugas.
c. Login pelanggan diisi dengan username pelanggan dan password
pelanggan.
35
d. Enkripsi (encryption) merupakan sebuah proses yang melakukan
perubahan sebuah kode dari yang bisa dimengerti (plaintext) menjadi
sebuah kode yang tidak bisa dimengerti (chipertext) yaitu dengan
menggunakan tipe MD5.
4. Kebutuhan Perangkat Keras (Hardware)
Kebutuhan perangkat keras (hardware) yang dibutuhkan dalam pembuatan
website Sistem Informasi Pengelola Sarana Air Bersih (SI PELO SAIBER) pada Desa
Kebocoran antara lain:
Processor : Processor Intel(R) Core(TM) i3-2330M CPU @ 2.20GHz
RAM : 6,00 GB
Harddisk : 500 GB HDD
Mouse : Optical Mouse
Keyboard : Standard Keyboard
Monitor : 14 Inch
5. Kebutuhan Perangkat Lunak
Kebutuhan perangkat lunak (Software) yang dibutuhkan dalam pembuatan
website Sistem Informasi Pengelola Sarana Air Bersih (SI PELO SAIBER) pada Desa
Kebocoran Kecamatan Kedungbanteng Kabupaten Banyumas antara lain: XAMPP,
Atom Text Editor, Windows 10, Google Chrome, dan MySQL.
36
3.3. Rancangan Dokumen Antar Muka
Berikut adalah rancangan antar muka pada website Sistem Informasi Pengelola
Sarana Air Bersih (SI PELO SAIBER) Berbasis Web pada Tirta Bayur Desa
Kebocoran :
1. Halaman Admin
Halaman ini dikhususkan bagi admin pengelola air bersih Desa Kebocoran
untuk menambah, mengedit dan menghapus data yang berhubungan dengan
sistem informasi yang ada. Untuk mengakses halaman ini, diperlukan login
admin. Rancangan halaman login admin sebagai berikut:
Gambar III. 2. Rancangan Halaman Login Admin
Halaman login admin terdiri dari:
a. Logo
Berisi logo Tirta Bayur
b. Judul Login
Berisi tulisan login
37
c. Username
Masukkan username berfungsi sebagai masukan untuk parameter
otentifikasi username admin.
d. Password
Masukkan password berfungsi sebagai masukkan kata sandi untuk
parameter otentifikasi password admin.
e. Tombol Login
Tombol login digunakan untuk melanjutkan prosedur otentifikasi oleh
pengguna setelah memasukkan username dan password yang valid.
Setelah berhasil login, admin akan dialihkan ke halaman utama admin.
Berikut rancangan halaman utama ruang admin.
Gambar III. 3. Rancangan Halaman Utama Admin
Rancangan halaman utama admin terdiri dari 4 bagian, yaitu:
a. Header
Berisi keterangan ruang admin.
b. Sidebar
Berisi tentang menu-menu yang ada pada halaman admin.
38
c. Konten
Berisi informasi mengenai hal-hal yang dapat dilakukan oleh admin.
d. Footer
Berisi tulisan copyright atau hak cipta.
Di dalam menu sidebar admin terdapat beberapa menu antara lain:
1. Dashboard berisi halaman depan dari tampilan web yang menampilkan
informasi.
Gambar III. 4. Rancangan Halaman Dashboard
2. Master
Di dalam menu master terdapat submenu master admin, master petugas dan
master pelanggan.
a. Master Admin: Berisi sebuah tabel data admin, dan terdapat tombol atau
button tambah admin yang di dalamnya terdapat form untuk menambah
admin baru.
39
Gambar III. 5. Rancangan Halaman Master Admin
b. Master Petugas: Berisi sebuah tabel data petugas, dan terdapat tombol atau
button tambah petugas baru yang di dalamnya terdapat form untuk
menambah petugas baru.
Gambar III. 6. Rancangan Halaman Master Petugas
c. Master Pelanggan: Berisi sebuah tabel data pelanggan, dan terdapat tombol
atau button tambah pelanggan baru yang di dalamnya terdapat form untuk
menambah pelanggan baru.
40
Gambar III. 7. Rancangan Halaman Master Pelanggan
3. Transaksi
Di dalam menu transaksi terdapat submenu bayar pemakaian, catat sementara
dan bayar tagihan.
a. Bayar Pemakaian: Berisi tabel pelanggan yang telah terdaftar di dalam
data pelanggan. Diatas tabel tersebut, terdapat tombol transaksi, yang di
dalamnya terdapat form pembayaran.
Gambar III. 8. Rancangan Halaman Transaksi Bayar Pemakaian
41
b. Catat Sementara: Berisi tabel pelanggan yang pada saat penarikan oleh
petugas, belum bisa di temui. Terdapat keterangan tercatat dan catat.
Gambar III. 9. Rancangan Halaman Transaksi Catat Sementara
c. Bayar Tagihan: Berisi tabel semua pelanggan yang belum membayar
tagihan.
Gambar III. 10. Rancangan Halaman Transaksi Bayar Tagihan
42
4. Pengaturan
Di dalam menu pengaturan terdapat submenu tagihan, di submenu tersebut
berisi sebuah tabel dan button yang berfungsi untuk menambahkan tagihan
bulanan ke dalam tabel transaksi.
Gambar III. 11. Rancangan Halaman Pengaturan
5. Laporan
Di dalam menu laporan terdapat dua submenu yaitu laporan bulanan dan
laporan tagihan.
a. Laporan Bulanan
Di dalam menu laporan bulanan terdapat select pilih bulan, yang bertujuan
untuk mengecek laporan bulanan.
43
Gambar III. 12. Rancangan Halaman Laporan Bulanan
b. Laporan Tagihan
Di dalam menu laporan tagihan terdapat select pilih bulan, yang
bertujuan untuk mengecek laporan tagihan pelanggan.
Gambar III. 13. Rancangan Halaman Laporan Tagihan
2. Halaman Petugas
Halaman ini dikhususkan untuk petugas yang ditugaskan untuk menarik
tagihan pembayaran air bersih. Yaitu berbentuk apk yang terinstal di android
(web view). Berikut ini adalah halaman yang dapat di akses oleh petugas:
44
a. Menu Login
Di dalam menu login petugas, petugas diharuskan memasukkan username
petugas dan password.
Gambar III. 14. Rancangan Halaman Login Petugas
b. Menu Utama Petugas
Di dalam menu utama petugas, terdapat menu transaksi pembayaran,
bayar tagihan dan laporan.
45
Gambar III. 15. Rancangan Halaman Utama Petugas
c. Menu Transaksi Pembayaran
Di dalam menu transaksi pembayaran terdapat sebuah tabel pelanggan
yang sudah masuk ke dalam data tagihan pembayaran. Di dalam tabel
tersebut terdapat 2 field, yaitu field nama dan pilihan.
Gambar III. 16. Rancangan Halaman Transaksi Pembayaran
46
d. Menu Bayar Tagihan
Di dalam menu bayar tagihan, terdapat sebuah tabel yang berisi daftar
pelanggan yang mengalami tunggakan pembayaran. Dalam tabel tersebut
berisi nama pelanggan, pemakaian (air), besar penggunaan, dan pilih.
Gambar III. 17. Rancangan Halaman Bayar Tagihan
e. Menu Laporan
Di dalam menu laporan terdapat submenu laporan bulanan dan laporan
tagihan. Yang berfungsi untuk mengecek laporan bulanan atau tagihan.
47
Gambar III. 18. Rancangan Halaman Laporan
3. Halaman Pelanggan
Halaman ini dikhususkan untuk pelanggan air bersih Tirta Bayur, berfungsi
untuk mengecek pembayaran sebelum didatangi oleh petugas penarik. Yaitu
berbentuk aplikasi android yang di install di smartphone android (web view).
Berikut ini adalah halaman yang dapat di akses oleh pelanggan:
a. Menu Login
Di dalam menu login petugas, petugas diharuskan memasukkan username
petugas dan password.
48
Gambar III. 19. Rancangan Halaman Login Pelanggan
b. Menu Utama Pelanggan
Di dalam menu utama pelanggan, terdapat menu cek pembayaran, laporan
bulanan dan laporan tagihan.
Gambar III. 20. Rancangan Halaman Utama Pelanggan
49
c. Menu Cek Pembayaran
Di dalam menu cek pembayaran ini, pelanggan bisa mengecek terlebih
dahulu, sebelum petugas melakukan penarikan. Berikut tampilan menu cek
pembayaran nya:
Gambar III. 21. Rancangan Menu Cek Pembayaran
d. Menu Laporan
Di dalam menu laporan terdapat submenu laporan bulanan dan laporan
tagihan.
50
Gambar III. 22. Rancangan Halaman Laporan
3.4. Entity Relationship Diagram (ERD)
Dari sebuah database akan dibagi ke dalam beberapa tabel tergantung pada
kebutuhan pengelolaan dan pengembangnya. Kemudian tabel-tabel tersebut akan
diimplementasikan menjadi sebuah gambar Entity Relationship Diagram (ERD) dan
Logical Record Structure (LRS). Berdasarkan data yang ada dapat digambarkan ERD
dan LRS website ini sebagai berikut:
51
3.4.1. Entity Relationship Diagram (ERD)
Berikut ini adalah Entity Relationship Diagram (ERD) untuk database website
Sistem Informasi Pengelola Sarana Air Bersih (SI PELO SAIBER) pada Tirta Bayur
Desa Kebocoran yaitu:
Gambar III. 23. Rancangan Entity Relationship Diagram (ERD)
3.4.2. Logical Record Structure (LRS)
Logical Record Structure (LRS) merupakan sebuah konversi dari Entity
Relationship Diagram (ERD) yang sebelumnya telah dibuat untuk memudahkan
dalam mendefinisikan spesifikasi file.
52
Logical Record Structure untuk basis data website Sistem Informasi Pengelola
Sarana Air Bersih pada Tirta Bayur Desa Kebocoran yaitu:
Gambar III. 24. Rancangan Logical Record Structure (LRS)
3.5. Spesifikasi File
Spesifikasi file menjelaskan tentang file-file yang akan digunakan dalam
pengolahan database dan sebagai media penyimpanan data dari proses yang terjadi.
Dalam website Sistem Informasi Pengelola Sarana Air Bersih (SI PELO SAIBER)
pada Tirta Bayur Desa Kebocoran yaitu data dikumpulkan dalam database mysql yang
terdiri dari beberapa tabel antara lain:
53
1. Spesifikasi File Admin
Nama File : pamsimas.sql
Akronim : admin
Fungsi : Sebagai kumpulan informasi data admin
Tipe File : File Master
Organisasi File : Index Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 211 byte
Kunci Field : id_admin
Software : MySQL
Tabel III. 1. Spesifikasi File Admin
No. Elemen Data Akronim Tipe Panjang Keterangan
1 ID Admin id_admin int 11 Auto_Increment,
Primary Key
2 Nama Admin nama_admin varchar 100
3 Username Admin Username varchar 50
4 Password Admin Password varchar 50
2. Spesifikasi File Petugas
Nama File : pamsimas.sql
Akronim : petugas
Fungsi : Sebagai kumpulan informasi data petugas
Tipe File : File Master
Organisasi File : Index Sequential
54
Akses File : Random
Media : Harddisk
Panjang Record : 151 byte
Kunci Field : id_petugas
Software : MySQL
Tabel III. 2. Spesifikasi File Petugas
No. Elemen Data Akronim Tipe Panjang Keterangan
1 ID Petugas id_petugas Varchar 11 Primary
Key
2 Nama Petugas nama_petugas Varchar 30
3 Wilayah Petugas wilayah_petugas Varchar 30
4 Username Petugas user_petugas Varchar 30
5 Password Petugas pass_petugas Varchar 50
3. Spesifikasi File Pelanggan
Nama File : pamsimas.sql
Akronim : pelanggan
Fungsi : Sebagai kumpulan informasi data pelanggan
Tipe File : File Master
Organisasi File : Index Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 154 byte
Kunci Field : id_pelanggan
Software : MySQL
55
Tabel III. 3. Spesifikasi File Pelanggan
No. Elemen Data Akronim Tipe Panjang Keterangan
1 ID Pelanggan id_pelanggan Varchar 11 Primary
Key
2 Nama Pelanggan nama_pelanggan Varchar 30
3 Rt Rt Int 11
4 Rw Rw Int 11
5 Wilayah wilayah Int 11
6 Tanggal Daftar tanggal_daftar Date
7 Username Pelanggan user_pelanggan Varchar 30
8 Password Pelanggan pass_pelanggan Varchar 50
4. Spesifikasi File Pemakaian
Nama File : pamsimas.sql
Akronim : pelanggan
Fungsi : Sebagai kumpulan informasi data pelanggan
Tipe File : File Master
Organisasi File : Index Sequential
Akses File : Random
Panjang Record : 95 byte
Media : Harddisk
Kunci Field : id_pelanggan
Software : MySQL
56
Tabel III. 4. Spesifikasi File Pemakaian
No
.
Elemen Data Akronim Tipe Panjang Keterangan
1 ID Pemakaian id_pemakaian int 11
Auto
Increment,
Primary Key
2 ID Pelanggan id_pelanggan varchar 11
3 ID Petugas id_petugas varchar 11
4 Tanggal
Pencatatan tgl_pencatatan date
5 Meter Awal meter_awal int 11
6 Bulan Bulan varchar 15
7 Meter Pakai meter_pakai int 11
8 Tagihan Tagihan int 11
9 ID Petugas
Penarik id_petugas_penarik varchar 11
10 Keterangan Ket Enum
('lunas','hutang')
11 Tanggal
Pembayaran tgl_pembayaran date
12 Update Update varchar 3
3.6. Pengkodean
Dalam manajemen sistem informasi pengelolaan sarana air bersih pada Desa
Kebocoran, penulis menggunakan kode sebagai identifikasi data, pemanggilan data
dan pengisian data maupun kolom untuk memudahkan pengelolaan data. Kode akan
memanggil seluruh field yang berhubungan dengan kode tersebut secara otomatis dari
perintah yang diberikan dari masing-masing memiliki perbedaan. Berikut penjelasan
secara rinci mengenai pengkodean yang ada di sistem ini:
57
1. Id Admin
Setiap admin harus memiliki id masing-masing sehingga dapat membedakan
admin yang satu dengan yang lainnya, diantaranya terdiri dari:
Bentuk umum:
Contoh :
Gambar III. 25. Struktur Kode Id Admin
2. Id Petugas
Setiap petugas juga memiliki id masing-masing sehingga dapat membedakan
antar petugas yang lainnya. Berikut contohnya:
Bentuk umum:
Contoh:
Gambar III. 26. Struktur Kode Id Petugas
58
3. Id Pelanggan
Pelanggan juga memiliki id masing-masing sehingga dapat membedakan
antar pelanggan yang lainnya. Berikut contohnya:
Bentuk umum:
Contoh:
Gambar III. 27. Struktur Kode Id Pelanggan
3.7. Spesifikasi Program
Spesifikasi program yang penulis buat dalam website ini dapat dilihat dari
struktur navigasi di bawah ini:
3.7.1. Struktur Navigasi
Struktur navigasi yang digunakan pada website Sistem Informasi Pengelola
Sarana Air Bersih pada Tirta Bayur Desa Kebocoran adalah struktur navigasi
campuran. Berikut adalah penjelasan mengenai struktur navigasi dalam website ini:
59
1. Struktur Navigasi Halaman Admin
Gambar III. 28. Struktur Navigasi Halaman Admin
2. Struktur Navigasi Halaman Petugas
Gambar III. 29. Struktur Navigasi Halaman Petugas
60
3. Struktur Navigasi Halaman Pelanggan
Gambar III. 30. Struktur Navigasi Halaman Pelanggan
3.8. Spesifikasi Sistem Komputer
1. Spesifikasi Perangkat Keras (Hardware)
Perangkat keras (Hardware) adalah seluruh komponen peralatan yang
berbentuk suatu sistem komputer dan peralatan lainnya yang memungkinkan komputer
melaksanakan tugasnya, termasuk juga mesin-mesin pembantu penyimpanan data dan
juga termasuk alat komunikasi lainnya.
a. Perangkat keras untuk server website:
Processor : Processor Intel(R) Core i3-2330M CPU @ 2.20GHz
RAM : 6,00 GB
Harddisk : 500 GB HDD
Mouse : Optical Mouse
Keyboard : Standard Keyboard
Monitor : 14 Inch
61
b. Perangkat keras untuk petugas dan pelanggan
Sistem Operasi : Android
OS : Android 4.0
RAM : 2 GB
Layar : 4 Inch
Koneksi : Minimal menggunakan jaringan 3G
2. Spesifikasi Perangkat Lunak (Software)
Komponen dalam data processing system yang berupa program-program dan
teknik lain untuk mengontrol sistem. Fungsi software ini adalah mengidentifikasi dan
menyiapkan aplikasi program sehingga tata kerja seluruh peralatan komputer dapat
terkontrol, serta membuat pekerjaan menjadi lebih efisien. Pemakaian komputer tidak
lepas dari perangkat-perangkat tersebut yang saling berhubungan dan terkait.
a. Perangkat lunak untuk server website:
Sistem Operasi : Windows
Program Desain : Atom
Web Server : PHPMyAdmin dan XAMPP
Web Browser : Google Chrome, Mozilla Firefox, Uc Browser
Bahasa Pemrograman : PHP dan HTML
b. Perangkat lunak petugas dan pelanggan
Sistem Operasi : Android
Aplikasi : File Apk
3.9. Implementasi
1. Implementasi Antar Muka Admin
Rancangan antar muka yang di implementasikan, diantaranya:
62
a. Halaman Admin
Halaman ruang admin hanya dapat dibuka oleh admin melalu form login.
Berikut ini adalah implementasi rancangan halaman login ruang admin:
Gambar III. 31. Implementasi Halaman Login Admin
Setelah melalui proses login yang valid, maka browser akan melanjutkan
ke halaman home atau beranda admin. Terdapat beberapa menu di dalam
halaman beranda admin, masing-masing memiliki konten halaman
sendiri. Diantaranya adalah:
1) Dashboard atau beranda
Gambar III. 32. Implementasi Halaman Dashboard
63
2) Menu Master
a) Master Admin
Gambar III. 33. Implementasi Halaman Master Admin
b) Form Tambah Admin
Gambar III. 34. Implementasi Form Tambah Admin
64
c) Master Pelanggan
Gambar III. 35. Implementasi Halaman Master Pelanggan
d) Form Tambah Pelanggan
Gambar III. 36. Implementasi Form Tambah Pelanggan
65
e) Master Petugas
Gambar III. 37. Implementasi Halaman Master Petugas
f) Form Tambah Petugas
Gambar III. 38. Implementasi Form Tambah Petugas
66
3) Menu Transaksi
a) Transaksi Bayar Pemakaian
Gambar III. 39. Implementasi Halaman Transaksi Bayar Pemakaian
b) Form Transaksi Pembayaran
Gambar III. 40. Implementasi Form Transaksi Pembayaran
67
c) Transaksi Catat Sementara
Gambar III. 41. Implementasi Transaksi Catat Sementara
d) Transaksi Bayar Tagihan
Gambar III. 42. Implementasi Transaksi Bayar Tagihan
68
4) Menu Pengaturan
Gambar III. 43. Implementasi Halaman Pengaturan
5) Menu Laporan
a) Laporan Bulanan
Gambar III. 44. Implementasi Laporan Bulanan
69
b) Data Laporan Bulanan
Gambar III. 45. Implementasi Data Laporan Bulanan
c) Cetak Laporan Bulanan
Gambar III. 46. Implementasi Cetak Laporan Bulanan PDF
70
d) Laporan Tagihan Pelanggan
Gambar III. 47. Implementasi Laporan Tagihan Pelanggan
e) Data Laporan Tagihan Bulanan
Gambar III. 48. Implementasi Data Laporan Tagihan
71
f) Cetak Laporan Tagihan
Gambar III. 49. Implementasi Cetak Laporan Tagihan PDF
2. Implementasi Antar Muka Petugas
Rancangan antar muka yang di implementasikan, diantaranya:
a. Halaman Login Petugas
Gambar III. 50. Implementasi Halaman Login Petugas
72
b. Halaman Utama Petugas
Gambar III. 51. Implementasi Halaman Utama Petugas
c. Menu Transaksi Pembayaran
Gambar III. 52. Implementasi Menu Transaksi Pembayaran
73
d. Form Pembayaran
Gambar III. 53. Implementasi Form Pembayaran
74
e. Menu Tagihan Pelanggan
Gambar III. 54. Implementasi Menu Tagihan Pelanggan
f. Menu Laporan Bulanan
Gambar III. 55. Implementasi Menu Laporan Bulanan
75
g. Data Laporan Bulanan
Gambar III. 56. Implementasi Data Laporan Bulanan
h. Cetak Laporan Bulanan
Gambar III. 57. Implementasi Cetak Laporan Bulanan
76
i. Menu Laporan Tagihan
Gambar III. 58. Implementasi Menu Laporan Tagihan
j. Data Laporan Tagihan
Gambar III. 59. Implementasi Data Laporan Tagihan
77
a. Cetak Laporan Tagihan
Gambar III. 60. Implementasi Cetak Laporan Tagihan
3. Implementasi Antar Muka Pelanggan
Rancangan antar muka yang di implementasikan, diantaranya:
a. Halaman Login Pelanggan
Gambar III. 61. Implementasi Halaman Login Pelanggan
78
b. Halaman Utama Pelanggan
Gambar III. 62. Implementasi Menu Utama Pelanggan
c. Menu Cek Pembayaran
Gambar III. 63. Implementasi Menu Cek Pembayaran
79
d. Menu Cek Tagihan
Gambar III. 64. Implementasi Menu Cek Tagihan
e. Cetak Tagihan
Gambar III. 65. Implementasi Menu Cetak Tagihan
80
3.10. Pengujian Unit
Pengujian ini menjelaskan mengenai pengujian sistem yang dibuat
menggunakan black box testing untuk pengujian proses dan output saja.
Berikut hasil dari pengujian sistem dari beberapa form penting dalam website
ini.
1. Form Login Admin, Petugas dan Pelanggan
Tabel III. 5. Hasil Black Box Testing Login Admin
No Skenario
Pengujian
Test Case Hasil yang
diharapkan
Hasil
Pengujian
Kesimpulan
1. Mengisi username
dan password
dengan
menginputkan data
yang salah, lalu
langsung mengklik
tombol “Login”.
Username:
(salah)
Password:
(salah)
Akan
muncul
notifikasi
“Username
atau
Password
Salah”
Sesuai
harapan
Valid
2. Mengisi username
benar, password
salah. Lalu klik
“Login”
Username
(benar)
Password
(salah)
Akan
muncul
notifikasi
“Username
atau
Password
Salah”
Sesuai
harapan
Valid
3. Mengisi username
salah, password
benar. Lalu klik
“Login”
Username
(salah)
Password
(benar)
Akan
muncul
notifikasi
“Username
atau
Password
Salah”
Sesuai
harapan
Valid
4. Mengisi username
kosong, password
kosong. Lalu klik
“Login”
Username
(kosong)
Password
(kosong)
Sistem akan
menampilka
n alert “This
value is
required”.
Sesuai
harapan
Valid
81
5. Mengisi username
benar, password
kosong. Lalu klik
“Login”
Username
(benar)
Password
(kosong)
Sistem akan
menampilka
n alert “This
value is
required”.
Sesuai
harapan
Valid
6. Mengisi username
benar, password
benar. Lalu klik
“Login”
Username
(benar)
Password
(benar)
Sistem
menerima
akses login
dan
kemudian
menampilka
n menu
utama.
Sesuai
harapan
Valid
2. Form Tambah Admin, Petugas dan Pelanggan
Tabel III. 6. Hasil Black Box Testing Form Tambah Data
No Skenario
Pengujian
Test Case Hasil yang
diharapkan
Hasil
Pengujian
Kesimpulan
1. Mengosongkan
semua field yang
terdapat pada form
tambah lalu klik
“Simpan”
Semua
field
kosong
Sistem akan
menampilka
n alert
“Please fill
out this
field”
Sesuai
harapan
Valid
2. Mengisi semua
field yang ada pada
form tambah lalu
klik “Simpan”
Semua
field terisi
Sistem
menerima
tambah data
dan akan
tersimpan di
database
Sesuai
harapan
Valid
3. Mengisi nama
pelanggan, nama
petugas
menggunakan
angka lalu klik
“Simpan”
Field
nama
pelanggan
atau
petugas
diisi angka
Akan
menampilka
n alert,
nama
pelanggan
atau petugas
harus
berupa
huruf.
Sesuai
harapan
Valid