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

Transkripsi

1 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 KONRAD BANGUN PRATOMO RHEZANDRA PRIATAMA Universitas Bina Nusantara Jakarta (2011)

2 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 KONRAD BANGUN PRATOMO RHEZANDRA PRIATAMA Universitas Bina Nusantara Jakarta (2011)

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 : 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 Konrad Bangun Pratomo Rhezandra Priatama Disetujui oleh Pembimbing Kami setuju Tugas Akhir tersebut diajukan untuk Ujian Pendadaran Bayu Kanigoro, S.Kom., M.T. Pembimbing 29 Januari 2011

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

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 Penulis

6 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 Latar Belakang Ruang Lingkup Tujuan dan Manfaat Metodologi Penelitian Sistematika Penulisan... 6 BAB 2 LANDASAN TEORI Perangkat Lunak Pengertian Rekayasa Perangkat Lunak Karakteristik Perangkat Lunak Tahap Perancangan Perangkat Lunak Metodologi yang Digunakan... 13

7 viii 2.2. Sistem Basis Data Pengertian Sistem Basis Data Komponen Basis Data MySQL Basis Data, Tabel, Baris, dan Kolom Multimedia Pengertian Multimedia Alasan Pentingnya Multimedia Objek Dalam Multimedia Interaksi Manusia dan Komputer Pengertian Interaksi Manusia dan Komputer Delapan Aturan Emas Internet Pengertian Internet Istilah dalam Internet Aplikasi Berbasis Web Fungsi Umum Aplikasi Berbasis Web Keuntungan dan Tantangan Aplikasi Berbasis Web Arsitektur Aplikasi Berbasis Web UML (Unified Modelling Language) Pengertian UML (Unified Modeling Language) Diagram-diagram UML... 44

8 ix Use Case Diagram Class Diagram Sequence Bahasa Pemrograman Web PHP JavaScript Asynchronous JavaScript and XML (AJAX) Konsep Pengembangan Situs Web Mashup Application Programming Interface (API) Facebook Application Platform (API Facebook) API Yahoo! Weather API Twitter API Google Maps Desain Web HTML CSS JQuery Teknik Penyerangan Web SQL Injection Cross Site Scripting (XSS)... 66

9 x BAB 3 ANALISIS DAN PERANCANGAN Latar Belakang Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta Struktur Organisasi Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta Struktur Organisasi Dasar Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta Struktur UPT Informasi Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta Personil dan Deksripsi Tugas Visi dan Misi Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta Strategi Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta Analisis Sistem yang Berjalan pada Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta Kuesioner Tujuan Kuesioner Hasil Analisis Kuesioner Analisis Masalah pada Situs Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta Usulan Pemecahan Masalah Perancangan Aplikasi yang Diusulkan Model Use Case Sistem yang Dirancang Deskripsi Use Case Sistem yang Dirancang Model Diagram Class Sistem yang Dirancang Model Diagram Sequence Sistem yang Dirancang

10 xi 3.9 Perancangan Basis Data Entity Relationship Diagram Perancangan Menu Perancangan Layar Perancangan Layar Halaman Utama Perancangan Layar Halaman Daftar Berita Perancangan Layar Halaman Detail Berita Perancangan Layar Halaman Kategori Tempat Perancangan Layar Halaman Profil Tempat Perancangan Layar Halaman Galeri Gambar Perancangan Layar Halaman Galeri Video Perancangan Layar Halaman Hasil Pencarian Tempat Perancangan Layar Halaman Hasil Pencarian Berita Perancangan Layar Halaman Login Admin Perancangan Layar Halaman Utama Admin Perancangan Layar Halaman Berita Admin Perancangan Layar Halaman Tempat Admin Perancangan Layar Halaman Galeri Admin Perancangan Layar Halaman Daftar Pengguna BAB 4 IMPLEMENTASI DAN EVALUASI Implementasi Sistem Spesifikasi Sistem

11 xii Petunjuk Melakukan Instalasi Kebutuhan Jaringan Kebutuhan Sumber Daya Manusia Petunjuk Pengoperasian Halaman Home User Panel Halaman List News Halaman News Detail Halaman Place Category Halaman Place Profile Halaman Image Gallery Halaman Video Gallery Halaman Place Search Halaman News Search Halaman Admin Login Halaman Panel Admin Home Halaman Panel Admin News Halaman Panel Admin Add News Halaman Panel Admin Edit News Halaman Panel Admin Place Halaman Panel Admin Add Place Halaman Panel Admin Edit Place Halaman Panel Admin Gallery

12 xiii Halaman Panel Admin List User Evaluasi Sistem Kuesioner Evaluasi Sudut Pandang IMK (Eight Golden Rules) BAB 5 SIMPULAN DAN SARAN Simpulan Saran DAFTAR PUSTAKA DAFTAR RIWAYAT HIDUP DAFTAR LAMPIRAN... 1

13 xiv DAFTAR TABEL Tabel 3.1 Deskripsi use case login Tabel 3.2 Deskripsi use case login dengan akun Facebook Tabel 3.3 Deskripsi use case registrasi anggota Tabel 3.4 Deskripsi use case follow tempat Tabel 3.5 Deskripsi use case unfollow tempat Tabel 3.6 Deskripsi use case review tempat Tabel 3.7 Deskripsi use case validasi tempat Tabel 3.8 Deskripsi use case tambah berita Tabel 3.9 Deskripsi use case ubah berita Tabel 3.10 Deskripsi use case hapus berita Tabel 3.11 Deskripsi use case cari berita Tabel 3.12 Deskripsi use case tambah komentar berita Tabel 3.13 Deskripsi use case tambah tempat Tabel 3.14 Deskripsi use case ubah tempat Tabel 3.15 Deskripsi use case hapus tempat Tabel 3.16 Deskripsi use case tambah event Tabel 3.17 Deskripsi use case ubah event Tabel 3.18 Deskripsi use case hapus event Tabel 3.19 Deskripsi use case cari tempat Tabel 3.20 Deskripsi use case get direction Tabel 3.21 Tabel User Tabel 3.22 Tabel LogIPLogin

14 xv Tabel 3.23 Tabel Activation Tabel 3.24 Tabel Place Tabel 3.25 Tabel Kategori Tabel 3.26 Tabel SubKategori Tabel 3.27 Tabel PlaceEvent Tabel 3.28 Tabel ReviewPlace Tabel 3.29 Tabel FollowPlace Tabel 3.30 Tabel News Tabel 3.31 Tabel CommentNews Tabel 3.32 Tabel ImgCategory Tabel 3.32 Tabel GalleryImage Tabel 3.33 Tabel GalleryVideo Table 4.1 Spesifikasi kebutuhan perangkat lunak untuk pengembangan sistem Table 4.2 Spesifikasi kebutuhan perangkat keras untuk pengembangan sistem Table 4.3 Spesifikasi kebutuhan perangkat lunak untuk penggunaan sistem Table 4.4 Spesifikasi kebutuhan perangkat keras untuk penggunaan sistem

15 xvi DAFTAR GAMBAR Gambar 2.1 Model software life-cycle (Turban, Rainer, Potter, 2001, p477) Gambar 2.2 Model prototyping (Pressman, p84) Gambar 2.3 Hubungan komponen basis data (Connolly, 2002) Gambar 2.4 Deskripsi konsep basis data (Bimo Sunarfrihantono, ST, 2002, p66) Gambar 2.5 sebagai salah satu bentuk aplikasi berbasis web Gambar 2.6 Komponen aplikasi berbasis web Gambar 2.7 Aktor dan Use Case pada use case diagram Gambar 2.8 Contoh uses Gambar 2.9 Contoh extends Gambar 2.10 Beberapa bentuk penyajian diagram class Gambar 2.11 Contoh hubungan antar-class dengan berbagai jenis multiplicity Gambar 2.12 Contoh generalisasi Gambar 2.13 Hubungan agregasi di antara dua class Gambar 2.14 Hubungan komposisi di antara dua class Gambar 2.15 Penggunaan operator dalam class Gambar 2.16 Contoh diagram sequence Gambar 3.1 Bagan susunan organisasi Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta Gambar 3.2 Bagan susunan organisasi UPT Pusat Pengembangan dan Pelayanan Informasi Provinsi DKI Jakarta Gambar 3.3 Hasil kuesioner pertanyaan ke Gambar 3.4 Hasil kuesioner pertanyaan ke

16 xvii Gambar 3.5 Hasil kuesioner pertanyaan ke Gambar 3.6 Hasil kuesioner pertanyaan ke Gambar 3.7 Hasil kuesioner pertanyaan ke Gambar 3.8 Hasil kuesioner pertanyaan ke Gambar 3.9 Hasil kuesioner pertanyaan ke Gambar 3.10 Hasil kuesioner pertanyaan ke Gambar 3.11 Hasil kuesioner pertanyaan ke Gambar 3.12 Hasil kuesioner pertanyaan ke Gambar 3.13 Hasil kuesioner pertanyaan ke Gambar 3.14 Model use case sistem yang dirancang Gambar 3.15 Model diagram class sistem yang dirancang Gambar 3.16 Diagram sequence registrasi pengguna Gambar 3.17 Diagram sequence login Gambar 3.18 Diagram sequence login dengan akun Facebook Gambar 3.19 Diagram sequence pencarian tempat Gambar 3.20 Diagram sequence mencari berita Gambar 3.21 Diagram sequence menulis komentar pada berita Gambar 3.22 Diagram sequence menulis berita Gambar 3.23 Diagram sequence mengubah berita Gambar 3.24 Diagram sequence menghapus berita Gambar 3.25 Diagram sequence get direction Gambar 3.26 Diagram sequence review tempat Gambar 3.27 Diagram sequence follow tempat Gambar 3.28 Diagram sequence unfollow tempat

17 xviii Gambar 3.29 Diagram sequence menambah tempat Gambar 3.30 Diagram sequence mengubah tempat Gambar 3.31 Diagram sequence menghapus tempat Gambar 3.32 Diagram sequence menambah event Gambar 3.33 Diagram sequence mengubah event Gambar 3.34 Diagram sequence menghapus event Gambar 3.35 Diagram sequence validasi tempat Gambar 3.36 Entity relationship diagram Gambar 3.37 Menu aplikasi pengguna Gambar 3.38 Menu aplikasi admin Gambar 3.39 Perancangan layar halaman utama Gambar 3.40 Perancangan layar halaman daftar berita Gambar 3.41 Perancangan layar halaman detail berita Gambar 3.42 Perancangan layar halaman kategori tempat Gambar 3.43 Perancangan layar halaman profil tempat Gambar 3.44 Perancangan layar halaman profil tempat Gambar 3.45 Perancangan layar halaman galeri video Gambar 3.46 Perancangan layar halaman hasil pencarian tempat Gambar 3.47 Perancangan layar halaman hasil pencarian berita Gambar 3.48 Perancangan layar halaman login admin Gambar 3.49 Perancangan layar halaman utama admin Gambar 3.50 Perancangan layar halaman berita admin Gambar 3.51 Perancangan layar halaman tempat admin Gambar 3.52 Perancangan layar halaman galeri admin

18 xix Gambar 3.53 Perancangan layar halaman daftar pengguna Gambar 4.1 Kebutuhan jaringan situs Dinas Pariwisata dan Kebudayaan Provinsi DKI Jakarta Gambar 4.2 Halaman home Gambar 4.3 Tampilan user panel sebelum login Gambar 4.4 Tampilan user panel setelah login Gambar 4.5 Halaman news Gambar 4.6 Halaman news detail Gambar 4.7 Halaman place category Gambar 4.8 Halaman place profile Gambar 4.9 Tab info Gambar 4.10 Tab review Gambar 4.11 Tab event Gambar 4.12 Tab map Gambar 4.13 Tab gallery Gambar 4.14 Halaman image gallery Gambar 4.15 Halaman video gallery Gambar 4.16 Halaman place search Gambar 4.17 Halaman news search Gambar 4.18 Halaman admin login Gambar 4.19 Halaman panel admin home Gambar 4.20 Halaman panel admin news Gambar 4.21 Halaman panel admin add news Gambar 4.22 Halaman panel admin edit news

19 xx Gambar 4.23 Halaman panel admin place Gambar 4.24 Halaman panel admin add place Gambar 4.25 Halaman panel admin edit place Gambar 4.26 Halaman panel admin gallery Gambar 4.27 Halaman panel admin list user Gambar 4.28 Hasil kuesioner pertanyaan ke Gambar 4.29 Hasil kuesioner pertanyaan ke Gambar 4.30 Hasil kuesioner pertanyaan ke Gambar 4.31 Hasil kuesioner pertanyaan ke Gambar 4.32 Hasil kuesioner pertanyaan ke Gambar 4.33 Hasil kuesioner pertanyaan ke Gambar 4.34 Hasil kuesioner pertanyaan ke Gambar 4.35 Hasil kuesioner pertanyaan ke Gambar 4.36 Hasil kuesioner pertanyaan ke Gambar 4.37 Tampilan halaman list news Gambar 4.38 Tampilan halaman news detail Gambar 4.39 Shortcut pada halaman home Gambar 4.40 Tampilan loading pada sidebar Gambar 4.41 Tampilan pesan setelah melakukan review Gambar 4.42 Tampilan pesan kesalahan pada review Gambar 4.43 Fitur undo pada halaman panel admin add news Gambar 4.44 Halaman admin untuk menambah berita baru Gambar 4.45 Halaman pencarian tempat