25

BAB III

PEMBAHASAN

3.1. Tinjauan Lembaga

3.1.1 Sejarah Lembaga

Fasilitas umum dan sosial merupakan tanggungjawab pengembang di

lingkungan suatu perumahan, terutama sarana ibadah. Maka dari itu pengembang

perumahan Griya Kondang Asri Karawang desa Kondangjaya kecamatan

Karawang Timur mulai membangun masjid pertama pada tahun 2006. Masjid

dengan ukuran kurang lebih 20 x 20 meter persegi ini di beri nama Masjid

Albarokah yang menampung sekitar 800 jamaah. Untuk pengelolaan,

pengembang menyerahkan sepenuhnya kepada warga di lingkungan perumahan.

Seiring berjalanya waktu, warga muslim di perumahan semakin banyak, sehingga

sampai saat ini sudah mengalami 2 kali renovasi dan pelebaran untuk menambah

daya tampung jamaah.

3.1.2 Profil Lembaga

Masjid ini terletak di perumahan Griya Kondang Asri Karawang tepatnya

di Rt 031 Rw 007 desa Kondangjaya kec. Karawang Timur kab. Karawang.

Visi :

Menjadikan Masjid Raya Albarokah Griya Kondang Asri sebagai pusat

pendidikan islam dan tempat ibadah yang aman dan nyaman

Misi :

a. Memakmurkan Masjid

b. Menyelenggarakan kegiatan-kegiatan islami

c. Mempererat silaturahmi antar sesama muslim

26

3.1.3 Struktur Organisasi dan Fungsi

Sruktur Dewan Kemakmuran Masjid Raya Albarokah terdiri dari :

pelindung, penasehat, ketua , sekretaris, bendahara, dan seksi-seksi.

Gambar III. 1

Struktur Organisasi Masjid Raya Albarokah

Adapun Tugas dan tanggung jawab dari struktur organisasi diatas adalah :

1. PENASEHAT :

Memberikan masukan, arahan dan saran kepada pengurus DKM agar seluruh

program kerja bisa berjalan dengan baik sesuai dengan visi dan misi.

2. KETUA DKM :

a. Memimpin serta membina Dewan Kemakmuran Masjid secara menyeluruh

b. Menjalankan dan mengevaluasi program kerja dan anggaran DKM

c. Membuat laporan kegiatan DKM dalam rapat pengurus setiap akhir tahun.

3. SEKRETARIS :

a. Mengelola Sekretariat DKM

27

b. Mewakili dan membantu ketua DKM dalam menjalankan tugas apabila

ketua DKM berhalangan hadir

c. Membantu mengevaluasi program kerja dan anggaran DKM

d. Membantu membuat laporan kegiatan DKM dalam rapat pengurus setiap

akhir tahun

e. Mengadakan, membenahi dan melengkapi administrasi DKM

f. Membuat undangan dan notulen rapat atau kegiatan – kegiatan lainnya

g. Mendistribusikan informasi-informasi kepada seluruh pengurus DKM

h. Menginventarisasi semua aset masjid

4. BENDAHARA :

a. Melakukan kegiatan yang berkaitan dengan keuangan DKM

b. Pencatatan keluar masuk keuangan DKM

c. Mengelola zakat, infaq dan shadaqah

d. Membuat pembukuan dan laporan yang berkaitan dengan keuangan masjid

5. SIE PENDIDIKAN/ TARBIYAH :

a. Menyusun program kegiatan pendidikan pertahun

b. Mengelola dan mengembangkan kegiatan – kegiatan pendidikan

c. Melaporkan seluruh kegiatan yang telah dilaksanakan

6. SIE IBADAH & KEAGAMAAN :

a. Membuat program kegiatan ibadah dan dakwah pertahun

b. Mengelola dan mengembangkan kegiatan-kegiatan ibadah dan dakwah

c. Melaporkan seluruh kegiatan yang telah dilaksanakan

d. Merencanakan dan melaksanakan kegiatan PHBI (Peringatan Hari Besar

Islam)

28

e. Merencanakan dan melaksanakan kegiatan zakat, infaq shadaqah

7. SIE KEPEMUDAAN :

a. Menyusun program kegiatan kepemudaan pertahun

b. Mengelola dan mengembangkan kegiatan kepemudaan

c. Melakukan koordinasi dengan seksi – seksi yang berhubungan dengan

kegiatan – kegiatan yang melibatkan kepemudaan

d. Mengawasi kondisi sarana dan prasarana yang ada di Masjid

8. SIE HUMAS (Hubungan Masyarakat) :

a. Membentuk dan membangun suatu citra yang positif terhadap keberadaan

DKM Masjid

b. Menciptakan komunikasi hubungan kerja yang kondusif, jujur, terbuka dan

transparan

c. Mendristribusikan arus informasi dari DKM ke jamaah Sebagai

Penghubung setiap kegiatan bidang keagamaan kepada jamaah Masjid dan

masyarakat sekitar.

9. SIE PERAWATAN DAN KEBERSIHAN :

Memelihara kebersihan dan perlengkapan Masjid

3.2 Analisa Kebutuhan

A. Analisa sistem

Hingga saat ini Masjid Raya Albarokah Griya Kondang Asri belum

mempunyai website sebagai sarana promosi dan pelayanan zakat secara online.

Oleh karena itu penulis membangun website untuk memberikan informasi dan

pelayanan pembayaran zakat secara online.

29

B. Kebutuhan Pengguna

Dalam penggunaan website ini dibagi dalam beberapa kebutuhan pengguna,

pengguna sebagai admin dapat melakukan beberapa tindakan berikut:

A1. Admin dapat mengelola data Mustahik

A2. Admin dapat mengelola data jenis zakat

A3. Admin dapat melihat dan menghapus data Muzaki

A4. Admin dapat merubah status transaksi

A5. Admin dapat melihat data konfirmasi

A6. Admin dapat melakukan penyaluran dana

Pengguna sebagai Muzaki dapat melakukan tindakan berikut ini :

B1. Muzaki dapat melakukan registrasi

B2. Muzaki dapat melakukan login

B3. Muzaki dapat melakukan edit profil

B4. Muzaki dapat melakukan donasi zizwaf

B5. Muzaki dapat melakukan konfirmasi pembayaran

B6. Muzaki dapat melihat daftar Mustahik

B7. Muzaki dapat melihat daftar Penyaluran

30

3.3 Perancangan Perangkat Lunak

3.3.1 Rancangan Antar Muka

A. Rancangan Antar Muka Tampilan Utama

Gambar III. 2

Rancangan Antar Muka Tampilan Utama

B. Rancangan Antar Muka Tampilan Layanan

Header

Beranda SOP Layanan Program RekeningDonasi

Kalkulatorzakat

Tentang Kami

Link

Footer

Gambar Gambar Gambar

Infaq dan Shadaqah Zakat Maal Zakat Fitrah

Gambar III. 3

Rancangan Antar Muka Tampilan Layanan

31

C. Rancangan Antar Muka Tampilan Registrasi

Header

Beranda SOP Layanan Program RekeningDonasi

Kalkulatorzakat

Tentang Kami

Berita ZakatRegistrasiLogin

Footer

Registrasi

Id Muzaki : XXX9999999No. KTP :Nama Lengkap :Jenis Kelamin :Alamat :

Tempat Lahir :Tanggal Lahir :No. Hp :Foto :

Daftar

xxx999

999

9999999xxxx

xxx

xxxxxxxxxxx

Gambar III. 4

Rancangan Antar Muka Tampilan Registrasi

D. Rancangan Antar Muka Tampilan Login Muzaki

Gambar III. 5

Rancangan Antar Muka Tampilan Login Muzaki

32

E. Rancangan Antar Muka Tampilan Profil Muzaki

Gambar III. 6

Rancangan Antar Muka Tampilan Profil Muzaki

F. Rancangan Antar Muka Tambah Data Mustahik

Header

Mustahik Muzaki Jenis Zakat DaftarTransaki Konfirmasi Penyaluran

Tentang Kami

Data KomentarLogout

Footer

Masukan Data Mustahik

ID Mustahik : X99999Nama :Jenis Kelamin :Alamat :

No. Telp :

Simpan

xxx999

xxx

999

xxx

Gambar III. 7

Rancangan Antar Muka Tambah Data Mustahik

33

G. Rancangan Antar Muka Tambah Jenis Zakat

Header

Mustahik Muzaki Jenis Zakat DaftarTransaki Konfirmasi Penyaluran

Tentang Kami

Data KomentarLogout

Footer

Masukan Jenis Zakat

Kode Zakat : X99999Jenis Zakat :Nominal :Keterangan :Gambar :Saldo :

Simpan

xxx999xxxChoose File999

Gambar III. 8

Rancangan Antar Muka Tambah Jenis Zakat

34

3.3.2 Basis Data

A. ERD(Entity Relationship Diagram)

Muzaki

Idmuzaki Alamat_muzaki

Telp_muzaki

Jk_muzakiNo_ktp

Nm_muzaki

Melakukan Ziswaf

Penyaluran

Mempunyai

Mempunyai

Jenis_zakatMemiliki

mustahik

Tgl_bayar

No_trans

Idmuzaki

kdzakat

Total

Memiliki Konfirmasi

Tgl_konfirmasi Notrans

id Berkas

Keterangan

Saldo

Nm_zakat

Kdzakat

Gambar

Tanggal_lahir

Alamat_muzaki

Nominal

Foto

No_penyaluranTgl_penyaluran

Kdzakat

Totalpenyaluran

Telp_mustahik

Alamat_mustahik

Jk_mustahikNm_mustahik

idmustahik

1 M 1 1

1

M

1

11

1

M

Status

idmstahik

Gambar III. 9

Entity Relationship Diagram Sistem Pembayaran Zakat

35

B. LRS(Logical Relatioship Structure)

Gambar III. 10

Logical Relationship Structure Sistem Pembayaran Zakat

36

C. Spesifikasi File

Dalam perancangan database ini dibuat dengan MySQL pada phpMyadmin.

File-file ini tersimpan pada zakat dengan parameter-parameter sebagai berikut :

1. Spesifikasi File Muzaki

Nama File : File Muzaki

Akronim : Muzaki

Fungsi : Untuk Menyimpan Data Muzaki

Type File : File Master

Organisasi File : Indexed Sequential

Akses File : Random

Media : Harddisk

Panjang Record : 268

Kunci Field : idmuzaki

Software : MySQL

Tabel III. 1Spesifikasi File Muzaki

No Elemen Data Nama Field Tipe Size Ket.1 Id Muzaki Idmuzaki Varchar 10 Primary Key2 No. Ktp No_ktp Varchar 303 Nama Muzaki Nm_muzaki Varchar 804 Jenis kelamin

MuzakiJk_muzaki Varchar 15

5 Alamat Muzaki Alamat_muzaki Text6 Tempat Lahir Tempat_lahir Varchar 207 Tanggal Lahir Tanggal_lahir Date8 No. Telp No_telp Varchar 139 Foto Foto Varchar 100

37

2. Spesifikasi File Ziswaf

Nama File : File Ziswaf

Akronim : Ziswaf

Fungsi : Untuk Menyimpan Data Ziswaf

Type File : File Master

Organisasi File : Indexed Sequential

Akses File : Random

Media : Harddisk

Panjang Record : 40

Kunci Field :

Software : MySQL

Tabel III. 2Spesifikasi File Ziswaf

No Elemen Data Nama Field Tipe Size Ket.1 No. Trans Notrans varchar 102 Tgl. Bayar Tgl_bayar Date3 Id Muzaki Idmuzaki Varchar 104 Kd Zakat Kdzakat Varchar 105 Total Total Double6 Status Status Varchar 10

3. Spesifikasi File Konfirmasi

Nama File : File Konfirmasi

Akronim : Konfirmasi

Fungsi : Untuk Menyimpan Data Muzaki yang telah

menyalurkan zakat

Type File : File Master

38

Organisasi File : Indexed Sequential

Akses File : Random

Media : Harddisk

Panjang Record : 121

Kunci Field : id

Software : MySQL

Tabel III. 3Spesifikasi File Konfirmasi

No Elemen Data Nama Field Tipe Size Ket.1 Id Id Integer 11 Primary Key2 Tgl konfirmasi Tgl_konfirmasi Date3 No transaksi Notrans Varchar 104 Berkas Berkas Varchar 100

4. Spesifikasi File Jenis Zakat

Nama File : File Jenis Zakat

Akronim : Jenis Zakat

Fungsi : Untuk Menyimpan Data Jenis Zakat

Type File : File Master

Organisasi File : Indexed Sequential

Akses File : Random

Media : Harddisk

Panjang Record : 136

Kunci Field : kdzakat

Software : MySQL

39

Tabel III. 4Spesifikasi File Jenis Zakat

No Elemen Data Nama Field Tipe Size Ket.1 Kode Zakat Kdzakat Varchar 6 Primary Key2 Nama zakat Nm_zakat Varchar 303 Nomnal Nominal Float4 Keterangan Keterangan Text5 Gambar Gambar Varchar 1006 Saldo Saldo Double

5. Spesifikasi File Admin

Nama File : File Admin

Akronim : Admin

Fungsi : Untuk Menyimpan Data Admin

Type File : File Master

Organisasi File : Indexed Sequential

Akses File : Random

Media : Harddisk

Panjang Record : 140

Kunci Field : id

Software : MySQL

Tabel III. 5Spesifikasi File Admin

No Elemen Data Nama Field Tipe Size Ket.1 Id Id Integer 10 Primary Key2 Username Username Varchar 303 Password Password Varchar 100

40

6. Spesifikasi File Penyaluran

Nama File : File Penyaluran

Akronim : Penyaluran

Fungsi : Untuk Menyimpan Data Penyaluran

Type File : File Master

Organisasi File : Indexed Sequential

Akses File : Random

Media : Harddisk

Panjang Record : 16

Kunci Field : no_penyaluran

Software : MySQL

Tabel III. 6Spesifikasi File Penyaluran

No Elemen Data Nama Field Tipe Size Ket.1 Idmustahik Idmustahik Varchar 6 Primary Key1 Nomor No_penyaluran Varchar 102 Tanggal

penyaluranTgl_penyaluran Date

3 Kode zakat Kd_zakat Varchar 64 Total penyaluran Totalpenyaluran Double

7. Spesifikasi File Mustahik

Nama File : File Mustahik

Akronim : Mustahik

Fungsi : Untuk Menyimpan Data Mustahik

Type File : File Master

Organisasi File : Indexed Sequential

41

Akses File : Random

Media : Harddisk

Panjang Record : 79

Kunci Field : idmustahik

Software : MySQL

Tabel III. 7Spesifikasi File Mustahik

No Elemen Data Nama Field Tipe Size Ket.1 Id mustahik Id mustahik Varchar 6 Primary Key2 Nama mustahik Nm_mustahik Varchar 503 Jenis kelamin

MustahikJk_mustahik Varchar 10

4 Alamat mustahik Alamat_mustahik Text5 Telepon mustahik Telp_mustahik Varchar 13

3.3.3.Rancangan Struktur Navigasi

Struktur navigasi dugunakan untuk mengetahui alur dari sebuah website.

Pada umumnya posisi struktur navigasi berada dibagian kiri atas halaman web

baik itu berbentuk horizontal ataupun vertikal. Adapun gambaran struktur

navigasi yang penulis buat sebagai berikut :

42

1. Struktur Navigasi User

Gambar III. 11

Struktur Navigasi User

43

2. Struktur Navigasi Muzaki

Gambar III. 12

Struktur Navigasi Muzaki

3. Struktur Navigasi Administrator

Login

Mustahik KomentarKonfirmasiDaftarTransaksi

JenisZakatMuzaki Logout

Hapus Komentar

Halaman Utama

Tambah

Simpan

Edit

Hapus

Update

Hapus

Tambah

Simpan

Edit

Hapus

Hapus

Gambar III. 13

Struktur Navigasi Admin

44

3.4 Implementasi dan Pengujian Unit

3.4.1 Implementasi

A. Implementasi Rancangan Antar Muka

Implementasi rancangan antar muka pada sistem pembayaran zakat

berdasarkan hasil rancangan antar muka.

1. Halaman Login Admin

Gambar III. 14 Halaman Login Admin

2. Halaman Utama Admin

Gambar III. 15 Halaman Utama Admin

45

3. Halaman Tampil Data Mustahik

Gambar III. 16 Halaman Tampil Data Mustahik

4. Halaman Tampil Data Muzaki

Gambar III. 17 Halaman Tampil Data Muzaki

46

5. Halaman Tampil Jenis Zakat

Gambar III. 18 Halaman Tampil Jenis Zakat

6. Halaman Tampil Data Transaksi

Gambar III. 19 Halaman Tampil Data Transaksi

47

7. Halaman Tampil Data Konfirmasi

Gambar III. 20 Halaman Tampil Data Konfirmasi

8. Halaman Tampil Data Penyaluran

Gambar III. 21 Halaman Tampil Data Penyaluran

48

9. Halaman Utama Pengunjung

Gambar III. 22 Halaman Utama Pengunjung

10. Halaman Utama Muzaki

Gambar III. 23 Halaman Utama Muzaki

49

11. Halaman Registrasi

Gambar III. 24 Halaman Registrasi

12. Halaman Profil Muzaki

Gambar III. 25 Halaman Profil Muzaki

50

13. Halaman Katalog Zizwaf

Gambar III. 26 Halaman Katalog Ziswaf

14. Halaman Transaksi Donasi Online

Gambar III. 27 Halaman Transaksi Donasi Online

51

B. Spesifikasi Sistem Komputer

1. Spesifikasi Perangkat Keras

a. Server

1. CPU

(a) Processor Intel® Core (TM) i3-3217

(b) RAM DDR2 2 GB

(c) Hard Disk 500 GB

2. Mouse

3. Keyboard

4. Monitor dengan resolusi layar minimum 1024x768

5. Koneksi internet dengan kecepatan 2 Mbps.

b. Client

1. CPU

(a) Processor Intel Pentium IV

(b) RAM DDR2 1 GB

(c) Hard Disk 80 GB

2. Mouse

3. Keyboard

4. Monitor dengan resolusi layar minimum 1024x768

5. Koneksi internet dengan kecepatan 56 kbps.

2. Spesifikasi Perangkat Lunak

a. Server

1. Sistem operasi yang umum digunakan seperti: Microsoft Windows

atau Linux (Ubuntu, Fedora, dan lain-lain).

52

2. Aplikasi bundle web server seperti: Xampp, WampServer, php2triad

yang terdiri dari beberapa komponen, diantaranya:

a) Aplikasi Apache Server v2

b) Aplikasi PHP Server v5

c) Aplikasi MySQL Server v5

d) Aplikasi phpMyAdmin v3

3. Aplikasi Web browser seperti Mozilla Firefox, Internet Explorer,

Google Chrome.

b. Client

1. Sistem operasi yang umum digunakan seperti: Microsoft Windows

atau Linux (Ubuntu, Fedora, dan lain-lain).

2. Aplikasi web browser seperti Mozilla Firefox, Internet Explorer,

Google Chrome.

53

3.4.2.Pengujian Unit

A. Pengujian Terhadap Form Login

Tabel III. 8Hasil Pengujian Black Box Testing Halaman Login

No. Skenariopengujian

Test case Hasil yangdiharapkan

Hasilpengujian

Kesimpulan

1. Username danpassword tidakdiisi kemudianklik tombolmasuk

Username :(kosong)

Password :(kosong)

Sistem akanmenolak aksesuser danmenampilkan“Username danpassword yanganda masukansalah”

Sesuaiharapan

Valid

2. Mengetikkanusername tetapipassword tidakdiisi ataukosongkemudian kliktombol masuk

Username :admin

Password :(kosong)

Sistem akanmenolak aksesuser danmenampilkan“Username danpassword yanganda masukansalah”

Sesuaiharapan

Valid

3 Mengetikkanpasswordtetapi usernametidak diisi ataukosongkemudian kliktombol masuk

Username :(kosong)

Password :admin

Sistem akanmenolak aksesuser danmenampilkan“Username danpassword yanganda masukansalah”

Sesuaiharapan

Valid

54

B. Pengujian Terhadap Form Registrasi

Tabel III. 9Hasil Pengujian Black Box Testing Halaman Registrasi

No. Skenariopengujian

Test case Hasil yangdiharapkan

Hasilpengujian

Kesimpulan

1. Semua kolomDiisi kecualiNo.KTP,kemudian kliktombol Daftar

No. KTP :

(kosong)

Sistem akanmenolak akses userdan menampilkan“No. KTP masihkosong”

Sesuaiharapan

Valid

2. Semua kolomDiisi kecualiNomor HP,kemudian kliktombol Daftar

Nomor HP :

(kosong)

Sistem akanmenolak akses userdan menampilkan“Nomor HP masihkosong”

Sesuaiharapan

Valid

3. Semua kolomDiisi kecualiJenis Kelamin,kemudian kliktombol Daftar

JenisKelamin :

(kosong)

Sistem akanmenolak akses userdan menampilkan“Jenis Kelaminbelum dipilih”

Sesuaiharapan

Valid

C. Pengujian Terhadap Form Transaksi Donasi Online

Tabel III. 10Hasil Pengujian Black Box Testing Halaman Transaksi Donasi Online

No. Skenariopengujian

Test case Hasil yangdiharapkan

Hasilpengujian

Kesimpulan

1. Nominaldikosongkankemudian kliksimpan

Nominal :

(kosong)

Sistem akanmenolak akses userdan menampilkan“Nominal masihkosong”

Sesuaiharapan

Valid