DAFTAR ISI LAPORAN TUGAS AKHIR... i HALAMAN PENGESAHAN... iiiii PERNYATAAN... iiiv PRAKATA... v DAFTAR ISI... vi DAFTAR GAMBAR... x DAFTAR TABEL... xviii INTISARI... xix ABSTRACT... xx 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... 5 BAB II TINJAUAN PUSTAKA... 7 BAB III LANDASAN TEORI... 12 3.1. Sistem... 12 3.1.1 Elemen sistem... 12 3.1.2 Karakteristik sistem... 12 3.2. Siklus Hidup Pengembangan Sistem... 14 3.2.1. Perencanaan sistem... 14 3.2.2. Analisis sistem... 15 3.2.3. Desain sistem... 15 3.2.4. Implementasi sistem... 20 3.2.5. Pengujian sistem... 20 3.3. Basis Data... 22 3.3.1. Database management system... 23 vi
3.3.2. Entity Relationship Model... 24 3.4. Internet... 25 3.4.1. Web... 26 3.4.2. Web browser... 26 3.4.3. Web server... 26 3.5. Perangkat Lunak Sistem... 26 3.5.1. HTML5... 26 3.5.2. PHP... 27 3.5.3. CSS3... 27 3.5.4. Javascript... 28 3.5.5. JQuery... 28 3.5.6. AJAX... 28 3.5.7. MySQL... 28 3.5.8. Twitter bootstrap... 29 3.5.9. Konsep MVC... 29 3.5.10. Konsep HMVC... 30 3.5.11. Framework CodeIgniter... 31 3.5.12. HighCharts... 32 3.5.13. Google MAPS... 32 3.5.14. Google MAPS API Geocoding... 32 3.6. Alat Implementasi... 33 3.6.1. Notepad++... 33 3.6.2. Microsoft Office Visio... 33 3.6.3. XAMPP... 33 3.6.4. YED graph editor... 34 3.6.5. Balsamiq mockups... 34 3.6.6. MySQL workbench... 34 3.7. Sekilas tentang OPT... 34 3.8. Tentang BBPPTP Surabaya... 35 BAB IV ANALISIS DAN RANCANGAN SISTEM... 37 4.1. Analisis... 37 4.1.1. Analisis masalah... 37 4.1.2. Analisis kebutuhan fungsional... 38 4.1.3. Analisis kebutuhan nonfungsional... 39 vii
4.1.4. Analisis kebutuhan data... 39 4.2. Perancangan... 41 4.2.1. Rancangan basis data... 41 4.2.2. Rancangan proses... 48 4.2.3. Perancangan Struktur Menu... 77 4.2.4. Rancangan antarmuka... 79 BAB V IMPLEMENTASI... 104 5.1. Implementasi Perangkat Lunak Pembangun... 104 5.2. Implementasi Perangkat Keras Pembangun... 104 5.3. Implementasi Basis Data... 105 5.3.1. Pembuatan basis data... 105 5.3.2. Pembuatan tabel... 105 5.4. Implementasi Antarmuka... 115 5.4.1. Konfigurasi framework CodeIgniter... 115 5.4.2. Pembuatan antarmuka dan fungsi sistem... 118 BAB VI PENGUJIAN DAN PEMBAHASAN... 195 6.1. Skenario Pengujian... 195 6.2. Uji Kasus dan Hasil Pengujian... 196 6.2.1. Pengujian masuk ke sistem... 196 6.2.2. Pengujian entri data OPT... 197 6.2.3. Pengujian display tabel cross section... 198 6.2.4. Pengujian display tabel time series... 200 6.2.5. Pengujian display grafik bar chart... 201 6.2.6. Pengujian display grafik line chart... 201 6.2.7. Pengujian display laporan... 202 6.2.8. Pengujian menampilkan peta... 203 6.2.9. Pengujian tambah geleri... 204 6.2.10. Pengujian ganti password... 206 6.2.11. Pengujian tambah module... 207 6.2.12. Pengujian tambah pengguna... 208 BAB VII KESIMPULAN DAN SARAN... 210 7.1. Kesimpulan... 210 7.2. Saran... 210 DAFTAR PUSTAKA... 211 viii
LAMPIRAN... 214 ix
DAFTAR GAMBAR Gambar 3.1 Siklus hidup pengembangan sistem metode waterfall... 14 Gambar 3.2 Contoh diagram usecase... 18 Gambar 3.3 Contoh diagram activity... 19 Gambar 3.4 Contoh diagram class... 20 Gambar 3.5 Contoh ERD... 25 Gambar 3.6 Konsep MVC... 30 Gambar 3.7 Konsep HMVC... 31 Gambar 4.2 Rancangan struktur tabel basis data... 48 Gambar 4.3 Rancangan diagram usecase... 49 Gambar 4.4 Diagram activity melihat data induk... 51 Gambar 4.5 Diagram activity melihat pemetaan... 52 Gambar 4.6 Diagram activity melihat laporan... 53 Gambar 4.7 Diagram activity melihat dokumentasi... 54 Gambar 4.8 Diagram activity melihat display data tabel... 55 Gambar 4.9 Diagram activity melihat display data grafik... 57 Gambar 4.10 Diagram activity ganti password... 58 Gambar 4.11 Diagram activity tambah data laporan OPT... 60 Gambar 4.12 Diagram activity tambah data laporan OPT... 62 Gambar 4.13 Diagram activity download laporan... 63 Gambar 4.14 Diagram activity kelola data induk... 65 Gambar 4.15 Diagram activity kelola dokumentasi... 66 Gambar 4.16 Diagram activity tambah dokumentasi... 67 Gambar 4.17 Diagram activity tambah data induk... 68 Gambar 4.18 Diagram activity manajemen modul... 70 Gambar 4.19 Diagram activity manajemen user... 72 Gambar 4.20 Diagram activity manajemen level user... 74 Gambar 4.21 Diagram activity export data... 75 Gambar 4.22 Diagram activity import data... 76 Gambar 4.23 Rancangan diagram class... 77 Gambar 4.24 Struktur menu petugas... 78 Gambar 4.25 Struktur menu admin... 78 Gambar 4.26 Struktur menu root... 79 Gambar 4.27 Rancangan halaman depan... 80 x
Gambar 4.28 Rancangan halaman data komoditas... 80 Gambar 4.29 Rancangan halaman data OPT... 81 Gambar 4.30 Rancangan halaman data provinsi... 81 Gambar 4.31 Rancangan halaman data kabupaten... 82 Gambar 4.32 Rancangan halaman data kecamatan... 83 Gambar 4.33 Rancangan halaman tabel cross section... 83 Gambar 4.34 Rancangan halaman display tabel cross section... 84 Gambar 4.35 Rancangan halaman tabel time series... 84 Gambar 4.36 Rancangan halaman display tabel time series... 85 Gambar 4.37 Rancangan halaman grafik bar chart... 86 Gambar 4.38 Rancangan halaman display grafik bar chart... 86 Gambar 4.39 Rancangan halaman grafik line chart... 87 Gambar 4.40 Rancangan halaman display grafik line chart... 87 Gambar 4.41 Rancangan halaman data laporan... 88 Gambar 4.42 Rancangan halaman display data laporan... 88 Gambar 4.43 Rancangan halaman peta... 89 Gambar 4.44 Rancangan halaman display peta... 89 Gambar 4.45 Rancangan halaman galeri... 90 Gambar 4.46 Rancangan halaman login... 90 Gambar 4.47 Rancangan halaman tambah komoditi... 91 Gambar 4.48 Rancangan halaman tambah OPT... 91 Gambar 4.49 Rancangan halaman tambah data provinsi... 92 Gambar 4.50 Rancangan halaman tambah data kabupaten... 92 Gambar 4.51 Rancangan halaman tambah data kecamatan... 93 Gambar 4.52 Rancangan halaman ubah data komoditi... 93 Gambar 4.53 Rancangan halaman ubah data OPT... 94 Gambar 4.54 Rancangan halaman ubah data provinsi... 94 Gambar 4.55 Rancangan halaman ubah data kabupaten... 95 Gambar 4.56 Rancangan halaman ubah data kecamatan... 95 Gambar 4.57 Rancangan halaman entri data OPT... 96 Gambar 4.58 Rancangan halaman display entri data OPT... 96 Gambar 4.59 Rancangan halaman ubah password... 97 Gambar 4.60 Rancangan manajemen level pengguna... 97 Gambar 4.61 Rancangan tambah level pengguna... 98 xi
Gambar 4.62 Rancangan ubah hak akses... 98 Gambar 4.63 Rancangan halaman hapus level pengguna... 99 Gambar 4.64 Rancangan halaman manajemen pengguna... 99 Gambar 4.65 Rancangan halaman ubah pengguna... 100 Gambar 4.66 Rancangan halaman hapus pengguna... 100 Gambar 4.67 Rancangan halaman cari pengguna... 101 Gambar 4.68 Rancangan halaman cari pengguna tidak ditemukan... 101 Gambar 4.69 Rancangan halaman cari galeri... 102 Gambar 4.70 Rancangan halaman cari galeri tidak ditemukan... 102 Gambar 4.71 Rancangan halaman preview galeri... 103 Gambar 5.1 Kode program untuk membuat basis data pertanian... 105 Gambar 5.2 Kode program untuk membuat tabel group... 106 Gambar 5.3 Kode program untuk membuat tabel module... 107 Gambar 5.4 Kode program untuk membuat tabel group_module... 108 Gambar 5.5 Kode program untuk membuat tabel provinsi... 108 Gambar 5.6 Kode program untuk membuat tabel kabupaten... 109 Gambar 5.7 Kode program untuk membuat tabel kecamatan... 110 Gambar 5.8 Kode program untuk membuat tabel komoditi... 110 Gambar 5.9 Kode program untuk membuat tabel OPT... 111 Gambar 5.10 Kode program untuk membuat tabel user... 112 Gambar 5.11 Kode program untuk membuat tabel galeri... 113 Gambar 5.12 Kode program untuk membuat tabel laporan... 114 Gambar 5.13 Kode program untuk membuat tabel ci_session... 115 Gambar 5.14 Kode program untuk konfigurasi basis data... 116 Gambar 5.15 Kode program untuk konfigurasi helper dan libraries... 116 Gambar 5.16 Kode program untuk konfigurasi default controller... 116 Gambar 5.17 Kode program untuk konfigurasi controller... 117 Gambar 5.18 Kode program untuk menampilkan menu... 119 Gambar 5.19 Kode program untuk menampilkan konten halaman depan... 120 Gambar 5.20 Antarmuka halaman depan... 120 Gambar 5.21 Kode program halaman login... 121 Gambar 5.22 Antarmuka halaman login... 121 Gambar 5.23 Kode program halaman daftar komoditas... 122 Gambar 5.24 Kode program edit data komoditas... 123 xii
Gambar 5.25 Kode program edit data komoditas... 123 Gambar 5.26 Antarmuka halaman daftar komoditas... 124 Gambar 5.27 Kode program halaman daftar OPT... 125 Gambar 5.28 Kode program menambah data OPT... 125 Gambar 5.29 Kode program mengubah data OPT... 126 Gambar 5.30 Kode program menghapus data OPT... 126 Gambar 5.31 Kode program menyimpan perubahan data OPT... 127 Gambar 5.32 Antarmuka halaman daftar OPT... 127 Gambar 5.33 Kode program menampilkan halaman daftar provinsi... 128 Gambar 5.34 Kode program mengubah data provinsi... 129 Gambar 5.35 Kode program menyimpan perubahan data provinsi... 129 Gambar 5.36 Antarmuka halaman daftar provinsi... 130 Gambar 5.37 Kode program halaman daftar kabupaten... 131 Gambar 5.38 Kode program tambah data kabupaten... 131 Gambar 5.39 Kode program ubah data kabupaten... 132 Gambar 5.40 Kode program hapus data kabupaten... 132 Gambar 5.41 Kode program simpan perubahan data kabupaten... 133 Gambar 5.42 Antarmuka halaman daftar kabupaten... 134 Gambar 5.43 Antarmuka halaman ubah data kabupaten... 134 Gambar 5.44 Kode program halaman daftar kecamatan... 135 Gambar 5.45 Kode program tambah data kecamatan... 136 Gambar 5.46 Kode program ubah data kecamatan... 137 Gambar 5.47 Kode program hapus data kecamatan... 137 Gambar 5.48 Kode program simpan berubahan data kecamatan... 138 Gambar 5.49 Antarmuka halaman daftar kecamatan... 138 Gambar 5.50 Antarmuka halaman ubah data kecamatan... 139 Gambar 5.51 Kode program halaman entry data OPT... 140 Gambar 5.51 Kode program halaman entry data OPT (lanjutan)... 141 Gambar 5.52 Kode program mendapatkan objek... 142 Gambar 5.53 Kode program mendapatkan waktu... 143 Gambar 5.54 Kode program menyimpan data laporan... 143 Gambar 5.55 Kode program mendapatkan wilayah... 144 Gambar 5.56 Antarmuka halaman enty data OPT... 145 Gambar 5.57 Antarmuka halaman pengolahan data OPT... 145 xiii
Gambar 5.58 Kode program menampilkan halaman display data cross section 146 Gambar 5.59 Kode program menampilkan hasil display cross section... 147 Gambar 5.59 Kode program menampilkan hasil display cross section (lanjutan)... 148 Gambar 5.60 Antarmuka halaman display tabel cross section... 149 Gambar 5.61 Antarmuka halaman hasil display tabel cross section... 149 Gambar 5.62 Kode program menampilkan halaman display tabel time series... 150 Gambar 5.63 Kode program menampilkan hasil display tabel time series... 151 Gambar 5.63 Kode program menampilkan hasil display tabel time series (lanjutan)... 152 Gambar 5.64 Antarmuka halaman display tabel time series... 153 Gambar 5.65 Antarmuka hasil display tabel time series... 153 Gambar 5.66 Kode program menampilkan halaman display grafik bar chart... 154 Gambar 5.67 Kode program menampilkan hasil display grafik bar chart... 155 Gambar 5.68 Kode program menampilkan hasil display grafik bar chart (lanjutan)... 156 Gambar 5.68 Antarmuka halaman display grafik bar chart... 157 Gambar 5.69 Antarmuka hasil halaman display grafik bar chart... 157 Gambar 5.70 Kode program menampilkan halaman display line chart... 158 Gambar 5.71 Kode program menampilkan hasil display line chart... 158 Gambar 5.71 Kode program menampilkan hasil display line chart (lanjutan)... 159 Gambar 5.71 Kode program menampilkan hasil display line chart (lanjutan)... 160 Gambar 5.72 Antarmuka halaman display grafik line chart... 161 Gambar 5.73 Antarmuka hasil halaman display grafik line chart... 161 Gambar 5.74 Kode program menampilkan halaman display laporan... 162 Gambar 5.75 Kode program menampilkan halaman hasil display laporan... 163 Gambar 5.75 Kode program menampilkan halaman hasil display laporan (lanjutan)... 164 Gambar 5.76 Kode program mengexport data excel... 165 Gambar 5.77 Antarmuka halaman display laporan... 166 Gambar 5.78 Antarmuka halaman hasil display laporan... 166 Gambar 5.79 Antarmuka hasil data setelah diunduh... 166 Gambar 5.80 Kode program menampilkan halaman peta... 167 Gambar 5.81 Kode program menampilkan hasil halaman peta... 168 Gambar 5.81 Kode program menampilkan hasil halaman peta (lanjutan)... 169 xiv
Gambar 5.82 Antarmuka halaman peta... 170 Gambar 5.83 Antarmuka hasil halaman peta... 170 Gambar 5.84 Kode program menampilkan halaman galeri... 171 Gambar 5.85 Kode program menambah data galeri... 172 Gambar 5.86 Kode program menghapus data galeri... 173 Gambar 5.87 Kode program mengubah data galeri... 173 Gambar 5.88 Kode program melihat detail galeri... 174 Gambar 5.89 Antarmuka halamn galeri... 174 Gambar 5.90 Antarmuka ubah galeri... 174 Gambar 5.91 Antarmuka tambah galeri... 175 Gambar 5.92 Antarmuka detail galeri... 175 Gambar 5.93 Kode program menampilkan halaman ganti password... 176 Gambar 5.94 Kode program verifikasi password... 177 Gambar 5.95 Antarmuka halaman ganti password... 177 Gambar 5.96 Kode program menampilkan halaman manajemen pengguna... 178 Gambar 5.97 Kode program mengubah hak akses pengguna... 179 Gambar 5.98 Antarmuka halaman manajemen level pengguna... 179 Gambar 5.99 Antarmuka halaman mengubah hak akses level pengguna... 180 Gambar 5.100 Kode program halaman manajemen pengguna... 181 Gambar 5.101 Kode program menambah pengguna... 182 Gambar 5.101 Kode program menambah pengguna (lanjutan)... 183 Gambar 5.102 Kode program menghapus pengguna... 183 Gambar 5.103 Kode program mengubah data pengguna... 184 Gambar 5.103 Kode program mengubah data pengguna (lanjutan)... 185 Gambar 5.104 Antarmuka halaman manajemen pengguna... 185 Gambar 5.105 Antarmuka tambah data pengguna... 186 Gambar 5.106 Antarmuka ubah data pengguna... 186 Gambar 5.107 Antarmuka cari data pengguna... 186 Gambar 5.108 Kode program menampilkan halaman manajemen module... 187 Gambar 5.109 Kode program menambah module... 188 Gambar 5.110 Kode program menghapus module... 189 Gambar 5.111 Kode program mengubah module... 189 Gambar 5.112 Antarmuka halaman manajemen module... 190 Gambar 5.113 Antarmuka halaman tambah data module... 190 xv
Gambar 5.114 Antarmuka halaman ubah data module... 190 Gambar 5.115 Antarmuka halaman cari data module... 191 Gambar 5.116 Kode program menampilkan halaman export data... 192 Gambar 5.117 Kode program mengexport data... 192 Gambar 5.118 Antarmuka halaman export data... 193 Gambar 5.119 Kode program menampilkan halaman import data... 193 Gambar 5.120 Kode program import data... 194 Gambar 5.121 Antarmuka halaman import data... 194 Gambar 6.1 Tampilan hasil pengujian kesalahan masuk ke sistem... 196 Gambar 6.2 Tampilan hasil pengujian masuk ke sistem... 197 Gambar 6.3 Tampilan hasil pengujian kesalahan entri data OPT... 197 Gambar 6.4 Tampilan hasil pengujian entri data OPT... 198 Gambar 6.5 Tampilan hasil pengujian simpan entri data OPT... 198 Gambar 6.6 Tampilan hasil pengujian kesalahan display tabel cross section... 199 Gambar 6.7 Tampilan hasil pengujian display tabel cross section data ada... 199 Gambar 6.8 Tampilan hasil pengujian display tabel cross section data tidak ada... 199 Gambar 6.9 Tampilan hasil pengujian kesalahan display tabel time series... 200 Gambar 6.10 Tampilan hasil pengujian display tabel time series... 200 Gambar 6.11 Tampilan hasil pengujian kesalahan display grafik bar chart... 201 Gambar 6.12 Tampilan hasil pengujian display grafik bar chart... 201 Gambar 6.13 Tampilan hasil pengujian kesalahan display grafik line chart... 202 Gambar 6.14 Tampilan hasil pengujian display grafik line chart... 202 Gambar 6.15 Tampilan hasil pengujian kesalahan display laporan... 203 Gambar 6.16 Tampilan hasil pengujian display laporan... 203 Gambar 6.17 Tampilan hasil pengujian kesalahan menampilkan peta... 204 Gambar 6.18 Tampilan hasil pengujian menampilkan peta... 204 Gambar 6.19 Tampilan hasil pengujian kesalahan menambah galeri... 205 Gambar 6.20 Tampilan hasil pengujian menambah galeri... 205 Gambar 6.21 Tampilan hasil pengujian detail galeri... 206 Gambar 6.22 Tampilan hasil pengujian kesalahan ubah password... 207 Gambar 6.23 Tampilan hasil pengujian ubah password... 207 Gambar 6.24 Tampilan hasil pengujian kesalahan tambah module... 208 Gambar 6.25 Tampilan hasil pengujian tambah module... 208 xvi
Gambar 6.26 Tampilan hasil pengujian kesalahan tambah pengguna... 209 Gambar 6.27 Tampilan hasil pengujian tambah pengguna... 209 xvii
DAFTAR TABEL Tabel 2.1 Tabel perbandingan penelitian... 10 Tabel 4.1 Tabel penjelasan relasi dan kardinalitas ERD... 42 Tabel 4.3 Tabel user... 42 Tabel 4.4 Tabel group... 43 Tabel 4.5 Tabel provinsi... 43 Tabel 4.6 Tabel kabupaten... 44 Tabel 4.7 Tabel kecamatan... 44 Tabel 4.8 Tabel kecamatan... 45 Tabel 4.9 Tabel kecamatan... 46 Tabel 4.10 Tabel group_module... 46 Tabel 4.11 Tabel module... 47 Tabel 4.12 Tabel module... 48 Tabel 6.1 Skenario pengujian... 195 xviii