ANALISIS DAN PERANCANGAN SITUS DINAS PARIWISATA DAN KEBUDAYAAN PROVINSI DKI JAKARTA DENGAN MENGGABUNGKAN KONSEP WEB 2.0 DAN MASHUP

(1)

i

ANALISIS DAN PERANCANGAN SITUS DINAS PARIWISATA

DAN KEBUDAYAAN PROVI NSI DKI JAKARTA DENGAN

MENGGABUNGKAN KONSEP WEB 2.0 DAN MASHUP

S KRIPS I

Oleh:

DIMAS EKO ADITYO

1100041733

KONRAD BANGUN PRATOMO

1100059125

RHEZANDRA PRIATAMA

1100053462

Universitas Bina Nusantara

Jakarta

(2)

ii

ANALISIS DAN PERANCANGAN SITUS DINAS PARIWISATA

DAN KEBUDAYAAN PROVI NSI DKI JAKARTA DENGAN

MENGGABUNGKAN KONSEP WEB 2.0 DAN MASHUP

S KRIPS I

diajukan sebagai salah satu syarat untuk gelar kesarjanaan pada

Jurusan Teknik Informatika Jenjang Pendidikan S trata-1

Oleh:

DIMAS EKO ADITYO

1100041733

KONRAD BANGUN PRATOMO

1100059125

RHEZANDRA PRIATAMA

1100053462

Universitas Bina Nusantara

Jakarta

(3)

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 :

ANALISIS DAN PERANCANGAN SITUS DINAS PARIWISATA DAN KEBUDAYAAN PROVINSI DKI JAKARTA DENGAN MENGGABUNGKAN KONSEP WEB 2.0 DAN MASHUP

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.

(4)

v

PRAKATA

Puji dan syukur kami ucapkan kepada Tuhan Yang M aha 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 .Tselaku dosen pembimbing skripsi.

• Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta yang telah memberikan kesempatan kepada penulis untuk melakukan penelitian.

(5)

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

(6)

vii DAFTAR IS I Judul Luar... i Judul Dalam...ii Persetujuan ...iii Abstrak ... iv PRAKATA ... v

DAFTAR ISI ...vii

DAFTAR TABEL ...xviiv

DAFTARGAM BAR ...xvii

BAB 1 PENDAHULUAN... 1

1.1 Latar Belakang ... 1

1.2 Ruang Lingkup ... 2

1.3 Tujuan dan M anfaat... 4

1.4 M etodologi 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

(7)

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. M ultimedia ... 22

2.3.1. Pengertian M ultimedia ... 22

2.3.2. Alasan Pentingnya M ultimedia ... 22

2.3.3. Objek Dalam M ultimedia... 23

2.4 Interaksi M anusia dan Komputer ... 29

2.4.1 Pengertian Interaksi M anusia 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 UM L (Unified Modelling Language) ... 42

2.7.1 Pengertian UM L (Unified M odeling Language) ... 43

(8)

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 XM L (AJAX) ... 53

2.9 Konsep Pengembangan Situs ... 55

2.9.1 Web 2.0 ... 55

2.9.2 M ashup... 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 M aps ... 62

2.10 Desain Web ... 63

2.9.1 HTM L5 ... 63

2.9.2 CSS3... 64

2.9.3 JQuery ... 65

2.11 Teknik Penyerangan Web ... 66

2.10.1 SQL Injection ... 66

(9)

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 M isi 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 M asalah pada Situs Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta... 92

3.8 Usulan Pemecahan M asalah ... 93

3.9 Perancangan Aplikasi yang Diusulkan... 94

3.9.1 M odel Use Case Sistem yang Dirancang ... 94

3.9.2 Deskripsi Use Case Sistem yang Dirancang ... 96

3.9.3 M odel Diagram Class Sistem yang Dirancang ... 105

(10)

xi

3.9 Perancangan Basis Data ... 128

3.9.1 Entity Relationship Diagram... 135

3.10 Perancangan M enu ... 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 IM PLEM ENTASI DAN EVALUASI ... 154

4.1 Implementasi Sistem ... 154

(11)

xii

4.2.2 Petunjuk M elakukan Instalasi ... 156

4.2.3 Kebutuhan Jaringan... 157

4.2.4 Kebutuhan Sumber Daya M anusia ... 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

(12)

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 IM K (Eight Golden Rules)... 201

BAB 5 SIM PULAN DAN SARAN ... 209

5.1 Simpulan... 209

5.2 Saran ... 210

DAFTAR PUSTAKA... 211

DAFTAR RIWAYAT HIDUP ... 213

(13)

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

(14)

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

(15)

xvi

DAFTAR GAMBAR

Gambar 2.1 M odel software life-cycle (Turban, Rainer, Potter, 2001, p477)... 13

Gambar 2.2 M odel 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

(16)

xvii

Gambar 3.14 M odel use case sistem yang dirancang ... 94

Gambar 3.15 M odel 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

(17)

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 M enu aplikasi pengguna... 137

Gambar 3.38 M enu 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

(18)

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

(19)

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.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