DAFTAR ISI

Halaman Pernyataan.............................................................................................. i
Halaman persetujuan ............................................................................................ ii
Halaman Pengesahan............................................................................................. iii
Kata Pengantar....................................................................................................... iv
Halaman Abstraksi................................................................................................ vi
Daftar Isi................................................................................................................ vii
Daftar Tabel........................................................................................................... x
Daftar Gambar....................................................................................................... xi
BAB I PENDAHULUAN..................................................................................... 1
1.1. Latar Belakang........................................................................................ 1
1.2. Identifikasi Masalah................................................................................ 2
1.3. Perumusan Masalah................................................................................. 3
1.4. Maksud dan Tujuan Produk.................................................................... 3
1.4.1. Maksud........................................................................................ 4
1.4.2. Tujuan ......................................................................................... 4
1.5. Manfaat Hasil Produk.............................................................................. 4
1.6. Metodologi Penelitian............................................................................. 5
1.7. Sistematika Penulisan Tugas Akhir......................................................... 5
BAB II KERANGKA ACUAN KERJA............................................................... 7
1.1. Landasan Teori........................................................................................ 7
2.1.1. Pengertian HTML........................................................................ 7
2.1.2. Pengertian CSS............................................................................ 8
2.1.3. Pengertian Laravel....................................................................... 10
2.1.4. Pengertian Bootstrap................................................................... 10
2.1.5. Pengertian PHP............................................................................ 11
2.1.6. Pengertian Sistem........................................................................ 12
2.1.7. Pengertian Sistem Informasi ....................................................... 13
2.1.8. Pengertian Donasi........................................................................ 13

vii
 2.1.9. Pengertian Pondok Pesantren...................................................... 14
2.1.10. Pengertian Javascript................................................................... 14
2.1.11. Pengertian Flowmap.................................................................... 15
2.1.12. Pengertian Visual Studio Code.................................................... 15
2.1.13. Pengertian XAMPP..................................................................... 15
2.1.14. Pengertian Basis Data (Database)............................................... 15
2.1.15. Pengertian Entity Relationship Diagram (ERD)......................... 16
2.1.16. Pengertian Data Flow Diagram (DFD)........................................ 18
2.1.17. Pengertian Vue JS........................................................................ 20
BAB III ANALISIS DAN PENYELESAIAN MASALAH................................. 22
3.1. Analisis.................................................................................................... 22
3.1.1. Deskripsi Profil Pondok Pesantren Nurul Abror......................... 22
3.1.1.1. Struktur Organisasi........................................................ 23
3.1.2. Deskripsi Sistem yang Sedang Berjalan...................................... 24
3.2. Flowmap Sistem...................................................................................... 24
3.3. Kelemahan Sistem................................................................................... 26
3.4. Penyelesaian Masalah............................................................................. 26
BAB IV PERANCANGAN DAN IMPLEMENTASI SISTEM........................... 30
4.1. Perancangan Sistem................................................................................. 30
4.1.1. Uraian Sistem Baru..................................................................... 30
4.1.2. Diagram Alir Data....................................................................... 33
4.1.2.1. Diagram Context (CD).................................................. 33
4.1.2.2. Data Flow Diagram (DFD)........................................... 33
4.1.3. Data Dictionary........................................................................... 35
4.1.3.1. Data Dictionary Donaturs.............................................. 35
4.1.3.2. Data Dictionary Campaigns.......................................... 35
4.1.3.3. Data Dictionary Donations............................................ 36
4.1.4. Process Specification................................................................... 38
4.1.4.1. PS Input Data Donatur.................................................. 38

viii
 4.1.4.2. PS Input Data Admin.................................................... 42
4.1.4.3. PS Input data Categories............................................... 45
4.1.4.4. PS Input Data Campaigns............................................. 47
4.1.4.5. PS Input Data Sliders.................................................... 50
4.1.4.6. PS Input Data Donations............................................... 52
4.1.4.7. PS Filter Data Donations............................................... 53
4.1.5. Perancangan Database................................................................. 54
4.1.5.1. Entity Relationship Diagram......................................... 54
4.1.5.2. Desaign Table................................................................ 55
4.1.6. Perancangan Wireframe.............................................................. 58
4.1.6.1. Wireframe Backend....................................................... 58
4.1.6.2. Wireframe Frontend...................................................... 63
4.1.7. Perancangan Mockup.................................................................. 67
4.1.7.1. Mockup Backend........................................................... 67
4.1.7.2. Mockup Frontend.......................................................... 72
4.2. Kebutuhan Software dan Hardware........................................................ 76
4.3. Kebutuhan Personil................................................................................. 76
4.4. Pengujian Sistem..................................................................................... 78
4.4.1. Pengujian Donatur....................................................................... 78
4.4.2. Pengujian Admin......................................................................... 81
BAB IV KESIMPULAN DAN SARAN............................................................... 85
5.1. Kesimpulan.............................................................................................. 85
5.2. Saran........................................................................................................ 85
DAFTAR PUSTAKA............................................................................................ 87
LAMPIRAN.......................................................................................................... 89
BIODATA PENULIS............................................................................................ 90

ix
 DAFTAR TABEL

Tabel 2.1.15 Simbol ERD..................................................................................... 16

Tabel 2.1.16 Simbol DFD..................................................................................... 18

Tabel 4.1.3.1 Data Dictionary Donaturs................................................................ 35

Tabel 4.1.3.2 Data Dictionary Campaigns............................................................ 35

Tabel 4.1.3.3 Data Dictionary Donations.............................................................. 36

Tabel 4.1.5.2.1 Sliders........................................................................................... 55

Tabel 4.1.5.2.2 Campaigns.................................................................................... 55

Tabel 4.1.5.2.3 Categories..................................................................................... 56

Tabel 4.1.5.2.4 Donations...................................................................................... 56

Tabel 4.1.5.2.5 Donaturs....................................................................................... 57

Tabel 4.1.5.2.6 Users............................................................................................. 57

Tabel 4.4.1 Pengujian Donatur.............................................................................. 78

Tabel 4.4.2 Pengujian Admin................................................................................ 81

x
 DAFTAR GAMBAR

Gambar 3.1.1.1 Struktur Organisasi PPNA........................................................... 23

Gambar 3.2.1 Flowmap Berjalan Donasi PPNA................................................... 25

Gambar 3.4 Flowmap Usulan Donasi Online PPNA............................................ 28

Gambar 4.1.2.1 CD Donasi Online PPNA............................................................ 33

Gambar 4.1.2.2 DFD Donasi Online PPNA.......................................................... 34

Gambar 4.1.5.1 ERD Sistem Donasi Online......................................................... 54

GAMBAR WIREFRAME BACKEND

Gambar 4.1.6.1.1 Wireframe Halaman Login....................................................... 58

Gambar 4.1.6.1.2 Wireframe Halaman Forgot Password..................................... 58

Gambar 4.1.6.1.3 Wireframe Halaman Confirm password................................... 59

Gambar 4.1.6.1.4 Wireframe Halaman Dashboard............................................... 59

Gambar 4.1.6.1.5 Wireframe Halaman Categories............................................... 59

Gambar 4.1.6.1.6 Wireframe Halaman Create Categories.................................... 60

Gambar 4.1.6.1.7 Wireframe Halaman Campaigns.............................................. 60

Gambar 4.1.6.1.8 Wireframe Halaman Create Campaigns................................... 60

Gambar 4.1.6.1.9 Wireframe Halaman Donations................................................ 61

Gambar 4.1.6.1.10 Wireframe Halaman Donaturs................................................ 61

Gambar 4.1.6.1.11 Wireframe Halaman My Profile............................................. 61

Gambar 4.1.6.1.12 Wireframe Halaman Sliders................................................... 62

Gambar 4.1.6.1.13 Wireframe Halaman Two Factor Challenge........................... 62

xi
GAMBAR WIREFRAME FRONTEND

Gambar 4.1.6.2.1 Wireframe Halaman Login....................................................... 63

Gambar 4.1.6.2.2 Wireframe Halaman Register................................................... 63

Gambar 4.1.6.2.3 Wireframe Halaman Beranda................................................... 64

Gambar 4.1.6.2.4 Wireframe Halaman Kampanye............................................... 64

Gambar 4.1.6.2.5 Wireframe Halaman Detail Kampanye.................................... 64

Gambar 4.1.6.2.6 Wireframe Halaman Kategori.................................................. 65

Gambar 4.1.6.2.7 Wireframe Halaman Detail Kategori........................................ 65

Gambar 4.1.6.2.8 Wireframe Halaman Create Donasi.......................................... 65

Gambar 4.1.6.2.9 Wireframe Halaman Dashboard............................................... 66

Gambar 4.1.6.2.10 Wireframe Halaman Riwayat Donasi..................................... 66

Gambar 4.1.6.2.11 Wireframe Halaman Ubah Password..................................... 66

Gambar 4.1.6.2.12 Wireframe Halaman Profil Saya............................................. 67

GAMBAR MOCKUP BACKEND

Gambar 4.1.7.1.1 Mockup Halaman Login........................................................... 67

Gambar 4.1.7.1.2 Mockup Halaman Forgot Password......................................... 67

Gambar 4.1.7.1.3 Mockup Halaman Confirm Password....................................... 68

Gambar 4.1.7.1.4 Mockup Halaman Dashboard................................................... 68

Gambar 4.1.7.1.5 Mockup Halaman Categories................................................... 68

Gambar 4.1.7.1.6 Mockup Halaman Create Categories........................................ 69

Gambar 4.1.7.1.7 Mockup Halaman Campaigns.................................................. 69

xii
Gambar 4..1.7.1.8 Mockup Halaman Create Campaigns...................................... 69

Gambar 4.1.7.1.9 Mockup Halaman Donations.................................................... 70

Gambar 4.1.7.1.10 Mockup Halaman Donaturs.................................................... 70

Gambar 4.1.7.1.11 Mockup Halaman My profile................................................. 70

Gambar 4.1.7.1.12 Mockup Halaman Sliders....................................................... 71

Gambar 4.1.7.1.13 Mockup Halaman Two Factor Challenge............................... 71

GAMBAR MOCKUP FRONTEND

Gambar 4.1.7.2.1 Mockup Halaman Login........................................................... 72

Gambar 4.1.7.2.2 Mockup Halaman Register....................................................... 72

Gambar 4.1.7.2.3 Mockup Halaman Beranda....................................................... 72

Gambar 4.1.7.2.4 Mockup Halaman Kampanye................................................... 73

Gambar 4.1.7.2.5 Mockup Halaman Detail Kampanye........................................ 73

Gambar 4.1.7.2.6 Mockup Halaman Kategori...................................................... 73

Gambar 4.1.7.2.7 Mockup Halaman Detail Kategori............................................ 74

Gambar 4.1.7.2.8 Mockup Halaman Create Donasi.............................................. 74

Gambar 4.1.7.2.9 Mockup Halaman Dashboard................................................... 74

Gambar 4.1.7.2.10 Mockup Halaman Riwayat Donasi......................................... 75

Gambar 4.1.7.2.11 Mockup Halaman Ubah Password......................................... 75

Gambar 4.1.7.2.12 Mockup Halaman Profil Saya................................................. 75

xiii