BAB III PEMBAHASAN
3.2 Perancangan Basis Data
3.3.4 Perancangan Antarmuka
Tahap perancangan antar muka dilakukan untuk merancang antar muka agar dapat digunakan oleh pengguna yaitu petugas yang menggunakan aplikasi ini. Berikut ini adalah tampilan antar muka yang dirancang pada Aplikasi Pengolahan data pembayaran di Badan Pengelola Air Bersih Desa Ciburial (BPAB-DC) Bandung :
1. Antarmuka Login Admin
Perancangan Antarmuka Login Admin ini adalah form untuk login admin
T01 KETERANGAN 1. Tombol Login untuk menuju ke form utama T02 2. Tombol Exit untukmembatalkan Login LOGIN PETUGAS Password Username Tampilkan Password Exit LOGIN
2. Antarmuka Menu Utama Petugas
Perancangan Antarmuka Menu utama Petugas adalah tampilan utama petugas. Pada perancangan Menu Utama ini terdapat tiga tombol, yaitu tombol data petugas, data pelanggan, data pembayaran.
T02.1 Keterangan: 1. Klik tombol File Terdapat menu exit untuk keluar dari program 2. Klik tombol user untuk menuju ke T01 2. Klik Data Petugas untuk menuju T03 3. Klik Data Pelanggan untuk menuju T07 4. Kik Data Pembayaran untuk menuju T11 File User
BADAN PENGELOLA AIR
BERSIH DESA CIBURIAL
Jl.Ciburial No.98 Telp.022-2504002 Bandung 40198
DATA PETUGAS
LOGO
DATA PELANGGAN DATA PEMBAYARAN
3. Antarmuka Menu Utama Admin
Perancangan Antarmuka Menu utama admin adalah tampilan utama admin ketika sukses login. Pada perancangan Menu Utama ini terdapat tiga tombol, yaitu tombol data petugas, data pelanggan, data pembayaran.
T02.2 Keterangan: 1. Klik tombol file terdapat menu Logout untuk menuju ke T02.1 2. Klik Data Petugas untuk menuju T03 3. Klik Data Pelanggan untuk menuju T07 4. Kik Data Pembayran untuk menuju T11 File
BADAN PENGELOLA AIR
BERSIH DESA CIBURIAL
Jl.Ciburial No.98 Telp.022-2504002 Bandung 40198
DATA PETUGAS
LOGO
DATA PELANGGAN DATA PEMBAYARAN
4. Antarmuka Data Petugas Untuk Petugas
Perancangan Antarmuka Data Petugas adalah tampilan pengolahan data petugas, pada perancangan pengolahan data petugas ini terdapat empat tombol, yaitu tombol cari, tambah, laporan, keluar.
T03 DATA PETUGAS
BADAN PENGELOLA AIR BERSIH
DESA CIBURIAL
Keterangan : 1. Klik tombol Cari untuk
mencari data Petugas. 2. Klik tombol tambah akan
menuju ke T04 3. Klik tombol laporan akan
menuju ke T06 4. Klik tombol keluar akan
menuju ke T02
Jl.Ciburial No.98 Telp.022-2504002 Bandung 40198
LOGO
Diurutkan berdasarkan
ID Petugas Nama Petugas
Pencarian Data
Cari
Tambah
Keluar Laporan
Pengolahan Data Petugas
ID Petugas Nama Alamat Tanggal Lahir Email
5. Antarmuka Data Petugas untuk Admin
Perancangan Antarmuka Data Petugas adalah tampilan pengolahan data petugas, pada perancangan pengolahan data petugas ini terdapat enam tombol, yaitu tombol cari, tambah, ubah, hapus, laporan, keluar.
T03 DATA PETUGAS
BADAN PENGELOLA AIR BERSIH
DESA CIBURIAL
Keterangan : 1. Klik tombol Cari untuk
mencari data Petugas. 2. Klik tombol tambah akan
menuju ke T04 3, Klik tombol Edit akan
menuju ke T05 4. Klik tombol Hapus
menghapus data petugas 5. Klik tombol laporan akan
menuju ke T06 6. Klik tombol Keluar akan
menuju ke T02
Jl.Ciburial No.98 Telp.022-2504002 Bandung 40198
LOGO
Diurutkan berdasarkan
ID Petugas Nama Petugas
Pencarian Data Cari Tambah Keluar Laporan Hapus Ubah
Pengolahan Data Petugas
ID Petugas Nama Alamat Tanggal Lahir Email
6. Antarmuka Data Pelanggan Untuk Petugas
Perancangan Antarmuka Data Pelanggan adalah tampilan pengolahan data pelanggan, pada perancangan pengolahan data pelanggan untuk petugas ini terdapat empat tombol, yaitu tombol cari, tambah, laporan, keluar.
T07
DATA PELANGGAN
BADAN PENGELOLA AIR BERSIH
DESA CIBURIAL
Keterangan : 1. Klik tombol Cari untuk
mencari data petugas. 2. Klik tombol Tambah akan
menuju ke T08 3. Klik tombol Laporan akan
menuju ke T10 4. Klik tombo Keluar akan
menuju ke T02 Jl.Ciburial No.98 Telp.022-2504002 Bandung 40198
LOGO
Diurutkan berdasarkan
ID Pelanggan Nama Pelanggan
Pencarian Data
Cari
Tambah
Keluar Laporan
Pengolahan Data Pelanggan
ID Pelanggan Nama Alamat Kode Pos No Telepon Email Golongan Ukuran Meter
7. Antarmuka Data Pelanggan untu Admin
Perancangan Antarmuka Data Pelanggan adalah tampilan pengolahan data pelanggan, pada perancangan pengolahan data pelanggan ini terdapat enam tombol, yaitu tombol cari, tambah, ubah, hapus, laporan, keluar.
T07
DATA PELANGGAN
BADAN PENGELOLA AIR BERSIH
DESA CIBURIAL
Keterangan : 1. Klik tombol Cari untuk
mencari data petugas. 2. Klik tombol Tambah akan
menuju ke T08 3, Klik tombol Edit akan
menuju ke T09 4. Klik tombol Hapus untuk
menghapus data pelanggan
5. Klik tombol Laporan akan menuju ke T10 6. Klik tombol Close akan
menuju ke T02
Jl.Ciburial No.98 Telp.022-2504002 Bandung 40198
LOGO
Diurutkan berdasarkan
ID Pelanggan Nama Pelanggan
Pencarian Data Cari Tambah Keluar Laporan Hapus Ubah
Pengolahan Data Pelanggan
ID Pelanggan Nama Alamat Kode Pos No Telepon Email Golongan Ukuran Meter
8. Antarmuka Data Pembayaran Untuk Petugas
Perancangan Antarmuka Data Pembayaran adalah tampilan pengolahan data pembayaran, pada perancangan pengolahan data pembayaran ini terdapat empat tombol, yaitu tombol cari, tambah,laporan dan keluar.
T11
DATA PEMBAYARAN
BADAN PENGELOLA AIR BERSIH
DESA CIBURIAL
Keterangan : 1. Klik tombol Cari untuk
mencari data petugas. 2. Klik tombol Tambah akan
menuju ke T12 3. Klik tombol Laporan akan
menuju ke T14 4. Klik tombol Keluar akan
menuju ke T02 Jl.Ciburial No.98 Telp.022-2504002 Bandung 40198
LOGO
Diurutkan berdasarkan
ID Pelanggan Nama Pelanggan
Pencarian Data
Cari
Tambah
Keluar
Pengolahan Data Pembayaran
ID Pelanggan Nama Alamat Golongan Ukuran Meter Stand Awal Stand Akhir Pemakaian
Laporan
9. Antarmuka Data Pembayaran Admin
Perancangan Antarmuka Data Pembayaran adalah tampilan pengolahan data pembayaran, pada perancangan pengolahan data pembayaran ini terdapat lima tombol, yaitu tombol cari, tambah, ubah, hapus, keluar.
T11
DATA PEMBAYARAN
BADAN PENGELOLA AIR BERSIH
DESA CIBURIAL
Keterangan : 1. Klik tombol Cari untuk
mencari data petugas. 2. Klik tombol Tambah akan
menuju ke T12 3, Klik tombol Edit akan
menuju ke T13 4. Klik tombol Hapus untuk
menghapus data pelanggan
5. Klik tombol Laporan akan menuju ke T14 6. Klik tombol Close akan
menuju ke T02 Jl.Ciburial No.98 Telp.022-2504002 Bandung 40198
LOGO
Diurutkan berdasarkan
ID Pelanggan Nama Pelanggan
Pencarian Data Cari Tambah Keluar Hapus Laporan
Pengolahan Data Pembayaran
ID Pelanggan Nama Alamat Golongan Ukuran Meter Stand Awal Stand Akhir Pemakaian
10. Antarmuka Tambah Data Petugas
Perancangan Antarmuka Tambah Data Petugas ini adalah tampilan untuk admin dan petugas ketika akan menambah data petugas baru, pada perancangan tambah data petugas tiga tombol, yaitu tombol simpan, ulang, batal.
Keterangan 1. Klik tombol simpan
untuk menuju ke T03.
2. Klik tombol Reset untuk mengulang semua yang di isikan.
3. Klik tombol Batal untuk menuju T03 T04
Form Isi Petugas
Simpan Ulang Batal
ID Petugas Alamat Nama Tanggal Lahir Email dd/mm/yyyy
11. Antarmuka Ubah Data Petugas
Perancangan Antarmuka Ubah Data Petugas adalah tampilan ketika admin akan mengubah data petugas, pada perancangan ubah data petugas ini terdapat tiga tombol, yaitu tombol simpan, ulang, batal.
Keterangan 1. Klik tombol simpan
untuk menuju ke T03.
2. Klik tombol Reset untuk mengulang semua yang di isikan.
3. Klik tombol Batal untuk menuju T03 T05
Form Edit Petugas
Simpan Ulang Batal
ID Petugas Alamat Nama Tanggal Lahir Email dd/mm/yyyy
12. Antarmuka Laporan Data Petugas
Perancangan Antarmuka Laporan Data Petugas adalah tampilan ketika admin dan petugas akan cetak laporan data petugas.
BADAN PENGELOLA AIR BERSIH
DESA CIBURIAL
Jl.Ciburial No.98 Telp.022-2504002 Bandung 40198
LOGO
Date: dd/mm/yyy
T06
Alamat Nama
ID Petugas Tanggal Lahir Email
13. Antarmuka Tambah Data Pelanggan
Perancangan Antarmuka Tambah Data Pelanggan adalah tampilan ketika admin dan petugas akan menambah data pelanggan baru, pada perancangan tambah data pelanggan terdapat tiga tombol, yaitu tombol simpan, ulang, batal.
Keterangan 1. Klik tombol simpan
akan menuju ke T07. 2. Klik tombol Reset
untuk mengulang semua yang di isikan.
3. Klik tombol Batal akan menuju T07
T08
Form Isi Pelanggan
Simpan Ulang Batal
ID Pelanggan Alamat Nama Kode Pos No Telepon Email Golongan Ukuran Meter
14. Antarmuka Ubah Data Pelanggan
Perancangan Antarmuka Ubah Pelanggan adalah tampilan ketika admin dan petugas akan mengubah data pelanggan baru, pada perancangan ubah data pelanggan terdapat tiga tombol, yaitu tombol simpan, ulang, batal.
Keterangan 1. Klik tombol simpan
akan menuju ke T07. 2. Klik tombol Reset
untuk mengulang semua yang di isikan.
3. Klik tombol Batal akan menuju T07
T08
Form Isi Pelanggan
Simpan Ulang Batal
ID Pelanggan Alamat Nama Kode Pos No Telepon Email Golongan Ukuran Meter
15. Antarmuka Laporan Data Pelanggan
Perancangan Antarmuka Laporan Data Pelanggan adalah tampilan ketika admin dan petugas akan cetak laporan data pelanggan.
BADAN PENGELOLA AIR BERSIH
DESA CIBURIAL
Jl.Ciburial No.98 Telp.022-2504002 Bandung 40198
LOGO Date: dd/mm/yyy T10 Golongan Alamat ID Nama No Telepon
16. Antarmuka Tambah Data Pembayaran
Perancangan Antarmuka Tambah Data Pembayaran adalah tampilan ketika admin dan petugas akan menambah data pembayaran baru, pada perancangan tambah data pembayaran terdapat empat tombol, yaitu tombol cari, hitung, simpan, ulang, batal.
Keterangan :
1. Tombol Cari untuk mencari data pelanggan 2. Tombol Hitung untuk menghitung jumlah pembayaran 3. Tombol Simpan untuk menuju ke T11 4. Tombol Batal untuk menuju ke T11 Hitung Batal Simpan Pemakaian Stand Akhir Stand Awal Ukuran Meter Golongan Alamat Nama ID Pelanggan T12
Form Isi Pembayaran
Data Input
Cari
Golongan
Pemakaian Tarif Uraian M3 Harga Air
0-10
Petugas
Jumlah Harga air > 30 21-30 11-20 Air kotot Bea Beban Bea Administrasi Jumlah Tagian
17. Antarmuka Cetak Rekening
Perancangan Antarmuka Laporan Data Pembayaran adalah tampilan ketika admin dan petugas akan cetak laporan data pemabayaran.
BADAN PENGELOLA AIR BERSIH
DESA CIBURIAL
LOGOJl.Ciburial No.98 Telp.022-2504002 Bandung 40198
ID Langganan :
Perhitungan Harga Air Stand Awal : Golongan : Alamat : Nama : Stand Akhir : Pemakaian : 0-10 11-20 21-30 > 30
Tarif Uraian M3 Harga Air
Jumlah Harga air :
Ukuran : Pemakaian : Air Kotor : Bea Beban : Bea Admin : Jumlah Tagihan : Ciburial dd/mm/yyyy