bab iv rancangan sistem dan program …...27 bab iv rancangan sistem dan program usulan 4.1. analisa...

43
27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah sistem merupakan perintah- perintah yang diberikan kepada perangkat keras (hardware) agar bisa saling berinteraksi diantara keduanya. Perangkat lunak yang digunakan untuk membangun Sistem Informasi Zakat Berbasis Web ini adalah sebagai berikut : Halaman muzakki A1. Muzakki dapat menghitung zakat A2. Muzakki dapat membayar zakat A3. Muzakki dapat melakukan konfirmasi pembayaran zakat A4. Muzakki dapat melihat panduan A5. Muzakki dapat melihat riwayat pembayaran zakat Halaman administrasi C1. Admin dapat mengelola password admin C2. Admin dapat mengelola data muzakki C3. Admin dapat menginput data mustahik C5. Admin dapat mengelola konfirmasi pembayaran C6. Admin dapat mengelola laporan

Upload: others

Post on 17-Jan-2020

9 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

27

BAB IV

RANCANGAN SISTEM DAN PROGRAM USULAN

4.1. Analisa Kebutuhan Software

A. Tahapan Analisis

Perangkat lunak (software) dalam sebuah sistem merupakan perintah-

perintah yang diberikan kepada perangkat keras (hardware) agar bisa saling

berinteraksi diantara keduanya. Perangkat lunak yang digunakan untuk membangun

Sistem Informasi Zakat Berbasis Web ini adalah sebagai berikut :

Halaman muzakki

A1. Muzakki dapat menghitung zakat

A2. Muzakki dapat membayar zakat

A3. Muzakki dapat melakukan konfirmasi pembayaran zakat

A4. Muzakki dapat melihat panduan

A5. Muzakki dapat melihat riwayat pembayaran zakat

Halaman administrasi

C1. Admin dapat mengelola password admin

C2. Admin dapat mengelola data muzakki

C3. Admin dapat menginput data mustahik

C5. Admin dapat mengelola konfirmasi pembayaran

C6. Admin dapat mengelola laporan

Page 2: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

28

B. Use Case Diagram

1. Use Case Diagram Muzakki

Gambar IV.1

Use Case Diagram Muzakki

Tabel IV.1

Deskripsi Use Case Diagram Muzakki

Use Case Name Halaman Muzakki

Requirements A1

Goal Muzakki dapat melakukan pembayaran zakat

secara online

Pre-condition Melakukan pembayaran

Post-condition Sistem akan memproses data muzakki

Failed and conditiom Gagal melakukan pembayaran

Primary actors Muzakki

Main flow/basic path 1. Muzakki memilih icon zakat.

2. Muzakki memilih pembayaran.

3. Sistem akan menampilkan form

pembayaran .

4. Sistem akan memproses data pembayaran

yang di input.

Invariant A -

uc Muzakki

Sistem Zakat Muzakki

Muzakki

Beranda

Zakat

Hitung Zakat

Fitrah

Hitung Zakat

Mal

Pembayaran

ZakatRiwayat

Pembayaran

Panduan

«extend»

«extend»

«extend»

Page 3: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

29

2. Use Case Diagram Halaman Admin

Gambar IV.2

Use Case Diagram Halaman Admin

Tabel IV.2

Deskripsi Use Case Diagram Halaman Admin

Use Case Name Halaman Admin

Requirements B1

Goal Dapat mengubah password admin

Pre-conditions Admin telah login

Post-conditions Password baru admin tersimpan

Failed and conditions Gagal mengubah password admin

Primary actors Admin

Main flow/basic path 1. Admin melihat ubah password admin

2. Admin mengubah password

uc Admin

Sistem Zakat Admin

Admin

Login

Beranda

Master Data

Data Mustahik

Transaksi

Data Transaksi

Pembayaran

Transaksi

Penyaluran

Laporan

Laporan

Pembayaran

Zakat

Laporan

Penyaluran

Zakat

Pengaturan

Ubah

Password

Logout

Username

Password

Riwayat

Pembayaran

«include»

«extend»

«extend»

«extend»

«extend»

«extend»

«extend»

«extend»

«include»

Page 4: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

30

3. Admin memilih tombol “simpan”

4. System menyimpan password baru admin

Alternate flow/Invariant A B7. Admin dapat merubah data mustahik

Invariant B B8. Admin dapat menghapus data mustahik

C. Activity Diagram

1. Activity Diagram Pembayaran Zakat Online

Gambar IV.6

Activity Diagram Pembayaran Zakat Online

act Activ ity Muzakki Pembayaran

AdminSistem ZakatMuzakki

Mulai

Ingin

Melakukan

Pembayaran

?

Input Data Pembayaran Menerima data transaksi

Klik Menu Zakat

Input Data Zakat Mal Menghitung Zakat Mal

Pilih Zakat Fitrah

Pilih Zakat Mal

Ingin

Menghitung

Zakat Mal ?

Ingin

Menghitung

Zakat Fitrah

?

Input Data Zakat Fitrah Menghitung Zakat Fitrah

Selesai

Pilih Pembayaran Zakat

[Ya]

[Tidak]

[Ya]

[Tidak]

[Ya]

[Tidak]

Page 5: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

31

3. Activity Diagram Konfirmasi Zakat

Gambar IV.7

Activity Diagram Konfirmasi Zakat

act Activ ity Muzakki Konfirmasi

AdminSistem ZakatMuzakki

Mulai

Pilih Menu Riwayat

Pembayaran

Klik Konfirmasi

Menerima Data Konfirmasi

Selesai

Menampilkan Halaman

Konfirmasi

Input Data Konfirmasi

Page 6: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

32

4. Activity Diagram Login Admin

Gambar IV.8

Activity Diagram Login Admin

act Activ ity Admin Login

Sistem ZakatAdmin

Mulai

Melakukan Login Cek Username dan

Password

Login Valid ?

Menampilkan Beranda

Admin

Selesai

[Ya]

[Tidak]

Page 7: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

33

5. Activity Diagram Admin Data Mustahik

Gambar IV.10

Activity Diagram Admin Data Mustahik

act Admin Data Mustahik

Sistem ZakatAdmin

Mulai

Pilih Master Data Data Mustahik

Ingin

Menambah ?Input Data Mustahik

Halaman Data Mustahik

Ingin

Mengubah ?Form Ubah Data Mustahik

Halaman Data Mustahik

Ingin

Menghapus ?Halaman Data Mustahik

Selesai

Melakukan Login Cek Username dan

Password

Login Valid ?

Menampilkan Beranda

Admin

[Ya]

[Tidak]

[Ya]

[Ya]

[Tidak]

[Ya]

[Tidak]

[Tidak]

Page 8: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

34

6. Activity Diagram Admin Riwayat Pembayaran

Gambar IV.11

Activity Diagram Admin Riwayat Pembayaran

act Admin Riwayat Pembayaran

Sistem ZakatAdmin

Mulai

Pilih Transaksi Riwayat Pembayaran

Ingin Cari

Data ?Input No Transaksi

Halaman Riwayat

Pembayaran

Ingin

Menghapus ?

Selesai

Melakukan Login Cek Username dan

Password

Login Valid ?

Menampilkan Beranda

Admin

[Tidak]

[Ya]

[Ya]

[Tidak]

[Tidak]

[Ya]

Page 9: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

35

7. Activity Diagram Admin Transaksi Penyaluran

Gambar IV.12

Activity Diagram Admin Transaksi Penyaluran

act Transaksi Penyaluran

Sistem ZakatAdmin

Mulai

Pilih Transaksi Transaksi Penyaluran

Transaksi

Berhasil ?

Halaman Transaksi

Penyaluran

Input Transaksi

Penyaluran

Selesai

Melakukan Login Cek Username dan

Password

Login Valid ?

Menampilkan Beranda

Admin

[Tidak]

[Ya]

[Tidak]

[Ya]

Page 10: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

36

8. Activity Diagram Admin Data Transaksi Pembayaran

Gambar IV.13

Activity Diagram Admin Data Transaksi Pembayaran

9. Activity Diagram Admin Laporan Pembayaran Zakat

Gambar IV.14

Activity Diagram Admin Laporan Pembayaran Zakat

act Admin Data Transaksi Pembayaran

Sistem ZakatAdmin

Mulai

Pilih Transaksi Data Transaksi

Pembayaran

Ingin

Konfirmasi ?Konfirmasi

Selesai

Melakukan Login Cek Username dan

Password

Login Valid ?

Menampilkan Beranda

Admin

[Tidak]

[Ya]

[Tidak]

[Ya]

act Admin Laporan Pembayaran Zakat

Sistem ZakatAdmin

Mulai

Pilih Laporan Laporan Pembayaran

Zakat

Ingin

Mencetak ?

Tampil Laporan

Pembayaran Zakat

Selesai

Melakukan Login Cek Username dan

Password

Login Valid ?

Menampilkan Beranda

Admin

[Tidak]

[Ya]

[Tidak]

[Ya]

Page 11: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

37

10. Activity Diagram Admin Laporan Penyaluran Zakat

Gambar IV.15

Activity Diagram Admin Laporan Penyaluran Zakat

act Admin Laporan Penyaluran

Sistem ZakatAdmin

Mulai

Pilih Laporan

Ingin

Mencetak ?

Selesai

Laporan Penyaluran Zakat

Tampil Laporan

Penyaluran Zakat

Melakukan Login Cek Username dan

Password

Login Valid ?

Menampilkan Beranda

Admin

[Tidak]

[Ya]

[Tidak]

[Ya]

Page 12: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

38

11. Activity Diagram Admin Ubah Password

Gambar IV.16

Activity Diagram Admin Ubah Password

4.2. Desain

4.2.1. Database

Entity Relationship Diagram menjelaskan hubungan antar data dalam basis

data yang terdiri dari object-object dasar yang mempunyai hubungan atau relasi

antar object-object tersebut. Dalam ERD hubungan atau relasi dapat terdiri dari

sejumlah entitas yang disebut dengan derajat relasi. ERD yang ada pada sistem ini

sebagai berikut :

act Admin Ubah Password

Sistem ZakatAdmin

Mulai

Pilih Ubah Password Form Ubah Password

Input Password Lama dan

Password Baru

Berhasil

Diubah ?

Halaman Ubah Password

Selesai

Melakukan Login Cek Username dan

Password

Login Valid ?

Menampilkan Beranda

Admin

[Tidak]

[Ya]

[Tidak]

[Ya]

Page 13: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

39

1. Entity Relationship Diagram (ERD)

Muzakki

Pembayaran

Penyaluran

Mustahik

Melakukan

id_muzakki no_telp

nama_muzakki no_ktp alamat_muzakki

id_transaksi

id_muzakki

nama_muzakki

no_telp

jenis_zakat

status

alamat_muzakki

dana

tgl_bayar

id_penyaluran

tgl_penyaluran

id_mustahik

nominal_penyalur

id_mustahik

no_ktp

nama_mustahik

jenis_kelamin

alamat

no_telp

gambar

Membuat

Menerima

1

m

1

m

1

m

Gambar IV.17

Entity Relationship Diagram (ERD)

Page 14: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

40

2. Logical Record Structure (LRS)

Muzakki

id_muzakki*

nama_muzakki

no_ktp

kwn

alamat_muzakki

no_telp

Mustahik

id_mustahik*

no_ktp

nama_mustahik

jenis_kelamin

alamat

no_telp

Pembayaran

id_transaksi*

id_muzakki

nama_muzakki

no_telp

alamat_muzakki

jenis_zakat

dana

tgl_bayar

status

gambar

Penyaluran

id_penyaluran*

tgl_penyaluran

id_mustahik

nominal_penyalur

1

m

1

m

Gambar IV.18

Logical Record Structure (LRS)

3. Spesifikasi File

Spesifikasi file merupakan kumpulan item data yang diatur di dalam suatu

record dimana item-item data tersebut dimanipulasi untuk memproses data tertentu,

di dalam perancangan program ini penulis memberi nama database adalah

zakat.sql. Spesifikasi ini terdiri dari file-file yang akan dibuat untuk sebuah program

beserta record-record yang diperlukan antara lain :

a. Spesifikasi File Admin

File ini berfungsi mencatat data admin. Adapun penjelasan dari spesifikasi

file admin adalah sebagai berikut :

Nama File : Admin

Akronim File : admin.MYD

Page 15: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

41

Fungsi : Sebagai penyimpanan data admin

Tipe : File Master

Organisasi File : Index Sequential

Akses File : Random

Panjang Record : 211 Karakter

Kunci Field : no_admin

Tabel IV.4

Spesifikasi File Admin

No. Elemen Data Nama Field Type Size Keterangan

1 No_admin no_admin Int 11 Primary Key

2 Username Username Varchar 100

3 Password Password Varchar 100

b. Spesifikasi File Mustahik

File ini berfungsi mencatat data mustahik. Adapun penjelasan dari

spesifikasi file mustahik adalah sebagai berikut :

Nama File : Mustahik

Akronim File : mustahik.MYD

Fungsi : Sebagai penyimpanan data mustahik

Tipe : File Master

Organisasi File : Index Sequential

Akses File : Random

Panjang Record : 115 Karakter

Kunci Field : id_mustahik

Page 16: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

42

Tabel IV.5

Spesifikasi File Mustahik

No. Elemen Data Nama Field Type Size Keterangan

1 Id_mustahik id_mustahik Varchar 15 Primary Key

2 No_ktp no_ktp Bigint 20

3 Nama_mustahik nama_mustahik Varchar 50

4 Jenis_kelamin jenis_kelamin Varchar 10

5 Alamat Alamat Text

6 No_telp no_telp Bigint 20

c. Spesifikasi File Muzakki

File ini berfungsi mencatat data muzakki. Adapun penjelasan dari

spesifikasi file muzakki adalah sebagai berikut :

Nama File : Muzakki

Akronim File : muzakki.MYD

Fungsi : Sebagai penyimpanan data muzakki

Tipe : File Master

Organisasi File : Index Sequential

Akses File : Random

Panjang Record : 102 Karakter

Kunci Field : id_muzakki

Tabel IV.6

Spesifikasi File Muzakki

No. Elemen Data Nama Field Type Size Keterangan

1 Id_muzakki id_muzakki Varchar 20 Primary Key

Page 17: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

43

2 Nama_muzakki nama_muzakki Varchar 50

3 No_ktp no_ktp Bigint 20

4 Alamat_muzakki alamat_muzakki Text

5 No_telp no_telp Bigint 12

d. Spesifikasi File Pembayaran

File ini berfungsi mencatat data pembayaran. Adapun penjelasan dari

spesifikasi file pembayaran adalah sebagai berikut :

Nama File : Pembayaran

Akronim File : pembayaran.MYD

Fungsi : Sebagai penyimpanan data pembayaran

Tipe : File Transaksi

Organisasi File : Index Sequential

Akses File : Random

Panjang Record : 207 Karakter

Kunci Field : id_transaksi

Tabel IV.7

Spesifikasi File Pembayaran

No. Elemen Data Nama Field Type Size Keterangan

1 Id_transaksi id_transaksi Varchar 15 Primary Key

2 Id_muzakki id_muzakki Varchar 20

3 Nama_muzakki nama_muzakki Varchar 50

4 No_telp no_telp Bigint 12

5 Alamat_muzakki alamat_muzakki Text

Page 18: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

44

6 Jenis_zakat jenis_zakat Varchar 20

7 Dana Dana Bigint 20

8 Tgl_bayar tgl_bayar Date

9 Status Status Varchar 20

10 Gambar Gambar Varchar 50

e. Spesifikasi File Penyaluran

File ini berfungsi mencatat data penyaluran. Adapun penjelasan dari

spesifikasi file penyaluran adalah sebagai berikut :

Nama File : Penyaluran

Akronim File : penyaluran.MYD

Fungsi : Sebagai penyimpanan data penyaluran

Tipe : File Transaksi

Organisasi File : Index Sequential

Akses File : Random

Panjang Record : 85 Karakter

Kunci Field : id_penyaluran

Tabel IV.8

Spesifikasi File Penyaluran

No. Elemen Data Nama Field Type Size Keterangan

1 Id_penyaluran id_penyaluran Varchar 50 Primary Key

2 Tgl_penyaluran tgl_penyaluran Date

3 Id_mustahik id_mustahik Varchar 25

4 Nominal_penyalur nominal_penyalur Bigint 20

Page 19: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

45

f. Spesifikasi File Saldo

File ini berfungsi mencatat data saldo. Adapun penjelasan dari spesifikasi

file saldo adalah sebagai berikut :

Nama File : Saldo

Akronim File : saldo.MYD

Fungsi : Sebagai penyimpanan data saldo

Tipe : File Master

Organisasi File : Index Sequential

Akses File : Random

Panjang Record : 31 Karakter

Kunci Field : id_total

Tabel IV.9

Spesifikasi File Saldo

No. Elemen Data Nama Field Type Size Keterangan

1 Id_total id_total Int 11 Primary Key

1 Total Total Bigint 20

4.2.2. Software Architecture

A. Component Diagram

Diagram ini memperlihatkan organisasi serta ketergantungan sistem atau

perangkat lunak pada komponen-komponen yang telah ada sebelumnya. Diagram

ini berhubungan dengan diagram kelas dimana komponen secara tipikal dipetakan

kedalam satu atau lebih kelas-kelas. Berikut merupakan Component Diagram dari

aplikasi sistem yang diusulkan.

Page 20: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

46

Gambar IV.19

Component Diagram Aplikasi Zakat

C. Deployment Diagram

Deployment diagram menyediakan gambaran bagaimana sistem secara fisik

akan terlihat. Sistem diwakili oleh node-node, dimana masing-masing node diawali

oleh sebuah kubus menunjukkan hubungan diantara kedua node tersebut. Berikut

gambar Deployment Diagram :

cmp Component Diagram Aplikasi Zakat

phpMyAdmin

2.7.0-pl2

Web Serv er

PHP Pages

CSS Stylesheet

MySQL 5.0.18-nt

Database Aplikasi

(zakat.sql)

Aplikasi Zakat Pada

Masj id Jami' Al

Falah

Page 21: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

47

Gambar IV.20

Deployment Diagram Aplikasi Zakat

4.2.3. User Interface

Berikut adalah tampilan sistem zakat yang penulis rancang dan usulkan

untuk di Masjid Jami’ Al Falah Jakarta.

Page 22: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

48

1. Tampilan Halaman Beranda Muzakki

Gambar IV.23

Tampilan Beranda Halaman Muzakki

2. Tampilan Halaman Pembayaran Zakat Online

Gambar IV.24

Tampilan Halaman Pembayaran Zakat Online

Page 23: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

49

3. Tampilan Halaman Konfirmasi Pembayaran

Gambar IV.25

Tampilan Halaman Konfirmasi Pembayaran

4. Tampilan Halaman Login Admin

Gambar IV.26

Tampilan Halaman Login Admin

Page 24: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

50

5. Tampilan Halaman Beranda Admin

Gambar IV.27

Tampilan Halaman Beranda Admin

6. Tampilan Halaman Penyaluran Zakat

Gambar IV.28

Tampilan Halaman Penyaluran Zakat

Page 25: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

51

7. Tampilan Halaman Data Transaksi Pembayaran

Gambar IV.29

Tampilan Halaman Data Transaksi Pembayaran

8. Tampilan Halaman Laporan Pembayaran Zakat

Gambar IV.30

Tampilan Halaman Laporan Pembayaran Zakat

Page 26: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

52

9. Tampilan Halaman Laporan Penyaluran Zakat

Gambar IV.31

Tampilan Halaman Laporan Penyaluran Zakat

10. Tampilan Halaman Ubah Password Admin

Gambar IV.32

Tampilan Halaman Ubah Password Admin

Page 27: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

53

4.3. Code Generation

A. home.php

<?php

include 'config.php';

session_start();

if($_SESSION['status'] !="login"){

header("location:masuk.php");

}

$msg=$_SESSION['username'];

?>

B. pembayaran2.php

<?php

if (isset($_POST['reset']))

{

echo "<script>window.location.href=('?module=pembayaran')</script>";

}

?>

<?php

include ("config.php");

$urutan="SELECT max(id_transaksi) as id_trans from pembayaran";

$connect=mysql_query($urutan);

$rows=mysql_fetch_array($connect);

$kode=$rows['id_trans'];

$no=(int)substr($kode,9,9)+1;

$date=date('dmy');

$char='TRS';

Page 28: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

54

$newid=$char.$date.sprintf("%03s",$no);

?>

<?php

require("config.php");

$usr=$_SESSION['username'];

$query= "select*from muzakki where nama_muzakki like '%$usr%'";

$hasil=mysql_query($query);

$data=mysql_fetch_array($hasil)

?>

<?php

include ("config.php");

//mengambil nilai variable

if(isset($_POST['Simpan']))

{

$noktp = $_POST['no_ktp'];

$nama = $_POST['nama'];

$jenis= $_POST['jenis_kelamin'];

$notelp = $_POST['no_telp'];

$alamat = $_POST['alamat'];

$jeniszak = $_POST['jeniszak'];

$nominal = $_POST['dana'];

$id = $_POST['id_trans'];

$tanggal = date("Y-m-d");

$status= "Belum Dibayar";

//insert ke tabel pembayaran

$query = "insert into pembayaran values ('$id', '$noktp', '$nama', '$jenis',

'$notelp', '$alamat', '$jeniszak', '$nominal', '$tanggal', '$status')";

$sql = mysql_query($query);

Page 29: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

55

if($sql)

{

$query= "select*from pembayaran where id_transaksi ='$id'";

$hasil=mysql_query($query);

$total=0;

while ($data=mysql_fetch_array($hasil))

{

echo "<tr>

<td align=\"center\" width=\"10%\"

bgcolor=\"FFFFFF\">".$data['id_transaksi']."</td>

<td align=\"center\" width=\"10%\"

bgcolor=\"FFFFFF\">".$data['no_ktp']."</td>

<td align=\"center\" width=\"7%\"

bgcolor=\"FFFFFF\">".$data['nama_muzakki']."</td>

<td align=\"center\" width=\"5%\"

bgcolor=\"FFFFFF\">".$data['jenis_zakat']."</td>

<td align=\"center\" width=\"5%\"

bgcolor=\"FFFFFF\">".$data['tanggal']."</td>

<td align=\"center\" width=\"5%\"

bgcolor=\"FFFFFF\">".$data['dana']."</td>

<td align=\"center\" width=\"5%\" bgcolor=\"FFFFFF\"><a href

=\"cetak_pembayaran.php?id=$data[id_transaksi]\"

target=\"_blank\">Cetak</a> </td>

</tr>";

}

echo"<script>alert('Transaksi Berhasil Ditambah!')</script>";

}

else

{

echo" <script>alert('Gagal Menambah Pembayaran!');

window.location.href=('?module=pembayaran')</script>";

}

Page 30: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

56

}

?>

C. konfirmasi.php

<?php

include ("config.php");

//proses input

if(isset($_POST['Simpan']))

{

$id = $_POST['id_trans'];

$tgl = $_POST['tanggal'];

$nominal = $_POST['dana'];

$gambar = $_FILES['file']['name'];

copy($_FILES['file']['tmp_name'],"image/".$_FILES['file']['name']);//untuk

memindahkan file foto

$tanggal = date("Y-m-d H:i:s");

$stat = "Dibayar";

if(empty($id) || empty($tgl) || empty($nominal) || empty($gambar))

{

echo"<script>alert('data yang anda masukkan belum lengkap!');</script>";

}

else

{

//insert ke tabel

$query = "insert into konfirmasi values ('','$id','$tgl','$nominal', '$gambar')";

$sql = mysql_query($query);

if($sql)

{

Page 31: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

57

$query2 = "update pembayaran set status='Dalam Verifikasi' where

id_transaksi='$id'";

$sql2 = mysql_query($query2);

echo" <script>alert('Pembayaran anda akan diverifikasi, Silahkan cek status

pembayaran');

window.location.href=('home.php?module=konfirmasi')</script>";

}

else

{

echo" <script>alert('Gagal melakukan konfirmasi!');

window.location.href=('home.php?module=konfirmasi')</script>";

}

}

}

?>

D. penyalur.php

<?php

if (isset($_POST['reset']))

{

echo "<script>window.location.href=('?module=trans_penyaluran')</script>";

}

?>

<?php

include ("config.php");

$urutan="SELECT max(id_penyaluran) as id_pen from penyaluran";

$connect=mysql_query($urutan);

$rows=mysql_fetch_array($connect);

$kode=$rows['id_pen'];

Page 32: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

58

$no=(int)substr($kode,9,9)+1;

$char="PNY";

$date=date('dmy');

$newid=$char.$date.sprintf("%02s",$no);

?>

<?php

include ("config.php");

//proses input

if(isset($_POST['Simpan']))

{

$id= $_POST['id_peny'];

$nama_mustahik = $_POST['nama_mustahik'];

$jenis= $_POST['jeniszak'];

$jumlah = $_POST['jumlah'];

$tanggal = date("Y-m-d");

if(empty($nama_mustahik) || empty($jumlah))

{

echo"<script>alert('data yang anda masukkan belum lengkap!');</script>";

}

else

{

//insert ke tabel

$query = "insert into penyaluran values ('$id', '$tanggal','$nama_mustahik',

'$jumlah', '$jenis')";

$sql = mysql_query($query);

if($sql)

{

$qrysaldo=mysql_query("SELECT * FROM saldo where id_saldo='1'");

$data=mysql_fetch_array($qrysaldo);

Page 33: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

59

$dana=$data['dana'];

$total=$dana-$jumlah;

$smpdn="update saldo set dana='$total'";

$qrysm=mysql_query($smpdn);

echo" <script>alert('Penyaluran Berhasil Ditambah!');

window.location.href=('berandaadmin.php?module=trans_penyaluran')</script>

";

}

else

{

echo" <script>alert('Gagal Menambah Penyaluran!');

window.location.href=('berandaadmin.php?module=trans_penyaluran)</script>

";

}

}

}

?>

<hr />

<table width="637" border="1" cellpadding="0" cellspacing="0"

bgcolor="#00FFCC" align="center">

<tr bgcolor="#00CCFF">

<th width="58" align="center" scope="col">No</th>

<th width="58" align="center" scope="col">ID Penyaluran</th>

<th width="152" align="center" scope="col">Tanggal</th>

<th width="106" align="center" scope="col">Nama Mustahik</th>

<th width="84" align="center" scope="col">Jumlah</th>

Page 34: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

60

<th width="116" align="center" scope="col">Jenis Zakat</th>

</tr>

<?php

require("config.php");

$query= "select*from penyaluran order by id_penyaluran asc";

$hasil=mysql_query($query);

$no=1;

while ($data=mysql_fetch_array($hasil))

{

echo "<tr>

<td align=\"center\" width=\"10%\" bgcolor=\"FFFFFF\">".$no++."</td>

<td align=\"center\" width=\"10%\"

bgcolor=\"FFFFFF\">".$data['id_penyaluran']."</td>

<td align=\"center\" width=\"10%\"

bgcolor=\"FFFFFF\">".$data['tgl_penyaluran']."</td>

<td align=\"center\" width=\"7%\"

bgcolor=\"FFFFFF\">".$data['nama_mustahik']."</td>

<td align=\"center\" width=\"7%\"

bgcolor=\"FFFFFF\">".$data['jumlah']."</td>

<td align=\"center\" width=\"5%\"

bgcolor=\"FFFFFF\">".$data['jenis_zakat']."</td>

</tr>";

}

?>

E. konfirm.php

<?php

require("config.php");

Page 35: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

61

if(isset($_GET['id'])){

$id=$_GET['id'];

$perintah="update pembayaran set status='DiBayar' where id_transaksi='$id'";

$hasil=mysql_query($perintah);

if($hasil)

{

$qryzkt="SELECT * FROM pembayaran where id_transaksi='$id'";

$exe=mysql_query($qryzkt);

$data2=mysql_fetch_array($exe);

$danazkt=$data2['dana'];

$qrysaldo="SELECT * FROM saldo where id='1'";

$qry=mysql_query($qrysaldo);

$data=mysql_fetch_array($qry);

$dana=$data['dana'];

$total=$dana+$danazkt;

$smpdn="update saldo set dana='$total'";

$qrysm=mysql_query($smpdn);

echo"<script>alert('Berhasil diverifikasi');

window.location.href=('berandaadmin.php?module=data_konfirmasi')</script>"

;

}

else

{

echo"<script>alert('Gagal melakukan verifikasi!');

window.location.href=('berandaadmin.php?module=data_konfirmasi')</

script>";

}

Page 36: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

62

}

?>

F. ubah_pass.php

<?php

require("config.php");

$usr=$_SESSION['username'];

$query= "select*from admin where username like '%$usr%'";

$hasil=mysql_query($query);

$data=mysql_fetch_array($hasil)

?>

<?php

if(isset($_POST['btnUbah']))

{

require_once('config.php');

$username = $_POST['username'];

$pswlama = $_POST['pswlamatxt'];

$pswbaru = $_POST['pswbarutxt'];

$cari="select * from admin WHERE username = '$username' and

password='$pswlama'";

$hasil=mysql_query($cari);

$count =mysql_num_rows($hasil);

if ($count >= 1)

{

$perintah = "UPDATE admin set password = '$pswbaru' where username =

'$username'";

$result = mysql_query($perintah);

if ($result) {

echo" <script>alert('Password Berhasil Di Ubah!');

Page 37: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

63

window.location.href=('berandaadmin.php?module=ubah_pass')</script>";

}

else {

echo" <script>alert('Ubah Password gagal!');

window.location.href=('berandaadmin.php?module=ubah_pass')</script>";

}

}

else

{

echo"<script>alert('Password Salah!');

window.location.href=('berandaadmin.php?module=ubah_pass')</script>";

}

}

?>

4.4. Testing

Pembahasan mengenai pengujian sistem yang dibuat dengan menggunakan

blackbox testing untuk pengujian proses input dan output. Berikut ini adalah tabel

hasil pengujian Black Box Testing yang digunakan:

A. Pengujian Terhadap Form Login

Tabel IV.10

Hasil Pengujian Black Box Testing Form Login

No Skenario

Pengujian

Test case Hasil yang

Diharapkan

Hasil

Pengujian

Kesimpulan

1 Mengosongkan

semua isian data

login, lalu

langsung klik

tombol “Login”

Username

: (kosong)

Password

: (kosong)

Sistem akan

menolak akses

login dan

menampilkan

pesan

“Username

Sesuai

Harapan

Valid

Page 38: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

64

atau Password

Salah!”

2 Hanya mengisi

username dan

mengosongkan

password, lalu

langsung

mengklik tombol

“Login”

Username

: muzakki

Password

: (kosong)

Sistem akan

menolak akses

login dan

menampilkan

pesan

“Username

atau Password

Salah!”

Sesuai

Harapan

Valid

3 Hanya mengisi

password dan

mengosongkan

username, lalu

langsung

mengklik tombol

“Login”

Username

: (kosong)

Password

: 1234

Sistem akan

menolak akses

login dan

menampilkan

pesan

“Username

atau Password

Salah!”

Sesuai

Harapan

Valid

4 Menginputkan

dengan kondisi

salah satu benar

dan satu lagi

salah, lalu

langsung

mengklik tombol

“Login”

Username

: muzakki

(benar)

Password

: 123

(salah)

Sistem akan

menolak akses

login dan

menampilkan

pesan

“Username

atau Password

Salah!”

Sesuai

Harapan

Valid

5 Menginputkan

Username dan

Password yang

benar lalu

mengklik tombol

“Login”

Username

: muzakki

(benar)

Password

: 1234

(benar)

Sistem akan

menerima

akses login,

masuk ke

dalam halaman

utama sistem

SiZ dan

menampilkan

pesan “Selamat

Datang

Muzakki”

Sesuai

Harapan

Valid

B. Pengujian Terhadap Form Mustahik

Tabel IV.11

Hasil Pengujian Black Box Testing Form Mustahik

No Skenario

Pengujian

Test case Hasil yang

Diharapkan

Hasil

Pengujian

Kesimpulan

1 Mengosongkan

semua isian data

Field :

(kosong)

Sistem akan

menolak akses

Sesuai

Harapan

Valid

Page 39: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

65

mustahik, lalu

langsung klik

tombol

“Simpan”

tambah data

dan

menampilkan

pesan “Field

tidak boleh

kosong”

2 Salah satu field

belum terisi

kemudia klik

“Simpan”

alamat :

(kosong)

Sistem akan

menolak akses

tambah data

dan

menampilkan

pesan “Data

yang

dimasukkan

belum

lengkap”

Sesuai

Harapan

Valid

3 Semua field terisi

kemudian klik

“Simpan”

Field :

semua

field terisi

(benar)

Tersimpan ke

dalam database

dan

menampilkan

pesan

“Berhasil

Menambah

Data

Mustahik”

Sesuai

Harapan

Valid

C. Pengujian Terhadap Form Daftar

Tabel IV.12

Hasil Pengujian Black Box Testing Form Daftar

No Skenario

Pengujian

Test case Hasil yang

Diharapkan

Hasil

Pengujian

Kesimpulan

1 Mengosongkan

semua isian, lalu

langsung klik

tombol “Daftar”

Field :

(kosong)

Sistem akan

menolak akses

tambah data

dan

menampilkan

pesan “Field

tidak boleh

kosong”

Sesuai

Harapan

Valid

2 Salah satu field

belum terisi

kemudian klik

“Daftar”

alamat :

(kosong)

Sistem akan

menolak akses

daftar dan

menampilkan

pesan “Data

yang

Sesuai

Harapan

Valid

Page 40: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

66

dimasukkan

belum

lengkap”

3 Semua field terisi

kemudian klik

“Daftar”

Field :

semua

field terisi

(benar)

Tersimpan ked

alam database

dan

menampilkan

pesan

“Berhasil

daftar menjadi

muzakki”

Sesuai

Harapan

Valid

4.5. Support

Support dalam pembuatan sistem informasi zakat ini yaitu :

4.5.1. Publikasi Web

Publikasi website sistem informasi zakat ini penulis menggunakan jasa

penyewaan hosting dari www.domainesia.com . Adapun Spesifikasinya sebagai

berikut :

1. Domain

Nama Domain : masjidjamialfalah.xyz

2. Database

Database MySql : masjid1_zakat

User MySql : masjid1_root

Host MySql : mysql.domainesia.com

3. Kapasitas Hosting dan Analisa Biaya

Tabel IV.13

Testing Analisa Biaya

PAKET HOSTING domaines_Super 2.0

Disk Space 2000 MB

Page 41: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

67

Nama Server majora

cPanel Versi 68.0 (build 26)

Versi Apache 2.4.29

Versi PHP 5.6.32

Versi MySQL 5.6.38

Arsitektur x86_64

Sistem Operasi Linux

Alamat IP Bersama 203.114.74.102

Jalur ke Sendmail /usr/sbin/sendmail

Jalur ke Perl /usr/bin/perl

Versi Perl 5.10.1

Versi Kernel 2.6.32-673.26.1.lve.4.30.el6.x86_64

4.5.2. Spesifikasi Hardware dan Software

Perangkat keras yang dimaksud disini adalah seperangkat alat atau elemen

elektronik yang dapat membantu sistem yang diusulkan sehingga program yang

diusulkan oleh penulis dapat bekerja dengan baik. Perangkat keras yang dibutuhkan

dibagi atas dua bagian, yaitu perangkat keras untuk web server dan perangkat keras

client. Adapun perangkat keras standar yang diperlukan oleh server adalah sebagai

berikut :

Tabel IV.14

Spesifikasi Hardware dan Software

Kebutuhan Keterangan

Sistem Operasi Windows 8.1 Pro 64-bit

Page 42: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

68

Prosessor Intel(R) Celeron(R) CPU N2840 @

2.16GHz (2 CPUs), 2.2GHz

RAM 2 GB

Hardisk 500 GB

CD ROM 52x

Monitor Generic PnP 12 “

Keyboard 108 Key

Printer Inkjet/Laserjet

Mouse Standard

Browser Mozilla Firefox, Google Chrome,

Internet Explorer, UC Browser

Software Dreamweaver, Php Myadmin, XAMPP

4.6. Spesifikasi Dokumen Sistem Usulan

Dokumen Keluaran adalah dokumen yang dihasilkan dari proses sistem

output. Yang termasuk dokumen keluaran dalam Sistem Zakat pada Masjid Jami’

Al Falah Jakarta adalah sebagai berikut :

a. Nama Dokumen : Bukti Pembayaran

Fungsi : Sebagai bukti telah membayar zakat

Sumber : Muzakki

Tujuan : Admin

Media : Print Out/Kertas

Frekuensi : Setiap terjadinya pembayaran zakat

Bentuk : Lampiran B-1

b. Nama Dokumen : Laporan Pembayaran

Fungsi : Sebagai bukti untuk pembayaran zakat

Sumber : Muzakki

Tujuan : Ketua Masjid

Media : Print Out/Kertas

Frekuensi : Setiap terjadinya pembayaran zakat

Page 43: BAB IV RANCANGAN SISTEM DAN PROGRAM …...27 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisa Kebutuhan Software A. Tahapan Analisis Perangkat lunak (software) dalam sebuah

69

Bentuk : Lampiran B-2

c. Nama Dokumen : Laporan Penyaluran

Fungsi : Sebagai bukti untuk penyaluran zakat

Sumber : Admin

Tujuan : Ketua Masjid

Media : Print Out/Kertas

Frekuensi : Setiap terjadinya penyaluran zakat

Bentuk : Lampiran B-3