Sistem Informasi Pendaftaran Online Calon Penerima Manfaat Dan Eks Penerima Manfaat Pada Panti Sosial Bina Daksa Budi Perkasa Palembang

(1)

Sistem Informasi Pendaftaran Online

Calon Penerima Manfaat Dan Eks Penerima Manfaat Pada Panti Sosial Bina Daksa Budi Perkasa Palembang

LAPORAN AKHIR

Disusun Sebagai Persyaratan Untuk Menyelesaikan Pendidikan Diploma III Jurusan Manajemen Informatika

Politeknik Negeri Sriwijaya

Oleh :

Sri Utami 0614 3080 0595

MANAJEMEN INFORMATIKA

(2)

(3)

KATA PENGANTAR

Alhamdulillah puji dan syukur kehadirat Allah SWT, karena berkat rahmat dan hidayah-Nya penulis dapat menyelesaikan Laporan Akhir yang berjudul “Sistem Informasi Pendaftaran Online _{Calon Penerima Manfaat Dan Eks} Penerima Manfaat Pada Panti Sosial Bina Daksa Budi Perkasa Palembang” yang terdiri dari 5 bab yaitu pendahuluan, tinjauan pustaka, gambaran umum perusahaan, hasil dan pembahasan serta penutup ini bisa diselesaikan dengan tepat waktu. Penyusunan Laporan Akhir ini adalah salah satu syarat untuk menyelesaikan program Diploma III pada Jurusan Manajemen Informatika Politeknik Negeri Sriwijaya.

Selama menyelesaikan Laporan Akhir ini penulis banyak sekali mendapat bantuan, bimbingan dan petunjuk dari berbagai pihak, maka dalam kesempatan ini penulis ingin mengucapkan terima kasih kepada :

1. Bapak Dr. Ing. Ahmad Taqwa, M.T. selaku Direktur Politeknik Negeri Sriwijaya.

2. Bapak Carlos RS, ST.,M.T. selaku Pembantu Direktur I Politeknik Negeri Sriwijaya.

3. Bapak Aladin, S.E.,M.Si.,AK,Ca. selaku Pembantu Direktur II Politeknik Negeri Sriwijaya.

4. Bapak Ir. Irawan Rusnadi, M.T. selaku Pembantu Direktur III Politeknik Negeri Sriwijaya.

5. Bapak Drs. Zakaria, M.T. selaku Pembantu Direktur IV Politeknik Negeri Sriwijaya.

(4)

7. Bapak Sony Oktapriandi, S.Kom., M.Kom. selaku Sekretaris Jurusan Manajemen Informatika Politeknik Negeri Sriwijaya.

8. Bapak Ridwan Efendi selaku Dosen Pembimbing I dan Bapak Ahmad Ari Gunawan Sepriansyah, S.Kom., M.Kom selaku Dosen Pembimbing II.

9. Bapak dan Ibu dosen pengajar di Jurusan Manajemen Informatika yang telah memberikan ilmu yang bermanfaat bagi kami.

10. Semua Staff Karyawan Panti Sosial Bina Daksa Budi Perkasa Palembang. 11. Kedua orangtua yang senantiasa memberikan doa dan dukungan kepada

kami.

12. Teman-teman seperjuangan Jurusan Manajemen Informatika khususnya kelas 6 IB.

13. Keluarga Besar Himpunan Mahasiswa Jurusan Manajemen Informatika atas dukungan dan semangatnya.

14. Semua pihak yang telah membantu dalam menyelesaikan Laporan Akhir ini.

Penulis menyadari bahwa dalam penulisan Laporan Akhir ini masih terdapat kesalahan dan kekurangan, untuk itu penulis mengharapkan kritik dan saran yang bersifat membangun dari semua pihak demi kesempurnaan penulisan yang akan datang. Akhir kata penulis berharap semoga Laporan Akhir ini bermanfaat bagi semua pihak yang membutuhkannya, khususnya mahasiswa-mahasiswi Jurusan Manajemen Informatika Politeknik Negeri Sriwijaya sehingga tujuan yang diharapkan dapat tercapai, Aamiin

Palembang, Juli 2017

(5)

ABSTRAK

Panti Sosial Bina Daksa Budi Perkasa Palembang adalah unit pelaksana teknis dibidang rehabilitasi sosial bina daksa yang berada dibawah dan bertanggung jawab langsung kepada Direktorat Jenderal Rehabilitasi dan Pelayanan Sosial. Tujuan penyusunan Laporan Akhir ini adalah untuk membuat Sistem Informasi Pendaftaran Online Calon Penerima Manfaat dan Eks Penerima Manfaat pada Panti Sosial Bina Daksa Budi Perkasa Palembang menggunakan bahasa pemrograman PHP serta database MySQL. Masalah yang dihadapi adalah pendaftaran yang masih bersifat manual dengan mengambil, mengisi dan mengirimkan lagi berkas pendaftaran, lalu disleksi dan menunggu kiriman surat panggilan. Sistem ini terdapat 4 user yaitu Admin, Seksi Rehsos, Calon Penerima Manfaat dan Eks Penerima Manfaat. Sistem ini terdapat proses login, register, pendaftaran, validasi, persetujuan, pengumuman dan menghasilkan keluaran berupa bukti pendaftaran, pengumuman hasil (surat panggilan) dan laporan data pendaftaran calon penerima manfaat dan eks penerima manfaat yang lulus dan tidak lulus. Metode yang digunakan untuk pembuatan sistem informasi ini menggunakan metode Waterfall. Dengan dibuatnya sistem informasi ini diharapkan dapat mempermudah seksi Rehabilitasi Sosial, Calon dan Eks Penerima Manfaat dalam proses pendaftaran.

(6)

ABSTRACT

Bina Daksa Social Institution Budi Perkasa Palembang is a technical implementation unit in the field of social rehabilitation for development and is directly responsible to the Directorate General of Rehabilitation and Social Services. The purpose of the preparation final Report is to make Online Registration Information System of Beneficiaries and Ex-Beneficiaries at Bina Daksa Social Institution Budi Perkasa Palembang using PHP programming language and MySQL database. Problem encountered is the registration is still manual by taking, filling and submitting the registration file, diselection and wait for the letter letter of the call. This system has 4 users namely Admin, Section Rehsos, Prospective Beneficiaries and Ex-Beneficiaries. This system includes login process, register, registration, validation, approval, announcement and produce output in the form of proof of registration, announcement of result (letter of call) and report of registration data of prospective beneficiaries and former beneficiaries who pass and not pass. The method used for making this system using Waterfall method. This system is expected to facilitate the Social Rehabilitation section, Beneficiaries and Ex-Beneficiaries the registration process.

(7)

MOTTO DAN PERSEMBAHAN

Motto:

“Karena sesungguhnya sesudah kesulitan itu ada kemudahan. Sesungguhnya sesudah kesulitan itu ada

kemudahan” (Q.S Al-Insyiroh : 5-6)

“Aku menuruti prasangka hamba terhadapKu, jika Ia berprasangka baik terhadapKu, maka baginya kebaikan,

maka jangan berprasangka terhadap Allah kecuali kebaikan” (H.R. Bukhori)

Di

_{persembahkan untuk :}

1. Kedua Orang Tua dan Keluarga Besar yang Saya Cintai

2. Orang Tersayang Rayomartin 3. Dosen-dosen yang telah membimbing

selama ini

4. Keluarga Besar Panti Sosial Bina Daksa

“Budi Perkasa” Palembang

5. Almamater Kebanggaan

6. Keluarga Besar Himpunan Mahasiswa Jurusan Manajemen Informatika 7. Teman-Teman Seperjuangan Khususnya

(8)

DAFTAR ISI

Halaman

HALAMAN JUDUL ... i

LEMBAR PENGESAHAN LAPORAN AKHIR ... ii

LEMBAR PENGESAHAN JUDUL ... iii

MOTTO DAN PERSEMBAHAN ... iv

ABSTRAK ... v

ABSTRACT ... vi

KATA PENGANTAR ... vii

DAFTAR ISI ... ix

DAFTAR TABEL ... xxi

DAFTAR GAMBAR ... xxii

BAB I PENDAHULUAN ... 1

1.1. Latar Belakang ... 1

1.2. Perumusan Masalah ... 4

1.3. Batasan Masalah ... 4

1.4. Tujuan dan Manfaat ... 5

1.4.1. Tujuan ... 5

1.4.2. Manfaat ... 5

1.5. Metodelogi ... 6

1.5.1. Lokasi Pengumpulan Data dan Waktu Penelitian ... 6

1.5.2. Metode Pengumpulan Data ... 6

(9)

BAB II TINJAUAN PUSTAKA ... 9

2.1. Teori Umum ... 9

2.1.1. Pengertian Perangkat Lunak ... 9

2.1.2. Pengertian Komputer ... 9

2.1.3. Pengertian Data ... 10

2.2. Teori Judul ... 10

2.2.1. Pengertian Sistem ... 10

2.2.2. Metode Pengembangan Sistem ... 11

2.2.3. Pengertian Informasi ... 12

2.2.4. Pengertian Sistem Informasi ... 12

2.2.5. Pengertian Pendaftaran... 13

2.2.6. Pengertian Online ... 13

2.2.7. Pengertian Calon ... 13

2.2.8. Pengertian Penerima Manfaat ... 13

2.2.9. Pengertian Eks Penerima Manfaat ... 13

2.2.10. Pengertian Panti Sosial Bina Daksa ... 13

2.2.11. Pengertian Panti Sosial Bina Daksa Budi Perkasa Palembang ... 14

2.2.12. Pengertian Sistem Informasi Pendaftaran Online Calon Penerima Manfaat dan Eks Penerima Manfaat pada Panti Sosial Bina Daksa Budi Perkasa Palembang ... 14

2.3. Teori Khusus ... 14

2.3.1. Pengertian DFD (Data Flow Diagram) ... 14

2.3.2. Pengertian Blockchart ... 16

2.3.3. Pengertian Bagan Alir (Flowchat) ... 18

(10)

2.3.5. Pengertian Kamus Data ... 22

2.4. Teori Program ... 2.4.1. Basis Data (Database) ... 23

2.4.1.1. Pengertian MySQL ... 23

2.4.1.2. Keunggulan MySQL ... 23

2.4.2. Web Editor ... 24

2.4.2.1. Adobe Dreamweaver ... 24

2.4.2.1.1. Tampilan Awal Adobe Dreamweaver CS6 . 25

2.4.2.1.2. Ruang Kerja (Workspace) Adobe Dreamweaver CS6 ... 26

2.4.3. Bahasa Pemrograman ... 28

2.4.3.1. HTML (Hypertext Makrup Language) ... 28

2.4.3.1.1. Pengertian HTML (Hypertext Makrup Language) ... 28

2.4.3.1.2. Struktur Dasar HTML ... 29

2.4.3.2. PHP (Hypertext Preprocessor) ... 29

2.4.3.2.1. Pengertian PHP (Hypertext Preprocessor) . 29 2.4.3.2.2. Skrip PHP ... 29

2.4.4. Web Server ... 31

2.4.4.1. Pengertian XAMPP... 31

2.4.4.2. Folder Utama XAMPP... 31

BAB III GAMBARAN UMUM PERUSAHAAN ... ... 32

3.1. Seajarah dan Perkembangan Panti Sosial Bina Daksa Budi Perkasa Palembang ... 32

(11)

3.2.1. Tugas Pokok ... 36

3.2.2. Fungsi ... 37

3.3. Visi dan Misi Panti Sosial Bina Daksa Budi Perkasa Palembang ... 38

3.3.1. Visi ... 38

3.3.2. Misi ... 38

3.4. Struktur Organisasi ... 38

3.5. Pembagian Tugas dan Wewenang ... 40

3.5.1. Kepala Panti ... 40

3.5.2. Sub Bagian Tata Usaha ... 40

3.5.3. Seksi Program dan Advokasi Sosial ... 41

3.5.4. Seksi Rehabilitasi Sosial ... 42

3.5.5. Kelompok Jabatan Fungsional ... 43

3.5.6. Instalasi Produksi ... 43

3.6. Sistem yang Sedang Berjalan ... 44

3.7. Data Calon Penerima Manfaat dan Eks Penerima Manfaat yang diolah ... 46

3.7.1. Data Calon Penerima Manfaat ... 46

3.7.2. Data Eks Penerima Manfaat ... 52

BAB IV HASIL DAN PEMBAHASAN ... 57

4.1. Penyelidikan Awal ... 57

4.2. Studi Kelayakan ... 57

4.3. Tempat dan Waktu Penelitian ... 59

4.4. Alat dan Bahan ... 59

4.4.1. Alat ... 59

(12)

4.4.1.2. Perangkat Lunak (Software) ... 59

4.4.2. Bahan ... 60

4.5. Prosedur Sistem yang akan diterapkan ... 60

4.6. Metode Pengembangan Sistem ... 61

4.6.1. Analisis Kebutuhan ... 61

4.6.1.1. Kebutuhan Fungsional ... 61

4.6.1.2. Kebutuhan Non Fungsional ... 62

4.6.2. Desain Sistem ... 63

4.6.2.1. Perancangan Sistem ... 63

4.6.2.1.1. Diagram Konteks ... 63

4.6.2.1.2. Data Flow Diagram (DFD) ... 65

4.6.2.1.3. Blockchart ... 67

4.6.2.1.4. Flowchart ... 68

4.6.2.1.5. Entity Relational Diagram (ERD) ... 71

4.6.2.1.6. Kamus Data ... 72

4.6.2.2. Desain Tabel... 74

4.6.2.3. Desain Program ... 78

4.6.2.3.1. Desain Halaman Awal Sistem ... 78

4.6.2.3.1.1. Desain Halaman Beranda ... 78

4.6.2.3.1.2. Desain Halaman Informasi Umum Sarana dan Prasarana ... 79

4.6.2.3.1.3. Desain Halaman Informasi Umum Fasilitas yang diberikan ... 80

4.6.2.3.1.4. Desain Halaman Informasi Umum Proses Pelayanan Rehabilitasi ... 80

(13)

4.6.2.3.1.6. Desain Halaman Syarat & Ketentuan

Calon Penerima Manfaat ... 81

4.6.2.3.1.7. Desain Halaman Syarat & Ketentuan Eks Penerima Manfaat ... 82

4.6.2.3.1.8. Desain Halaman Login ... 82

4.6.2.3.2. Desain Halaman Admin ... 83

4.6.2.3.2.1. Desain Halaman Awal Admin ... 83

4.6.2.3.2.2. Desain Halaman Syarat&Ketentuan 83 4.6.2.3.2.3. Desain Halaman Syarat&Ketentuan (Add) ... 84

4.6.2.3.2.4. Desain Halaman Validasi Calon Penerima Manfaat ... 84

4.6.2.3.2.5. Desain Halaman Validasi Calon Penerima Manfaat (Detail) ... 85

4.6.2.3.2.6. Desain Halaman Validasi Eks Penerima Manfaat ... 85

4.6.2.3.2.7. Desain Halaman Validasi Eks Penerima Manfaat (Detail) ... 86

4.6.2.3.2.8. Desain Halaman Pengumuman Calon Penerima Manfaat ... 86

4.6.2.3.2.9. Desain Halaman Laporan Calon Penerima Manfaat Lulus dan Tidak Lulus ... 87

4.6.2.3.2.10. Desain Halaman Pengumuman Eks Penerima Manfaat ... 87

4.6.2.3.2.11. Desain Halaman Laporan Eks Penerima Manfaat Lulus dan Tidak Lulus ... 88

(14)

Tanggal Pendaftaran ... 88

4.6.2.3.2.13. Desain Halaman Ubah Password ... 89

4.6.2.3.3. Desain Halaman Seksi Rehabilitasi Sosial .. 89

4.6.2.3.3.1. Desain Halaman Awal Seksi

Rehabilitasi Sosial ... 89

4.6.2.3.3.2. Desain Halaman Persetujuan Calon

Penerima Manfaat ... 90

4.6.2.3.3.3. Desain Halaman Persetujuan Eks

4.6.2.3.3.4. Desain Halaman Pengumuman

4.6.2.3.3.5. Desain Halaman Laporan Calon Penerima

Manfaat Lulus dan Tidak Lulus ... 91

4.6.2.3.3.6. Desain Halaman Pengumuman

Eks Penerima Manfaat ... 92

4.6.2.3.3.7. Desain Halaman Laporan Eks Penerima

4.6.2.3.3.8. Desain Halaman Ubah Password ... 93

4.6.2.3.4. Desain Halaman Calon Penerima Manfaat . 93

4.6.2.3.4.1. Desain Halaman Awal Calon

4.6.2.3.4.2. Desain Halaman Data Diri

(Data Pribadi) ... 94

(Data Keluarga) ... 94

(15)

(Hal-Hal Lain) ... 95

4.6.2.3.4.6. Desain Halaman Calon Penerima Manfaat Registrasi ... 96

4.6.2.3.4.7. Desain Halaman Calon Penerima Manfaat Pengumuman ... 96

4.6.2.3.4.8. Desain Halaman Calon Penerima Manfaat Pengumuman (Bukti Pendaftaran) ... 97

4.6.2.3.4.9. Desain Halaman Calon Penerima Manfaat Pengumuman (Surat Panggilan) ... 97

4.6.2.3.5. Desain Halaman Eks Penerima Manfaat ... 98

4.6.2.3.5.1. Desain Halaman Eks Penerima Manfaat Registrasi ... 98

4.6.2.3.5.2. Desain Halaman Eks Penerima Manfaat Pengumuman ... 98

4.6.2.3.5.3. Desain Halaman Eks Penerima Manfaat Pengumuman (Bukti Pendaftaran) ... 99

4.6.2.3.5.4. Desain Halaman Eks Penerima Manfaat Pengumuman (Surat Panggilan) ... 99

4.6.3. Pengkodean Database ... 100

4.6.3.1. Pengkodean Tabel calon_penerima_manfaat ... 100

4.6.3.2. Pengkodean Tabel data_diri ... 101

4.6.3.3. Pengkodean Tabel eks_penerima_manfaat ... 102

4.6.3.4. Pengkodean Tabel syarat_ketentuan ... 102

4.6.3.5. Pengkodean Tabel user ... 103

4.6.3.6. Pengkodean Tabel validasi_calon_pm ... 103

(16)

4.6.3.8. Tampilan Program ... 104

4.6.3.8.1. Tampilan Halaman Awal Sistem ... 104

4.6.3.8.1.1. Tampilan Halaman Beranda ... 104

4.6.3.8.1.2. Tampilan Halaman Informasi Umum Sarana dan Prasarana... 105

4.6.3.8.1.3. Tampilan Halaman Informasi Umum Fasilitas yang diberikan ... 105

4.6.3.8.1.4. Tampilan Halaman Informasi Umum Proses Pelayanan Rehabilitasi ... 106

4.6.3.8.1.5. Tampilan Halaman Informasi Umum Tanggal Pendaftaran ... 106

4.6.3.8.1.6. Tampilan Halaman Syarat & Ketentuan Calon Penerima Manfaat ... 107

4.6.3.8.1.7. Tampilan Halaman Syarat & Ketentuan Eks Penerima Manfaat ... 107

4.6.3.8.1.8. Tampilan Halaman Login ... 108

4.6.3.8.2. Tampilan Halaman Admin ... 108

4.6.3.8.2.1. Tampilan Halaman Awal Admin ... 108

4.6.3.8.2.2. Tampilan Halaman Syarat & Ketentuan ... 109

4.6.3.8.2.3. Tampilan Halaman Syarat & Ketentuan (Add) ... 109

4.6.3.8.2.4. Tampilan Halaman Validasi Calon Penerima Manfaat ... 110

4.6.3.8.2.5. Tampilan Halaman Validasi Calon Penerima Manfaat (Detail) ... 111

(17)

4.6.3.8.2.7. Tampilan Halaman Validasi Eks

Penerima Manfaat (Detail) ... 113

4.6.3.8.2.8. Tampilan Halaman Pengumuman

4.6.3.8.2.9. Tampilan Halaman Laporan Calon

Penerima Manfaat Lulus dan Tidak

Lulus ... 114

Eks Penerima Manfaat ... 114

4.6.3.8.2.11. Tampilan Halaman Laporan Eks Penerima

Tanggal Pendaftaran ... 116

4.6.3.8.2.13. Tampilan Halaman Ubah Password. 116

4.6.3.8.3. Tampilan Halaman Seksi Rehabilitasi

Sosial ... 117

4.6.3.8.3.1. Tampilan Halaman Awal Seksi

Rehabilitasi Sosial ... 117

4.6.3.8.3.2. Tampilan Halaman Persetujuan Calon

4.6.3.8.3.3. Tampilan Halaman Persetujuan Eks

4.6.3.8.3.4. Tampilan Halaman Pengumuman Calon

4.6.3.8.3.5. Tampilan Halaman Laporan Calon Penerima

(18)

4.6.3.8.3.6. Tampilan Halaman Pengumuman Eks

4.6.3.8.3.7. Tampilan Halaman Laporan Eks Penerima

4.6.3.8.3.8. Tampilan Halaman Ubah Password... 121

4.6.3.8.4. Tampilan Halaman Calon Penerima

Manfaat ... 122

4.6.3.8.4.1. Tampilan Halaman Awal Calon

4.6.3.8.4.2. Tampilan Halaman Data Diri

(Data Pribadi) ... 122

(Data Keluarga) ... 123

(Aktivitas Keseharian) ... 123

(Hal-Hal Lain) ... 124

4.6.3.8.4.6. Tampilan Halaman Calon Penerima

Manfaat Registrasi ... 124

4.6.3.8.4.7. Tampilan Halaman Calon Penerima

Manfaat Pengumuman ... 125

4.6.3.8.4.8. Tampilan Halaman Calon Penerima Manfaat

Pengumuman (Bukti Pendaftaran) ... 125

4.6.3.8.4.9. Tampilan Halaman Calon Penerima Manfaat

Pengumuman (Surat Panggilan) ... 126

4.6.3.8.5. Tampilan Halaman Eks Penerima Manfaat. 127

(19)

Manfaat Registrasi ... 127

4.6.3.8.5.2. Tampilan Halaman Eks Penerima Manfaat Pengumuman ... 127

4.6.3.8.5.3. Tampilan Halaman Eks Penerima Manfaat Pengumuman (Bukti Pendaftaran) ... 128

4.6.3.8.5.4. Tampilan Halaman Eks Penerima Manfaat Pengumuman (Surat Panggilan) ... 129

4.6.4. Pengujian Perangkat Lunak ... 130

4.6.4.1. Lingkungan Pengujian ... 130

4.6.4.2. Rencana Pengujian ... 130

4.6.5. Pemeliharaan Sistem ... 135

4.7. Pembahasan ... 135

BAB V KESIMPULAN DAN SARAN ... 137

5.1. Kesimpulan ... 137

5.2. Saran ... 137

(20)

DAFTAR TABEL

Halaman

Tabel 2.1. Simbol-Simbol Data Flow Diagram (DFD) ... 15

Tabel 2.2. Simbol-Simbol dalam Blockchart ... 16

Tabel 2.3. Simbol-Simbol dalam Flowchart ... 19

Tabel 2.4. Simbol-Simbol Entity Relationship Diagram (ERD)... 21

Tabel 2.5. Simbol-Simbol dalam Kamus Data ... 22

Tabel 4.1. Studi Kelayakan ... 58

Tabel 4.2. calon_penerima_manfaat ... 75

Tabel 4.3. data_diri ... 75

Tabel 4.4. eks_penerima_manfaat ... 76

Tabel 4.5. syarat_ketentuan... 77

Tabel 4.6. user ... 77

Tabel 4.7. validasi_calon_pm ... 78

Tabel 4.8. validasi_eks_pm ... 78

(21)

DAFTAR GAMBAR

Halaman

Gambar 2.1 Tampilan Awal Adobe Dreamweaver CS6 ... 25

Gambar 2.2 Tampilan Ruang Kerja Adobe Dreamweaver CS6 ... 26

Gambar 2.3 Tampilan Application Bar ... 26

Gambar 2.4 Tampilan Toolbar Document ... 26

Gambar 2.5 Tampilan Toolbar Style Rendering ... 27

Gambar 2.6 Tampilan Panel Insert ... 27

Gambar 2.7 Tampilan Panel Files ... 27

Gambar 2.8 Tampilan CSS Styles... 28

Gambar 2.9 Tampilan Panel Properties ... 28

Gambar 3.1 Struktur Organisasi Panti Sosial Bina Daksa Budi Perkasa Palembang ... 39

Gambar 3.2 Sistem yang sedang berjalan ... 44

Gambar 3.3 Data identitas calon penerima manfaat dan data keluarga ... 46

Gambar 3.4 Data aktivitas keseharian calon penerima manfaat dan hal-hal lain ... 47

Gambar 3.5 Surat pernyataan kesanggupan ... 48

Gambar 3.6 Surat keterangan dokter ... 49

Gambar 3.7 Surat keterangan domisili ... 50

Gambar 3.8 Surat keterangan berkelakuan baik ... 51

Gambar 3.9 Judul usaha ... 52

Gambar 3.10 Pendahuluan dan profil usaha ... 53

Gambar 3.11 Alamat, anggota, maksud dan tujuan ... 54

Gambar 3.12 Rincian kebutuhan biaya dan penutup ... 55

(22)

Gambar 4.1 Diagram Konteks ... 64

Gambar 4.2 DFD Level 0 ... 66

Gambar 4.3 Blockchart yang akan diterapkan ... 67

Gambar 4.4 Flowchart Admin yang akan diterapkan ... 68

Gambar 4.5 Flowchart Seksi Rehabilitasi Sosial yang akan diterapkan .. 69

Gambar 4.6 Flowchart Calon Penerima Manfaat yang akan diterapkan .. 69

Gambar 4.7 Flowchart Eks Penerima Manfaat yang akan diterapkan... 70

Gambar 4.8 Entity Relationship Diagram (ERD) yang akan diterapkan .. 71

Gambar 4.9 Desain Halaman Beranda ... 79

Gambar 4.10 Desain Halaman Informasi Umum Sarana dan Prasarana .... 79

Gambar 4.11 Desain Halaman Informasi Umum Fasilitas yang diberikan 80 Gambar 4.12 Desain Halaman Informasi Umum Prose Pelayanan Rehabilitasi ... 80

Gambar 4.13 Desain Halaman Informasi Umum Tanggal Pendaftaran ... 81

Gambar 4.14 Desain Halaman Syarat & Ketentuan Calon Penerima Manfaat ... 81

Gambar 4.15 Desain Halaman Syarat & Ketentuan Eks Penerima Manfaat ... 82

Gambar 4.16 Desain Halaman Login ... 82

Gambar 4.17 Desain Halaman Awal Admin... 83

Gambar 4.18 Desain Halaman Syarat&Ketentuan... 83

Gambar 4.19 Desain Halaman Syarat&Ketentuan (Add) ... 84

Gambar 4.20 Desain Halaman Validasi Calon Penerima Manfaat ... 84

Gambar 4.21 Desain Halaman Validasi Calon Penerima Manfaat (Detail) ... 85

Gambar 4.22 Desain Halaman Validasi Eks Penerima Manfaat... 85

(23)

Gambar 4.24 Desain Halaman Pengumuman Calon Penerima Manfaat .... 86

Gambar 4.25 Desain Halaman Laporan Calon Penerima Manfaat Lulus dan Tidak Lulus ... 87

Gambar 4.26 Desain Halaman Pengumuman Eks Penerima Manfaat ... 87

Gambar 4.27 Desain Halaman Laporan Eks Penerima Manfaat Lulus dan Tidak Lulus ... 88

Gambar 4.28 Desain Halaman Pengumuman Tanggal Pendaftaran ... 88

Gambar 4.29 Desain Halaman Ubah Password ... 89

Gambar 4.29 Desain Halaman Awal Seksi Rehabilitasi Sosial ... 89

Gambar 4.30 Desain Halaman Persetujuan Calon Penerima Manfaat ... 90

Gambar 4.31 Desain Halaman Persetujuan Eks Penerima Manfaat ... 90

Gambar 4.32 Desain Halaman Pengumuman Calon Penerima Manfaat .... 91

Gambar 4.33 Desain Halaman Laporan Calon Penerima Manfaat Lulus dan Tidak Lulus ... 91

Gambar 4.34 Desain Halaman Pengumuman Eks Penerima Manfaat ... 92

Gambar 4.35 Desain Halaman Laporan Eks Penerima Manfaat Lulus dan Tidak Lulus ... 92

Gambar 4.36 Desain Halaman Ubah Password ... 93

Gambar 4.37 Desain Halaman Awal Calon Penerima Manfaat ... 93

Gambar 4.38 Desain Halaman Data Diri (Data Pribadi)... 94

Gambar 4.39 Desain Halaman Data Diri (Data Keluarga) ... 94

Gambar 4.40 Desain Halaman Data Diri (Aktivitas Keseharian) ... 95

Gambar 4.41 Desain Halaman Data Diri (Hal-Hal Lain) ... 95

Gambar 4.42 Desain Halaman Calon Penerima Manfaat Registrasi ... 96

Gambar 4.43 Desain Halaman Calon Penerima Manfaat Pengumuman .... 96

(24)

Gambar 4.45 Desain Halaman Calon Penerima Manfaat Pengumuman

(Surat Panggilan) ... 97

Gambar 4.46 Desain Halaman Eks Penerima Manfaat Registrasi ... 98

Gambar 4.47 Desain Halaman Eks Penerima Manfaat Pengumuman ... 98

Gambar 4.48 Desain Halaman Eks Penerima Manfaat Pengumuman (Bukti Pendaftaran) ... 99

Gambar 4.49 Desain Halaman Eks Penerima Manfaat Pengumuman (Surat Panggilan) ... 99

Gambar 4.50 Tampilan Halaman Beranda ... 104

Gambar 4.51 Tampilan Halaman Informasi Umum Sarana dan Prasarana 105 Gambar 4.52 Tampilan Halaman Informasi Umum Fasilitas yang diberikan ... 105

Gambar 4.53 Tampilan Halaman Informasi Umum Prose Pelayanan Rehabilitasi ... 106

Gambar 4.54 Tampilan Halaman Informasi Umum Tanggal Pendaftaran . 106 Gambar 4.55 Tampilan Halaman Syarat & Ketentuan Calon Penerima Manfaat ... 107

Gambar 4.56 Tampilan Halaman Syarat & Ketentuan Eks Penerima Manfaat ... 107

Gambar 4.57 Tampilan Halaman Login... 108

Gambar 4.58 Tampilan Halaman Awal Admin ... 108

Gambar 4.59 Tampilan Halaman Syarat&Ketentuan ... 109

Gambar 4.60 Tampilan Halaman Syarat&Ketentuan (Add) ... 109

Gambar 4.61 Tampilan Halaman Validasi Calon Penerima Manfaat ... 110

Gambar 4.62 Tampilan Halaman Validasi Calon Penerima Manfaat (Detail) ... 111

(25)

Gambar 4.64 Tampilan Halaman Validasi Eks Penerima Manfaat

(Detail) ... 113

Gambar 4.65 Tampilan Halaman Pengumuman Calon Penerima Manfaat ... 113

Gambar 4.66 Tampilan Halaman Laporan Calon Penerima Manfaat Lulus dan Tidak Lulus ... 114

Gambar 4.67 Tampilan Halaman Pengumuman Eks Penerima Manfaat .... 114

Gambar 4.68 Tampilan Halaman Laporan Eks Penerima Manfaat Lulus dan Tidak Lulus ... 115

Gambar 4.69 Tampilan Halaman Pengumuman Tanggal Pendaftaran ... 116

Gambar 4.70 Tampilan Halaman Ubah Password ... 116

Gambar 4.71 Tampilan Halaman Awal Seksi Rehabilitasi Sosial ... 117

Gambar 4.72 Tampilan Halaman Persetujuan Calon Penerima Manfaat ... 117

Gambar 4.73 Tampilan Halaman Persetujuan Eks Penerima Manfaat ... 118

Gambar 4.74 Tampilan Halaman Pengumuman Calon Penerima Manfaat 119 Gambar 4.75 Tampilan Halaman Laporan Calon Penerima Manfaat Lulus dan Tidak Lulus ... 119

Gambar 4.76 Tampilan Halaman Pengumuman Eks Penerima Manfaat .... 120

Gambar 4.77 Tampilan Halaman Laporan Eks Penerima Manfaat Lulus dan Tidak Lulus ... 121

Gambar 4.78 Tampilan Halaman Ubah Password ... 121

Gambar 4.79 Tampilan Halaman Awal Calon Penerima Manfaat ... 122

Gambar 4.80 Tampilan Halaman Data Diri (Data Pribadi) ... 122

Gambar 4.81 Tampilan Halaman Data Diri (Data Keluarga) ... 123

Gambar 4.82 Tampilan Halaman Data Diri (Aktivitas Keseharian) ... 123

Gambar 4.83 Tampilan Halaman Data Diri (Hal-Hal Lain) ... 124

(26)

Gambar 4.85 Tampilan Halaman Calon Penerima Manfaat Pengumuman 125

Gambar 4.86 Tampilan Halaman Calon Penerima Manfaat Pengumuman

(Bukti Pendaftaran) ... 125

Gambar 4.87 Tampilan Halaman Calon Penerima Manfaat Pengumuman

(Surat Panggilan) ... 126

Gambar 4.88 Tampilan Halaman Eks Penerima Manfaat Registrasi ... 127

Gambar 4.89 Tampilan Halaman Eks Penerima Manfaat Pengumuman ... 128

Gambar 4.90 Tampilan Halaman Eks Penerima Manfaat Pengumuman

(Bukti Pendaftaran) ... 128

Gambar 4.91 Tampilan Halaman Eks Penerima Manfaat Pengumuman