bab iii pembahasan 3.1. tinjauan yayasan · 39 . bab iii. pembahasan . 3.1. tinjauan yayasan ....

39

BAB III

PEMBAHASAN

3.1. Tinjauan Yayasan

Yayasan Hidir Indonesia ini merupakan suatu organisasi sosial milik swasta

yang bergerak dibidang sosial. Di dalam organisasi ini terdapat proses yang

menunjukan pula pembagian kerja dan jalinan hubungan kerja antar personilnya

untuk mencapai tujuan yang telah ditetapkan. Yayasan Hidir Indonesia di ketua

oleh Bapak Amirudin, berlamat di jl. Kalibaru Timur IV No.46, Rt.11/Rw.13,

kelurahan Kalibaru. Kecamatan Cilincing Jakarta Utara Provinsi Jakarta.

Adapun tujuan dari yayasan adalah Memfasilitasi anak anak yatim piatu, dan

anak anak terlantar dalam mencari, memilih dan menentukan arah hidup yang tepat

bagi bekal masa depan kehidupannya sebagai manusia yang bermartabat, berguna

bagi diri, keluarga dan masyarakatnya kelak dihari nanti.

3.1.1. Sejarah Yayasan

Anak-anak merupakan tunas generasi muda mendatang yang menjadi tulang

punggung bangsa dan pembangunan ummat. Anak -anak adalah anugerah terindah

dan sekaligus amanat Allah SWT yang wajib dijaga, dididik, dilindungi, diayomi,

dicintai, dan diberikan kasih sayang, tentunya itu semua sebagian besar dilakukan

oleh orang tua di dalam sebuah keluarga. Kita sadari bersama bahwa keluarga

adalah fondasi bnagunan ummat. Kelurga dapat menentukan bagaimana masa

depan suatu ummat dan bangsa. Keluarga pulalah yang menjadi ujung tombak

dalam perbaikan dan pendidikan masyarakat.

40

Dengan berbijak pada al-Quran surat al Ma’un ayat 1-3 artinya, “Tahukah

kamu orang-orang yang mendustakan agama, yaitu orang-orang yang menghardik

anak yatim dan tidak mau memberi makan orang-orang miskin”. Menginspirasi

K.H Ahmad Dahlan melalui persyarikatan Muhammadiyah mendirikan panti

asuhan guna menyantuni kaum mustadaafun, dan pada perkembangan berikutnya

di pimpinan Muhammadiyah tingkat daerah juga banyak mendirikan amal usaha di

bidang sosial yang juga merupakan apresiasi atas pemahaman terhadap surat al-

quran diatas.

Mengingat kondisi bangsa Indonesia saat ini yang terpuruk sejak tahun 1997,

yaitu dengan adanya krisis multidimensiaonal yang berkepanjangan berakibat

semakin bertambahanya masyarakat miskin dan anak-anak terlantar. Begitu pula

dengan kehidupan akhlak yang semakin lama semakin dangkal, sehingga di

berbagai tempat terlihat masyarakat dhua’fa yang atas kemampuannya tidak lagi

mempunyai daya untuk menghidupi diri sendiri, akibatnya kuantitas kerawanan dan

penyakit masyarakat semakin meningkat.

Untuk mengurangi tingkat kerawanan tersebut salah satu solusi yang direspon

masyarakat adalah dengan mendirikan Panti Asuhan sebagai “keluarga” yang

memfokuskan kelangsungan hidup bagi anak-anak yatim, piatu, yatim piatu, anak-

anak terlantar dan anak-anak keluarga kurang mampu dengan memberikan

pendidikan yang layak, perlindungan, dan kasih sayang bagi mereka.

Yayasan Panti Asuhan Hidir Indonesia adalah salah satu dari sekian banyak

panti asuhan yang ada di jakarta. Panti Asuhan ini didirikan pada tahun 2006 yang

sebelumnya hanya merupakan lembaga pendidikan non formal yaitu TPA yang

didirikan oleh bapak Amirudin, hingga tahun 2009 akhirnya yayasan Hidir

41

Indonesia secara resmi berbadan hukum dengan memiliki akte notaris: Zaenuddin

Thohir SH No.31 tanggal 22 mei 2009.Keputusan Mentri Hukum dan Hak Azasi

Manusia RI. No: AHU-2000.AH. 01. 04. Tahun 2009. NPWP: 21. 097. 739. 3-

045.000. Dinas Sosial Provinsi DKI Jakarta No. 013.31.72.04.1004.815.

Awal berdirinya yayasan Hidir indonesia ini memiliki sistim non panti yaitu

hanya memberikan santunan dan biaya pendidikan mereka, karena tidak

mempunyai tempat untuk menampung mereka. biaya diperoleh dari kotak amal

yang di pasang di sekitar lingkungan yayasan hidir indonesia. Untuk itu, beliau

berupaya membuatkan penampungan bagi mereka secara layak. Yayasan ini juga

tidak hanya membantu anak yatim piatu saja, melainkan orang yang kurang mampu

seperti ibu-ibu yang telah ditinggal oleh suaminya dan berkehidupan kurang

mampu. Juga membina anak-anak jalanan yang ada di sekitar yayasan untuk diberi

pendidikan agar hidupnya terarah. Adapun yayasan ini terletak di Jl. Kalibaru timur

IV No.46 RT.11 RW.13 kelurahan kalibaru kecamatan cilincing jakarta utara Dari

tahun 2006 hingga 2017 ini Yayasan Hidir berhasil mengembangkan hingga

beberapa aktifitas yaitu:

1. Pendidikan TK RA, PAUD MD TPQ/TKA.

2. Panti non panti, santunan yatim/dhuafa.

3. Pembinaan sahabat anak jalanan.

4. Penerimaan dan penyaluran zakat.

5. Keagamaan: Majelis Ta’lim, Training Dakwah.

42

Adapun visi-misi yang ada pada Yayasan Hidir Indonesia sebagai berikut:

A. Visi

Mewujudkan harapan anak yatim dan yatim piatu setara dengan hamba Allah

yang lain.

B. Misi

1. Memberikan binaan dan pendidikan bagi anak anak yatim piatu, yatim,

piatu dan anak anak terlantar agar memiliki ilmu pengetahuan formal

ataupun non formal untuk bekal hidup mereka di hari depan.

2. Menjadi penghubung antara para dermawan untuk menyalurkan dana

zakat, infak dan sodaqoh.

3. Mewujudkan harapan anak yatim dan yatim piatu setara dengan hamba

Allah yang lain.

3.1.2. Struktur Organsasi dan Fungsi

A. Struktur Organisasi

Struktur organisasi merupakan persyaratan utama yang mutlak dimiliki oleh

suatu lembaga/instansi maupuan organisani, karena struktur organisasi merupakan

alat manajemen yang dibutukan agar segala wewenang dan tanggung jawab pribadi

yang terlibat didalamnya dapat bertanggung jawab.

Struktur organisasi merupakan fungsi dan kegiatan setiap personilyang terkait

didalamnya serta menggambarkan hubungan antar personil. Dengan adanya

struktur organisasi maka setiap pribadi mendapat ruang lingkup pekerjaan yang

jelas, sehingga terjalin kerjasama yang baik antara atasan dengan bawahannya atau

43

dengan sesama rekan sekerja dalam pencapaian tujuan yayasan yang diharapkan.

Adapun bentuk struktur organisasi dari Yayasan Hidir Indonesia sebagai berikut:

Gambar III.1.

Struktur Organisasi

B. Tugas dan Fungsi organisasi

1. Pembina

Tugas dan wewenang:

a. Pembina berwenang bertindak untuk dan atas nama pembina.

b. Dalam hal hanya ada seorang anggota Pembina, maka segala tugas

dan wewenang yang diberikan kepada Ketua Pembina atau anggota

Pembina berlaku pula baginya.

c. Dewan Pembina memiliki hak dan kewajiban di dalam memberikan

suatu masukan, saran dan ide serta persetujuan kepada Dewan

Pengurus di dalam pelaksanaan program kerja organisasi sesuai

Seksi Pendidikan dan Keterampilan

Seksi Sarana dan Prasarana

Seksi Keamanan dan Kebersihan

Pembina

Ketua Yayasan

Pengawas

Sekertaris Bendahara

44

dengan AD/ART dan ketentuan – ketentuan lain yang berlaku dalam

organisasi.

d. Dewan Pembina berkewajiban mengayomi organisasi sesuai dengan

Visi dan Misi yang di tetapkan.

e. Kewenangan pembina meliputi:

1) Keputusan mengenai perubahan Anggaran Dasar dan pengesahan

laporan tahunan.

2) Pengangkatan dan pemberhentian anggota Pengurus dan

Pengawas. Penetapan kebijakan umum berdasarkan Anggaran

Dasar Yayasan (Foundation).

3) Pengesahan Program Kerja dan rancangan anggaran tahunan

Yayasan.

4) Penetapan keputusan mengenai penggabungan atau pembubaran

Yayasan (Foundation). Penunjukan likuidator dalam hal Yayasan

(Foundation) dibubarkan.

2. Pengawas

Tugas dan wewenang:

a. Pengawas wajib dengan itikad baik dan penuh tanggung jawab.

b. menjalankan tugas Pengawas untuk kepentingan Yayasan.

c. Pengawas wajib dengan itikad baik dan penuh tanggung jawab

menjalankan tugas.

d. Pengawas berwenang bertindak untuk dan atas nama Pengawas.

45

e. Pengawas berwenang memeriksa dokumen, pembukuan dan

memasuki bangunan halaman atau tempat yang dipergunakan

Yayasan.

f. Mengetahui segala tindakan yang dijalankan oleh Pengurus dan

memberi peringatan kepada pengurus.

3. Ketua Yayasan

Tugas dan wewenang:

a. Koordinator dalam memimpin memimpin Panti Asuhan.

b. Merumuskan kebijakan umum di Internal dan Eksternal Panti Asuhan.

c. Mengoordinasikan penyelenggara pembinaan dan pengembangan

anak asuh serta mengelola Panti Asuhan secara profesional,

sistematis, terarah, efektif dan efisien.

d. Bertanggung jawab dan mengusahakan agar Panti Asuhan dapat

melaksanakan pelayanan dengan baik kepada Lembaga Kesejahteraan

Kemasyarakatan.

4. Sekertaris

Tugas dan wewenang:

a. Mengkoordinasikan, mengarahkan dan bertanggung jawab atas

kegiatan kerja Sekretariat Panti Asuhan.

b. Mengkoordinasikan dan mengarahkan kegiatan bagian Rekomendasi

dan Perizinan, dan Bagian Hubungan Masyarakat.

c. Mengelola seluruh kebutuhan fasilitas dan perlengkapan di

lingkungan Sekretariat.

46

d. Melaksanakan kegiatan ketatausahaan, pembinaan personil,

pembinaan material, perlengkapan dan kegiatan pembinaan

kerumahtanggaan Panti Asuhan.

e. Mempersiapkan dan menyelenggarakan rapat-rapat pengurus Panti

Asuhan.

f. Dalam melaksanakan tugasnya bertanggung jawab kepada Ketua.

5. Bendahara

Tugas dan wewenang:

a. Melaksanakan kebijakan umum serta kebijakan Ketua dalam urusan

keuangan, perbendahaaan keuangan dan anggaran berdasarkan

peraturan yang berlaku.

b. Melaksanakan kebijakan umum serta kebijakan Ketua dalam urusan

keuangan, perbendaharaan keuangan dan anggaran berdasarkan

peraturan yang berlaku.

c. Menyusun dan rencana anggaran pendapatan dan belanja bekerja

sama dengan seksi–seksi dalam organisasi panti.

d. Mengkoordinasi pelaksanaan anggaran pendapatan dan belanja yang

telah disetujui.

e. Bertanggung jawab terhadap pengadaan pendanaan baik dari sektor

pemerintah maupun non pemerintah.

f. Bertanggung jawab terhadap pembukuan, verifikasi dan pengeluaran

sesuai dengan peraturan yang berlaku.

g. Bertanggung jawab terhadap penyusunan laporan keuangan secara

periodic.

47

h. Penetapan kebijakan umum berdasarkan anggaran.

i. Memegang kendali dalam bidang bantuan yang diperoleh dari para

donator.

6. Seksi Pendidikan dan Keterampilan

Tugas dan wewenang:

a. Membuat perencanaan jangka pendek dan panjang terkait dengan

pendidikan anak asuh.

b. Anak Asuh setelah dilepas dari pantidikan minimal setingkat SLTA

dan memiliki ketrampilan yang handal.

c. Mengevaluasi hasil pendidikan formal anak-anak asuh.

7. Seksi Sarana dan Prasarana

Tugas dan wewenang:

a. Menyediakan Asrama yang memadahi dan lingkungan yang aman dan

sehat.

b. Lokasi untuk bermain, pelatihan ketrampilan.

c. Merawat serta membenahi dan mengamankan sarana dan prasarana

yang dimiki oleh panti asuhan.

8. Seksi Keamanan dan Kebersihan

Tugas dan wewenang:

a. Bertugas menertibkan serta menjaga keamanan lingkungan dan anak

panti asuhan.

b. Memelihara & menjaga seluruh hak milik panti.

c. Membantu kelancaran program yang telah ditetapkan.

48

3.2. Analisa Kebutuhan

Analisa kebutuhan adalah mengidentifikasi kebutuhan yang diperoleh

berdasarkan kebutuhan pengguna dan kebutuhan sistem.

A. Kebutuhan Pengguna

Pada website ini terdapat pengguna yang dapat saling berinteraksi dalam

lingkungan sistem yaitu front-end untuk kebutuhan pengunjung dan back-end untuk

kebutuhan admin. Setiap pengguna mempunyai kebutuhan informasi yang berbeda-

beda, yaitu:

1. Administrator

a. Melakukan login admin

b. Melihat seputar data admin, data anggota, data relawan, data agenda,

data peserta agenda, tema diskusi, informasi, galeri, kas yayasan dan

donasi.

c. Menghapus member, relawan, agenda, tema diskusi dan informasi.

d. Menambah, mengedit, dan menghapus produk.

e. Menambah, mengedit, dan menghapus tema diskusi, agenda, dan peserta

agenda.

f. Menambah, mengedit, dan menghapus data user admin.

g. konfirmasi donasi.

2. Pengunjung

a. Melihat seputar Beranda, data yayasan, kas yayasan, agenda, chat

diskusi, profile yayasan dan melihat cara donasi.

b. Mengisi atau mendaftar menjadi member.

49

3. Member

a. Melakukan login member.

b. komentar chat diskusi.

c. Mengikuti agenda.

d. Melakukan transaksi donasi.

e. Melakukan logout.

B. Kebutuhan Sistem

Pada website ini terdapat sistem operasi yang digunakan untuk

mengendalikan program. Setiap sistem operasi mempunyai kegunaan masing-

masing, yaitu:

1. Pengunjung sebelum melakukan transaksi donasi dan mengikuti agenda

member atau anggota harus melakukan registrasi menjadi member.

2. Administrator melakukan login untuk masuk ke menu admin dan logout untuk

keluar.

3. Sistem harus dapat mengubah, mengedit dan menambah yang terdapat pada

menu admin.

3.3. Perancangan Perangkat Lunak

Suatu struktur yang diterapkan pada pengembangan produk perangkat lunak

yang bertujuan untuk mengembangkan sistem dan memberikan panduan yang

bertujuan untuk mensukseskan proses pengembangan sistem melalui tahap demi

tahap. Berikut adalah tahap dalam pengembangan perancangan perangkat lunak.

50

3.3.1. Rancangan Antar Muka

Menjelaskan rancangan antar muka (interface) yang terdapat pada Website.

A. Halaman User

1. Perancangan antarmuka Halaman Utama

logo yayasan header(nama yayasan)

LoginRegisterBeranda Data Yayasan V Forum V Kas Yayasan Donasi V Tentang Kami V

foto ketua yayasan

kontak yaysasan fotofoto foto

footer

slide show

informasi

Gambar III.2.

Rancangan Antar Muka Halama Utama

51

2. Rancangan antarmuka Login

LOGIN

xxxxxx

xxxxxx

cancel login

username

password

Gambar III.3.

Rancangan Antar Muka Login

3. Rancangan Antarmuka Registrasi Member

home

registrasi member

id anggota

nama

jenis kelamin

no telpon

email

kota

username

password

password confrime

foto

xx-9999

xxxxxxxxxx

99999999999999

xxxxxxx

xxxxxxxxxxxx

xxxxxxxxxxxx

xxxxxxxx

xxxxxxxxxxxx

browser

Laki-laki perempuan

bersih simpan

Gambar III.4.

Rancangan Antar Muka Registrasi

52

4. Rancangan Antarmuka Index User


logoutfoto anggotaBeranda Data Yayasan V Forum V Kas Yayasan Donasi V Tentang Kami V

foto ketua yayasan

kontak yaysasan fotofoto foto

footer

slide show

informasi

data anak ayatim

data relawan

data anggota

chat diskusi

agendadata peserta

agendagaleri yayasan

cara donasi

form donasi uangform donasi

barangdata donatur uang

data donatur barang

visi-misi

profile yayasan

Gambar III.5.

Rancangan Antar Muka Index User

53

5. Rancangan Antarmuka Data Anak Yatim



foto ketua

footer

nama jenis kelamin

tanggal lahir kota asal nama ibu nama ayah nama wali alamat no telpon status anak foto

xxx xxxx 9999-99-99 xxxx xxxx xxxx xxxxxx xxxxxx 9999999999 xxxxx xxxx

pencarian

data anak yatim

Gambar III.6.

Rancangan Antar Muka Data Anak Yatim

6. Rancangan Antarmuka Data Relawan



foto ketua

footer

nama jenis kelamin alamat email no telpon tanggal bergabung bagian foto

xxxxxx xxxxxxxxx xxxxxxx xxxxxxxx 999999999 9999-99-99 xxxxxx xxxxxx

pencarian

data relawan

Gambar III.7.

Rancangan Antar Muka Data Relawan

54

7. Rancangan Antarmuka Data Anggota



foto ketua

footer

nama jenis kelamin kota foto

xxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxx

pencarian

data anggota

Gambar III.8.

Rancangan Antar Muka Data Anggota

8. Rancangan Antarmuka Tema Diskusi



foto ketua

footer

tama keterangan aksi

xxxxxxxxx xxxxxxxx

pencarian

tema diskusi

lihat

Gambar III.9.

Rancangan Antar Muka Tema Diskusi

55

9. Rancangan Antarmuka Form Komentar Diskusi



foto ketua

footer

form komentar diskusi

tema

keterangan

nama anggota

komentar

nama anggota

komentar

submit

komenatr

Gambar III.10.

Rancangan Antar Muka Form Komentar Diskusi

10. Rancangan Antarmuka Data Agenda



foto ketua

footer

nama agenda temapat tanggal jam keterangan aksi

xxxxxx xxxxxxx 9999-99-99 99-99 xxxxx

pencarian

data agenda

mengikuti

Gambar III.11.

Rancangan Antar Muka Data Agenda

56

11. Rancangan Antarmuka Form Mengikuti Agenda

id anggota

nama

no telpon

id agenda

nama agenda

keterangan

xx-9999

xxxxxxxxxx

999999999999

xx-9999

xxxxx

xxxxxxxxxx

data agenda

mengikuti batal

Gambar III.12.

Rancangan Antar Muka Form Mengikuti Agenda

12. Rancangan Antarmuka Data Peserta Agenda



foto ketua

footer

id member nama member no telpon id agenda nama agenda keterangan

xx-9999 xxxxxxx 99999999 xx-9999 xxxxxxxxxx xxxxxxxxxx

pencarian

data peserta agenda

Gambar III.13.

Rancangan Antar Muka Data Peserta Agenda

57

13. Rancangan Antarmuka Galeri Yayasan



footer

galeri yayasan

foto foto foto foto

Gambar III.14.

Rancangan Antar Muka Galeri Yayasan

14. Rancangan Antarmuka Data Kas



foto ketua

footer

kas masuk detail

9999999

data kas masuk

kas keluar detail

999999999

data kaskeluar

saldo

lihat

lihat

999999999999

Gambar III.15.

Rancangan Antar Muka Data Kas

58

15. Rancangan Antarmuka Data Detail Kas Masuk



foto ketua

footer

nama trans no account tanggal diskripsi nominal

xxxx 9999 9999-99-99 xxxxxxx 9999999

pencarian

detail kas masuk

Gambar III.16.

Rancangan Antar Muka Data Detail Kas Masuk

16. Rancangan Antarmuka Data Detail Kas Keluar



foto ketua

footer


xxxxxx 999 9999-99-99 xxxxxxxxx 999999999

pencarian

detail kas keluar

Gambar III.17.

Rancangan Antar Muka Data Detail Kas Keluar

59

17. Rancangan Antarmuka Cara Donasi



footer

langakh-langkah donasi yayasan

Gambar III.18.

Rancangan Antar Muka Cara Donasi

18. Rancangan Antarmuka Form Donasi Uang



foto ketua

footer

form donasi uang

id donasi

id member

nama member

no telpon

email

tanggal transfer

via bank

atas nama

jumlah donasi

xx-9999

xx-9999

9999999999999

xxxxxxxxxxxx

9999-99-99

xxxxxxxxxx

xxxxxxxxxx

999999999

bersih simpan

xxxxxxxxxxxx

keterangan xxxxxxxxxxxxxxxxx

Gambar III.19.

Rancangan Antar Muka Form Donasi Uang

60

19. Rancangan Antarmuka Form Donasi Barang



foto ketua

footer

form donasi barang

id donasi

id member

nama member

no telpon

email

tanggal transfer

via transfer

atas nama

diskripsi

xx-9999

xx-9999

999999999999

xxxxxxx

9999-99-99

xxxxxxx

xxxxxxxx

xxxxxxxxx

bersih simpan

xxxxxxxx

keterangan xxxxxxxxx

Gambar III.20.

Rancangan Antar Muka Form Donasi Barang

20. Rancangan Antarmuka Data Donatur Uang



foto ketua

footer

pencarian

data donatur uang

id donasi tanggaladmin nama

xx-9999 9999-99-99xxxxx xxxxxxxx

tanggal transfer via bank atas nama jumlah

donasi keterangan

9999-99-99 xxxxxx xxxxxxx 9999999 xxxxxxxx

status

xxxxx

Gambar III.21.

Rancangan Antar Muka Data Donatur Uang

61

21. Rancangan Antarmuka Data Donatur Barang



foto ketua

footer

via transfer atas nama diskripsi kterangan status

xxxxxx xxxxxx xxxxxxx xxxxxx xxxxxxxxx

pencarian

data donatur barang



tanggal transfer

9999-99-99

Gambar III.22.

Rancangan Antar Muka Data Donatur Barang

22. Rancangan Antarmuka Halaman Visi-Misi



footer

visi-misi yayasan

Gambar III.23.

Rancangan Antar Muka Halaman Visi-Misi

62

23. Rancangan Antarmuka Halaman Profile Yayasan



footer

profile yayasan

Gambar III.24.

Rancangan Antar Muka Halaman Profile Yayasan

24. Rancangan Antarmuka Halaman Profile Anggota

foto member

form profile member

id anggota

nama

jenis kelamin

no telpon

email

kota

foto

xx-9999

xxxxxxx

999999999999

xxxxxxxxxxx

xxxxxxxxxxx

browser

Laki-laki perempuan

edit profile

Gambar III.25.

Rancangan Antar Muka Halaman Profile Anggota

63

B. Halaman Admin

1. Rancangan Antarmuka Loagin

LOGIN

xxxxxx

xxxxxx

cancel login

username

password

Gambar III.26.

Rancangan Antar Muka Login

2. Rancangan Antarmuka Dashboard

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

kas donasi uang data peserta agenda

data member

data admin

data anak yatim

data relawan

kas yayasan

donasi uang

donasi barang

chat diskusi

kas yayasan

donasi uang

donasi barang

informasi

galeri

Gambar III.27.

Rancangan Antar Muka Dashboard

64

3. Rancangan Antarmuka Data Anggota

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

data anggota yayasan

id anggota nama jenis kelamin no telpon email kota foto aksi

xx-9999 xxxxx xxxxxxx 999999 xxxxxxx xxxxxxx xxxxxx

pencarian

hapusedit

print

Gambar III.28.

Rancangan Antar Muka Data Anggota

4. Rancangan Antarmuka Data Admin

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

data admin yayasan

id admin nama username aksi

xx-9999 xxxxx xxxx

pencariantambah data

hapusedit

print

Gambar III.29.

Rancangan Antar Muka Data Admin

65

5. Rancangan Antarmuka Form Tambah Admin

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

tambah data admin

id admin

nama

username

password

password confrime

xx-9999

xxxxxxxxxxxxxx

xxxxxxxxx

xxxxxxxxxx

xxxxxxxxxx

bersih simpan

Gambar III.30.

Rancangan Antar Muka Form Tambah Admin

6. Rancangan Antarmuka Data Anak Yatim

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

nama jenis kelamin

tanggal lahir kota asal nama ibu nama ayah nama wali alamat no telpon status anak foto

xxxxxxx xxxxxx 9999-99-99 xxxxx xxxxx xxxxxx xxxxxx xxxxxxx 9999999 xxxxx xxxxx

pencarian

data anak yatim

aksi

tambah data

hapusedit

print

Gambar III.31.

Rancangan Antar Muka Data Anak Yatim

66

7. Rancangan Antarmuka Tambah Data Anak Yatim

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

tambah data anak yatim

id anak yatim

nama

jenis kelamin

tanggal lahir

kota asal

nama ibu

nama ayah

nama wali

alamat wali

foto

xx-9999

xxxxxxxxxxx

9999-99-99

xxxxxxx

xxxxxxx

xxxxxx

xxxxxxx

xxxxxxxx

browser

Laki-laki perempuan

bersih simpan

no telpon

status anak

99999999999

xxxxxxxx

Gambar III.32.

Rancangan Antar Muka Tambah Data Anak Yatim

8. Rancangan Antarmuka Data Relawan

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

nama jenis kelamin alamat email no telpon tanggal bergabung bagian foto

xxxxxx xxxxxx xxxxxx xxxxxx 999999999 9999-99-99 xxxxxxx xxxxxx

pencarian

data relawan

aksi

tambah data

hapusedit

print

Gambar III.33.

Rancangan Antar Muka Data Relawan

67

9. Rancangan Antarmuka Tambah Data Relawan

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

tambah data relawan

id relawan

nama

jenis kelamin

alamat

email

no telpon

tanggal bergabung

bagian

foto

foto

xx-9999

xxxxxxxx

xxxxxxxxxxx

xxxxxxxx

9999999

9999-99-99

xxxxxxxx

xxxxxxxxxx

browser

Laki-laki perempuan

bersih simpan

Gambar III.34.

Rancangan Antar Muka Tambah Data Relawan

10. Rancangan Antarmuka Kas Yayasan

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

kas masuk detail

9999999

data kas masuk

kas keluar detail

99999999

data kaskeluar

saldo

9999999999

lihat

lihat

Gambar III.35.

Rancangan Antar Muka Data Kas Yaysasan

68

11. Rancangan Antarmuka Data Kas Masuk

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout


xxxxxx 99999 9999-99-99 xxxxxxx 9999999

pencarian

detail kas masuk

tambah data

aksi

hapusedit

print

Gambar III.36.

Rancangan Antar Muka Data Kas Masuk

12. Rancangan Antarmuka Tambah Data Kas Masuk

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

tambah data kas masuk

id trans

nama trans

no accoun

diskripsi

nominal

99

xxxxx

xxxxxxxxxxx

999999999999

999

bersih simpan

Gambar III.37.

Rancangan Antar Muka Tambah Data Kas Masuk

69

13. Rancangan Antarmuka Data Kas Keluar

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout


xxxxxx 999 9999-99-99 xxxxxx 9999999

pencarian

detail kas keluar

tambah data

aksi

hapusedit

print

Gambar III.38.

Rancangan Antar Muka Data Kas Keluar

14. Rancangan Antarmuka Tambah Data Kas Keluar

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

tambah data kas keluar

id trans

nama trans

no accoun

diskripsi

nominal

99

xxxxxx

xxxxxxxxxx

99999999

999

bersih simpan

Gambar III.39.

Rancangan Antar Muka Tambah Data Kas Keluar

70

15. Rancangan Antarmuka Data Donatur Uang

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout



pencarian

data donatur uang

aksitanggal transfer via bank atas nama jumlah

donasi keterangan

9999-99-99 xxxxxx xxxxxxx 9999999 xxxxxxxx

status

xxxxxhapusedit

print

Gambar III.40.

Rancangan Antar Muka Data Donatur Uang

16. Rancangan Antarmuka Konfirmasi Data Donatur Uang

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

ubah status donasi uang

id donasi

tanggal

no telpon

xx-9999

9999-99-99

99999999

id anggota

nama

tanggal transfer

xx-9999

xxxxxxxxx

9999-99-99

tanggal transfer via bank jumlah donasi atas nama

9999-99-99 xxxxxx 9999999 xxx

ubah setatus xxxxxxxx V simpan

Gambar III.41.

Rancangan Antar Muka Konfirmasi Data Donatur Uang

71

17. Rancangan Antarmuka Data Donatur Barang

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

pencarian

data donatur barang

aksivia transfer atas nama jumlah

donasi keterangan

xxxx xxxxxxx 99999 xxxxxxx

status

xxxxx hapusedit

print



tanggal transfer

9999-99-99

Gambar III.42.

Rancangan Antar Muka Data Donatur Barang

18. Rancangan Antarmuka Konfirmasi Data Donatur Barang

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

ubah status donasi barang

id donasi

tanggal

no telpon

xx-9999

9999-99-99

9999999

id anggota

nama

tanggal transfer

xx-9999

xxxxxx

xxxxxx

tanggal transfer via transfer diskripsi keterangan

9999-99-99 xxxxxxx xxxxxxx xxxxxxxxx

ubah setatus xxxxxxx V simpan

Gambar III.43.

Rancangan Antar Muka Konfirmasi Data Donatur Barang

72

19. Rancangan Antarmuka Tema Diskusi

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

id tema tema keterangan aksi

xx-9999 xxxxxxxx xxxxxxxxxxxxxxx

pencarian

tema diskusi

tambah tema

hapusedit

Gambar III.44.

Rancangan Antar Muka Tema Diskusi

20. Rancangan Antarmuka Form Komentar

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

komentar diskusi

tema

keterangan

nama

komentar

nama anggota

komentar

submit

komenatr

Gambar III.45.

Rancangan Antar Muka Form Komentar

73

21. Rancangan Antarmuka Tambah Data Tema

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

tambah tema diskusi

id tema

tema

keterangan

xx-9999

xxxxxx

xxxxxxxxxxxxxxxxxxxxxx

bersih simpan

Gambar III.46.

Rancangan Antar Muka Tambah Data Tema

22. Rancangan Antarmuka Data Agenda

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

id agenda nama agenda tempat tanggal jam

xx-9999 xxxxxx xxxxx 9999-99-99 99-99

pencarian

data agenda

tambah data

aksiketerangan

xxxxxxxxx hapusedit

print

Gambar III.47.

Rancangan Antar Muka Data Agenda

74

23. Rancangan Antarmuka Tambah Data Agenda

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

tambah data agenda

id agenda

nama agenda

tempat

tanggal

jam

xx-9999

xxxxxx

9999-99-99

99-99

xxxxxxx

bersih simpan

keteragan xxxxxxxxxx

Gambar III.48.

Rancangan Antar Muka Tambah Data Agenda

24. Rancangan Antarmuka Data Peserta Agenda

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

id anggota nama no telpon id agenda nama agenda

xx-9999 xxxxxx 999999 xx-9999 xxxxxxxxx

pencarian

data peserta agenda

tambah data

aksiketerangan

xxxxxxx hapusedit

print

Gambar III.49.

Rancangan Antar Muka Data Peserta Agenda

75

25. Rancangan Antarmuka Data Informasi

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

id info tanggal

xx-9999 9999-99-99

pencarian

data informasi

tambah data

aksiinformasi

xxxxxxxxxx hapusedit

print

Gambar III.50.

Rancangan Antar Muka Data Informasi

26. Rancangan Antarmuka Tambah Data Informasi

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

tambah data agenda

id info

tanggal

informasi

xx-99999

9999-99-99

xxxxxxxxxxxxxxxx

bersih simpan

Gambar III.51.

Rancangan Antar Muka Tambah Data Informasi

76

27. Rancangan Antarmuka Galeri Yayasan

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

no id

99 99

pencarian

galeri yayasan

tambah data

aksifoto

xxxx hapus

Gambar III.52.

Rancangan Antar Muka Galeri Yayasan

28. Rancangan Antarmuka Tambah Galeri yayasan

foto

dashboard

data master

keuangan yayasan

pesan

agenda

setting

logout

form upload file

browser

resetupload

Gambar III.53.

Rancangan Antar Muka Tambah Galeri Yayasan

77

3.3.2. Rancangan Basis Data

Perancangan basis data menghasilkan pemetaan tabel-tabel yang

digambarkan dengan Entity Relationship Diagram (ERD).

A. Entity Relationship Diagram (ERD)

ANGGOTA

DONASI BARANG

AGENDA

DONASI UANG

mendonasikan

memberikan

mengomentari

TEMA

mengikuti

ADMIN

id_donasi M

1

M

N

M

N

M

M

mengkonfirmasi

1

M

1

mengkonfirmasi

1

M

KOMENTAR

memiliki

M

N

tanggal_transfer

keterangan

via_bank

email

no_telpon

nama

tanggal

atas_nama

jumlah_donasi

tanggal_kirimketerangan

via_transfer

id_donasibarang

email

no_telpon

nama

tanggalatas_nama

diskripsi

nama_agendatempat

keterangan

id_agendatanggal

jam

nm_user

jenis_kelamin

no_telpon

foto

fotokota

id_user

email

id_user

id_agenda

id_tema

tema

keterangan

id_komentar

id_admin id_user

id_admin

nm_adminpassword

username

password

username

id_user

id_donasi

id_user

id_donasibarang

id_adminid_donasi

id_admin

id_donasi

id_komentar

tanggal

komentarid_komentar

id_tema

Gambar III.54.

Entity Relationship Diagram (ERD)

78

B. Logical Relational Structure (LRS)

tb_anggota

tb_donasiuang

tb_agenda

tb_peserta_agenda

tb_tema

tb_komentar

tb_donasibarang

tb_admin

id_user*

nm_user

jenis_kelamin

no_telpon

kota

tanggal

email

foto

id_donasi*

atas_nama

tanggal

id_user**

no_telpon

tanggal_transfer

via_bank

nm_user

email

jumlah_donasi

keterangan

status

id_agenda*

nama_agenda

tempat

tanggal

jam

keterangan

nama_agenda

nm_user

no_telpon

keterangan

id_agenda**

id_tema*

tema

keterangan

id_komentar*

tanggal

id_tema**

nm_user

id_donasibarang*

atas_nama

tanggal

id_user**

no_telpon

tanggal_kirim

via_transfer

nm_user

email

diskripsi

keterangan

status

id_admin*

nm_admin

username

password

id_user**

id_admin**

id_user**

nm_admin

M

N

M

1

N

M

1

M

1

M

N

M

id_admin**

id_admin**

1

1

M

M

1

M

komentar

Gambar III.55.

Logical Relational Structure (LRS)

79

C. Spesifikasi File

Menjelaskan tentang file atau tabel yang terbentuk dari transformasi ERD (dan

atau file-file penunjang untuk web). File-file ini tersimpan pada database xerin

dengan parameter-parameter sebagai beikut:

1. Spesifikasi File Anggota

Nama File : Anggota

Akronim : tb_anggota

Fungsi : Sebagai tempat untuk menyimpan data anggota

Tipe File : File Master

Organisasi File : Indexed Sequential

Akses File : Random

Media : Harddisk

Panjang record : 109

Kunci Field : id_user

Software : Mysql

Tabel III.1. Spesifikasi File Anggota

No Elemen data Nama Field Tipe Size Keterangan 1. Id User id_user varchar 10 Primary Key 2. Nama nama varchar 20 3. Jenis Kelamin jenis_kelamin varchar 10 4. No Telpon no_telpon int 12 5. Tanggal tanggal date 6. Email email varchar 25 7. Kota kota varchar 8 8. Username username varchar 8 9. Password password varchar 8 10. Foto foto text

80

2. Spesifikasi File Admin

Nama File : Admin

Akronim : tb_admin

Fungsi : Sebagai tempat untuk menyimpan data admin



Akses File : Random

Media : Harddisk



Software : Mysql

Tabel III.2. Spesifikasi File Admin

No Elemen data Nama Field Tipe Size Keterangan 1. Id Admin id_admin varchar 10 Primary Key 2. Nama nm_admin varchar 20 3. Username username varchar 8 4. Password password varchar 8

3. Spesifikasi File Agenda

Nama File : Agenda

Akronim : tb_agenda

Fungsi : untuk menyimpan data agenda

Tipe File : File Transaksi


Akses File : Random

Media : Harddisk

81


Kunci Field : id_agenda

Software : Mysql

Tabel III.3. Spesifikasi File Agenda

No Elemen data Nama Field Tipe Size Ket 1. Id Agenda Id_agenda varchar 8 Primary Key 2. Nama Agenda nama_agenda int 30 3. Tempat tempat varchar 20 4. Tanggal tanggal date 5. Jam jam varchar 15 6. Keterangan keterangan varchar 50

4. Spesifikasi File Peserta Agenda

Nama File : Peserta Agenda

Akronim : tb_peserta_agenda

Fungsi : untuk menyimpan data Peserta Agenda



Akses File : Random

Media : Harddisk



Software : Mysql

82

Tabel III.4. Spesifikasi File Peserta Agenda

No Elemen data Nama Field Tipe Size Ket 1. Id user id_user varchar 8 Primary Key 2. Nama nama varchar 20 3. No. Telpon no_telpon int 15 4. Id agenda id_agenda varchar 8 5. Nama agenda nama_agenda varchar 20 6. Keterangan keterangan varchar 50

5. Spesifikasi File Tema

Nama File : Tema

Akronim : tb_tema

Fungsi : untuk menyimpan data tema diskusi



Akses File : Random

Media : Harddisk

Panjang record : 86

Kunci Field : id_tema

Software : Mysql

Tabel III.5. Spesifikasi File Tema

No Elemen data Nama Field Tipe Size Ket 1. Id_Tema id_tema int 8 Primary Key 2. Tema tema varchar 20 3. Keterangan keterangan varchar 50

83

6. Spesifikasi File Komentar

Nama File : Komentar

Akronim : tb_komentar

Fungsi : untuk menyimpan data komentar diskusi



Akses File : Random

Media : Harddisk


Kunci Field : id_komentar

Software : Mysql

Tabel III.6. Spesifikasi File Komentar

No Elemen data Nama Field Tipe Size Ket 1. Id Komentar id_komentar int 8 Primary Key 2. Komentar komentar varchar 100 3. Tanggal tanggal date 4. Id Tema id_tema varchar 8 5 Id User id_user varchar 8 6 Id Admin id_admin varchar 8

7. Spesifikasi File Donasi Uang

Nama File : Donasi Uang

Akronim : tb_donasi

Fungsi : untuk menyimpan data donasi uang



84

Akses File : Random

Media : Harddisk


Kunci Field : id_donasi

Software : Mysql

Tabel III.7. Spesifikasi File Donasi Uang

No Elemen data Nama Field Tipe Size Ket

1. Id Donasi id_donasi varchar 8 Primary Key 2. Tanggal tanggal date 3. Id User id_user vachar 8 4. Nama nama vachar 20 5. No Telpon no_telpon int 15 6. Email email varchar 25

7. Tanggal Transfer tanggal_transfer date

8. Via Bank via_bank varchar 10 9. Atas Nama atas_nama varchar 20 10. Jumlah Donasi jumlah_donasi double 11. Keterangan keterangan varchar 30 12. Status status varchar 15 13. Id Admin id_admin varchar 8

8. Spesifikasi File Donasi Barang

Nama File : Donasi Barang

Akronim : tb_donasibarang

Fungsi : untuk menyimpan data donasi barang



Akses File : Random

85

Media : Harddisk


Kunci Field : id_donasibarang

Software : Mysql

Tabel III.8. Spesifikasi File Donasi Barang

No Elemen data Nama Field Tipe Size Ket

1. Id Donasi Barang id_donasibarang varchar 8 Primary Key

2. Tanggal tanggal date 3. Id User id_user varchar 8 4. Nama nama varchar 20 5. No Telpon no_telpon int 15 6. Email email varchar 25 7. Tanggal Kirim tanggal_kirim date 8. Via Taransfer via_transfer varchar 10 9. Atas Nama atas_nama varchar 20 10. Diskripsi diskripsi double 11. Keterangan keterangan varchar 30 12. Status status varchar 15 13. Id Admin id_admin varchar 8

3.3.3. Rancangan Struktur Navigasi

Struktur navigasi website berfungsi sebagai gambaran seluruh isi dari sebuah

situs web secara garis besar dan sebagai gambaran mengenai hubungan antara satu

halaman dan halaman lain dalam website tersebut. Struktur navigasi yang penulis

gunakan dalam pembuatan website ini adalah struktur navigasi non linier. Melalui

struktur navigasi ini akan terlihat isi beserta seluruh susunan yang ada dalam sebuah

website, berikut rancangan struktur navigasi yaitu:

86

A. Rancangan Struktur Navigasi Halaman Admin

Login

Data Master

Keuangan Yayasan pesan Agenda Setting LogoutDashboard

Data Anggota

Data Admin

Data Anak Yatim

Data Relawan

Kas Yayasan

Donasi Uang

Donasi Barang

Chat Diskusi

Tambah Agenda

Data Agenda

Data Peserta Agenda

Informasi Galeri

menu

Gambar III.56.

Struktur Navigasi Halaman Admin

B. Rancangan Struktur Navigasi Halaman Pengunjung

Branda

Menu

Data Yayasan Forum Kas Yayasan Donasi Tentang Kami

Login

Register Logout

Halaman Utama

Gambar III.57.

Struktur Navigasi Halaman Anggota

87

C. Rancangan Struktur Navigasi Halaman Donasi Anggota

Data Anak Yatim

Branda

Menu

Data Yayasan Forum Kas Yayasan Donasi Tentang Kami

Login

Profile Anggota Logout

Data Relawan Yayasan

Data Anggota Yayasan

Chat Diskusi Agenda Peserta Agenda

Galeri Yayasan

Kas Masuk

Kas Keluar

Cara Donasi Form Donasi Uang

Form Donasi Barang

Data Dana Donatur Uang

Data Dana Donatur Barang

Visi-Misi Profile Yayasan

Halaman Utama

Gambar III.58.

Struktur Navigasi Halaman Donasi Anggota

88

3.4. Implementasi dan Pengujian

3.4.1. Implementasi

A. Implementasi Rancangan Antar Muka

Implementasi rancangan antar muka pada aplikasi elearning berdasarkan

hasil rancangan antar muka.

1. Tampilan Halaman anggota (user)

a. Halaman Utama

Saat anggota berkunjung ke website otomayis website akan menampilkan

halaman utama sebelum anngota (user) melakukan registrasi dan login.

Gambar III.59.

Halaman Halaman Utama

89

b. Halaman Register

Anggota (user) harus melakukan registrasi agar bisa melakukan login.

Gambar III.60.

Halaman Registrasi Anggota

c. Halaman Login Anggota (user)

Anggota (user) harus melakukan login terlebih dahulu untuk dapat

menggunakan modul-modul yang tersedia Jika login berhasil, maka menu-

menu yang sesuai dengan kategori user tersebut akan ditampilkan.

Gambar III.61.

Halaman Login Anggota

90

d. Halaman Data Anak Yatim Piatu

Anggota (user) bisa melihat data anak yatim piatu yang ada di yayasan.

Gambar III.62.

Halaman Data Anak Yatim Piatu

e. Halaman Relawan

Anggota (user) bisa melihat data relawan yang ada di yayasan.

Gambar III.63.

Halaman Data Relawan

91

f. Halaman Anggota (user)

Anggota (user) bisa melihat data anggota yang ada di yayasan.

Gambar III.64.

Halaman Data Anggota

g. Halaman Tema Diskusi

Halaman ini menampilkan tema diskusi yang akan dibahas.

Gambar III.65.

Halaman Tema Diskusi

92

h. Halaman Komentar Diskusi

Di halaman ini Anggota (user) bisa melakukan komentar sesuai tema yang

ada

Gambar III.67.

Halaman Komentar Diskusi

i. Halaman Data Agenda

Anggota (user) bisa melihat data anggota dan bisa mengikuti agenda yang

diadakan oleh yayasan.

Gambar III.68.

Halaman Data Agenda

93

j. Halaman mengikuti agenda

Anggota (user) bisa mengikuti agenda dan data akan secara otomatis

tersimpan.

Gambar III.69.

Halaman Mengikuti Agenda

k. Halaman Data Peserta Agenda

Anggota (user) bisa melihat data peserta agenda dan bisa tahu berapa

jumlah anggota yang mengikuti.

Gambar III.70.

Halaman Data Peserta Agenda

94

l. Halaman Galeri Yayasan

Di halaman ini terdapat foto-foto kegiatan diyayasan.

Gambar III.71.

Halaman Galeri Yayasan

m. Halaman Data Kas

Anggota bisa mengetahui atau melihat saldo kas yayasan.

Gambar III.72.

Halaman Data Kas

95

n. Halaman Detail Data Kas Masuk

Halaman ini akan menjelaskan data detail kas masuk yayasan.

Gambar III.73.

Halaman Detail Data Kas Masuk

o. Halaman Detail Data Kas Keluar

Halaman ini akan menjelaskan data detai kas keluar yayasan.

Gambar III.74.

Halaman Deatail Data Kas Keluar

96

p. Halaman Cara Donasi

Halaman ini menjelaskan tahapan cara donasi untuk yayasan.

Gambar III.75.

Halaman Cara Donasi

q. Halaman Form Donasi Uang

Di halaman ini anggota (user) mengisi data donasi uang yang akan di

kirim.

Gambar III.76.

Halaman Form Donasi Uang

97

r. Halaman Form Donasi Barang

Di halaman ini anggota (user) mengisi data donasi uang yang akan di

kirim.

Gambar III.77.

Halaman Form Doansi Barang

s. Halaman Data Donatur Uang

Halaman ini menampilkan data donatur uang.

Gambar III.78.

Halaman Data Donatur Uang

98

t. Halaman Data Donatur Barang

Halaman ini menampilkan data donatur barang.

Gambar III.79.

Halaman Data Donatur Barang

u. Halaman Visi-Misi

Halaman ini menjelaskan visi-misi yayasan.

Gambar III.80.

Halaman Visi-Misi

99

v. Halaman Profile Yayasan

Halaman ini menampilkan profile yayasan.

Gambar III.81.

Halaman Profile Yayasan

w. Halaman Profile Anggota

Di halaman ini profile anggota bisa di edit.

Gambar III.82.

Halaman Profile Anggota

100

2. Tampilan Halaman Admin

a. Halaman Dashboard

Halamn ini menampilakn data kas, doansi, dan data peserta agenda.

Gambar III.83.

Halaman Dashboard

b. Halaman Anggota

Menampilkan data anggota, disini admin bisa mengelola data seperti edit

atau menghapus data.

Gambar III.84.

Halaman Data Anggota

101

c. Halaman Data Admin

Menampilkan data admin, dihalaman ini pengguna bisa mengelola data

seperti tambah admin atau menghapus.

Gambar III.85.

Halaman Data Admin

d. Halaman Form Tambah Admin

Halaman ini untuk menambah data admin.

Gambar III.86.

Halaman Form Tambah Admin

102

e. Halaman Data Relawan

Disini menampilkan data relawan, admin bisa mengelola data seperti edit

atau hapus data.

Gambar III.87.

Halaman Data Relawan

f. Halaman Form Tambah Relawan

Halaman ini untuk menambah data relawan.

Gambar III.88.

Halaman Form Tambah Relawan

103

g. Halaman Data Anak Yatim Piatu

Menampilkan data anak yatim yang ada diyayasan, admin bisa mengelola

data seperti edit atau hapus data.

Gambar III.89.

Halaman Data Anak Yatim Piatu

h. Halaman Form Tambah Data Anak Yatim

Halaman ini adalah form untuk menambah data anak yatim.

Gambar III.90.

Halaman Form Tambah Data Naka Yatim

104

i. Halaman Data Kas Yayasan

Menampilkan saldo kas yayasan.

Gambar III.91.

Halaman Data Kas Yayasan

j. Halaman Data Detail Kas Masuk

Halaman ini menampilkan data detail kas masuk, admin bisa mengelola data

seperti tambah atau hapus data.

Gambar III.92.

Halaman Data Detail Kas Masuk

105

k. Halaman Form Tambah Data Kas Masuk

Admin dihalaman ini bisa menambah data kas masuk.

Gambar III.93.

Halaman Form Tambah Data Kas Masuk

l. Halaman Detail Data Kas Keluar

Halaman ini menampilkan data detail kas keluar, admin bisa mengelola data

seperti tambah atau hapus data.

Gambar III.94.

Halaman Detail Data Kas Keluar

106

m. Halaman Form Tambah Data Kas Keluar

Halaman ini admin bisa menambah data kas keluar.

Gambar III.95.

Halaman Form Tambah Data Kas Keluar

n. Halaman Data Donasi Uang

Menampilkan data donatur uang, admin bisa mengelola data seperti hapus

atau mengkonfirmasi data donatur.

Gambar III.96.

Halaman Data Donasi Uang

107

o. Halaman Konfirmasi Donasi Uang

Di halaman ini admin mengkonfirmasi donasi, apakan sudah diterima atau

belum.

Gambar III.97.

Halaman Konfirmasi Donasi Uang

p. Halaman Data Donasi Barang

Menampilkan data donatur uang, admin bisa mengelola data seperti hapus

atau mengkonfirmasi data donatur.

Gambar III.98.

Halaman Data Donasi barang

108

q. Halaman Konfirmasi Donasi Barang

Di halaman ini admin mengkonfirmasi donasi, apakah sudah diterima atau

belum.

Gambar III.99.

Halaman Konfirmasi Donasi Barang

r. Halaman Tema Diskusi

Menampilkan tema diskusi yang akan dibahas, admin bisa menambah data

tema diskusi dan admin bisa mengelola data seperti tambah data atau

hapus.

Gambar III.100.

Halaman Tema Diskusi

109

s. Halaman Form Tambah Tema Diskusi

Disini admin bisa menambah tema yang akan dibahas.

Gambar III.101.

Halaman Form Tambah Tema Diskusi

t. Halaman Form Komentar Diskusi

Halaman ini admin juga bisa mengomentari diskusi.

Gambar III.102.

Halaman Form Komentar Diskusi

110

u. Halaman Data Agenda

Menampilkan data agenda, admin bisa mengelola data seperti menambah

atau hapus data.

Gambar III.103.

Halaman Data Agenda

v. Halaman Form Tambah Data Agenda

Form ini admin bisa menambahkan agenda.

Gambar III.104.

Halaman Form Tambah Data Agenda

111

w. Halaman Data peserta Agenda

Halaman ini menampilkan data peserta yang mengikuti agenda, admin bisa

mengelola data seperti menghapus data.

Gambar III.105.

Halaman Data Peserta Agenda

x. Halaman Informasi

Menampilkan data informasi, admin bisa menambah data atau menghapus

data.

Gambar III.106.

Halaman Informasi

112

y. Halaman Form Tambah Data Informasi

Di halaman ini admin bisa menambahkan data informasi.

Gambar III.107.

Halaman Form Tambah Data Informasi

z. Halaman Data Geleri

Disini menampilakn data atau foto-foto galeri, admin bisa mengelola data

seperti menambah data atau menghapus data.

Gambar III.108.

Halaman Data Galeri

113

aa. Halaman Form Tambah Data Geleri

Di halaman form ini admin bisa menambah foto ke galeri.

Gambar III.109.

Halaman Form Tambah Data Galeri

B. Spesifikasi Sistem Komputer

Berikut ini adalah spesifikasi perangkat keras dan perangkat lunak minimum

yang dibutuhkan untuk mengimplementasikan aplikasi e-Learning untuk sekolah

menengah dan sederajat.

1. Spesifikasi Perangkat Keras

a. Server

1) CPU

a) Processor Intel® Celeron® CPU N3050

b) RAM Dual Core 2.00 GB

c) Hard Disk 500 GB HDD

2) Mouse

3) Keyboard

4) Monitor dengan resolusi layar minimum 1024x768

114

5) Koneksi internet dengan kecepatan 2 Mbps.

b. Client

1) CPU

a) Processor Intel® Celeron®

b) RAM DDR2 1.00 GB

c) Hard Disk 250 GB

2) Mouse

3) Keyboard

4) Monitor dengan resolusi layar minimum 1024x768

5) Koneksi internet dengan kecepatan 56 kbps.

2. Spesifikasi Perangkat Lunak

a. Server

1) Sistem operasi yang umum digunakan seperti: Microsoft Windows atau

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

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

yang terdiri dari beberapa komponen, diantaranya:

a) Aplikasi Apache Server v2

b) Aplikasi PHP Server v5

c) Aplikasi MySQL Server v5

d) Aplikasi phpMyAdmin v3

3) Aplikasi Web Lihatr seperti Mozilla Firefox, Opera, Safari, Internet

Explorer, Google Chrome.

115

b. Client

1) Sistem operasi yang umum digunakan seperti: Microsoft Windows atau

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

2) Aplikasi web browser seperti Mozilla Firefox, Opera, Safari, Internet

Explorer, Google Chrome.

3.4.2. Pengujian Unit

Pengujian terhadap web yang dibuat menggunakan blackbox testing yang

fokus terhadap proses masukan dan keluaran program.

A. Pengujian Terhadap Halaman Login Admin.

Tabel III.9.

Hasil Pengujian Black Box Testing Halaman Login Admin

No Skenario pengujian Test Case Hasil yang

diharapkan Hasil

Pengujian Kesimpulan

1. Username, Password kosong kemudian klik tombol login

Username : Kosong

Password Kosong

Sistem menolak dan menampilkan pesan “Username atau Password salah ”

Sesuai Harapan

Valid

2. Username diisi dan password kosong kemudian klik tombol login.

Username : enal

Password : (kosong)

Sistem menolak dan menampilkan pesan “Username atau

Sesuai Harapan

Valid

116

Password salah ”

3. Username kosong dan password diisi kemudian klik tombol login.

Username : (kosong)

Password : admin

Sistem menolak dan menampilkan pesan “Username atau Password salah ”

Sesuai Harapan

Valid

4. Username kosong dan password diisi kemudian klik tombol login.

Username : enal (benar)

Password : admin1(salah)

Sistem menolak dan menampilkan pesan “Username atau Pssword Salah”

Sesuai Harapan

Valid

5. Mengetikan salah satu kondisi salah pada username dan mengetikan data password dengan benar kemudian klik tombol login.

Username : tata (salah)

Password : admin (benar)

Sistem akan menampilkan notifikasi “ username atau password tidak dikenali!“

Sesuai Harapan

Valid

6. Mengetikkan username dan password milik Guru dengan data yang benar kemudian klik tombol login.

Username : enal (benar)

Password : admin (benar)

Sistem menerima akses login dan kemudian langsung menampilkan dashboard administrator

Sesuai Harapan

Valid

117

B. Pengujian Terhadap Halaman Register User.

Tabel III.10.

Hasil Pengujian Black Box Testing Halaman Register Anggota


diharapkan Hasil

pengujian Kesimpulan

1. Katagori, nama, jenis kelamin, no telpon, email, kota, username, password, password comfrime, upload foto kemudian klik simpan

katagori: (kosong) nama : (kosong) jenis kelamin (kosong) no telpon: (kosong) email: (kosong) kota: (kosong) username: (kosong) password: (kosong) password confrime: (kosong) upload foto: (kosong)

Sistem akan menampilkan pesan pada kolom”please fill out this field dan pada gambar no file selected”

Sesuai harapan

Valid

2. Katagori, nama, jenis kelamin, no telpon, email, kota, username, password, password comfrime, upload foto kemudian klik simpan

katagori: (terisi) nama : (terisi) jenis kelamin (terisi) no telpon: (terisi) email: (terisi) kota: (terisi) username: (terisi) password: (terisi) password confrime: (terisi) upload foto: (kosong)

Sistem akan menampilkan pesan “ please select a file”

Sesuai harapan

Valid

3. Katagori, nama, jenis kelamin, no telpon, email, kota, username, password, password comfrime, upload foto

katagori: (terisi) nama : (terisi) jenis kelamin (terisi) no telpon: (terisi) email: (terisi) kota: (terisi) username: (terisi) password: (terisi)

Sistem akan menyimpan data baru

Sesuai harapan

Valid

118

kemudian klik simpan

password confrime: (terisi) upload foto: (terisi)

C. Pengujian Terhadap Form Donasi Uang.

Tabel III.11.

Hasil Pengujian Black Box Testing Form Donasi Uang


diharapkan Hasil


Katagori, tanggal transfer, via bank, atas nama, jumlah donasi, kemudian klik simpan

katagori: (kosong) tanggal transfer (kosong), via bank (kosong), atas nama (kosong), jumlah donasi (kosong)


Sesuai harapan

Valid

2. Katagori, tanggal transfer, via bank, atas nama, jumlah donasi, kemudian klik simpan

katagori: (terisi) anggal transfer (terisi), via bank (terisi), atas nama (terisi), jumlah donasi (kosong)


Sesuai harapan

Valid

3. Katagori, tanggal transfer, via bank, atas nama, jumlah donasi, kemudian klik simpan

katagori: (terisi) anggal transfer (terisi), via bank (terisi), atas nama (terisi), jumlah donasi (terisi)


Sesuai harapan

Valid

119

D. Pengujian Terhadap Form Donasi Barang.

Tabel III.12.

Hasil Pengujian Black Box Testing Form Donasi Barang


diharapkan Hasil


1. Katagori, tanggal transfer, via transfer, atas nama, jumlah donasi, kemudian klik simpan

katagori: (kosong) tanggal transfer (kosong), via transfer (kosong), atas nama (kosong), jumlah donasi (kosong)


Sesuai harapan

Valid


katagori: (terisi) anggal transfer (terisi), via transfer (terisi), atas nama (terisi), jumlah donasi (kosong)


Sesuai harapan

Valid


katagori: (terisi) anggal transfer (terisi), via transfer (terisi), atas nama (terisi), jumlah donasi (terisi)


Sesuai harapan

Valid

120

E. Pengujian Terhadap Form Tambah Data Anak Yatim.

Tabel III.13.

Hasil Pengujian Black Box Testing Form Tambah Data Anak Yatim


diharapkan Hasil


1. Katagori, nama, jenis kelamin, tanggal lahir, kota asal, Nama ibu, Nama ayah, Nama wali, alamat wali, no telpon, setatus anak, upload foto kemudian klik simpan

katagori: (kosong) nama (kosong), jenis kelamin (kosong), tanggal lahir (kosong), kota asal (kosong), Nama ibu (kosong), Nama ayah (kosong), Nama wali (kosong), alamat wali (kosong), no telpon (kosong), setatus anak (kosong), upload foto (kosong) kemudian klik simpan


Sesuai harapan

Valid

2. Katagori, nama, jenis kelamin, tanggal lahir, kota asal, Nama ibu, Nama ayah, Nama wali, alamat wali, no telpon, setatus anak, upload foto kemudian klik simpan

katagori: (terisi) nama (terisi), jenis kelamin (terisi), tanggal lahir (terisi), kota asal (terisi), Nama ibu (terisi), Nama ayah (terisi), Nama wali (terisi), alamat wali (terisi), no telpon (terisi), setatus anak (terisi), upload foto (kosong)kemudian klik simpan


Sesuai harapan

Valid

3. Katagori, nama, jenis kelamin,

katagori: (terisi) nama (terisi), jenis kelamin (terisi),


Sesuai harapan

Valid

121

tanggal lahir, kota asal, Nama ibu, Nama ayah, Nama wali, alamat wali, no telpon, setatus anak, upload foto kemudian klik simpan

tanggal lahir (terisi), kota asal (terisi), Nama ibu (terisi), Nama ayah (terisi), Nama wali (terisi), alamat wali (terisi), no telpon (terisi), setatus anak (terisi), upload foto (terisi)kemudian klik simpan

F. Pengujian Terhadap Form Tambah Data Relawan.

Tabel III.14.

Hasil Pengujian Black Box Testing Form Tambah Data Relawan


diharapkan Hasil


1. Katagori, nama, jenis kelamin, alamat, email, no telpon, tanggal bergabung, bagian, upload foto kemudian klik simpan

katagori: (kosong) nama (kosong), jenis kelamin (kosong), alamat (kosong), email (kosong), no telpon (kosong), tanggal bergabung, bagian (kosong), upload foto (kosong) kemudian klik simpan


Sesuai harapan

Valid

122


katagori: (terisi) nama (terisi), jenis kelamin (terisi), alamat (terisi), email (terisi), no telpon (terisi), tanggal bergabung, bagian (terisi), upload foto (kosong) kemudian klik simpan


Sesuai harapan

Valid


katagori: (terisi) n nama (terisi), jenis kelamin (terisi), alamat (terisi), email (terisi), no telpon (terisi), tanggal bergabung, bagian (terisi), upload foto (terisi) kemudian klik simpan


Sesuai harapan

Valid

G. Pengujian Terhadap Form Tambah Data Kas Masuk.

Tabel III.15.

Hasil Pengujian Black Box Testing Form Tambah Data Kas Masuk


diharapkan Hasil


1. Katagori, diskripsi, nominal kemudian klik simpan

katagori: (kosong) diskripsi (kosong), nominal (kosong) kemudian klik simpan kemudian klik simpan


Sesuai harapan

Valid

123


katagori: (terisi) diskripsi (terisi), nominal (kosong) kemudian klik simpan kemudian klik simpan


Sesuai harapan

Valid


k katagori: (terisi) diskripsi (terisi), nominal (terisi) kemudian klik simpan kemudian klik simpan


Sesuai harapan

Valid

H. Pengujian Terhadap Form Tambah Data Kas Keluar.

Tabel III.16.

Hasil Pengujian Black Box Testing Form Tambah Data Kas Keluar


diharapkan Hasil



katagori: (kosong) diskripsi (kosong), nominal (kosong) kemudian klik simpan kemudian klik simpan


Sesuai harapan

Valid


katagori: (terisi) diskripsi (terisi), nominal (kosong) kemudian klik simpan kemudian klik simpan


Sesuai harapan

Valid

124


k katagori: (terisi) diskripsi (terisi), nominal (terisi) kemudian klik simpan kemudian klik simpan


Sesuai harapan

Valid

I. Pengujian Terhadap Form Tambah Data Tema Diskusi.

Tabel III.17.

Hasil Pengujian Black Box Testing Form Tambah Tema Diskusi


diharapkan Hasil


1. Katagori, tema , keterangan kemudian klik simpan

katagori: (kosong) tema (kosong), keterangan (kosong) kemudian klik simpan kemudian klik simpan


Sesuai harapan

Valid


katagori: (terisi) tema (terisi), keterangan (kosong) kemudian klik simpan kemudian klik simpan


Sesuai harapan

Valid


katagori: (terisi) tema (terisi), keterangan (terisi) kemudian klik simpan kemudian klik simpan


Sesuai harapan

Valid

125

J. Pengujian Terhadap Form Tambah Data Agenda.

Tabel III.18.

Hasil Pengujian Black Box Testing Form Tambah Data Agenda


diharapkan Hasil


1. Katagori, nama agenda, tempat, tanggal, jam, keterangan kemudian klik simpan

katagori: (kosong) nama agenda (kosong), tempat (kosong), tanggal (kosong), jam (kosong), keterangan (kosong)kemudian klik simpan


Sesuai harapan

Valid


katagori: (terisi) nama agenda (terisi), tempat (terisi), tanggal (terisi), jam (terisi), keterangan (kosong)kemudian klik simpan


Sesuai harapan

Valid


katagori: (terisi) nama agenda (terisi), tempat (terisi), tanggal (terisi), jam (terisi), keterangan (terisi)kemudian klik simpan


Sesuai harapan

Valid

126

K. Pengujian Terhadap Form Tambah Data Informasi.

Tabel III.19.

Hasil Pengujian Black Box Testing Form Tambah Data Berita


diharapkan Hasil


1. Katagori, tanggal , informasi kemudian klik simpan

katagori: (kosong) tanggal (kosong), informasi (kosong) kemudian klik simpan kemudian klik simpan


Sesuai harapan

Valid


katagori: (terisi) tanggal (terisi), informasi (kosong) kemudian klik simpan kemudian klik simpan


Sesuai harapan

Valid


katagori: (terisi) tanggal (terisi), informasi (terisi) kemudian klik simpan kemudian klik simpan


Sesuai harapan

Valid

127

L. Pengujian Terhadap Form Tambah Data Galeri.

Tabel III.20

Hasil Pengujian Black Box Testing Form Tambah Data Galeri


diharapkan Hasil


1. Katagori, upload foto kemudian klik simpan kemudian klik simpan

katagori: (kosong) upload foto (kosong) kemudian klik simpan kemudian klik simpan

Sistem akan menampilkan pesan pada kolom”inputan tidak boleh kosong”

Sesuai harapan

Valid

3. Katagori, upload foto kemudian klik simpan kemudian klik simpan

katagori: (terisi) upload foto (terisi) kemudian klik simpan kemudian klik simpan


Sesuai harapan

Valid

bab iii pembahasan 3.1. tinjauan yayasan · 39 . bab iii. pembahasan . 3.1. tinjauan yayasan ....

Documents