Perancangan Design HASIL DAN PEMBAHASAN

4.3.1 Sistem Operasional

Sistem Operasional adalah tahap awal penulis dalam melakukan rancangan sistem yang bertujuan untuk menentukan aktifitas-aktifitas seseorang dan alur kerja sistem serta dokumen. Untuk sistem operasional yang akan dirancang adalah sebagai berikut : Pembayar ZIS Petugas ZIS Penerima ZIS Gambar 4.5 Sistem Operasional ZIS Yang Diusulkan Bendahara Data Server 1 Sistem informasi Manajemen Penerimaan dan Pengeluaran ZIS Berbasis Web 5.b 4.b 2c 2d 1b,c 4.a 5.a 1a 2b 2a 3 2 1d,e Ketua Masjid 85 Keterangan : 1. Aktifitas Pembayar ZIS a. Pembayar ZIS ke bagian petugas ZIS atau melalui transfer bank untuk membayar ZIS yang berupa uang atau beras. b. Pembayar ZIS mengisi form penerimaan ZIS pada sistem. c. Pembayar ZIS dapat memberikan komentar ke dalam sistem. d. Pembayar ZIS menerima bukti pembayaran dari sistem setelah di validasi oleh Petugas ZIS, Pembayar ZIS dapat melihat komentar, daftar pembayar dan penerima ZIS dari sistem, serta dapat memperoleh informasi-informasi seputar zakat. 2. Aktifitas Penerima ZIS a. Penerima ZIS menerima ZIS yang berupa sejumlah uang atau beras dari petugas ZIS. b. Penerima ZIS menerima bukti pengeluaran dari. c. Penerima ZIS mengisi form pengeluaran ZIS, Penerima ZIS dapat memberikan komentar ke dalam sistem. d. Penerima ZIS dapat melihat komentar, daftar penerimaan dan pengeluaran ZIS dari sistem, serta dapat memperoleh informasi- informasi seputar zakat. 3. Aktifitas Petugas ZIS a. Penerimaan ZIS 86 1. Petugas ZIS menerima pembayaran ZIS yang berupa uang atau beras dari pembayar ZIS. 2. Petugas ZIS mengisi form penerimaan zakat. 3. Petugas ZIS mencetak bukti pembarayan untuk di berikan kepada pembayar ZIS dari sistem. b. Pengeluaran ZIS 1. Petugas ZIS mengeluarkan ZIS yang berupa uang atau beras yang telah terkumpul. 2. Petugas ZIS mengisi form data penerima ZIS. 3. Petugas ZIS mencetak bukti pengeluaran untuk di berikan kepada penerima ZIS dari sistem. 4. Aktifitas Bendahara a. Bendahara melakukan validasi data penerimaan ZIS setelah adanya transaksi pembayaran. b. Bendahara dapat mengolah data komentar dan mengolah user yang menjadi petugas zis. 5. Aktifitas Ketua Masjid a. Ketua Masjid dapat melihat laporan keseluruhan penerimaan dan pengeluaran ZIS, serta rekapitulasi ZIS, dan dapat mencetak laporan tersebut langsung dari sistem. b. Ketua Masjid dapat juga memberikan komentar ke dalam sistem. 87 Flowchart sistem yang diusulkan : Sistem Informasi Manajemen Penerimaan dan Pengeluaran ZIS Yang Diusulkan Penerima ZIS Mustahiq Ketua Masjid Bendahara Petugas ZIS Amil Pembayar ZIS Muzakki Membayar ZIS Start Input Data Pembayar ZIS Sudah Divalidasi? Kwitansi Pembayaran Y N Daftar Penerima ZIS penerimaan_zis Stop Start Input Data Penerima ZIS pengeluaran_zis Diterima? Y Stop Daftar Penerima ZIS N Start Mengeluar kan ZIS Input Data Pengeluaran ZIS pengeluaran_zis Sudah Divalidasi? Y Kwitansi Pengeluaran Stop N Login Berhasil? Y N Start Login Berhasil? N Validasi Komentar Validasi Penerimaan ZIS Validasi Pengeluaran ZIS Stop N Login Berhasil? Start Laporan Pengeluaran Zakat Laporan Penerimaan Zakat Laporan Rekapitulasi Penerimaan Zakat Laporan Rekapitulasi Pengeluaran Zakat Stop Gambar 4.6 Flowchart Sistem Operasional ZIS Yang Diusulkan

4.3.2 Perancangan DFD Data Flow Diagram

Dalam perancangan sistem yang diusulkan bertujuan bertujuan untuk memberikan suatu gambaran umum kepada pengguna dan orang-orang yang memberikan tentang sistem baru yang akan dirancang. 88 Berikut adalah diagram konteks dari sistem yang diusulkan : Gambar 4.7 Diagram Konteks Sistem Yang Diusulkan Kamus Data Diagram Konteks : 1. Entitas : Pembayar ZIS Input : Form_ZIS_Masuk, Form_Komentar Output : Bukti_Bayar_ZIS, Data_ZIS, Data_Komentar Ringkasan : Entitas pembayar ZIS memberikan input ke dalam sistem dengan mengisi Form_ZIS_Masuk dan Form_Komentar, pembayar ZIS akan menerima output berupa Bukti_Bayar_ZIS setelah di validasi oleh petugas ZIS, Data_ZIS, dan Data_Komentar. 2. Entitas : Penerima ZIS 89 Input : Form_Daftar_Terima_ZIS, Form_Komentar Output : Bukti_Terima_ZIS, Data_ZIS, Data_Komentar Ringkasan : Entitas penerima ZIS memberikan input ke dalam sistem dengan mengisi Form_Daftar_Terima_ZIS dan Form_Komentar, kemudian pembayar ZIS akan menerima output berupa Bukti_Terima_ZIS setelah di validasi oleh petugas ZIS, Data_ZIS, dan Data_Komentar. 3. Entitas : Petugas ZIS Input : Form_ZIS_Masuk, Form_ZIS_Keluar, Form_Komentar Output : Bukti_Bayar_ZIS, Bukti_Terima_ZIS, Data_Komentar Ringkasan : Entitas petugas ZIS memberikan input ke dalam sistem dengan mengisi Form_ZIS_Masuk, Form_ZIS_Keluar dan Form_Komentar, petugas ZIS akan menerima output dari sistem berupa Bukti_Bayar_ZIS, Bukti_Terima_ZIS, dan Data Komentar. 4. Entitas : Ketua Masjid Input : Form_Komentar Output : Lap_Penerimaan_ZIS, Lap_Pengeluaran_ZIS, Rekapitulasi_ZIS, Data_Komentar Ringkasan : Entitas ketua masjid memberikan input ke dalam sistem dengan mengisi Form_Komentar, ketua menerima output 90 Lap_ZIS_Masuk, Lap_ZIS_Keluar, Rekapitulasi_ZIS dari data yang sudah diolah oleh sistem, dan Data_Komentar. 1.0 Olah Data 2.0 Transaksi Penerimaan ZIS 4.0 Cetak Laporan Rekapitulasi ZIS mustahiq Ketua Masjid Form_Komentar Penerima ZIS Form_Komentar Pembayar ZIS Form_Komentar Form_ZIS_Masuk penerimaan_zakat Bukti_Bayar_ZIS Rekapituliasi_ZIS Lap_ZIS_Masuk Lap_ZIS_Keluar 3.0 Transaksi Pengeluaran ZIS Ketua Masjid penerimaan_infaq_sadaqah Petugas ZIS Form_Komentar Data_Komentar Data_Komentar Data_Komentar Data_Komentar komentar penerimaan_zakat penerimaan_infaq_sadaqah Form_ZIS_Keluar Bukti_Terima_ZIS pengeluaran_zis Data_ZIS Data_ZIS Form_Daftar_Terima ZIS Data_Mustahiq Gambar 4.8 DFD Diagram 0 Level 1, Proses Keseluruhan Sistem 91 Kamus Data DFD Diagram 0 Level 1, Proses Keseluruhan Sistem : 1. Proses 1.0 Nama Proses : Olah Data Input : Form_Komentar, Form_Daftar_Terima_ZIS Output : Data_Komentar, Data_Mustahiq Ringkasan : Mengisi form untuk member komentar, kemudian sistem akan mengolah data komentar tersebut. 2. Proses 2.0 Nama Proses : Transaksi Penerimaan ZIS Input : Form_ZIS_Masuk Output : Bukti_Bayar_ZIS, Data_ZIS Ringkasan : Mengisi form untuk pembayaran ZIS, kemudian sistem akan memberikan bukti bayar ZIS dan data ZIS. 3. Proses 3.0 Nama Proses : Transaksi Pengeluaran ZIS Input : Form_ZIS_Keluar Output : Bukti_Terima_ZIS, Data_ZIS Ringkasan : Mengisi form untuk Pengeluaran ZIS, kemudian sistem akan memberikan bukti terima ZIS dan data ZIS. 4. Proses 4.0 Nama Proses : Cetak Laporan dan Rekapitulasi ZIS Output : Lap_ZIS_Masuk Lap_ZIS_Masuk Rekapitulasi_ZIS 92 Ringkasan : Mengeluarkan laporan ZIS dan rekapitulasinya. Gambar 4.9 DFD Diagram 1 Level 2, Proses Olah Data Kamus Data DFD Diagram 1 Level 2, Proses Olah Data : 1. Proses 1.1 Nama Proses : Entry Komentar Input : Form_Komentar Output : Komentar_Belum_Valid Ringkasan : Mengisi form untuk memberi komentar. 2. Proses 1.1P Nama Proses : Verifikasi Komentar 93 Input : Komentar_Belum_Valid Output : Komentar_Sudah_Valid , Data_Komentar Ringkasan : Proses verifikasi komentar sebelum ditampilkan. penerimaan_zakat 2.1 Penerimaan ZIS Form_ZIS_Masuk Pembayar ZIS Bukti_Bayar_ZIS 2.2 Cetak Bukti Pembayaran ZIS 2.1P Verifikasi Penerimaan ZIS penerimaan_infaq_sadaqah penerimaan_zakat penerimaan_infaq_sadaqah Data_ZIS Petugas ZIS Form_ZIS_Masuk Gambar 4.10 DFD Diagram 2 Level 2, Proses Transaksi Penerimaan ZIS Kamus Data DFD Diagram 2 Level 2, Proses Transaksi Penerimaan ZIS : 1. Proses 2.1 Nama Proses : Penerimaan ZIS Input : Form_ZIS_Masuk Output : ZIS_Masuk_Belum_Valid Ringkasan : Mengisi form untuk pembayaran ZIS. 2. Proses 2.1P Nama Proses : Verifikasi Penerimaan ZIS Input : ZIS_Masuk_Belum_Valid Output : ZIS_Masuk_Sudah _Valid Data_ZIS 94 Ringkasan : Proses verifikasi penerimaan ZIS sebelum cetak bukti pembayaran ZIS. 3. Proses 2.2 Nama Proses : Cetak Bukti Pembayaran ZIS Input : ZIS_Masuk_Valid Output : Bukti_Bayar_ZIS Data_ZIS Ringkasan : Proses cetak bukti pembayaran ZIS. Bukti_Terima_ZIS Gambar 4.11 DFD Diagram 3 Level 2, Proses Transaksi Pengeluaran ZIS Kamus Data DFD Diagram 3 Level 2, Proses Transaksi Pengeluaran ZIS : 1. Proses 3.1 Nama Proses : Pengeluaran ZIS Input : Form_ZIS_Keluar Output : ZIS_Keluar_Belum_Valid Ringkasan : Mengisi form untuk pengeluaran ZIS. 95 2. Proses 3.1P Nama Proses : Verifikasi Pengeluaran ZIS Input : ZIS_Keluar _Belum_Valid Output : ZIS_Keluar_Sudah _Valid Data_ZIS Ringkasan : Proses verifikasi pengeluaran ZIS sebelum cetak bukti terima ZIS. 3. Proses 3.2 Nama Proses : Cetak Bukti Pengeluaran ZIS Input : ZIS_Keluar_Valid Output : Bukti_Terima_ZIS Data_ZIS Ringkasan : Proses cetak bukti terima ZIS. Gambar 4.12 DFD Diagram 4 Level 2, Proses Cetak Laporan dan Rekapitulasi ZIS Kamus Data DFD Diagram 4 Level 2, Proses Cetak laporan dan Rekapitulasi ZIS: 1. Proses 4.1 Nama Proses : Cetak Laporan ZIS 96 Input : Data_ZIS Output : Lap_Penerimaan_ZIS, Lap_Pengeluaran_ZIS Ringkasan : Proses mencetak laporan ZIS. 2. Proses 4.2 Nama Proses : Cetak Rekapitulasi ZIS Input : Data_ZIS Output : Rekapitulasi_ZIS Ringkasan : Proses mencetak laporan ZIS. 97 4.3.3 Perancangan Database 4.3.3.1 ERD Entity Relation Diagram Dalam pembayaran zakat dan pembayaran infaqsadaqah, muzakki membayar zakat, infaq, dan sadaqah kemudian memberi masukan ke dalam sistem dan mustahiq menerima zakat, infaq, dan sadaqah dan memberi masukan ke dalam sistem juga, maka ERD yang terbentuk adalah sebagai berikut : muzakki membayar zakat penerimaan_zis nama_muzakki tlp_muzakki alamat_muzakki id_muzakki Id_penerimaan_zis tgl_trm_zis jam_trm_zis jenis_zis beras_zis validasi_trm_zis uang_zis id_muzakki dikeluarkan untuk mustahiq pengeluaran_zis nama_mustahiq tlp_mustahiq alamat_mustahiq id_mustahiq no_ktp_mustahiq Id_keluar_zis tgl_keluar_zis jam_keluar_zis validasi_zis id_zis menyimpan data zis id_zis mengeluarkan data Id_penerimaan_zis Id_keluar_zis Gambar 4.13 ERD Penerimaan dan Pengeluaran ZIS 98 Dalam penerimaan dan pengeluaran admin akan melakukan validasi terhadap transaksi tersebut, maka ERD yang terbentuk adalah sebagai berikut : admin validasi pengeluaran_zis username password nama_admin email_admin tlp_admin blokir level Id_keluar_zis tgl_keluar_zis jam_keluar_zis validasi_zis id_zis username validasi penerimaan_zis Id_penerimaan_zis tgl_trm_zis jam_trm_zis validasi_trm_zis id_muzakki username validasi komentar Id_komentar nama_komentar username email_komentar tlp_komentar isi tgl_komentar validasi_komentar 99 Tabel 4.2 Kamus Data Admin = admin {username + password + nama_admin + email_admin + tlp_admin + level + blokir} Komentar = komentar {id_komentar + username + nama_komentar + email_komentar + tlp_komentar + isi + tgl_komentar + validasi_komentar} Penerimaan ZIS = penerimaan_zis {id_penerimaan_zis + id_muzakki + username + tgl_trm_zis + jam_ trm_zis + validasi_ trm_zis } Muzakki = muzakki {id_muzakki + nama_muzakki + alamat_muzakki + tlp_muzakki } Mustahiq = mustahiq {id_ mustahiq + id_keluar_zis + nama_mustahiq + no_ktp_mustahiq + alamat_mustahiq + tlp_ mustahiq } ZIS = zis {id_ zis + id_penerimaan_zis + jenis_zis + uang_zis + beras_ } Pengeluaran ZIS = pengeluaran_zis {id_keluar_zis + id_zis + username+ tgl_keluar_zis + jam_ keluar_zis + validasi_ zis } 100

4.3.3.2 Normalisasi

1. Bentuk UnNormalized db_lazis username password nama_admin email_admin tlp_admin level blokir Id_komentar username nama_komentar email_komentar tlp_komentar isi tgl_komentar validasi_komentar id_penerimaan_zis id_muzakki username tgl_trm_zis jam_trm_zis validasi_trm_zis id_muzakki nama_muzakki alamat_muzakki tlp_muzakki id_mustahiq Id_keluar_zis nama_mustahiq no_ktp_mustahiq alamat_mustahiq tlp_mustahiq Id_zis Id_penerimaan_zis jenis_zis uang_zis beras id_keluar_zis id_zis username tgl_keluar_zis jam_keluar_zis validasi_keluar_zis 101 Gambar 4.14 Normalisasi Unnormalized 2. Normaliasasi Bentuk 1NF admin username password nama_admin email_admin tlp_admin level blokir komentar Id_komentar username nama_komentar email_komentar tlp_komentar isi tgl_komentar validasi_komentar penerimaan_zis id_penerimaan_zis id_muzakki username tgl_trm_zis jam_trm_zis validasi_trm_zis muzakki id_muzakki nama_muzakki alamat_muzakki tlp_muzakki zis Id_zis Id_penerimaan_zis jenis_zis uang_zis beras mustahiq id_mustahiq Id_keluar_zis nama_mustahiq no_ktp_mustahiq alamat_mustahiq tlp_mustahiq pengeluaran_zis id_keluar_zis id_zis username tgl_keluar_zis jam_keluar_zis validasi_keluar_zis Gambar 4.15 Normalisasi Bentuk 1NF 102 3. Normaliasasi Bentuk 2NF admin username password nama_admin email_admin tlp_admin level blokir komentar id_komentar username nama_komentar email_komentar tlp_komentar isi tgl_komentar validasi_komentar penerimaan_zis id_penerimaan_zis id_muzakki username tgl_trm_zis jam_trm_zis validasi_trm_zis muzakki id_muzakki nama_muzakki alamat_muzakki tlp_muzakki zis id_zis id_penerimaan_zis jenis_zis uang_zis beras mustahiq id_mustahiq Id_keluar_zis nama_mustahiq no_ktp_mustahiq alamat_mustahiq tlp_mustahiq pengeluaran_zis id_keluar_zis id_zis username tgl_keluar_zis jam_keluar_zis validasi_keluar_zis Gambar 4.16 Normalisasi Bentuk 2NF Keterangan : = Primary key = Foreign key 103 4. Tabel Relationship muzakki id_muzakki nama_muzakki alamat_muzakki tlp_muzakki penerimaan_zis id_penerimaan_zis id_muzakki username tgl_trm_zis jam_trm_zis validasi_trm_zis 1 M zis id_zis id_penerimaan_zis jenis_zis uang_zis beras 1 M pengeluaran_zis id_keluar_zis id_zis username tgl_keluar_zis jam_keluar_zis validasi_keluar_zis 1 1 mustahiq id_mustahiq Id_keluar_zis nama_mustahiq no_ktp_mustahiq alamat_mustahiq tlp_mustahiq 1 1 admin username password nama_admin email_admin tlp_admin level blokir komentar id_komentar username nama_komentar email_komentar tlp_komentar isi tgl_komentar validasi_komentar 1 M M 1 M Gambar 4.17 Tabel Relationship 5. Struktur Database Berdasarkan rancangan database diatas selanjutnya penulis akan menjelaskannya dalam bentuk uraian struktur database seperti dibawah ini : a. Tabel admin Nama Field Tipe Data Length Keterangan username varchar 15 username untuk user admin password varchar 15 password untuk user admin 104 nama_admin varchar 25 nama lengkap user admin email_admin varchar 40 alamat email user admin tlp_admin varchar 15 nomor telepon user admin level varchar 12 tingkat akses sistem blokir enum Y,N izin penggunaan user admin b. Tabel komentar Nama Field Tipe Data Length Keterangan id_komentar int 11 nomor urut komentar username varchar 15 username pelaku validasi nama_komentar varchar 25 nama lengkap pemberi komentar email_komentar varchar 40 email pemberi komentar tlp_komentar varchar 15 nomor telepon pemberi komentar isi text 100 isi komentar tgl_komentar date - tanggal masuk komentar validasi_komentar enum sudah,belum status validasi komentar c. Tabel penerimaan_zis Nama Field Tipe Data Length Keterangan id_penerimaan_zis int 11 nomor urut pembayar zakat id_muzakki int 11 id muzakki username varchar 15 username pelaku validasi tgl_trm_zis date - tanggal pembayaran zakat jam_trm_zis time - jam pembayaran zakat validasi_trm_zis enum sudah,belum status validasi pembayaran zakat d. Tabel muzakki Nama Field Tipe Data Length Keterangan id_muzakki int 11 kode muzakki nama_ muzakki varchar 25 nama lengkap muzakki alamat_ muzakki varchar 100 alamat muzakki tlp_ muzakki varchar 15 nomor telepon muzakki e. Tabel mustahiq 105 Nama Field Tipe Data Length Keterangan id_ mustahiq int 11 kode mustahiq Id_keluar_zis Int 11 kode pengeluaran zis nama_ mustahiq varchar 25 nama lengkap mustahiq no_ktp_ mustahiq varchar 100 no ktp mustahiq alamat_mustahiq varchar 100 alamat mustahiq tlp_ mustahiq varchar 15 nomor telepon mustahiq f. Tabel zis Nama Field Tipe Data Length Keterangan id_zis int 11 kode zis id_penerimaan_zis varchar 25 kode penerimaan zis jenis_zis varchar 15 Jenis zis uang_zis int 11 Banyaknya uang beras varchar 15 Banyaknya beras

f. Tabel pengeluaran_zis

Nama Field Tipe Data Length Keterangan id_keluar_zis int 11 nomor urut pengeluaran zis id_zis int 11 nomor unik mustahiq username varchar 15 username validasi pengeluaran zis tgl_keluar_zis date - tanggal pengeluaran zis jam_keluar_zis time - jam pengeluaran zis validasi_zis enum sudah,belum status validasi pengeluaran zis 106

4.3.4 Flowchart Program

Flowchart program digunakan untuk menjelaskan tahapan proses yang terdapat di dalam program. a Flowchart Proses Oleh Guest dan Petugas Zis Amil Gambar 4.18 Flowchart Pemberian Komentar Oleh GuestPetugas ZIS 107