4.4 Component Design
4.4.1 Component Diagram
Component Diagram menggambarkan alokasi dari semua class dan
objek kedalam komponen-komponen fisik pada sebuah sistem yang dirancang. Pada sistem ini merupakan aplikasi berbasis web dengan
database server . Pada sistem berbasis web, logika bisnis bisa diletakkan di
server dan atau di client.
Pada sistem informasi manajemen pengelolaan donatur ini, pertama kali user menjalankan sistem yaitu dengan mengunjungi alamat web dengan
menggunakan aplikasi web browser, setelah itu muncul tampilan sistem informasi manajemen pengelolaan donatur yang siap untuk digunakan
sesuai kebtuhan user. Untuk lebih lengkapnya dapat dilihat pada Gambar 4.55 berikut.
Gambar 4.55 Component Diagram pada sistem informasi manajemen pengelolaan donatur
Seperti yang dapat dilihat pada Gambar 4.55 di atas. Bahwa component
yang memenuhi sistem informasi pengelolaan donatur ini secara
firefox.exe Server Web
SI pengelolaan Donatur db.sql
umum adalah “Firefox.exe” component merupakan multiplatform browser. Untuk component “web server” adalah paket web container yang
didalamnya sudah termasuk Apache web server, PHP, MySQL, dan phpMyAdmin. Dan untuk component “SI pengelolan donatur” merupakan
aplikasi bisnis yang di bangun. Sedangkan db.sql adalah database yang digunakan pada aplikasi.
4.4.2 User Interface Component
Tahap ini menjelaskan tentang tahap-tahap menggunakan sistem informasi manajemen pengelolaan donatur dengan menampilkan beberapa
tampilan yang dirancang dari pertama kali user akan menggunakan sampai keluar dari sistem, berikut ini pembagian halaman-halaman pada setiap user:
1. Halaman Utama dan Calon Donatur : a. Gambar Tampilan Utama Home Sistem informasi manajemen
pengelolaan donatur. b. Gambar Tampilan Profil Tentang Donatur.
c. Gambar Tampilan Profil Cara Pembayaran Transaksi Donasi. d. Gambar Tampilan Tabel Jenis Donasi.
e. Gambar Tampilan Form Komentar. f. Gambar Tampilan Form Registrasi Donatur.
g. Gambar Tampilan Sukses Registrasi.
2. Donatur Online a. Gambar Tampilan Home User Donatur Online.
b. Gambar Tampilan Form Transaksi Donasi Online. c. Gambar Tampilan Tabel Data Transaksi Donasi Online.
d. Gambar Tampilan Invoice Donasi. e. Gambar Tampilan Halaman Download File.
f. Gambar Tampilan Sukses Transaksi Donasi Online
3. Admin: a. Gambar Tampilan Home Admin.
b. Gambar Tampilan Manajemen Profil Tentang Donatur. c. Gambar Tampilan Manajemen Profil Tentang Donatur.
d. Gambar Tampilan Manajemen Komentar. e. Gambar Tampilan Update Komentar.
f. Gambar Tampilan Data Donatur Online. g. Gambar Tampilan Edit Data Donatur Online.
h. Gambar Tampilan Cetak Data Donatur Online. i. Gambar Tampilan Data Donatur Cabang Asrama Griya Bintaro.
j. Gambar Tampilan Cetak Data Donatur Cabang Asrama Griya Bintaro.
k. Gambar Tampilan Data Transaksi Donasi Online. l. Gambar Tampilan Konfirmasi Dari Data Transaksi Donasi Online.
m. Gambar Tampilan Cetak Seluruh Data Transaksi Donasi Online.
n. Gambar Tampilan Laporan Donasi Uang. o. Gambar Tampilan Tambah Laporan Donasi Uang.
p. Gambar Tampilan Cetak Data Laporan Donasi Uang. q. Gambar Tampilan Upload File.
r. Gambar Tampilan Tambah File Upload.
4. CS: a. Gambar Tampilan Login CS.
b. Gambar Tampilan Home CS. c. Gambar Tampilan Tabel Manajemen User CS.
d. Gambar Tampilan Tambah Data Manajemen User CS. e. Gambar Tampilan Ganti Password User CS.
f. Gambar Tampilan Tabel Manajemen User CS. g. Gambar Tampilan Tabel Data Donatur Cabang Griya Yatim dan
Dhu’afa. h. Gambar Tampilan Laporan Data Donatur Per Periode.
i. Gambar Tampilan Form Cetak Kartu Donatur. j. Gambar Tampilan Cetak Kartu Donatur.
k. Gambar Tampilan Form Transaksi Donasi Tunai. l. Gambar Tampilan Data Transaksi Donasi Cabang.
m. Gambar Tampilan Data Transaksi Donasi Cabang Asrama Griya Bintaro.
n. Gambar Tampilan Laporan Data Transaksi Donasi Per Periode.
o. Gambar Tampilan Laporan Data Transaksi Donasi Per Periode. p. Gambar Tampilan Laporan Data Transaksi Donasi Per Jenis Donasi.
Berikut ini tampilan halaman-halaman untuk setiap user: 1. Halaman Utama dan Calon Donatur:
a. Halaman utama sistem informasi manajemen pengelolaan donatur Home
Gambar 4.56 Tampilan Utama Home Sistem informasi manajemen pengelolaan donatur
Pada tampilan ini muncul pada saat user akan menggunanakan sistem informasi manajemen pengelolaan donatur sesuai dengan kebutuhan user
masing-masing. Didalamnya terdapat menu-menu yang mendukung proses
HEADER
MENU HOME
TENTANG DONATUR JENIS DONASI
CARA TRANSAKSI DONASI REGISTRASI DONATUR
KOMENTAR USER LOGIN
Username Password
F.O LOGIN GRIYA ASRAMA BINTARO
GRIYA ASRAMA BSD JENIS BEKASI
GRIYA ASRAMA CIBUBUR SELAMAT DATANG DI SISTEM INFORMASI PENGELOLAAN DATA DONATUR
YAYASAN GRIYA YATIM DAN DHU’AFA
www.griyayatim.com
Anak Asuh Kami Proses
yang ada pada sistem salah satunya adalah menu login untuk masuk ke halaman user.
b. Tampilan Modul Profil Tentang Donatur
Gambar 4.57 Tampilan Profil Tentang Donatur Pada tampilan ini memberikan informasi tentang pengertian
donatur di Yayasan Griya Yatim dan Dhu’afa. Menu ini dapat dilihat atau di akses oleh seluruh user maupun pengunjung yang sengaja untuk
melihat sistem.
HEADER
M ENU H OM E
TENTA NG DO NATU R JEN IS DO NA SI
C ARA TRAN SAKSI DO NASI RE GISTR ASI D ON ATUR
KO M ENTAR US ER LO GIN
U sernam e Password
F.O LOG IN GR IYA AS RAM A B INTAR O
G RIYA ASRA M A BSD JEN IS BE KASI
G RIYA ASRA MA CIBU BUR
IS I TEN TA NG DONA TU R GRIYA Y ATIM
www.griyayatim .com TENTANG DONATUR GRIYA YATIM
LO G O G RIYA
Proses
Anak Asuh Kam i
H E A D E R
M E N U H O M E
J E N I S D O N A S I C A R A T R A N S A K S I D O N A S I
R E G I S T R A S I D O N A T U R K O M E N T A R
U S E R L O G I N U s e rn a m e
P a s s w o r d F .O L O G I N
G R I Y A A S R A M A B IN T A R O G R I Y A A S R A M A B S D
J E N IS B E K A S I G R IY A A S R A M A C IB U B U R
IS I T E N T A N G C A R A P E M B A Y A R A N T R A N S A K S I D O N A S I
w w w . g r iy a y a t im . c o m C A R A P E M B A Y A R A N T R A N S A K S I D O N A S I
T E N T A N G D O N A T U R
A n a k A s u h K a m i P r o s e s
c. Tampilan Modul Profil Cara Pembayaran
Gambar 4.58 Tampilan Profil Cara Pembayaran Transaksi Donasi. Pada tampilan ini memberikan informasi tentang cara pembayaran
tranaksi donasi di Yayasan Griya Yatim dan Dhu’afa. Menu ini dapat dilihat atau di akses oleh seluruh user maupun pengunjung yang sengaja untuk
melihat sistem.
d. Tampilan Jenis Donasi
Gambar 4.59 Tampilan Tabel Jenis Donasi. Pada tampilan ini memberikan informasi tentang jenis donasi yang
terdapat di Yayasan Griya Yatim dan Dhu’afa. Menu ini dapat dilihat atau di akses oleh seluruh user maupun pengunjung yang sengaja untuk melihat
sistem.
HEADER
MENU HO ME
JENIS DO NASI CARA TRANSAKSI DONASI
R EG ISTRASI DO NATU R KO MENTAR
USER LOG IN Usernam e
Password F.O LOG IN
G RIYA ASRAM A BINTARO G RIYA ASRAM A BSD
JENIS BEKASI GRIYA ASRAMA CIBUBUR
w ww .griyayatim .com JENIS DONASI GRIYA YATIM
TABLE JENIS DONASI
TENTAN G DONATUR
Anak Asuh Kami Proses
e. Tampilan Form dan Data Komentar
Gambar 4.60 Tampilan Form dan Data Komentar. Pada tampilan ini terdapat form komentar yang dapat diisi oleh setiap
user , baik dari calon donatur, maupun donatur Yayasan Griya Yatim dan
Dhu’afa. Karena menu ini terdapat dibagian utama sistem, untuk memberikan kiritik, saran maupun pesan yang akan diberikan.
H E A D E R
MEN U HO ME
CARA TR ANSAKSI D ONASI RE GISTRASI D ONATU R
KOM ENTAR USER L O GIN
Us ern a m e Pa ss wo rd
F.O L O GIN G RIYA ASRAM A BIN TA RO
G RIYA ASR AMA BS D J ENIS BEK ASI
G RIYA ASR AM A CIBUBU R
ww w .griy a ya tim .c o m K OM EN TA R
TUL IS KOM ENTAR
F OR M K OM EN TA R
TENTANG DO NATUR D ata Ko me n ta r :
1 . Da ri : … Is i k o me n tar : …
2 . Da ri : … Is i Ko m e nta r : ...
N am a Em a il
Kom e nta r Kirim
Ba ta l J ENIS DO NASI
Pro se s
An ak Asu h Ka mi
f. Tampilan Form Registrasi Donatur Online
Gambar 4.61 Tampilan Form Registrasi Donatur. Pada tampilan ini digunakan untuk para calon donatur yang ingin
melakukan registrasi sebagai donatur di Yayasan Griya Yatim dengan mengisikan kolom-kolom yang terdapat pada form tersebut dengan lengkap.
Setelah melakukan pengisian data, calon donatur dapat langsung memproses dengan mengklik tombol “proses” dan akan muncul tampilan seperti
Gambar berikut.
H EA DE R
M ENU HOME
CARA TRANSAKSI DONASI REGISTRASI DO NATUR
USER LOG IN Usernam e
Password F.O LO GIN
GRIYA ASRAMA BINTARO GRIYA ASRAMA BSD
JENIS BEKASI GRIYA ASRAM A CIBUBUR
www.griyayatim .com REGISTRA SI D ONA TU R ON LINE
FOR M R EGISTR A SI
TENTANG DONATUR Username
Password
Proses Batal
JENIS DONASI
Proses
IN FO LOG IN
Konfirmasi Password
Nama Lengkap Jenis Kelam in
TTL
ID EN TITA S D ON ATU R
Tgl Bulan
Tahun Email
Tlp Hp Alam at
Kode Verifikasi Gam bar Kode
KOMENTAR
Anak Asuh Kami
g. Tampilan sukses registrasi
Gambar 4.62 Tampilan Sukses Registrasi. 2. Halaman Donatur Online
a. Tampilan Home Donatur Online
Gambar 4.63 Tampilan Home User Donatur Online
HEADER
MENU HOME
TRANSAKSI DONASI DATA TRANSAKSI DONASI
DOWNLOAD LAPORAN DONASI
LOGOUT ‘nama akun’
www.griyayatim.com
Assalamualaikum
Profil User Login
Hari Tgl Status User
H E A D E R
MEN U HO ME
CARA TR ANSAKSI D ONASI RE GISTRASI D ONATU R
KOM ENTAR USER L O GIN
Us ern a m e Pa ss wo rd
F.O L O GIN G RIYA ASRAM A BIN TA RO
G RIYA ASR AMA BS D J ENIS BEK ASI
G RIYA ASR AM A CIBUBU R
ww w .griy a ya tim .c o m Te rim a ka s ih .. A c c ou nt D o na tu r te lah te rd afta r ,
s ila hk an la k uk an lo gin u ntuk m ela ku ka n tra ns a ks i d on as i.
TENTANG DO NATUR J ENIS DO NASI
Pro se s
An ak Asu h Ka mi
Pada tampilan ini muncul pada saat user donatur online telah melakukan login terlebih dahulu pada halaman home sistem. Didalmnya
terdapat menu-menu yang ditampilkan seperti data dan form transaksi donasi, serta menu download file yang dibutuhkan.
b. Tampilan Form Transaksi Donasi Online
Gambar 4.64 Tampilan Form Transaksi Donasi Online
HEADER
MENU HOME
TRANSAKSI DONASI DATA TRANSAKSI DONASI
DOWNLOAD LAPORAN DONASI
LOGOUT ‘nama akun’
www.griyayatim.com FORM TRANSAKSI DONASI
Kode Trans Nama Donatur
Proses Batal
Pilih Jenis Donasi Jenis Donasi
Rp. Nominal
Donasi lain
Atas Nama No. Rek
Kode Verifikasi Gambar Kode
Pilih Proses Bayar Proses Pembayaran
Tgl Pembayaran Khusus untuk donatur yang melakukan transfer via ATM Bank
Pilih Rek Bank Tujuan No. Rek Bank
Tujuan
Otomatic code
Pada tampilan ini digunakan untuk user donatur online yang ingin melakukan transaksi donasi dengan mengisikan kolom-kolom yang terdapat
pada form tersebut dengan lengkap. Setelah melakukan pengisian data, user dapat langsung memproses dengan mengklik tombol “proses” untuk dapat
dikonfirmasi dahulu oleh pihak admin, jika berhasil maka akan tampil seperti Gambar berikut.
c. Tampilan Sukses Transaksi
Gambar 4.65 Tampilan Sukses Transaksi Donasi.
HEADER
www.griyayatim.com Terimakasih..
Anda telah berhasil melakukan transaksi donasi secara online, selanjutnya akan di proses oleh Adminoperator kami yang akan
menghubungi Anda..
MENU TRANSAKSI DONASI
DATA TRANSAKSI DONASI DOWNLOAD LAPORAN
DONASI LOGOUT ‘NAMA AKUN’
HOME
d. Tampilan Data Transaksi Online
Gambar 4.66 Tampilan Tabel Data Transaksi Donasi Online Pada Gambar di atas menampilkan data-data transaksi yang telah
dilakukan oleh user tersebut. Dari data tersebut dapat dicetak seperti terlihat pada Gambar 4.67 di bawah ini.
Gambar 4.67 Tampilan Invoice Donasi
HEADER
www.griyayatim.com Data Transaksi Donasi
MENU TRANSAKSI DONASI
DATA TRANSAKSI DONASI DOWNLOAD LAPORAN
DONASI LOGOUT ‘NAMA AKUN’
HOME NO
Nama Donatur Aksi
TABLE DATA TRANSAKSI DONASI
Jenis Donasi Nama Donatur
I N V O I C E D O N A S I
K o d e T r a n s a k s i :
T g l T r a n s a k s i :
K o n f i r m a s i :
K o d e D o n a t u r :
N a m a D o n a t u r :
A l a m a t :
J e n is D o n a s i :
N o m in a l : R p .
P r o s e s T r a n s a k s i :
T g l P e m b a y a r a n :
G R I Y A Y A T I M
H E A D E R
M E N U H O M E
T E N T A N G D O N A T U R C A R A P E M B A Y A R A N
M A N A J E M E N K O M E N T A R
w w w . g r i y a y a t i m . c o m A s s a l a m u a l a i k u m
P r o f il U s e r L o g i n
H a r i T g l S t a t u s U s e r A d m i n
M A N A J E M E N A N A K A S U H D A T A D O N A T U R
D A T A D O N A S I O N L I N E L A P O R A N D O N A S I U A N G
U P L O A D L A P O R A N L O G O U T ‘ N A M A A K U N ’
D A T A D O N A T U R C A B A N G A S R A M A G R I Y A B I N T A R O
e. Tampilan Download
Gambar 4.68 Tampilan Halaman Download File Gambar di atas menampilkan halaman download file dari data
laporan yang sebelumnya telah diupload oleh admin.
3. Halaman Admin a. Tampilan Home Admin
Gambar 4.69 Tampilan Home Admin
H E A D ER
w w w .griy ay atim .c om D ow nloa d F ile
M ENU
1 . N am a File klik d ow n lo ad 2 . N am a File klik d ow n lo ad
3 . N am a File klik d ow n lo ad
HO M E TRA NSAK SI DO NASI
DATA TR ANSA KSI DO NAS I D O W NLO AD LAPO R AN
DO NASI LO G O U T ‘NAM A AKUN ’
Gambar di atas merupakan halaman utama pada admin, untuk masuk ke halaman tersebut admin diharuskan melakukan login terlebih dahulu
pada halaman utama Home sistem.
b. Tampilan Manajemen Modul Profil Tentang Donatur.
Gambar 4.70 Tampilan Manajemen Profil Tentang Donatur
HEADER
MENU TENTANG DONATUR
CARA PEMBAYARAN MANAJEMEN KOMENTAR
www.griyayatim.com
MANAJEMEN ANAK ASUH DATA DONATUR
DATA DONASI ONLINE LAPORAN DONASI UANG
UPLOAD LAPORAN LOGOUT ‘NAMA AKUN’
DATA DONATUR CABANG ASRAMA GRIYA BINTARO
HOME
Browse
Ganti Foto :
DATA PROFIL
GAMBAR
PROFIL TENTANG DONATUR YAYASAN GRIYA YATIM DAN DHU’AFA
Update Batal
c. Tampilan Manajemen Modul Profil Cara Pembayaran
Gambar 4.71 Tampilan Manajemen Profil Tentang Donatur Pada dua Gambar di atas merupakan tampilan manajemen profil yang
dapat diupdate oleh admin, untuk dapat ditampilkan pada halaman utama sistem.
d. Tampilan Manajemen Komentar
Gambar 4.72 Tampilan Manajemen Komentar
H E A D E R
M E N U C A R A P E M B A Y A R A N
M A N A J E M E N K O M E N T A R
w w w .g r iy a y a ti m . c o m
M A N A J E M E N A N A K A S U H D A T A D O N A T U R
D A T A D O N A S I O N L I N E L A P O R A N D O N A S U A N G
U P L O A D L A P O R A N L O G O U T ‘ N A M A A K U N ’
D A T A D O N A T U R C A B A N G A S R A M A G R IY A B IN T A R O
H O M E
D A T A P R O F I L
P R O F IL C A R A P E M B A Y A R A N D O N A S I
T E N T A N G D O N A T U R
U p d a te B a t a l
H E A D E R
M E N U M A N A J E M E N K O M E N T A R
w w w . g r i y a y a t i m . c o m
M A N A J E M E N A N A K A S U H D A T A D O N A T U R
D A T A D O N A S I O N L I N E L A P O R A N D O N A S I U A N G
U P L O A D L A P O R A N L O G O U T ‘N A M A A K U N ’
D A T A D O N A T U R C A B A N G A S R A M A G R I Y A B I N T A R O
H O M E
M A N A J E M E N K O M E N T A R
T E N T A N G D O N A T U R N O
N a m a A k s i
T A B L E D A T A K O M E N T A R
E m a i l P u b lis h
C A R A P E M B A Y A R A N
e. Tampilan Update Komentar
Gambar 4.73 Tampilan Update Komentar Gambar 4.72 dan Gambar 4.73 di atas merupakan tampilan tabel dari
data-data komentar yang telah dilakukan oleh user. Dan admin dapat melakukan update data komentar tersebut dengan melakukan publish
komentar yang akan ditampilkan pada halaman utama sistem Home
H E A D E R
M E N U
M A N A J E M E N K O M E N T A R
w w w .g riy a y a tim .c o m
M A N A J E M E N A N A K A S U H D A T A D O N A T U R
D A T A D O N A S I O N L IN E L A P O R A N D O N A S I U A N G
U P L O A D L A P O R A N L O G O U T ‘N A M A A K U N ’
D A T A D O N A T U R C A B A N G A S R A M A G R IY A B IN T A R O
H O M E
E D IT K O M E N T A R
T E N T A N G D O N A T U R C A R A P E M B A Y A R A N
N a m a :
E m a il :
K o m e n ta r :
P u b lis h :
N o Y e s
U p d a te B a ta l
f. Tampilan Data Donatur Online
Gambar 4.74 Tampilan Data Donatur Online
g. Tampilan Edit Data Donatur Online
Gambar 4.75 Tampilan Edit Data Donatur Online
H E A D E R
w w w .g riy a y a tim .c o m D A T A U S E R D O N A T U R O N L IN E
NO ID
A ks i
T A B L E D A T A D O N A T U R O N L IN E
N am a Len gk ap S tatu s
S earc h P rin t
M E N U
D AT A D O N A T U R M A N AJ EM EN A N AK A S UH
M A N AJ EM E N K O M E N TA R D A TA D O N AS I O N LIN E
LA P O R AN D O N A SI U A N G UP L O AD L AP O R A N
LO G O U T ‘N A M A A KU N ’ D A TA D O N A TU R C AB A N G
A SR A M A G R IY A BIN T AR O H O M E
TE N T AN G D O N A TU R C AR A P EM BA Y AR A N
H E A D E R
w w w . g r i y a y a t i m . c o m E D I T D A T A
U s e r n a m e :
P a s s w o r d :
N a m a L e n g k a p : A k r if
: N o
Y e s
U p d a te B a ta l
E m a i l :
T lp :
P e k e r ja a n :
A la m a t :
J ik a p a s s w o rd t id a k d i g a n t i , k o s o n g k a n s a ja M E N U
D A T A D O N A T U R M A N A J E M E N A N A K A S U H
M A N A J E M E N K O M E N T A R D A T A D O N A S I O N L I N E
L A P O R A N D O N A S I U A N G U P L O A D L A P O R A N
L O G O U T ‘N A M A A K U N ’ D A T A D O N A T U R C A B A N G
A S R A M A G R I Y A B I N T A R O H O M E
T E N T A N G D O N A T U R C A R A P E M B A Y A R A N
h. Tampilan Cetak Data Donatur Online
Gambar 4.76 Tampilan Cetak Data Donatur Online
i. Tampilan Data Donatur Cabang Asrama Griya Bintaro
Gambar 4.77 Tampilan Data Donatur Cabang Asrama Griya Bintaro
DATA DONATUR ONLINE
YAYASAN GRIYA YATIM DAN DHU’AFA
LOGO LOGO
NO ID
Tgl Registrasi
DATA DONATUR ONLINE
Nama Lengkap Alamat
Jenis Kelamin TTL
H E A D E R
w w w . g r i y a y a t i m . c o m D A T A D O N A T U R C A B A N G A S R A M A G R I Y A Y A T I M
N O ID
A la m a t
T A B L E D A T A D O N A T U R A S R A M A
N a m a D o n a t u r J e n is K e l a m i n
S e a r c h
P r i n t
N b : J ik a A n d a in g i n m e n g e ta h u i d a t a l e b i h le n g k a p ,s il a h k a n A n d a L o g in s e b a g a i o p e r a to r F r o n t O f fi c e
d i A s r a m a C a b a n g Y a y a s a n G r iy a Y a t i m
P R O F I L A S R A M A
N a m a A s r a m a A l a m a t
J u m a h D o n a tu r M E N U
A S R A M A G R IY A B I N T A R O M A N A J E M E N A N A K A S U H
D A T A D O N A T U R D A T A D O N A S I O N L I N E
L A P O R A N D O N A S I U A N G U P L O A D L A P O R A N
L O G O U T ‘ N A M A A K U N ’ D A T A D O N A T U R C A B A N G
M A N A J E M E N K O M E N T A R H O M E
T E N T A N G D O N A T U R C A R A P E M B A Y A R A N
j. Tampilan Print Data Donatur Cabang Asrama Griya Bintaro
Gambar 4.78 Tampilan Cetak Data Donatur Cabang Asrama Griya Bintaro Gambar 4.74 sampai dengan Gambar 4.78 di atas menampilkan
seluruh data donatur seperti data donatur yang melakukan registrasi donatur secara online dan juga data donatur yang terdapat di cabang asrama
Yasyasan Griya Yatim. Admin dapat melakukan beberapa proses dalam mengelola data tersebut yaitu seperti edit dan cetak data donatur, selain itu
juga admin dapat melihat dan mencetak data doantur yang terdaftar pada cabang asrama yang dimiliki oleh Yayasan.
D A T A D O N A T U R C A B A N G A S R A M A G R IY A B IN T A O
Y A Y A S A N G R IY A Y A T IM D A N D H U ’A F A
L O G O L O G O
N O ID
T g l R e g is tra s i
D A T A D O N A T U R C A B A N G A S R A M A G R IY A B IN T A R O
N a m a L e n g k a p A la m a t
J e n is K e la m in T T L
k. Tampilan Data Transaksi Donasi Online
Gambar 4.79 Tampilan Data Transaksi Donasi Online
l. Tampilan Konfirmasi Transaksi Donasi Online
Gambar 4.80 Tampilan Konfirmasi Dari Data Transaksi Donasi Online
H E A D E R
w w w . g r i y a y a t i m . c o m D A T A T R A N S A K S I D O N A S I O N L I N E
N O N a m a D o n a t u r
A k s i
T A B L E A L L D A T A T R A N S A K S I D O N A S I O N L I N E
J e n i s D o n a s i N o m i n a l
S e a r c h N O
T g l D o n a s i A k s i
T A B L E D A T A D O N A T U R O N L I N E
N a m a D o n a t u r K o n f ir m a s i
K o n f i r m a s i
B E L U M K O N F I R M A S I
A L L D A T A
P r in t M E N U
D A T A D O N A S I O N L I N E M A N A J E M E N A N A K A S U H
D A T A D O N A T U R
A S R A M A G R I Y A B I N T A R O L A P O R A N D O N A S I U A N G
U P L O A D L A P O R A N L O G O U T ‘N A M A A K U N ’
D A T A D O N A T U R C A B A N G M A N A J E M E N K O M E N T A R
H O M E T E N T A N G D O N A T U R
C A R A P E M B A Y A R A N
H E A D E R
w w w .g r iy a y a tim . c o m K O N F I R M A S I D O N A S I O N L IN E
T g l D o n a s i :
ID D o n a tu r :
N a m a D o n a t u r :
K o n f irm a s i :
N Y
U p d a t e B a t a l
J e n is D o n a s i :
R p .
N o m in a l :
U n t u k k o n firm a s i ,p ilih Y jik a p ih a k Y a y a sa n t e la h m e n g k o n f ir m a s i a t a u m e n g h u b u n g i d o n a tu r y a n g t e la h m e la k u k u k a n tr a n s a k s i d o n a si
M E N U
D A T A D O N A S I O N L IN E M A N A J E M E N A N A K A S U H
D A T A D O N A T U R
A S R A M A G R IY A B I N T A R O L A P O R A N D O N A S I U A N G
U P L O A D L A P O R A N L O G O U T ‘N A M A A K U N ’
D A T A D O N A T U R C A B A N G M A N A J E M E N K O M E N T A R
H O M E T E N T A N G D O N A T U R
C A R A P E M B A Y A R A N
m. Tampilan Cetak Data Transaksi Donasi Online
Gambar 4.81 Tampilan Cetak Seluruh Data Transaksi Donasi Online Gambar 4.79 sampai dengan Gambar 4.81 di atas menampilkan
seluruh data transaksi donasi online yang sebelumnya telah dilakukan oleh donatur online. Admin adalah aktor yang mengelola dari seluruh data
tersebut dengan dapat melakukan konfirmasi donasi, dan juga pencetakan data transaksi secara keseluruhan.
DA TA TRA NS AK SI DO N AS I O N LIN E
Y AYAS AN G R IYA YA TIM D A N D H U ’AFA
LO G O LO G O
N O ID Transaksi
Tgl Pem bay aran
D A T A T RA N SA K SI D O N AS I O N LIN E
N am a D ona tur Tgl Transak si
Jen is D onasi N om inal R p.
n. Tampilan Laporan Donasi Uang
Gambar 4.82 Tampilan Laporan Donasi Uang
o. Tampilan Tambah Laporan Donasi Uang
Gambar 4.83 Tampilan Tambah Laporan Donasi Uang
H E A D E R
w w w .g r iy a y a ti m . c o m L a p o r a n D o n a s i U a n g
N O T e r im a D a r i
A k s i
T A B L E D A T A L A P O R A N D O N A S I U A N G
B u l a n T a h u n
J u m l a h P e m a s u k a n
S e a r c h P ri n t
J u m l a h P e n g e l u a ra n
T a m b a h
R p . T o t a l P e n g e l u a r a n
R p . T o t a l P e m a s u k a n
M E N U
L A P O R A N D O N A S I U A N G M A N A J E M E N A N A K A S U H
D A T A D O N A T U R
A S R A M A G R I Y A B I N T A R O D A T A D O N A S I O N L I N E
U P L O A D L A P O R A N L O G O U T ‘ N A M A A K U N ’
D A T A D O N A T U R C A B A N G M A N A J E M E N K O M E N T A R
H O M E T E N T A N G D O N A T U R
C A R A P E M B A Y A R A N
H E A D E R
w w w . g r i y a y a t i m . c o m T A M B A H D A T A L A P O R A N D O N A S I U A N G
T e r i m a D a r i B u l a n
S i m p a n B a t a l
T a h u n R p .
N o m i n a l K e t e r a n g a n
D A T A P E M A S U K A N D O N A S I
F i l e B u k t i N o m i n a l
K e t e r a n g a n B r o w s e F i l e
D A T A P E N G E L U A R A N P E N Y A L U R A N D O N A S I
N a m a O p e r a t o r P e n g i r i m
M E N U
L A P O R A N D O N A S I U A N G M A N A J E M E N A N A K A S U H
D A T A D O N A T U R
A S R A M A G R I Y A B I N T A R O D A T A D O N A S I O N L I N E
U P L O A D L A P O R A N L O G O U T ‘ N A M A A K U N ’
D A T A D O N A T U R C A B A N G M A N A J E M E N K O M E N T A R
H O M E T E N T A N G D O N A T U R
C A R A P E M B A Y A R A N
p. Tampilan Cetak Data Laporan Donasi Uang
Gambar 4.84 Tampilan Cetak Data Laporan Donasi Uang
Gambar 4.82 sampai dengan Gambar 4.84 di atas menampilkan data laporan donasi berupa uang yang diterima oleh pihak Yayasan, pada
tampilan tersebut tidak dibuat secara detail karena tidak ingin terjadi adanya kecurangan atau manipulasi data dalam memasukan laporan keuangan.
Untuk menambah laporan donasi uang, admin dapat memilih tombol tambah laporan dan form “laporan donasi uang” akan muncul dan siap diisi.
Selain itu admin dapat mencetak data-data tersebut yang nantinya akan diberikan kepada para donatur yang ingin mengetahui hasil dari laporan
donasi pada Yayasan Griya Yatim.
L A P O R A N D O N A S I K E U A N G A N
Y A Y A S A N G R IY A Y A T IM D A N D H U ’A F A
L O G O L O G O
N O I D L a p o r a n
K e t e r a n g a n
D A T A L A P O R A N D O N A S I K E U A N G A N
P e r io d e T g l P o s t in g
P e m a s u k a n R p . P e n g e lu a r a n R p .
T o t a l R p .
R p .
H E A D E R
w w w . g r iy a y a tim . c o m U P L O A D F IL E
N O J u d u l F il e
A k s i
T A B L E D A T A U P L O A D
N a m a F ile T g l P o s t in g
T a m b a h M E N U
U P L O A D L A P O R A N M A N A J E M E N A N A K A S U H
D A T A D O N A T U R
A S R A M A G R IY A B IN T A R O D A T A D O N A S I O N L I N E
L A P O R A N D O N A S I U A N G L O G O U T ‘N A M A A K U N ’
D A T A D O N A T U R C A B A N G M A N A J E M E N K O M E N T A R
H O M E T E N T A N G D O N A T U R
C A R A P E M B A Y A R A N
H E A D E R
w w w . g r i y a y a t im . c o m T A M B A H F I L E U P L O A D
J u d u l F ile :
B r o w s e S im p a n
B a t a l
F i le :
M E N U
U P L O A D L A P O R A N M A N A J E M E N A N A K A S U H
D A T A D O N A T U R
A S R A M A G R I Y A B IN T A R O D A T A D O N A S I O N L IN E
L A P O R A N D O N A S I U A N G L O G O U T ‘N A M A A K U N ’
D A T A D O N A T U R C A B A N G M A N A J E M E N K O M E N T A R
H O M E T E N T A N G D O N A T U R
C A R A P E M B A Y A R A N
q. Tampilan Menu Upload Laporan
Gambar 4.85 Tampilan Upload File
r. Tampilan Tambah File Upload
Gambar 4.86 Tampilan Tambah File Upload Pada Gambar 4.85 dan Gambar 4.86 di atas menampilkan tabel dari
data-data yang telah diupload oleh admin, untuk menambah file upload
tersebut admin dapat memilih menu “tambah” dan kemudian akan muncul form
tambah file upload.
4. Halaman CS a. Tampilan Login CS Customer Service
Gambar 4.87 Tampilan Login CS Customer Service Gambar di atas adalah tampilan utama pada user CS dalam memulai
aktifitasnya, yaitu dengan melakukan pengisisan form login untuk masuk ke halaman utama pada CS. Setelah login berhasil maka akan muncul tampilan
home CS seperti terlihat pada Gambar di bawah ini.
HEADER
“CABANG ASRAM A GRIYA YATIM BINTARO” JALAN ELA NG RAYA BLOK H G 8 NO. 7 SEKTOR IX BINT ARO JAY A TANGER ANG Tlp.021987536866
www.griyayatim.com
Log in Home
Username Password
LOGIN FRONT OFFICE
b. Tampilan Menu Home CS
Gambar 4.88 Tampilan Home CS Customer Service
c. Tampilan Manajemen User CS
Gambar 4.89 Tampilan Tabel Manajemen User CS
H E A D E R
M E N U H O M E
M A N A JE M E N U S E R G A N TI P A S S W O R D
LO G O U T D O N A TU R
TR A N S A K S I D O N A S I TR A N S A K S I D O N A S I TU N A I
LA P O R A N TR A N S A K S I LA P O R A N P E R P E R IO D E
LA P O R A N P E R D O N A TU R SELA M A T D A TA N G D I SISTEM IN FO R M A SI PE N G ELO LA A N D A TA D O N A TU R
YA Y A SA N G R IYA Y A TIM D A N D H U ’A FA
w w w .griy ay a tim .co m
A nda Log in S ebagai : T gl Log in :
R E G IS T R A S I D O N A TU R LA P O R A N D O N A T U R
LA P O R A N P E R P E R IO D E C E TA K K A R TU D O N A TU R
LA P O R A N P E R JE N IS D O N A S I
DATA USER FRONT OFFICE LOGO
NO Userid
Aksi
TABLE DATA USER FRONT OFFICE
Nama Lengkap Email
Home Tambah
Gambar di atas adalah tampilan data dari user CS. Pada tampilan di atas CS dapat melakukan proses tambah data, edit dan hapus data
manajemen user CS. Untuk tampilan tambah dan edit data ganti password CS
dapat dilihat pada Gambar 4.90 dan Gambar 4.91 di bawah ini.
d. Tampilan Tambah User CS
Gambar 4.90 Tampilan Tambah Data Manajemen User CS
REGISTRASI USER FRONT OFFICE LOGO
F.O
Username Nama Lengkap
Staf Password
Konfirmasi Password Email
Tambah Reset
Tanggal :
e. Tampilan Ganti Password User CS
Gambar 4.91 Tampilan Ganti Password User CS
f. Tampilan Registrasi Donatur Cabang Griya Bintaro
Gambar 4.92 Tampilan Tabel Manajemen User CS
Ganti Password LOGO
Nama User Lama Nama User Baru
Password Lama Password Baru
Konfirmasi Password
Proses Reset
Home
R E G IS T R A S I D O N A T U R G R IY A A S R A M A B IN T A R O L O G O
K o d e T id a k b is a d i u b a h
N u m b e r o n ly N u m b e r o n ly
M in 4 ka ra k te r
K od e D on a tu r N a m a Le n g ka p
J en is K e la m in A la m a t L e n gk a p
N o H p N o T lp R um a h
T a m b a h R e s e t
T a ng g al :
E m a il v a lid
-P ILIH S T A T U S N IK A H - E m a il
S ta tu s N ik ah P e ke rj aa n
L a ki-la ki P e re m p ua n
B erse d ia U ntu k M e n ja d i
D o n atur T e ta p T id ak T e ta p
Gambar di atas merupakan tampilan registrasi donatur yang dilakukan di cabang asrama Yayasan Griya yatim. Dalam melakukan pengisian data
donatur ini dilakukan oleh CS, setelah pengisian data selesai CS dapat memilih tombol “proses” untuk disimpan dalam database donatur seperti
terlihat pada tabel donatur di bawah.
g. Tampilan Data Donatur Cabang Griya Bintaro
Gambar 4.93 Tampilan Tabel Data Donatur Cabang Griya Yatim dan Dhu’afa
DATA DONATUR GRIYA ASRAMA BINTARO LOGO
NO Kode Donatur
TGL Reg Nama Donatur
Jenis Kelamin Print
Search Aksi
TABLE DATA DONATUR ASRAMA GRIYA BINTARO
Home
h. Tampilan Laporan Data Donatur Per Periode
Gambar 4.94 Tampilan Laporan Data Donatur Per Periode
Tampilan di atas adalah pembuatan laporan data donatur yang dibuat sesuai dengan tanggal pendaftaran. Untuk melakukan proses tersebut CS
memilih tanggal yang dibutuhkan dan kemudian data yang dicari tersebut akan muncul.
DATA DONATUR PER PERIODE LOGO
NO Kode Donatur
TGL Reg Nama Donatur
Jenis Kelamin Print
TGL
Aksi
TABLE DATA DONATUR ASRAMA GRIYA BINTARO
Periode Tanggal Pendaftaran
BULAN TAHUN
SD
TGL BULAN
TAHUN Cari
i. Tampilan Form Cetak Kartu Donatur Cabang Griya Bintaro
Gambar 4.95 Tampilan Form Cetak Kartu Donatur Untuk tampilan di atas dilakukan untuk pembuatan kartu donatur yang
telah melakukan pendaftaran atau registrasi. Sebelumnya CS terlebih dahulu memilih data donatur sesuai dengan kode donatur dengan mengklik tombol
“cari” untuk mencari data donatur, kemudian CS memilih tombol “cetak” untuk melakukan proses pencetakkan kartu donatur dan akan tampil seperti
pada Gambar 4.96 di bawah ini.
j. Tampilan Kartu Donatur
Gambar 4.96 Tampilan Cetak Kartu Donatur
CETAK KARTU DONATUR LOGO
Kode Tidak bisa di ubah Harus sudah terdaftar
ID Kode Donatur
Nama Donatur
Tambah Reset
CARI
Y A Y A S A N G R IY A Y A T IM D A N D H U A F A
K A R T U D O N A T U R
N A M A D O N A T U R K O D E D O N A T U R
T a n g g a l R e g is t r a s i “ K a r t u in i b e r la k u u n t u k s e la m a n y a c a ll c e n t e r : 0 2 1 3 4 8 4 7 3 ”
k. Tampilan Transaksi Donasi Tunai
Gambar 4.97 Tampilan Form Transaksi Donasi Tunai Pada tampilan di atas CS melakukan proses transaksi donasi secara
tunai yang diberikan oleh donatur. Setelah proses pengisian data selesai kemudian CS dapat menyimpan dan mencetak langsung hasil dari transaksi
tersebut yang nantinya akan diberikan kepada donatur sebagai tanda bukti penerimaan donasi seperti terlihat pada Gambar 4.98 di bawah ini.
TRANSAKSI DONASI TUNAI LOGO
Kode Tidak bisa di ubah Kode donatur
Kode Transaksi Donatur
Proses Reset
Tanggal :
Nama donatur
CARI
Jenis Donasi Terbilang
Bentuk Donasi
Kode TransaksiTidak Bisa di Ubah Donatur harus terlebih dahulu daftar menjadi anggota donatur
l. Tampilan Bukti Penerimaan Transaksi Donasi Cabang Asrama Griya Bintaro
Gambar 4.98 Tampilan Data Transaksi Donasi Cabang
m. Tampilan Data Transaksi Donasi Cabang Asrama Griya Bintaro.
Gambar 4.99 Tampilan Data Transaksi Donasi Cabang Asrama Griya Bintaro.
TANDA TERIMA
SK.MEN.HUKHAM AHU-2494 AN. 10.04 TAHUN 2009
No. Transaksi :
LOGO
Jl. Elang R aya Blok HG 8 No.7 S ektor 9 Bintaro Jaya - Tangerang - Banten T lp.021 74863014 No .R ek. BTN Syariah C ab.Ta ngerang :7101000 73; N o.R ek BC A:8990304581; N o.R ek B NI:179062598
Tanggal Donatur
Penerim a Telah Diterim a Dari
: Kode Donatur
: Dengan Akad
: Am anah Berupa
: Terbilang
:
----TER IM A KAS IH---- D oa K ami, Yatim Dhu afa
Sem oga Allah m em balas segala kebaikan dengan pahala yang be rlipat ga nda dan senantiasa mendapat Ridho Allah dan Karunia -N ya Am in.
DATA TRANSAKSI DONASI GRIYA ASRAMA BINTARO LOGO
NO Akad
Kode Donatur Nom inal Rp
Print Search
Aksi
TABLE DATA TRANSA KSI DONASI ASR AMA GRIYA BINTARO
Home Kode Transaksi
n. Tampilan Data Transaksi Donasi Per Periode
Gambar 4.100 Tampilan Laporan Data Transaksi Donasi Per Periode
o. Tampilan Data Transaksi Per Donatur
Gambar 4.101 Tampilan Laporan Data Transaksi Donasi Per Donatur
DATA TRANSAKSI DONASI PER PERIODE LOGO
NO Kode Transaksi
TGL Transaksi
Kode Donatur Nominal Rp.
Print TGL
Aksi
TABLE DATA TRANSKSI DONASI ASRAMA GRIYA BINTARO
Periode Tanggal Transaksi
BULAN TAHUN
SD
TGL BULAN
TAHUN Cari
Ditemukan data transaksi periode dari tanggal SD tanggal
D A T A T R A N S A K S I D O N A S I P E R D O N A T U R L O G O
N O K o d e T r a ns a ks i
T G L T ra ns a k si
K od e D on a tu r N om in a l R p .
P rin t T G L
A ks i
T A B L E D A T A T R A N S K S I D O N A S I A S R A M A G R IY A B IN T A R O
P e rio d e T an g g a l T ra n s a k s i
B U L A N T A H U N
S D
T G L B U L A N
T A H U N C a r i
- K o d e D o n a tu r-
P ilih K o d e D o n a tu r
D ite m u k an d a ta tra n sa k si d e n ga n k o de d o n a tur : p e rio de d a ri ta n g ga l S D ta ng g a l
p. Tampilan Laporan Data Transaksi Donasi Per Jenis Donasi.
Gambar 4.102 Tampilan Laporan Data Transaksi Donasi Per Jenis Donasi Dari Gambar 4.99 sampai dengan Gambar 4.102 adalah beberapa
laporan data transaksi donasi yang dilakukan oleh donatur di setiap cabang asrama Yaayasan. Terdapat beberap pilihan untuk membuat laporan tersebut
sesuai dengan kebutuhan CS seperti pembuatan laporan transaksi donasi per periode, per donatur maupun per jenis donasi yang kemudian dapat dicetak
untuk arsip Yayasan.
4.5 Programming