Component Diagram User Interface Component

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