vi 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
vii
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
viii
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
ix
x
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
xi
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
xii
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
xiii
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
xiv
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
xv
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
xvi
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
xvii
Gambar 6.26 Tampilan hasil pengujian kesalahan tambah pengguna ... 209 Gambar 6.27 Tampilan hasil pengujian tambah pengguna ... 209
xviii
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
