DAFTAR ISI. HALAMAN JUDUL... ii

DAFTAR ISI HALAMAN JUDUL... i HALAMAN JUDUL... ii HALAMAN PENGESAHAN... iii PERNYATAAN... iv KATA PENGANTAR... v DAFTAR ISI... vii DAFTAR TABEL... x DAFTAR GAMBAR... xi INTISARI... xvii ABSTRACT... xviii BAB I PENDAHULUAN... 1 1.1 Latar Belakang... 1 1.2 Rumusan Masalah... 2 1.3 Batasan Masalah... 2 1.4 Tujuan Penelitian... 3 1.5 Manfaat Penelitian... 3 1.6 Metodologi Penelitian... 3 1.7 Sistematika Penulisan... 6 BAB II TINJAUAN PUSTAKA... 8 BAB III LANDASAN TEORI... 12 3.1 Konsep Dasar Sistem... 12 3.2 Karakteristik Sistem... 12 3.3 Siklus Hidup Pengembangan Sistem... 14 3.3.1 Analisis sistem... 16 3.3.2 Perancangan sistem... 17 3.3.3 Implementasi sistem... 20 3.3.4 Pengujian sistem... 20 3.4 Definisi Informasi... 21 3.5 Siklus Informasi... 21 vii

3.6 Kualitas Informasi... 22 3.7 Nilai Informasi... 23 3.8 Konsep Dasar Sistem Informasi... 23 3.9 Komponen Sistem Informasi... 23 3.10 Definisi Basis data... 25 3.11 Tujuan Basis Data... 25 3.12 Bahasa Basis Data... 27 3.13 Entity Relationship Diagram... 27 3.14 Kunci... 30 3.15 Perangkat Lunak Sistem... 31 3.15.1 PHP... 31 3.15.2 HTML... 31 3.15.3 CSS... 31 3.15.4 Javascript dan JQuery... 32 3.15.5 Ajax... 32 3.15.6 MySQL... 32 3.15.7 XAMPP... 33 3.15.8 Twitter Bootstrap... 33 3.15.9 Yii Framework... 33 3.16 Konsep MVC (Model-Controller-View)... 34 3.17 Profil SMK Muhammadiyah Kramat Kabupaten Tegal... 35 3.17.1 Visi misi SMK Muhammadiyah Kramat... 35 3.17.2 Struktur organisasi SMK Muhammadiyah Kramat... 36 BAB IV ANALISIS DAN PERANCANGAN SISTEM... 37 4.1 Analisis Sistem... 37 4.1.1 Analisis masalah... 37 4.1.2 Analisis kebutuhan pengguna sistem... 38 4.1.3 Analisis kebutuhan fungsional... 39 4.1.4 Analisis kebutuhan nonfungsional... 41 4.1.5 Analisis kebutuhan data... 42 4.2 Perancangan Basis Data... 43 viii

4.2.1 Rancangan struktur tabel basis data... 44 4.3 Perancangan Proses... 51 4.4 Perancangan Struktur Menu... 67 4.5 Perancangan Antarmuka Pengguna... 70 BAB V IMPLEMENTASI SISTEM... 95 5.1 Implementasi Perangkat Lunak Sistem... 95 5.2 Pembuatan Basis Data... 95 5.3 Pembuatan Tabel... 96 5.4 Pembuatan Relasi Antar Tabel... 100 5.5 Implementasi Relasi Antar Tabel... 102 5.6 Implementasi Antarmuka... 103 BAB VI HASIL PENGUJIAN DAN PEMBAHASAN... 138 6.1 Skenario pengujian... 138 6.2 Hasil Pengujian Sistem... 139 6.2.1 Pengujian masuk ke sistem... 139 6.2.2 Pengujian data jabatan... 144 6.2.3 Pengujian data klasifikasi... 147 6.2.4 Pengujian data pegawai... 148 6.2.5 Pengujian data pengguna... 151 6.2.6 Pengujian data surat masuk... 151 6.2.7 Pengujian data lembar disposisi... 154 6.2.8 Pengujian data surat keluar... 157 6.2.9 Pengujian laporan... 159 6.2.10 Pengujian akun pengguna sistem... 163 6.3 Testimoni pengguna... 165 BAB VII KESIMPULAN DAN SARAN... 166 7.1 Kesimpulan... 166 7.2 Saran... 166 DAFTAR PUSTAKA... 167 LAMPIRAN... 169 ix

DAFTAR TABEL Tabel 2.1 Analisis perbandingan terhadap penelitian yang berkaitan dengan pengelolaan surat... 10 Tabel 2.2 Analisis perbandingan terhadap penelitian yang berkaitan dengan pengelolaan surat (lanjutan)... 11 Tabel 3.1 Simbol dan komponen pada DAD... 19 Tabel 3.2 Simbol Diagram E-R... 28 Tabel 4.1 Rancangan tabel user... 45 Tabel 4.2 Rancangan tabel pegawai... 46 Tabel 4.3 Rancangan tabel jabatan... 46 Tabel 4.4 Rancangan tabel klasifikasi... 47 Tabel 4.5 Rancangan tabel lembar_disposisi... 47 Tabel 4.6 Rancangan tabel lembar_disposisi (lanjutan)... 48 Tabel 4.7 Rancangan tabel surat masuk... 49 Tabel 4.8 Rancangan tabel surat keluar... 50 Tabel 4.9 Rancangan tabel detail_disposisi... 51 Tabel 6.1 Skenario pengujian sistem... 138 Tabel 6.2 Skenario pengujian sistem (lanjutan)... 139 Tabel 6.3 Tabel testimoni pengguna... 165 x

DAFTAR GAMBAR Gambar 3.1 Siklus hidup pengembangan sistem dengan metode waterfall.. 15 Gambar 3.2 Siklus informasi (Jogiyanto, 2005)... 22 Gambar 3.3 Struktur organisasi SMK Muhammadiyah Kramat... 36 Gambar 4.1 Entity Relationship Diagram (ERD)... 44 Gambar 4.2 DAD level konteks... 53 Gambar 4.3 DAD level 1... 55 Gambar 4.4 DAD level 2 manajemen login... 59 Gambar 4.5 DAD level 2 manajemen jabatan... 60 Gambar 4.6 DAD level 2 manajemen klasifikasi... 61 Gambar 4.7 DAD level 2 manajemen pegawai... 62 Gambar 4.8 DAD level 2 manajemen pengguna... 63 Gambar 4.9 DAD level 2 manajemen surat masuk... 64 Gambar 4.10 DAD level 2 manajemen surat keluar... 65 Gambar 4.11 DAD level 2 manajemen lembar disposisi... 66 Gambar 4.12 DAD level 2 manajemen laporan... 67 Gambar 4.13 Struktur menu administrator... 68 Gambar 4.14 Struktur menu petugas tata usaha... 69 Gambar 4.15 Struktur menu kepala sekolah... 69 Gambar 4.16 Struktur menu pegawai... 70 Gambar 4.17 Rancangan halaman login... 71 Gambar 4.18 Rancangan halaman beranda administrator... 72 Gambar 4.19 Rancangan halaman jabatan... 73 Gambar 4.20 Rancangan halaman tambah data jabatan... 73 Gambar 4.21 Rancangan halaman detail data jabatan... 74 Gambar 4.22 Rancangan halaman data klasifikasi... 74 Gambar 4.23 Rancangan halaman tambah data klasifikasi... 75 Gambar 4.24 Rancangan halaman detail data klasifikasi... 76 Gambar 4.25 Rancangan halaman pegawai... 76 Gambar 4.26 Rancangan halaman tambah data pegawai... 77 xi

Gambar 4.27 Rancangan halaman administrator detail data pegawai... 78 Gambar 4.28 Rancangan halaman administrator hapus data pegawai... 78 Gambar 4.29 Rancangan halaman administrator menu surat masuk... 79 Gambar 4.30 Rancangan halaman petugas menu surat masuk... 79 Gambar 4.31 Rancangan halaman tambah surat masuk... 80 Gambar 4.32 Rancangan halaman detail data surat masuk... 81 Gambar 4.33 Rancangan halaman administrator menu surat keluar... 81 Gambar 4.34 Rancangan halaman petugas menu surat keluar... 82 Gambar 4.35 Rancangan halaman tambah surat keluar... 83 Gambar 4.36 Rancangan halaman detail surat keluar... 84 Gambar 4.37 Rancangan halaman administrator menu lembar disposisi... 85 Gambar 4.38 Rancangan halaman kepala sekolah menu lembar disposisi... 85 Gambar 4.39 Rancangan halaman tambah data lembar disposisi... 86 Gambar 4.40 Rancangan halaman detail lembar disposisi... 87 Gambar 4.41 Rancangan halaman tambah data pengguna... 88 Gambar 4.42 Rancangan halaman administrator detail data pengguna... 88 Gambar 4.43 Rancangan halaman manajemen laporan surat masuk... 89 Gambar 4.44 Rancangan halaman manajemen laporan surat keluar... 90 Gambar 4.45 Rancangan halaman laporan surat masuk... 91 Gambar 4.46 Rancangan halaman laporan surat keluar... 91 Gambar 4.47 Rancangan halaman laporan diagram... 92 Gambar 4.48 Rancangan halaman akun pengguna... 93 Gambar 4.49 Rancangan halaman profil petugas... 93 Gambar 4.50 Rancangan halaman pengaturan... 94 Gambar 5.1 Kode program pembuatan basis data... 96 Gambar 5.2 Kode program pembuatan tabel pegawai... 96 Gambar 5.3 Kode program pembuatan tabel user... 97 Gambar 5.4 Kode program pembuatan tabel klasifikasi... 97 Gambar 5.5 Kode program pembuatan tabel jabatan... 97 Gambar 5.6 Kode program pembuatan tabel surat masuk... 98 Gambar 5.7 Kode program pembuatan tabel surat keluar... 99 xii

Gambar 5.8 Kode program pembuatan tabel lembar_disposisi... 99 Gambar 5.9 Kode program pembuatan tabel detail_disposisi... 100 Gambar 5.10 Kode program pembuatan relasi di tabel user... 100 Gambar 5.11 Kode program pembuatan relasi di tabel pegawai... 101 Gambar 5.12 Kode program pembuatan relasi di tabel surat_masuk... 101 Gambar 5.13 Kode program pembuatan relasi di tabel surat_keluar... 101 Gambar 5.14 Kode program pembuatan relasi di tabel lembar_disposisi... 102 Gambar 5.15 Kode program pembuatan relasi di tabel detail_disposisi... 102 Gambar 5.16 Relasi antar tabel... 103 Gambar 5.17 Impelementasi antarmuka halaman login... 104 Gambar 5.18 Potongan kode program halaman login... 105 Gambar 5.19 Implementasi antarmuka halaman beranda... 106 Gambar 5.20 Potongan kode program halaman beranda... 106 Gambar 5.21 Implementasi antarmuka halaman jabatan... 107 Gambar 5.22 Potongan kode program halaman jabatan... 107 Gambar 5.23 Implementasi antarmuka halaman pencarian data jabatan... 108 Gambar 5.24 Potongan kode program halaman pencarian data jabatan... 108 Gambar 5.25 Implementasi antarmuka halaman tambah data jabatan... 108 Gambar 5.26 Potongan kode program halaman tambah data jabatan... 109 Gambar 5.27 Implementasi antarmuka halaman hapus data jabatan... 109 Gambar 5.28 Implementasi antarmuka halaman hapus data jabatan... 110 Gambar 5.29 Implementasi antarmuka halaman klasifikasi... 111 Gambar 5.30 Potongan kode program model halaman klasifikasi... 111 Gambar 5.31 Implementasi antarmuka halaman tambah data klasifikasi... 112 Gambar 5.32 Potongan kode program halaman tambah data klasifikasi... 112 Gambar 5.33 Implementasi antarmuka halaman ubah data klasifikasi... 113 Gambar 5.34 Potongan kode program halaman ubah data klasifikasi... 113 Gambar 5.35 Implementasi antarmuka halaman detail data klasifikasi... 114 Gambar 5.36 Potongan kode program halaman detail data klasifikasi... 114 Gambar 5.37 Implementasi antarmuka halaman data pegawai... 115 Gambar 5.38 Potongan kode program halaman data pegawai... 115 xiii

Gambar 5.39 Implementasi antarmuka halaman tambah data pegawai... 116 Gambar 5.40 Potongan kode program halaman tambah data pegawai... 116 Gambar 5.41 Implementasi antarmuka halaman tambah data pengguna... 117 Gambar 5.42 Kode program halaman tambah data pengguna... 118 Gambar 5.43 Implementasi antarmuka halaman surat masuk... 118 Gambar 5.44 Potongan kode program halaman surat masuk... 118 Gambar 5.45 Implementasi antarmuka halaman tambah surat masuk... 119 Gambar 5.46 Potongan kode program halaman tambah data surat masuk.. 120 Gambar 5.47 Implementasi antarmuka halaman surat disposisi... 121 Gambar 5.48 Potongan kode program halaman surat disposisi... 121 Gambar 5.49 Implementasi antarmuka halaman detail lembar disposisi... 122 Gambar 5.50 Potongan kode program view halaman detail lembar disposisi... 122 Gambar 5.51 Kode program controller halaman detail lembar disposisi... 123 Gambar 5.52 Implementasi antarmuka halaman surat keluar... 123 Gambar 5.53 Potongan kode program view form halaman surat keluar... 124 Gambar 5.54 Potongan kode program controller halaman surat keluar... 124 Gambar 5.55 Implementasi antarmuka halaman ubah data surat keluar... 125 Gambar 5.56 Potongan kode program halaman ubah data surat keluar... 126 Gambar 5.57 Implementasi antarmuka halaman laporan surat keluar... 126 Gambar 5.58 Potongan kode program halaman laporan surat keluar... 127 Gambar 5.59 Implementasi antarmuka halaman cetak laporan surat keluar 127 Gambar 5.60 Potongan kode program halaman cetak laporan surat keluar 128 Gambar 5.61 Implementasi antarmuka halaman laporan surat masuk... 129 Gambar 5.62 Potongan kode program halaman laporan surat masuk... 129 Gambar 5.63 Implementasi antarmuka halaman laporan diagram... 130 Gambar 5.64 Potongan kode program halaman laporan diagram... 130 Gambar 5.65 Potongan kode program halaman laporan diagram (lanjutan) 131 Gambar 5.66 Potongan kode program halaman laporan diagram (lanjutan) 131 Gambar 5.67 Implementasi antarmuka halaman akun... 132 Gambar 5.68 Potongan kode program halaman akun... 132 Gambar 5.69 Potongan kode program halaman keluar... 133 xiv

Gambar 5.70 Implementasi antarmuka halaman profil... 133 Gambar 5.71 Potongan kode program view halaman profil... 134 Gambar 5.72 Potongan kode program controller halaman profil... 134 Gambar 5.73 Implementasi antarmuka halaman ubah data pegawai... 135 Gambar 5.74 Potongan kode program halaman ubah data pegawai... 136 Gambar 5.75 Implementasi antarmuka halaman detail data pengguna... 137 Gambar 5.76 Potongan kode program halaman detail data pengguna... 137 Gambar 6.1 Tampilan halaman login... 140 Gambar 6.2 Tampilan pesan kesalahan pada pengisian form... 140 Gambar 6.3 Tampilan pesan peringatan pada form login... 141 Gambar 6.4 Tampilan pengisian form login... 141 Gambar 6.5 Tampilan halaman beranda admin... 142 Gambar 6.6 Tampilan halaman beranda petugas tata usaha... 142 Gambar 6.7 Tampilan halaman beranda pegawai... 143 Gambar 6.8 Tampilan halaman beranda kepala sekolah... 143 Gambar 6.9 Tampilan halaman jabatan... 144 Gambar 6.10 Tampilan pesan peringatan pada form tambah data jabatan.. 144 Gambar 6.11 Tampilan pengisian form tambah data jabatan... 145 Gambar 6.12 Tampilan pesan peringatan data jabatan berhasil disimpan... 145 Gambar 6.13 Tampilan halaman ubah data jabatan... 146 Gambar 6.14 Tampilan pesan peringatan data jabatan berhasil diubah... 146 Gambar 6.15 Tampilan pesan peringatan data jabatan berhasil dihapus... 147 Gambar 6.16 Tampilan halaman data klasifikasi... 147 Gambar 6.17 Tampilan halaman form ubah data klasifikasi... 148 Gambar 6.18 Tampilan pesan peringatan data klasifikasi berhasil diubah.. 148 Gambar 6.19 Tampilan pesan peringatan form tambah data pegawai... 149 Gambar 6.20 Tampilan pengisian form tambah data pegawai... 150 Gambar 6.21 Tampilan pesan peringatan data pegawai berhasil disimpan. 150 Gambar 6.22 Tampilan halaman detail data pegawai untuk admin... 150 Gambar 6.23 Tampilan pengisian form tambah data pengguna... 151 Gambar 6.24 Tampilan pesan peringatan form tambah data surat masuk... 152 xv

Gambar 6.25 Tampilan pesan peringatan file belum dilampirkan... 152 Gambar 6.26 Tampilan pengisian form tambah data surat masuk... 153 Gambar 6.27 Tampilan pesan peringatan data surat masuk berhasil disimpan... 154 Gambar 6.28 Tampilan pesan peringatan data surat masuk berhasil dihapus... 154 Gambar 6.29 Tampilan pengisian form tambah data lembar disposisi... 155 Gambar 6.30 Tampilan pesan data lembar disposisi berhasil disimpan... 156 Gambar 6.31 Tampilan pengujian pencarian... 156 Gambar 6.32 Tampilan halaman hasil pencarian... 156 Gambar 6.33 Tampilan halaman form ubah data surat keluar... 157 Gambar 6.34 Tampilan pesan peringatan data surat keluar berhasil diubah 158 Gambar 6.35 Tampilan halaman detail data surat keluar... 158 Gambar 6.36 Tampilan halaman laporan surat masuk... 159 Gambar 6.37 Tampilan halaman cetak laporan surat masuk... 160 Gambar 6.38 Tampilan halaman laporan surat keluar... 161 Gambar 6.39 Tampilan halaman cetak laporan surat keluar... 161 Gambar 6.40 Tampilan halaman pencarian pada laporan diagram... 162 Gambar 6.41 Tampilan halaman hasil pencarian pada laporan diagram... 162 Gambar 6.42 Tampilan halaman profil... 163 Gambar 6.43 Tampilan halaman form ubah data pegawai... 163 Gambar 6.44 Tampilan halaman form ubah data pengguna... 164 Gambar 6.45 Tampilan pesan peringatan data penggua berhasil diubah... 164 xvi