Skema Relasi Struktur Tabel Perancangan Antarmuka

3.3. Perancangan Basis Data

Perancangan merupakan penggambaran, perencanaan, dan pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah ke dalam suatu kesatuan yang utuh dan berfungsi. Basis data atau database adalah kumpulan file-file yang mempunyai kaitan antara satu file dengan file yang lain sehingga membentuk satu bangunan data untuk menginformasikan satu perusahaan, instansi dalam batasan tertentu.

3.3.1. Skema Relasi

Skema relasi merupakan rangkaian hubungan antara dua tabel atau lebih pada sistem database. Berikut ini adalah skema relasi pada sistem informasi BPAB-DC. pelanggan PK id_pelanggan nama_pelanggan golongan petugas PK id_petugas nama_petugas FK1 username pembayaran PK id_pembayaran FK2 id_petugas FK1 id_pelanggan nama_pelanggan golongan nama_petugas Login PK username id_petugas Gambar 3.10 Skema Relasi

3.3.2. Struktur Tabel

1. Tabel login Tabel 3.12 Tabel Login Nama Field Tipe Data Ukuran Keterangan username varchar 20 primary key password varchar 20 not null hak_akses varchar 7 not null 2. Tabel Pelanggan Tabel 3.13 Tabel Pelanggan 3. Tabel Petugas Tabel 3.14 Tabel Petugas Nama Field Tipe Data Ukuran Keterangan id_pelanggan varchar 3 primary key nama_pelanggan varchar 30 not null alamat varchar 30 not null kode_pos varchar 5 not null no_telepon varchar 12 not null email varchar 50 not null golongan varchar 2 not null ukuran_meter varchar 3 not null Nama Field Tipe Data Ukuran Keterangan id_petugas varchar 5 primary key nama_petugas varchar 30 not null alamat varchar 30 not null tanggal lahir varchar 10 not null email varchar 50 not null 4. Tabel Pembayaran Tabel 3.15 Tabel Pembayaran

3.3.3. Perancangan Struktur Menu

Struktur menu adalah bentuk umum dari suatu rancangan program untuk memudahkan pemakai dalam menjalankan program komputer. Sehingga saat menjalankan program, petugas ataupun user tidak mengalami kesulitan dalam memilih menu-menu yang diinginkan. Pada perancangan perangkat lunak ini dibuat menu seperti dibawah ini Nama Field Tipe Data Ukuran Keterangan id_pembayaran integer 3 primary key id_pelanggan varchar 3 foreign key nama_pelanggan varchar 30 not null alamat varchar 30 not null golongan varchar 2 not null ukuran_meter varchar 3 not null stand_awal integer 8 not null stand _akhir integer 8 not null pemakaian integer 30 not null tarif1 integer 8 not null tarif2 integer 8 not null tarif3 integer 8 not null tarif4 integer 8 not null air_kotor integer 8 not null bea_beban integer 8 not null bea_admin integer 8 not null jumlah_harga_air integer 8 not null jumlah_tagihan integer 8 not null golongan2 varchar 30 not null bp varchar 9 not null

3.3.3.1. Perancangan Struktur Menu Admin

Login Admin Pengolahan Data Pelanggan Pengolahan Data Pembayaran Pengolahan Data Petugas Tambah Data Petugas Hapus Data Petugas Ubah Data Petugas Cari Data Petugas Cetak Laporan Petugas Tambah Data Pelanggan Cetak Laporan Pelanggan Cari Data Pelanggan Hapus Data Pelanggan Ubah Data Pelanggan Tambah Data Pembayaran Cetak Laporan Data Pembayaran Cari Data Pembayaran Hapsu Data Pembayaran Gambar 3.11 Perancangan Struktur Menu Admin

3.3.3.2. Perancangan Struktur Menu Petugas

Gambar 3.12 Perancangan Struktur Menu Petugas

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 Gambar 3.13 Antarmuka Login Admin

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 Gambar 3.14 Antarmuka Menu Utama Petugas

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 Gambar 3.15 Antarmuka Menu utama Admin

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 Email Tanggal Lahir Alamat Nama Gambar 3.16 Antarmuka Data Petugas Untuk Petugas

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 Email Tanggal Lahir Alamat Nama Gambar 3.17 Antarmuka Data Petugas Untuk Admin

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 No Telepon Kode Pos Alamat Nama Email Golongan Ukuran Meter Gambar 3.18 Antarmuka Data Pelanggan untuk Petugas

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 No Telepon Kode Pos Alamat Nama Email Golongan Ukuran Meter Gambar 3.19 Antarmuka Data Pelanggan Admin

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 Ukuran Meter Golongan Alamat Nama Stand Awal Stand Akhir Pemakaian Laporan Gambar 3.20 Antarmuka Data Pembayaran untuk Petugas

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 Ukuran Meter Golongan Alamat Nama Stand Awal Stand Akhir Pemakaian Gambar 3.21 Antarmuka Data Pembayaran untuk Admin

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 ddmmyyyy Gambar 3.22 Antarmuka Tambah Data Petugas

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 ddmmyyyy Gambar 3.23 Antarmuka Ubah Data Petugas

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: ddmmyyy T06 Alamat Nama ID Petugas Tanggal Lahir Email Gamabar 3.24 Antarmuka Laporan Data Petugas

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 Gambar 3.25 Antarmuka Tambah Data Pelanggan

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 Gambar 3.26 Antarmuka Ubah Data Pelanggan

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: ddmmyyy T10 Golongan Alamat ID Nama No Telepon Gambar 3.27 Antarmuka Laporan Data Pelanggan

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 Gambar 3.28 Antarmuka Tambah Data Pembayaran

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 LOGO Jl.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 ddmmyyyy Gambar 3.29 Antarmuka Laporan Data Pembayaran

3.3.5. Perancangan Pesan