Perancangan Form Perancangan Laporan Perancangan Antarmuka Interface

162 donasi Id_rekening integer 11 Kode prioritas rekening muzakki Tanggal datetime Tanggal transaksi Jumlahuang decimal 19,2 Jumlah uang tipe_pembayaran varchar 20 Nomor Pokok Wajib Pajak organisasi proofnumber varchar 50 Tgl dan status penerimaan tipe_penerimaan varchar 20 Jenis badan organisasi deskripsi varchar 150 Nama direktur organisasi tipe_status varchar 20 Jenis organisasi Isprinted varchar 5 Status cetak Useraprovedby varchar 50 Disetujui oleh pengguna Metadata_user varchar 150 19. Entity Mustahik Tanggungan Nama Tabel : mustahiq_tanggungan Type File : Master Primary Key : id_tanggungan Foreign Key : id_mustahiq Tabel 4.39 Tabel Mustahik Tanggungan pada Database Nama Field Tipe Data Ukuran Keterangan id_tanggungan integer 10 Kode prioritas tanggungan id_mustahiq integer 10 Kode prioritas mustahik jumlah integer 15 Jumlah tanggungan nama_tanggungan varchar 30 Nama Tanggungan deskripsi varchar 255 Deskripsi

4.2.7 Perancangan Form

Perancangan form yaitu perancangan bentuk input pada sistem yang akan dibangun dibagi menjadi dua bagian yaitu form untuk Bagian Penghimpunan dan Bagian Pendayagunaan. Dibawah ini adalah daftar perancangan form tersebut. 163 1. Perancangan Form Login Gambar 4.57 Form Login 2. Bagian Penghimpunan a. Form Daftar Muzakki Gambar 4.58 Form Daftar Muzakki 164 b. Form Bayar Zakat Maal + , + -------. + 0 -------. , -------. , Gambar 4.59 Form Bayar Zakat Maal 165 c. Form Bayar Infak Gambar 4.60 Form Bayar Infak 166 d. Form Bayar Zakat Fitrah Gambar 4.61 Form Bayar Zakat Fitrah 167 3. Bagian Pendayagunaan a. Form Daftar Mustahik G Gambar 4.62 Form Daftar Mustahik 168 b. Form Penyaluran Langsung , + + , Gambar 4.63 Form Penyaluran Langsung 169 c. Form Penyaluran Program Gambar 4.64 Form Penyaluran Program 170

4.2.8 Perancangan Laporan

Perancangan laporan yaitu perancangan bentuk output yang akan dicetak pada sistem yang akan dibangun dibagi menjadi dua bagian yaitu laporan untuk Bagian Penghimpunan dan Bagian Pendayagunaan. Dibawah ini adalah daftar perancangan laporan tersebut 1. Bagian Penghimpunan a. Bukti Setor + , 1 + 2 11111111111111111111111111 , 2 11111111111111111111111111 2 11111111111111111111111111 2 11111111111111111111111111 , + 0 2 11111111111111111111111111 2 2 11111111111111111111111111 3 11111111111111111111111111111 4 , + 1 ...5...5.... 3 11111111111111111111111111111 4 Gambar 4.65 Bukti Setor 171 b. Laporan Penerimaan Donasi + , 1 , 66 .... 6666 377777771114 1 Gambar 4.66 Laporan Penerimaan Donasi 2. Bagian Pendayagunaan a. Bukti Salur Gambar 4.67 Bukti Salur 172 b. Laporan Penyaluran Donasi Gambar 4.68 Laporan Penyaluran Donasi

4.2.9 Perancangan Antarmuka Interface

Antarmuka adalah suatu sistem bagi kebanyakan pengguna. Bagaimanapun bagus atau buruknya rancangannya, antar-muka tersebut menjadi gambaran dari sistem dan sebagai bayangan dari kompetensi seorang analisis sistem. Tujuan perancangan antar-muka yang membantu pengguna dan bisnis mendapatkan informasi yang mereka butuhkan keluar dan masuk sistem dengan mengacu pada tujuan-tujuan berikut: 1. Menyesuaikan antar-muka pengguna dengan tugas 2. Mengefisienkan antar-muka pengguna 3. Memberikan arus balik yang tepat kepada pengguna 4. Membangkitkan pertanyaan-pertanyaan yang dapat dimanfaatkan 5. Memperbaiki produktifitas dari pengetahuan pegawai 173 Menggambarkan rancangan antarmuka sistem yang akan dikembangkan 1. Perancangan Antarmuka Muka Gambar 4.69 Perancangan Antarmuka Muka 174 2. Perancangan Antarmuka Lihat Data Muzakki , + + 0 Gambat 4.70 Perancangan Antarmuka Lihat Data Muzakki 175 3. Perancangan Antarmuka Cetak Laporan Penerimaan Gambar 4.71 Perancangan Antarmuka Cetak Laporan Penerimaan 176 4. Perancangan Antarmuka Cetak Bukti Setor Gambar 4.72 Perancangan Antarmuka Cetak Bukti Setor 177 5. Perancangan Antarmuka Cetak Laporan Penyaluran Gambar 4.73 Perancangan Antarmuka Cetak Laporan Penyaluran 178 6. Perancangan Antarmuka Cetak Bukti Salur Gambar 4.74 Perancangan Antarmuka Cetak Bukti Salur 179 7. Perancangan Antarmuka Daftar Program Penyaluran + 8 Tabel 4.75 Perancangan Antarmuka Daftar Program Penyaluran 180 8. Perancangan Antarmuka Tambah Program Penyaluran 8 Gambar 4.76 Perancangan Antarmuka Tambah Program Penyaluran 181 9. Perancangan Antarmuka Daftar Subprogram Penyaluran + 8 Tabel 4.77 Perancangan Antarmuka Daftar Subprogram Penyaluran 182 10. Perancangan Antarmuka Tambah Subprogram Penyaluran 8 8 Gambar 4.78 Perancangan Antarmuka Tambah Subprogram Penyaluran 183 11. Perancangan Antarmuka Tambah Kategori Zakat Maal + Gambar 4.79 Perancangan Antarmuka Tambah Kategori Zakat Maal 184 12. Perancangan Antarmuka Tambah Kategori Mustahik Gambar 4.80 Perancangan Antarmuka Tambah Kategori Mustahik 185 13. Perancangan Antarmuka Tambah User Gambar 4.81 Perancangan Antarmuka Tambah User 186

4.3 Implementation System