BAB III PEMBAHASAN - repository.bsi.ac.id · Gambar III. 12. Rancangan Halaman Laporan Bulanan b....

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


Akronim : petugas

Fungsi : Sebagai kumpulan informasi data petugas



54

Akses File : Random

Media : Harddisk


Kunci Field : id_petugas

Software : MySQL

Tabel III. 2. Spesifikasi File Petugas


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


Akronim : pelanggan

Fungsi : Sebagai kumpulan informasi data pelanggan



Akses File : Random

Media : Harddisk


Kunci Field : id_pelanggan

Software : MySQL

55

Tabel III. 3. Spesifikasi File Pelanggan


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


Akronim : pelanggan

Fungsi : Sebagai kumpulan informasi data pelanggan



Akses File : Random


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


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


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

BAB III PEMBAHASAN - repository.bsi.ac.id · Gambar III. 12. Rancangan Halaman Laporan Bulanan b....

Documents

Transcript of BAB III PEMBAHASAN - repository.bsi.ac.id · Gambar III. 12. Rancangan Halaman Laporan Bulanan b....