PERANCANGAN DAN PEMBUATAN SISTEM INFORMASI

PENGOLAHAN ZAKAT FITRAH PADA MASJID

AMALIYAH DESA PULO JANTAN BERBASIS
FRAMEWORK CODEIGNITER

TUGAS AKHIR

Untuk Memenuhi Persyaratan Memperoleh Gelar Diploma (D3) Pada

Program Studi Manajemen Informatika Fakultas Sains Dan Teknologi Informasi
Universitas Labuhanbatu

OLEH :
VIDYA ANGGRYANI
17.051.00.094

PROGRAM STUDI MANAJEMEN INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS LABUHANBATU

RANTAUPRAPAT

2020
 BAB III

METODE PENELITIAN

3.1 Metode Pengumpulan Data

Metode pengumpulan data merupakan tahapan proses riset dimana peneliti

menerapkan cara dan tekhnik tertentu dalam rangka mengumpulkan data secara

sistematis. Pengumpulan data dilakukan untuk memperoleh informasi yang

dibutuhkan dalam rangka mencapai tujuan penelitian. Penulis menggunakan

beberapa metode dan cara dalam melakukan pengumpulan data. Ada 3 (tiga)

bagian metode dalam melakukan pengumpulan data, yaitu:

a. Pengamatan (Observasi)

Yaitu mengamati secara langsung objek penelitian yaitu Masjid Amaliyah

Desa Pulo Jantan guna memberikan gambaran yang sebenarnya tentang objek

yang diteliti.

b. Wawancara (Interview)

Yaitu pengumpulan data dengan menggunakan pendekatan langsung

dengan mengajukan pertanyaan tanya jawab kepada badan amil zakat fitrah pada

Masjid Amaliyah Desa Pulo Jantan.

c. Studi Pustaka

Dalam tahap ini mempelajari sumber-sumber atau bacaan yang

berhubungan dengan masalah yang dihadapi, yang diperoleh melalui buku-buku,

data-data penelitian, Jurnal yang berhubungan dengan Aplikasi Pengolahan Zakat

Fitrah berbasis Codeigniter sebagai referensi.

3.1.1 Metode Penelitian

Pada penelitian ini metode yang digunakan yaitu metode waterfall. Metode

air terjun atau waterfall sering dinamakan dengan siklus hidup klasik, yang

menggambarkan pendekatan secara sistematis dan berurutan melalui tahapan

perencanaan(planning), permodelan(modelling), kontruksi(construction), dan

penyerahan sistem ke pengguna.

3.2 Metode Perancangan Sistem

Pada dasarnya perancangan proses yang dibuat adalah perubahan dari

sistem yang berjalan manual menjadi terkomputerisasi. Agar dapat

menyelesaikan permasalah pada sistem yang lama, maka untuk saat ini dilakukan

penyimpanan dengan cara terkomputersasi dimana penyimpanan tersebut

dilakukan di database.

3.2.1 Rancangan Masukan (input)

Perancangan input merupakan form sebagai penginputan data yang

dibutuhkan.perancangan input akan dijelaskan dibawah ini :

1. Perancangan Login Menu

Menu ini akan meminta Username dan Password sebelum masuk.

Nama Keluaran : Form login

Fungsi :Untuk membuka sistem informasi

pengolahan zakat fitrah

Media : Program web menggunakan framework

codeigniter

Distribusi : Admin
 Rangkap : Satu

Frekuensi :-

Gbr 3.1 Form Login

2. Rancangan form Menu Utama

Tampilan ini merupakan tampilan menu utama dari sistem yang akan

dijalankan.

Nama Masukan : Tampilan Menu Utama

Fungsi : Tampilan awal sistem

Media : Web

Distribusi :-

Rangkap :-

Frekuensi :-
 Gbr 3.2 Form Tampilan Utama

3. Rancangan form Tambah Data Badan Amil

Tampilan ini berguna untuk menampilkan, menambah, mengedit dan

menghapus data badan amil zakat fitrah.

Nama Masukan Tambah data badan amil

Fungsi : Sebagai menambah data badan amil

Media : Web

Distribusi : Admin

Rangkap : 1 (satu)

Frekuensi :-
 Gbr 3.3 Form Tambah Data Badan Amil

4. Rancangan form Jenis Zakat

Di dalam form jenis zakat terdapat form-form sebagai berikut :

a. Form Satuan Zakat

Tampilan ini berguna untuk menampilkan, menambah, mengedit dan

menghapus satuan zakat fitrah.

Nama Masukan : Satuan zakat fitrah

Fungsi : Untuk melihat satuan zakat fitrah

Media : Web

Distribusi : Admin

Rangkap : 1 (satu)

Frekuensi :-
 Gbr 3.4 Form Satuan Zakat

b. Form Jenis Zakat

Tampilan ini berguna untuk menampilkan, menambah, mengedit dan

menghapus jenis barang yang diberi oleh pemberi atau pembayar zakat fitrah.

Nama Masukan : Jenis zakat fitrah

Fungsi : Untuk melihat jenis zakat fitrah

Media : Web

Distribusi : Admin

Rangkap : 1 (satu)

Frekuensi :-

Gbr 3.5 Form Satuan Zakat

 5. Rancangan Form Pembayaran Zakat

Tampilan ini berguna untuk menginput orang-orang yang akan membayar zakat

fitrah.

Nama Masukan : Pembayaran zakat fitrah

Fungsi : Untuk menginput orang yang akan membayar zakat

Media : Web

Distribusi : Admin / Badan Amil

Rangkap : 1 (satu)

Frekuensi :-
 Gbr 3.6 Form Pembayaran Zakat Fitrah

6. Rancangan Form Pembagian Zakat Fitrah

Tampilan ini berguna untuk menginput orang-orang yang akan membayar zakat

fitrah.

Nama Masukan : Pembagian zakat fitrah

Fungsi : Untuk menginput orang yang akan menerima zakat

fitrah

Media : Web

Distribusi : Admin / Badan Amil

Rangkap : 1 (satu)

Frekuensi :-

Gbr 3.7 Form pembagian zakat fitrah

3.2.2 Rancangan Proses (proccess)

Di bawah ini adalah rancangan proses dari sistem yang telah dibuat :

1. Use Case Diagram

Munawar (2018:89) dalam bukunya yang berjudul Analis Perancangan

Sistem Berorientasi Objek dengan UML menjelaskan tentang Use Case

Diagram. Use Case Diagram adalah deskripsi fungsi dari sebuah system dari

perspektif pengguna. Use Case bekerja dengan cara mendeskripsikan tipikal

interaksi antara user (pengguna) sebuah sistem dengan sistemnya sendiri

melalui sebuah cerita bagaimana sebuah sistem dipakai. Berikut adalah Use

Case Diagram pada sistem informasi pengolahan zakat fitrah :

Gbr 3.8 Use Case Diagram

Keterangan :

1. Badan Amil login ke sistem terlebih dahulu.

2. Badan Amil masuk ke menu utama.

3. Badan Amil input atau memasukkan data badan amil.

4. Muzakki memilih jenis zakat.

5. Muzakki membayar zakat.

6. Badan Amil input atau memasukkan data muzakki (pembayar zakat).

7. Badan Amil input atau memasukkan data penerima zakat.

8. Badan Amil cetak laporan

9. Badan Amil logout atau keluar dari sistem.

2. Activity Diagram

Munawar (2018:127) dalam bukunya yang berjudul Analis Perancangan

Sistem Berorientasi Objek dengan UML menjelaskan tentang Acitivity

Diagram. Acitivity Diagram merupakan bagian penting dari UML yang

menggambarakan aspek dinamis dari sistem. Berikut ini adalah Activity

Diagram pada sistem informasi pengolahan zakat fitrah :

 Gbr 3.9 Activity Diagram

Keterangan :

1. Badan Amil login ke sistem terlebih dahulu.

2. Badan Amil masuk ke menu utama.

3. Badan Amil input atau memasukkan data badan amil.

4. Muzakki memilih jenis zakat.

5. Muzakki membayar zakat.

6. Badan Amil input atau memasukkan data muzakki (pembayar zakat).

7. Badan Amil input atau memasukkan data penerima zakat.

8. Badan Amil cetak laporan

9. Badan Amil logout atau keluar dari sistem.

 3. Sequence Diagram

Munawar (2018:137) dalam bukunya yang berjudul Analis Perancangan

Sistem Berorientasi Objek dengan UML menjelaskan tentang Sequence Diagram.

Sequence Diagram digunakan untuk menggambarkan perilaku pada sebuah

skenario. Diagram ini menunjukkan sejumlah contoh obyek dan pesan yang

diletakkan diantara obyek-obyek ini di dalam use case. Berikut ini adalah

sequence diagram pada pengolahan zakat fitrah:

a. Sequence diagram input data badan amil

Gbr 3.10 Sequence Diagram Input Data Badan Amil

Keterangan :

1. Badan Amil masuk ke form menu utama

2. Masuk ke form data badan amil

3. Input Data Badan Amil

4. Data berhasil diinput

b. Sequence diagram input jenis zakat fitrah

Gbr 3.11 Sequence diagram input jenis zakat fitrah

Keterangan :

1. Badan Amil masuk ke menu utama

2. Masuk ke form jenis zakat fitrah

3. Input jenis zakat fitrah

4. Jenis zakat fitrah berhasil diinput

 c. Sequence diagram badan amil input pembayaran zakat fitrah

Gbr 3.12 Sequence diagram badan amil input pembayaran zakat

fitrah

Keterangan :

1. Badan amil masuk ke menu utama

2. Masuk ke form pembayaran zakat

3. Memasukkan data muzakki(pembayar zakat fitrah)

4. Data muzakki berhasil dimasukkan

 d. Sequence Diagram pembagian zakat fitrah

Gbr 3.13 Sequence diagram pembagian zakat fitrah

Keterangan :

1. Badan amil masuk ke menu utama

2. Masul ke form pembagian zakat fitrah

3. Memasukkan data mustahik (penerima zakat fitrah)

4. Data mustahik berhasil dimasukkan

4. Component Diagram

Munawar (2018:161) dalam bukunya yang berjudul Analis Perancangan

Sistem Berorientasi Objek dengan UML menjelaskan tentang Component

Diagram. Component Diagram adalah bagian fisik dari sebuah sistem, karena

menetap di komputer, bukan dibenak para analis. Berikut ini component

diagram pengolahan zakat fitrah:

 Gbr 3.14 Component Diagram pengolahan zakat ftrah

Keterangan :

1. Sistem pengolahan zakat fitrah mempunya menu utama

2. Kemudian terdapat menu input data badan amil, di dalam ini terdapat form

input data badan amil

3. Kemudian terdapat menu input pembayaran zakat, di dalam menu ini

terdapat form input data muzakki dan input pembayaran zakat

4. Kemudian terdapat menu pembagian zakat fitrah, di dalam menu ini

terdapat input data penerimaan zakat ditrah.

5. Desain File/Tabel

Desain tabel berisi kumpulan field-field yang berada didalam database,

antara lain nama file, primary key, serta struktur data yang berada pada file

tersebut. Berikut ini adalah file-file yang digunakan dalam sistem informasi

pengolahan zakat fitrah :

a. Tabel amil

Nama File : amil

Media : MySQL

Primary Key : id_amil

Tabel 3.1 Struktur tabel:amil

No Field Type Size Keterangan

1 id_amil int 11 PrimaryKey
2 nama_badanamil varchar 50
3 no_telepon varchar 15
4 alamat text

b. Tabel jenis

Nama File : jenis

Media : MySQL

Primary Key : id_jenis

Tabel 3.2 Struktur tabel:jenis

No Field Type Size Keterangan

1 id_jenis int 11 PrimaryKey
2 nama_jenis varchar 20

c. Tabel pembagian_zakat

Nama File : pembagian_zakat

 Media : MySQL

PrimaryKey : id_barang_keluar

Tabel 3.3 Struktur tabel:pembagian_zakat

No Field Type Size Keterangan

1 id_barang_keluar char 6 PrimaryKey
2 user_id int 11
3 barang_id char 7
4 jumlah_keluar int
5 tanggal_keluar date 11
6 penerima varchar 30
7 alamat varchar 30

d. Tabel penerimaan_zakat

Nama File : penerimaan_zakat

Media : MySQL

PrimaryKey : id_barangmasuk

Tabel 3.4 Struktur tabel:penerimaan_zakat

No Field Type Size Keterangan

1 id_zakat_masuk char 16
2 badan_amil_id int 11
3 nama_pemberi varchar 50
4 alamat_pemberi varchar 30
5 user_id int 11
6 Jumlah_masuk int 11
7 Tanggal_masuk date

e. Tabel satuan

Nama File : satuan

Media : MySQL

PrimaryKey : id_satuan

Tabel 3.5 Struktur tabel:satuan

 No Field Type Size Keterangan
1 id_satuan int 11 PrimaryKey
2 nama_satuan varchar 15

f. Tabel user

Nama File : user

Media : MySQL

PrimaryKey : id_user

Tabel 3.6 Struktur tabel:user

No Field Type Size Keterangan

1 id_user int 11 PrimaryKey
2 nama varchar 50
3 username varchar 50
4 email varchar 100
5 no_telp varchar 15
6 role
7 password varchar 255
8 created_at int 11
9 foto text
10 is_active tinyint 1

g. Tabel zakat

Nama File : zakat

Media : MySQL

PrimaryKey : id_barang

Tabel 3.7 Struktur tabel:zakat

No Field Type Size Keterangan

1 id_barang char 7 PrimaryKey
2 nama_barang varchar 255
3 stok int 11
4 satuan_id int 11
5 jenis_id int 11
3.2.3 Rancangan Keluaran (output)

Rancangan keluaran ini bertujuan untuk membentuk keluaran-keluaran

dari sistem yang dirancang. Rancangan keluaran tersebut akan dijelaskan dibawah

ini :

1. Rancangan output tambah data badan amil

Nama Keluaran : Tabel data badan amil

Fungsi : Untuk mengetahui data badan amil

Media : Web

Distribusi : Admin / Badan Amil

Rangkap : 1 (satu)

Frekuensi :-

Tabel 3.8 Rancangan output tambah data badan amil

No Nama Nomor telepon Alamat

1 Ahmad Hasanuddin 085688772971 Bogor
2 Asep Salahuddin 0813424879246 Bogor
3 Jamal 082246468182 Medan

2. Rancangan keluaran form jenis zakat fitrah

a. Satuan zakat fitrah

Nama Keluaran : Satuan zakat fitrah

Fungsi : Untuk mengetahui satuan zakat fitrah

Media : Web

Distribusi : Admin / Badan Amil

Rangkap : 1 (satu)
Frekuensi :-

Tabel 3.9 Form satuan zakat fitrah

No Satuan
1 Kg/Kilogram
2 Rp/Rupiah

b. Rancangan keluaran form jenis zakat fitrah

Nama Keluaran : Tabel jenis zakat fitrah

Fungsi : Untuk mengetahui jenis zakat fitrah

Media : Web

Distribusi : Admin / Badan Amil

Rangkap : 1 (satu)

Frekuensi :-

Tabel 3.10 Form jenis zakat fitrah

No Nama Jenis
1 Bahan Pangan
2 Alat Pembayaran

3. Rancangan keluaran form pembayaran zakat fitrah

Nama Keluaran : Pembayaran zakat fitrah

Fungsi : Untuk mengetahui data pembayar zakat fitrah

Media : Web

Distribusi : Admin / Badan Amil

Rangkap : 1 (satu)

Frekuensi :-

Tabel 3.11 Form data pembayar/pemberi zakat fitrah

No No Tgl Badan Nama Alamat Jenis Jumlah User

Transaksi Penerimaan Amil Pemberi Zakat Zakat

Zakat Zaakat Masuk

1 1006 2020-05-23 Ahmad Ani Medan Beras 3 Kg Admin
2 0006 2020-05-24 Ahmad Gifa Medan Uang 30000 Rp Admin
3 0007 2020-05-25 Ahmad Verdy Medan Uang 30000 Rp Admin

4. Rancangan Keluaran form pembagian zakat fitrah

Nama Keluaran : Pembagian zakat fitrah

Fungsi : Untuk mengetahui data yang menerima zakat fitrah

Media : Web

Distribusi : Admin / Badan Amil

Rangkap : 1 (satu)

Frekuensi :-

Tabel 3.14 Form Pembagian zakat fitrah

No No Transaksi Tgl Nama Alamat Jenis Jumlah User

Pembagian Penerima Penerima Zakat Zakat

Zakat Zakat
1 0006 2020-05-20 Ibra Medan Uang 6 Kg Admin
2 0007 2020-05-20 Budi Medan Beras 60 Rp Admin

3.3 Rancangan Antar Muka (Interface)

Rancangan antar muka (interface) merupakan bahan gambar yang

menggambarkan urutan dari sistem yang dibuat. Berikut ini adalah rancangan

antar muka yang dibuat untuk sistem informasi pengoalahan zakat fitrah:
Gbr 3.5 Rancangan Interface