i ANALISIS DAN PERANCANGAN SITUS DINAS PARIWISATA DAN KEBUDAYAAN PROVINSI DKI JAKARTA DENGAN MENGGABUNGKAN KONSEP WEB 2.0 DAN MASHUP SKRIPSI Oleh: DIMAS EKO ADITYO 1100041733 KONRAD BANGUN PRATOMO 1100059125 RHEZANDRA PRIATAMA 1100053462 Universitas Bina Nusantara Jakarta (2011)
ii ANALISIS DAN PERANCANGAN SITUS DINAS PARIWISATA DAN KEBUDAYAAN PROVINSI DKI JAKARTA DENGAN MENGGABUNGKAN KONSEP WEB 2.0 DAN MASHUP SKRIPSI diajukan sebagai salah satu syarat untuk gelar kesarjanaan pada Jurusan Teknik Informatika Jenjang Pendidikan Strata-1 Oleh: DIMAS EKO ADITYO 1100041733 KONRAD BANGUN PRATOMO 1100059125 RHEZANDRA PRIATAMA 1100053462 Universitas Bina Nusantara Jakarta (2011)
iii UNIVERSITAS Bina Nusantara Pernyataan Kesiapan Tugas Akhir untuk Ujian Pendadaran Pernyataan Penyusunan Tugas Akhir Kami, Dimas Eko Adityo Rhezandra Priatama Konrad Bangun Pratomo dengan ini menyatakan bahwa Tugas Akhir yang berjudul : A NA LISIS DA N PERA NCA NGA N SITUS DINAS PA RIW ISA TA DA N KEBUDA YAA N PRO VINSI DKI JAKARTA DENGAN MENGGABUNGKAN KONSEP WEB 2.0 DA N MA SHUP adalah benar hasil karya kami dan belum pernah diajukan sebagai karya ilmiah, sebagian atau seluruhnya, atas nama kami atau pihak lain. Dimas Eko Adityo 1100041733 Konrad Bangun Pratomo 1100059125 Rhezandra Priatama 1100053462 Disetujui oleh Pembimbing Kami setuju Tugas Akhir tersebut diajukan untuk Ujian Pendadaran Bayu Kanigoro, S.Kom., M.T. Pembimbing 29 Januari 2011
v PRAKATA Puji dan syukur kami ucapkan kepada Tuhan Yang Maha Esa karena atas berkat rahmat dan karunia-nya, penulis dapat menyelesaikan penyusunan laporan skripsi ini tepat pada waktu yang ditentukan. Tanpa izin dan kehendaknya-nya maka semua usaha dan kerja keras kami ini tidak akan ada hasilnya. Penulisan skripsi dengan judul ANALISIS DAN PERANCANGAN SITUS DINAS PARIWISATA DAN KEBUDAYAAN PROVINSI DKI JAKARTA DENGAN MENGGABUNGKAN KONSEP WEB 2.0 DAN MASHUP ini disusun sebagai salah satu persyaratan akademik untuk menyelesaikan jenjang studi Strata Satu (S1) Jurusan Teknik Informatika di Universitas Bina Nusantara. Pada kesempatan ini, perkenankan kami untuk mengucapkan terima kasih yang sebesar besarnya kepada: Bapak Prof. Dr. Ir. Harjanto Prabowo, MM, selaku Rektor Universitas Bina Nusantara. Bapak Sablin Yusuf, Ir., M.Sc., M.Comp.Sc., selaku Dekan Fakultas Ilmu Komputer Universitas Bina Nusantara. Bapak Freddy Purnomo, S.Kom., M.Kom., selaku Ketua Jurusan Teknik Informatika. Bapak Bayu Kanigoro, S.Kom., M.T selaku dosen pembimbing skripsi. Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta yang telah memberikan kesempatan kepada penulis untuk melakukan penelitian.
vi Seluruh dosen Universitas Bina Nusantara yang telah memberikan bekal dan tuntunan kepada penulis dengan berbagai pengetahuan ini. Orang tua tercinta dan teman teman yang telah banyak memberikan dukungan, bantuan, dan doa. Serta semua pihak yang telah membantu dalam penulisan skripsi ini yang tidak dapat disebutkan satu-persatu. Penulis tentu menyadari adanya kekurangan dalam penyusunan skripsi ini, karena keterbatasan kami dalam hal kemampuan, pengetahuan serta pengalaman yang kami punya. Karena itu penulis mengharapkan adanya saran dan kritik yang berguna untuk dapat menyempurnakan skripsi ini. Akhir kata, penulis berharap agar skripsi ini berguna dan bermanfaat bagi semua pihak yang membaca atau memerlukan, terutama Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta. Jakarta, 26 Januari 2011 Penulis
vii DAFTAR ISI Judul Luar... i Judul Dalam...ii Persetujuan...iii Abstrak... iv PRAKATA... v DAFTAR ISI...vii DAFTAR TABEL...xviiv DAFTAR GAMBAR...xvii BAB 1 PENDAHULUAN... 1 1.1 Latar Belakang... 1 1.2 Ruang Lingkup... 2 1.3 Tujuan dan Manfaat... 4 1.4 Metodologi Penelitian... 5 1.5 Sistematika Penulisan... 6 BAB 2 LANDASAN TEORI... 8 2.1. Perangkat Lunak... 8 2.1.1. Pengertian Rekayasa Perangkat Lunak... 8 2.1.2. Karakteristik Perangkat Lunak... 9 2.1.3. Tahap Perancangan Perangkat Lunak... 11 2.1.4. Metodologi yang Digunakan... 13
viii 2.2. Sistem Basis Data... 16 2.2.1. Pengertian Sistem Basis Data... 16 2.2.2. Komponen Basis Data... 18 2.2.3. MySQL... 20 2.2.4. Basis Data, Tabel, Baris, dan Kolom... 21 2.3. Multimedia... 22 2.3.1. Pengertian Multimedia... 22 2.3.2. Alasan Pentingnya Multimedia... 22 2.3.3. Objek Dalam Multimedia... 23 2.4 Interaksi Manusia dan Komputer... 29 2.4.1 Pengertian Interaksi Manusia dan Komputer... 29 2.4.2 Delapan Aturan Emas... 30 2.5 Internet... 32 2.5.1 Pengertian Internet... 32 2.5.2 Istilah dalam Internet... 32 2.6 Aplikasi Berbasis Web... 36 2.6.1 Fungsi Umum Aplikasi Berbasis Web... 36 2.6.2 Keuntungan dan Tantangan Aplikasi Berbasis Web... 38 2.6.3 Arsitektur Aplikasi Berbasis Web... 40 2.7 UML (Unified Modelling Language)... 42 2.7.1 Pengertian UML (Unified Modeling Language)... 43 2.7.2 Diagram-diagram UML... 44
ix 2.7.2.1 Use Case... 44 2.7.2.2 Diagram Class... 47 2.7.2.3 Diagram Sequence... 50 2.8 Bahasa Pemrograman Web... 51 2.8.1 PHP... 51 2.8.2 JavaScript... 53 2.8.3 Asynchronous JavaScript and XML (AJAX)... 53 2.9 Konsep Pengembangan Situs... 55 2.9.1 Web 2.0... 55 2.9.2 Mashup... 56 2.9.3 Application Programming Interface (API)... 58 2.8.4.1 Facebook Application Platform (API Facebook)... 59 2.8.4.2 API Yahoo! Weather... 60 2.8.4.3 API Twitter... 61 2.8.4.4 API Google Maps... 62 2.10 Desain Web... 63 2.9.1 HTML5... 63 2.9.2 CSS3... 64 2.9.3 JQuery... 65 2.11 Teknik Penyerangan Web... 66 2.10.1 SQL Injection... 66 2.10.2 Cross Site Scripting (XSS)... 66
x BAB 3 ANALISIS DAN PERANCANGAN... 68 3.1 Latar Belakang Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta... 68 3.2 Struktur Organisasi Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta... 70 3.2.1 Struktur Organisasi Dasar Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta... 71 3.2.2 Struktur UPT Informasi Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta... 72 3.2.3 Personil dan Deksripsi Tugas... 73 3.3 Visi dan Misi Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta... 75 3.4 Strategi Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta... 75 3.5 Analisis Sistem yang Berjalan pada Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta... 78 3.6 Kuesioner... 79 3.6.1 Tujuan Kuesioner... 80 3.6.2 Hasil Analisis Kuesioner... 81 3.7 Analisis Masalah pada Situs Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta... 92 3.8 Usulan Pemecahan Masalah... 93 3.9 Perancangan Aplikasi yang Diusulkan... 94 3.9.1 Model Use Case Sistem yang Dirancang... 94 3.9.2 Deskripsi Use Case Sistem yang Dirancang... 96 3.9.3 Model Diagram Class Sistem yang Dirancang... 105 3.9.4 Model Diagram Sequence Sistem yang Dirancang... 108
xi 3.9 Perancangan Basis Data... 128 3.9.1 Entity Relationship Diagram... 135 3.10 Perancangan Menu... 136 3.11 Perancangan Layar... 139 3.11.1 Perancangan Layar Halaman Utama... 139 3.11.2 Perancangan Layar Halaman Daftar Berita... 140 3.11.3 Perancangan Layar Halaman Detail Berita... 141 3.11.4 Perancangan Layar Halaman Kategori Tempat... 142 3.11.5 Perancangan Layar Halaman Profil Tempat... 143 3.11.6 Perancangan Layar Halaman Galeri Gambar... 144 3.11.7 Perancangan Layar Halaman Galeri Video... 145 3.11.8 Perancangan Layar Halaman Hasil Pencarian Tempat... 146 3.11.9 Perancangan Layar Halaman Hasil Pencarian Berita... 147 3.11.10 Perancangan Layar Halaman Login Admin... 148 3.11.11 Perancangan Layar Halaman Utama Admin... 149 3.11.12 Perancangan Layar Halaman Berita Admin... 150 3.11.13 Perancangan Layar Halaman Tempat Admin... 151 3.11.14 Perancangan Layar Halaman Galeri Admin... 152 3.11.15 Perancangan Layar Halaman Daftar Pengguna... 153 BAB 4 IMPLEMENTASI DAN EVALUASI... 154 4.1 Implementasi Sistem... 154 4.2.1 Spesifikasi Sistem... 154
xii 4.2.2 Petunjuk Melakukan Instalasi... 156 4.2.3 Kebutuhan Jaringan... 157 4.2.4 Kebutuhan Sumber Daya Manusia... 158 4.2.5 Petunjuk Pengoperasian... 159 4.1.5.1 Halaman Home... 160 4.1.5.2 User Panel... 162 4.1.5.3 Halaman List News... 164 4.1.5.4 Halaman News Detail... 166 4.1.5.5 Halaman Place Category... 168 4.1.5.6 Halaman Place Profile... 169 4.1.5.7 Halaman Image Gallery... 174 4.1.5.8 Halaman Video Gallery... 175 4.1.5.9 Halaman Place Search... 176 4.1.5.10 Halaman News Search... 177 4.1.5.11 Halaman Admin Login... 178 4.1.5.12 Halaman Panel Admin Home... 179 4.1.5.13 Halaman Panel Admin News... 180 4.1.5.14 Halaman Panel Admin Add News... 181 4.1.5.15 Halaman Panel Admin Edit News... 182 4.1.5.16 Halaman Panel Admin Place... 183 4.1.5.17 Halaman Panel Admin Add Place... 186 4.1.5.18 Halaman Panel Admin Edit Place... 188 4.1.5.19 Halaman Panel Admin Gallery... 190
xiii 4.1.5.20 Halaman Panel Admin List User... 191 4.2 Evaluasi Sistem... 191 4.2.1 Kuesioner... 192 4.2.2 Evaluasi Sudut Pandang IMK (Eight Golden Rules)... 201 BAB 5 SIMPULAN DAN SARAN... 209 5.1 Simpulan... 209 5.2 Saran... 210 DAFTAR PUSTAKA... 211 DAFTAR RIWAYAT HIDUP... 213 DAFTAR LAMPIRAN... 1
xiv DAFTAR TABEL Tabel 3.1 Deskripsi use case login... 96 Tabel 3.2 Deskripsi use case login dengan akun Facebook... 96 Tabel 3.3 Deskripsi use case registrasi anggota... 97 Tabel 3.4 Deskripsi use case follow tempat... 98 Tabel 3.5 Deskripsi use case unfollow tempat... 98 Tabel 3.6 Deskripsi use case review tempat... 99 Tabel 3.7 Deskripsi use case validasi tempat... 99 Tabel 3.8 Deskripsi use case tambah berita... 100 Tabel 3.9 Deskripsi use case ubah berita... 100 Tabel 3.10 Deskripsi use case hapus berita... 100 Tabel 3.11 Deskripsi use case cari berita... 101 Tabel 3.12 Deskripsi use case tambah komentar berita... 101 Tabel 3.13 Deskripsi use case tambah tempat... 102 Tabel 3.14 Deskripsi use case ubah tempat... 102 Tabel 3.15 Deskripsi use case hapus tempat... 103 Tabel 3.16 Deskripsi use case tambah event... 103 Tabel 3.17 Deskripsi use case ubah event... 103 Tabel 3.18 Deskripsi use case hapus event... 104 Tabel 3.19 Deskripsi use case cari tempat... 104 Tabel 3.20 Deskripsi use case get direction... 105 Tabel 3.21 Tabel User... 128 Tabel 3.22 Tabel LogIPLogin... 128
xv Tabel 3.23 Tabel Activation... 129 Tabel 3.24 Tabel Place... 129 Tabel 3.25 Tabel Kategori... 130 Tabel 3.26 Tabel SubKategori... 130 Tabel 3.27 Tabel PlaceEvent... 131 Tabel 3.28 Tabel ReviewPlace... 131 Tabel 3.29 Tabel FollowPlace... 132 Tabel 3.30 Tabel News... 132 Tabel 3.31 Tabel CommentNews... 133 Tabel 3.32 Tabel ImgCategory... 133 Tabel 3.32 Tabel GalleryImage... 133 Tabel 3.33 Tabel GalleryVideo... 134 Table 4.1 Spesifikasi kebutuhan perangkat lunak untuk pengembangan sistem... 155 Table 4.2 Spesifikasi kebutuhan perangkat keras untuk pengembangan sistem... 155 Table 4.3 Spesifikasi kebutuhan perangkat lunak untuk penggunaan sistem... 155 Table 4.4 Spesifikasi kebutuhan perangkat keras untuk penggunaan sistem... 155
xvi DAFTAR GAMBAR Gambar 2.1 Model software life-cycle (Turban, Rainer, Potter, 2001, p477)... 13 Gambar 2.2 Model prototyping (Pressman, p84)... 16 Gambar 2.3 Hubungan komponen basis data (Connolly, 2002)... 19 Gambar 2.4 Deskripsi konsep basis data (Bimo Sunarfrihantono, ST, 2002, p66)... 21 Gambar 2.5 E-mail sebagai salah satu bentuk aplikasi berbasis web... 38 Gambar 2.6 Komponen aplikasi berbasis web... 41 Gambar 2.7 Aktor dan Use Case pada use case diagram... 45 Gambar 2.8 Contoh uses... 46 Gambar 2.9 Contoh extends... 46 Gambar 2.10 Beberapa bentuk penyajian diagram class... 47 Gambar 2.11 Contoh hubungan antar-class dengan berbagai jenis multiplicity... 48 Gambar 2.12 Contoh generalisasi... 49 Gambar 2.13 Hubungan agregasi di antara dua class... 49 Gambar 2.14 Hubungan komposisi di antara dua class... 50 Gambar 2.15 Penggunaan operator dalam class... 50 Gambar 2.16 Contoh diagram sequence... 51 Gambar 3.1 Bagan susunan organisasi Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta... 71 Gambar 3.2 Bagan susunan organisasi UPT Pusat Pengembangan dan Pelayanan Informasi Provinsi DKI Jakarta... 72 Gambar 3.3 Hasil kuesioner pertanyaan ke-1... 81 Gambar 3.4 Hasil kuesioner pertanyaan ke-2... 82
xvii Gambar 3.5 Hasil kuesioner pertanyaan ke-3... 83 Gambar 3.6 Hasil kuesioner pertanyaan ke-4... 84 Gambar 3.7 Hasil kuesioner pertanyaan ke-5... 85 Gambar 3.8 Hasil kuesioner pertanyaan ke-6... 86 Gambar 3.9 Hasil kuesioner pertanyaan ke-7... 87 Gambar 3.10 Hasil kuesioner pertanyaan ke-8... 88 Gambar 3.11 Hasil kuesioner pertanyaan ke-9... 89 Gambar 3.12 Hasil kuesioner pertanyaan ke-10... 90 Gambar 3.13 Hasil kuesioner pertanyaan ke-11... 91 Gambar 3.14 Model use case sistem yang dirancang... 94 Gambar 3.15 Model diagram class sistem yang dirancang... 106 Gambar 3.16 Diagram sequence registrasi pengguna... 108 Gambar 3.17 Diagram sequence login... 109 Gambar 3.18 Diagram sequence login dengan akun Facebook... 110 Gambar 3.19 Diagram sequence pencarian tempat... 111 Gambar 3.20 Diagram sequence mencari berita... 112 Gambar 3.21 Diagram sequence menulis komentar pada berita... 113 Gambar 3.22 Diagram sequence menulis berita... 114 Gambar 3.23 Diagram sequence mengubah berita... 115 Gambar 3.24 Diagram sequence menghapus berita... 116 Gambar 3.25 Diagram sequence get direction... 117 Gambar 3.26 Diagram sequence review tempat... 118 Gambar 3.27 Diagram sequence follow tempat... 119 Gambar 3.28 Diagram sequence unfollow tempat... 120
xviii Gambar 3.29 Diagram sequence menambah tempat... 121 Gambar 3.30 Diagram sequence mengubah tempat... 122 Gambar 3.31 Diagram sequence menghapus tempat... 123 Gambar 3.32 Diagram sequence menambah event... 124 Gambar 3.33 Diagram sequence mengubah event... 125 Gambar 3.34 Diagram sequence menghapus event... 126 Gambar 3.35 Diagram sequence validasi tempat... 127 Gambar 3.36 Entity relationship diagram... 135 Gambar 3.37 Menu aplikasi pengguna... 137 Gambar 3.38 Menu aplikasi admin... 138 Gambar 3.39 Perancangan layar halaman utama... 139 Gambar 3.40 Perancangan layar halaman daftar berita... 140 Gambar 3.41 Perancangan layar halaman detail berita... 141 Gambar 3.42 Perancangan layar halaman kategori tempat... 142 Gambar 3.43 Perancangan layar halaman profil tempat... 143 Gambar 3.44 Perancangan layar halaman profil tempat... 144 Gambar 3.45 Perancangan layar halaman galeri video... 145 Gambar 3.46 Perancangan layar halaman hasil pencarian tempat... 146 Gambar 3.47 Perancangan layar halaman hasil pencarian berita... 147 Gambar 3.48 Perancangan layar halaman login admin... 148 Gambar 3.49 Perancangan layar halaman utama admin... 149 Gambar 3.50 Perancangan layar halaman berita admin... 150 Gambar 3.51 Perancangan layar halaman tempat admin... 151 Gambar 3.52 Perancangan layar halaman galeri admin... 152
xix Gambar 3.53 Perancangan layar halaman daftar pengguna... 153 Gambar 4.1 Kebutuhan jaringan situs Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta... 157 Gambar 4.2 Halaman home... 160 Gambar 4.3 Tampilan user panel sebelum login... 162 Gambar 4.4 Tampilan user panel setelah login... 163 Gambar 4.5 Halaman news... 164 Gambar 4.6 Halaman news detail... 166 Gambar 4.7 Halaman place category... 168 Gambar 4.8 Halaman place profile... 169 Gambar 4.9 Tab info... 170 Gambar 4.10 Tab review... 171 Gambar 4.11 Tab event... 172 Gambar 4.12 Tab map... 173 Gambar 4.13 Tab gallery... 174 Gambar 4.14 Halaman image gallery... 174 Gambar 4.15 Halaman video gallery... 175 Gambar 4.16 Halaman place search... 176 Gambar 4.17 Halaman news search... 177 Gambar 4.18 Halaman admin login... 178 Gambar 4.19 Halaman panel admin home... 179 Gambar 4.20 Halaman panel admin news... 180 Gambar 4.21 Halaman panel admin add news... 181 Gambar 4.22 Halaman panel admin edit news... 182
xx Gambar 4.23 Halaman panel admin place... 183 Gambar 4.24 Halaman panel admin add place... 186 Gambar 4.25 Halaman panel admin edit place... 188 Gambar 4.26 Halaman panel admin gallery... 190 Gambar 4.27 Halaman panel admin list user... 191 Gambar 4.28 Hasil kuesioner pertanyaan ke-1... 192 Gambar 4.29 Hasil kuesioner pertanyaan ke-2... 193 Gambar 4.30 Hasil kuesioner pertanyaan ke-3... 194 Gambar 4.31 Hasil kuesioner pertanyaan ke-4... 195 Gambar 4.32 Hasil kuesioner pertanyaan ke-5... 196 Gambar 4.33 Hasil kuesioner pertanyaan ke-6... 197 Gambar 4.34 Hasil kuesioner pertanyaan ke-7... 198 Gambar 4.35 Hasil kuesioner pertanyaan ke-8... 199 Gambar 4.36 Hasil kuesioner pertanyaan ke-9... 200 Gambar 4.37 Tampilan halaman list news... 201 Gambar 4.38 Tampilan halaman news detail... 202 Gambar 4.39 Shortcut pada halaman home... 203 Gambar 4.40 Tampilan loading pada sidebar... 204 Gambar 4.41 Tampilan pesan setelah melakukan review... 204 Gambar 4.42 Tampilan pesan kesalahan pada review... 205 Gambar 4.43 Fitur undo pada halaman panel admin add news... 206 Gambar 4.44 Halaman admin untuk menambah berita baru... 207 Gambar 4.45 Halaman pencarian tempat... 208