ANALISIS DAN PERANCANGAN APLIKASI RSS AGGREGATOR BERBASIS WEB 2.0

Transkripsi

1 UNIVERSITAS BINA NUSANTARA Jurusan Teknik Informatika Skripsi Sarjana Komputer Semester Genap 2006/2007 ANALISIS DAN PERANCANGAN APLIKASI RSS AGGREGATOR BERBASIS WEB 2.0 Budiyono Salim Gunawan Wibisono Sebastian Aldo Abstrak Tujuan dari penulisan skripsi ini adalah menganalisis masalah-masalah yang dihadapi oleh pengguna Internet Indonesia terhadap kebutuhan akan berita sehingga menghasilkan sebuah aplikasi RSS Aggregator dengan teknologi berbasis Web 2.0. agar dapat digunakan oleh pengguna Internet sebagai salah satu aplikasi penampung konten, artikel, atau berita dari sumber penyedia RSS seperti situs web berita atau sejenisnya secara efisien dalam hal biaya dan waktu, dan juga lebih personal bagi pengguna aplikasi. Metode penelitian yang digunakan antara lain metode analisis, studi kepustakaan, dan perancangan. Hasil yang dicapai adalah tersedianya sebuah aplikasi berbasis web yang yang efisien, hemat waktu dan biaya, serta terfokus pada pengguna dalam hal customization. Kesimpulannya, secara keseluruhan aplikasi ini mampu menjawab kebutuhan pengguna Internet akan kebutuhan berita yang beragam. Kata kunci : RSS, Aggregator, web 2.0 iv

2 KATA PENGANTAR Segala hormat, puji dan syukur kepada Tuhan Yang Maha Esa atas dan bantuan- Nya kepada penulis, sehingga dapat menyelesaikan penulisan dan penelitian skripsi yang berjudul ANALISIS DAN PERANCANGAN APLIKASI RSS AGGREGATOR BERBASIS WEB 2.0 sebagai syarat menyelesaikan jenjang studi Strata-1 di Univesitas Bina Nusantara, Jakarta. Dalam menyusun skripsi ini, banyak mendapat dukungan dari berbagai pihak. Oleh karena itu, pada kesempatan ini tim penulis ingin menyampaikan terima kasih yang sebesar-besarnya kepada : 1. Bapak Prof. Dr. Gerardus Polis, M.App.Sc., selaku rektor Universitas Bina Nusantara, Jakarta. 2. Bapak Ir. Sablin Yusuf, M.Sc., M.comp.Sc., selaku Dekan Fakultas Ilmu Komputer Universitas Bina Nusantara. 3. Bapak H.M. Subekti, BE, M.Sc., selaku Kepala Jurusan Teknik Informatika Universitas Bina Nusantara. 4. Bapak Fendy, S.Kom, MM selaku dosen pembimbing yang telah banyak memberikan bimbingan dalam penulisan skripsi dari awal hingga akhir. 5. Sanny Gaddafi S.Si, S.Kom, MM sebagai founder FUPEI.com yang telah menyediakan wadah untuk analisis skripsi kami 6. Orang tua dan saudara yang memberikan dukungan moral dan material. 7. Teman-teman yang telah memberikan dukungan, semangat, dan doa. v

3 Penulis menyadari masih banyak kekurangan dalam skripsi ini, oleh karena itu, dengan kerendahan hati, penulis menerima semua kritik dan saran yang membangun. Akhir kata, penulis berharap semoga skripsi ini dapat bermanfaat bagi semua pihak yang memerlukan. Jakarta, 22 Juni 2007 Tim Penulis vi

4 DAFTAR ISI Halaman Judul Luar Halaman Judul Dalam Halaman Persetujuan Hard cover Halaman Pernyataan Dewan Penguji Abstrak Kata Pengantar Daftar Isi Daftar Tabel Daftar Gambar i ii iii iv vii viii x xv xix BAB 1 PENDAHULUAN 1.1 Latar Belakang Ruang Lingkup Tujuan dan Manfaat Metodologi Sistematika Penulisan 5 BAB 2 LANDASAN TEORI 2.1 Internet Sejarah Internet Pengertian Internet 7 vii

5 2.2 Pengertian TCP/IP World Wide Web (WWW) Hypertext Transfer Protocol (HTTP) WEB AJAX Prinsip-Prinsip AJAX Perbandingan Aplikasi Web Tradisional dengan Aplikasi 17 AJAX 2.7 XHTML Perbedaan dengan HTML Versi-Versi XHTML PHP Sejarah PHP Kelebihan-Kelebihan PHP RSS Sejarah RSS Atom Aggregator OPML Sistem Informasi Pengertian Sistem Pengertian Informasi Pengertian Sistem Informasi 27 viii

6 2.13 System Development Life Cycle (SDLC) Metode Pengumpulan Data Unified Modelling Language (UML) Use Case Diagram Activity Diagram Class Diagram Interaction Diagram Sequence Diagram Basisdata Database Management System (DBMS) Komponen Lingkungan Database Management System 51 (DBMS) 2.17 IMK (Interaksi Manusia dan Komputer) 53 BAB 3 ANALISIS DAN PERANCANGAN SISTEM 3.1 Analisis Permasalahan Permasalahan-Permasalahan Yang Dihadapi Usulan Pemecahan Masalah Analisis dan Perancangan Aplikasi RSS Aggregator Use Case Diagram Class Diagram Behaviour Diagram Detail Activity Diagram 72 ix

7 State Machine Diagram Use Case Diagram Sequence Diagram Perancangan Basis Data Rancangan Layar Rancangan Layar Sebelum Login Rancangan Layar Daftar/Simpan Halaman Rancangan Layar Tambah Konten Rancangan Layar Preview RSS Rancangan Layar Cari Modul Rancangan Layar Layar Opsi Rancangan Layar Tanpa Kontrol pada Modul Rancangan Layar Login Rancangan Layar Lupa Kata Sandi Rancangan Layar Detil Artikel Rancangan Layar Situs di dalam Pembaca Internal Rancangan Layar Setelah Login Rancangan Layar Hapus Halaman Rancangan Layar Customize Modul Rancangan Layar Edit Catatan Rancangan Layar Tambah Bookmark Rancangan Layar Ubah Profil Rancangan Layar Penjelasan RSS 134 x

8 Rancangan Layar Tambah Tab Rancangan Layar Tentang Kami Rancangan Layar Hubungi Kami Rancangan Layar Kebijakan Privasi Rancangan Layar Admin Rancangan Layar Manajemen Modul Rancangan Layar Ubah Modul Rancangan Layar Cari Modul Rancangan Layar Direktori Rancangan Layar Ubah Direktori Rancangan Layar Tambah Sub-direktori Rancangan Layar Ubah Sub-direktori Rancangan Layar Hapus Sub-direktori Rancangan Layar Pindah Sub-direktori Rancangan Layar Manajemen Pengguna Rancangan Layar Tambah Pengguna Rancangan Layar Ubah Pengguna Rancangan Layar Cari Pengguna Rancangan Layar Manajemen Tab Rancangan Layar Tambah Tab Rancangan Layar Ubah Tab Rancangan Layar Hapus Tab Rancangan Layar Konfigurasi 157 xi

9 BAB 4 IMPLEMENTASI DAN EVALUASI 4.1 Spesifikasi Sistem Spesifikasi Server Spesifikasi Client Prosedur Operasional Aplikasi Panduan Penggunaan untuk Pengguna Panduan Penggunaan untuk Administrator Rencana Implementasi Evaluasi / Analisis Hasil Percobaan Evaluasi Perbandingan File Evaluasi Terhadap Penggunaan Melalui Kuesioner Evaluasi Terhadap Teori IMK 214 BAB 5 KESIMPULAN DAN SARAN 5.1 Kesimpulan Saran 216 Daftar Pustaka 217 Riwayat Hidup 220 xii

10 DAFTAR TABEL Tabel 3.1 Daftar Pertanyaan dan Tujuan Pertanyaan Kuesioner 56 Tabel 3.2 Tabel ms_user 108 Tabel 3.3 Tabel ms_admin 108 Tabel 3.4 Tabel profile_user 109 Tabel 3.5 Tabel profile_detail_rss 109 Tabel 3.6 Tabel profile_detail_notes 110 Tabel 3.7 Tabel profile_detail_pages 111 Tabel 3.8 Tabel profile_detail_bookmark 111 Tabel 3.9 Tabel ms_rss 112 Tabel 3.10 Tabel ms_notes 113 Tabel 3.11 Tabel ms_pages 113 Tabel 3.12 Tabel ms_bookmark 113 Tabel 3.13 Tabel sys_config_default_rss 114 Tabel 3.14 Tabel sys_config_default_pages 114 Tabel 3.15 Tabel sys_default_general 115 Tabel 4.1 Hasil Kuesioner Pertanyaan Tabel 4.2 Hasil Kuesioner Pertanyaan Tabel 4.3 Hasil Kuesioner Pertanyaan Tabel 4.4 Hasil Kuesioner Pertanyaan Tabel 4.5 Hasil Kuesioner Pertanyaan Tabel 4.6 Hasil Kuesioner Pertanyaan xiii

11 Tabel 4.7 Hasil Kuesioner Pertanyaan Tabel 4.8 Hasil Kuesioner Pertanyaan Tabel 4.9 Hasil Kuesioner Pertanyaan Tabel 4.10 Hasil Kuesioner Pertanyaan Tabel 4.11 Hasil Kuesioner Pertanyaan Tabel 4.12 Hasil Kuesioner Pertanyaan Tabel 4.13 Hasil Kuesioner Pertanyaan Tabel 4.14 Hasil Kuesioner Pertanyaan Tabel 4.15 Hasil Kuesioner Pertanyaan Tabel 4.16 Hasil Kuesioner Pertanyaan Tabel 4.17 Hasil Kuesioner Pertanyaan Tabel 4.18 Hasil Kuesioner Pertanyaan Tabel 4.19 Hasil Kuesioner Pertanyaan xiv

12 DAFTAR GAMBAR Gambar 2.1 Konsep Pelayanan Internet 8 Gambar 2.2 Paket-paket protokol yang ada pada jaringan TCP/IP 10 Gambar 2.3 Gambar 2.4 Perbandingan Model Aplikasi Web Tradisional (kiri) dengan Aplikasi AJAX(kanan) Perbandingan model interaksi synchronous aplikasi web tradisional(atas) dengan model asynchrounous aplikasi AJAX(bawah) Gambar 2.5 System Development Life Cycle 28 Gambar 2.6 Contoh Aktor 35 Gambar 2.7 Contoh Notasi Communicate Association 35 Gambar 2.8 Contoh Notasi Include Relationship 36 Gambar 2.9 Contoh Notasi Extend Relationship 36 Gambar 2.10 Contoh Notasi Actor Generalization 37 Gambar 2.11 Contoh Notasi Use Case Generalization 37 Gambar 2.12 Contoh Use Case Diagram 38 Gambar 2.13 Contoh Activity Diagram 39 Gambar 2.14 Contoh Class 40 Gambar 2.15 Contoh Multiplicity 41 Gambar 2.16 Contoh Association dan Role 42 Gambar 2.17 Navigability 42 Gambar 2.18 Generalization 43 xv

13 Gambar 2.19 Contoh Class Diagram 44 Gambar 2.20 Contoh Object pada Sequence Diagram 45 Gambar 2.21 Contoh Boundary Object 45 Gambar 2.22 Contoh Entity Object 45 Gambar 2.23 Contoh Control Object 46 Gambar 2.24 Contoh Focus Of Control pada Sequence Diagram 47 Gambar 2.25 Contoh Condition pada Sequence Diagram 47 Gambar 2.26 Contoh Self-Call pada Sequence Diagram 48 Gambar 2.27 Contoh Return pada Sequence Diagram 48 Gambar 2.19 Contoh Sequence Diagram 49 Gambar 3.1 Demografi Koresponden Kuesioner pada FUPEI.COM 56 Gambar 3.2 Diagram Pie Hasil Kuesioner Pertanyaan 1 61 Gambar 3.3 Diagram Pie Hasil Kuesioner Pertanyaan 2 61 Gambar 3.4 Diagram Pie Hasil Kuesioner Pertanyaan 3 62 Gambar 3.5 Diagram Pie Hasil Kuesioner Pertanyaan 4 63 Gambar 3.6 Diagram Pie Hasil Kuesioner Pertanyaan 5 64 Gambar 3.7 Diagram Pie Hasil Kuesioner Pertanyaan 6 64 Gambar 3.8 Diagram Pie Hasil Kuesioner Pertanyaan 7 65 Gambar 3.9 Diagram Pie Hasil Kuesioner Pertanyaan 8 65 Gambar 3.10 Diagram Pie Hasil Kuesioner Pertanyaan 9 66 Gambar 3.11 Diagram Pie Hasil Kuesioner Pertanyaan Gambar 3.12 Diagram Pie Hasil Kuesioner Pertanyaan Gambar 3.13 Diagram Pie Hasil Kuesioner Pertanyaan xvi

14 Gambar 3.14 Diagram Pie Hasil Kuesioner Pertanyaan Gambar 3.15 Diagram Pie Hasil Kuesioner Pertanyaan Gambar 3.16 Class Diagram 70 Gambar 3.17 Activity Diagram untuk Login 71 Gambar 3.18 Activity Diagram untuk Logout 72 Gambar 3.19 Activity Diagram untuk Tambah Account 73 Gambar 3.20 Activity Diagram untuk Tampilkan Account 74 Gambar 3.21 Activity Diagram untuk Ubah Account 75 Gambar 3.22 Activity Diagram untuk Hapus Account 76 Gambar 3.23 Activity Diagram untuk Ubah Posisi 77 Gambar 3.24 Activity Diagram untuk untuk Tambah Halaman 78 Gambar 3.25 Activity Diagram untuk Tampilkan Halaman 79 Gambar 3.26 Activity Diagram untuk Ubah Halaman 80 Gambar 3.27 Activity Diagram untuk Hapus Halaman 81 Gambar 3.28 Activity Diagram untuk untuk Tambah Notes 82 Gambar 3.29 Activity Diagram untuk Tampilkan Notes 83 Gambar 3.30 Activity Diagram untuk Ubah Notes 84 Gambar 3.31 State Machine Diagram untuk Ubah Halaman Admin 85 Gambar 3.32 State Machine Diagram untuk Mengatur Halaman Admin 85 Gambar 3.33 State Machine Diagram untuk Hapus Halaman Admin 85 Gambar 3.34 State Machine Diagram untuk Mengatur Posisi Modul Admin 86 Gambar 3.35 State Machine Diagram untuk Tambah URL Admin 86 Gambar 3.36 State Machine Diagram untuk Persetujuan Modul Admin 86 xvii

15 Gambar 3.37 State Machine Diagram untuk Mengubah Modul Admin 87 Gambar 3.38 State Machine Diagram untuk Hapus Modul Admin 87 Gambar 3.39 State Machine Diagram untuk Tambah User Admin 87 Gambar 3.40 State Machine Diagram untuk Mengatur Konfigurasi Halaman Admin 88 Gambar 3.41 State Machine Diagram untuk Mengubah Halaman Admin 88 Gambar 3.42 State Machine Diagram untuk Tambah Halaman User 88 Gambar 3.43 State Machine Diagram untuk Hapus Halaman User 89 Gambar 3.44 State Machine Diagram untuk Konfigurasi Halaman User 89 Gambar 3.45 State Machine Diagram untuk Mengatur Posisi Modul User 89 Gambar 3.46 State Machine Diagram untuk Menambahkan URL User 90 Gambar 3.47 State Machine Diagram untuk Tambah Modul User 90 Gambar 3.48 State Machine Diagram Modul RSS 90 Gambar 3.49 State Machine Diagram Modul 91 Gambar 3.50 State Machine Diagram Halaman 91 Gambar 3.51 State Machine Diagram 91 Gambar 3.52 Use Case Diagram 92 Gambar 3.53 Sequence Diagram untuk Edit Modul Admin 93 Gambar 3.54 Sequence Diagram untuk Add RSS Admin 94 Gambar 3.55 Sequence Diagram untuk Hapus Modul Admin 94 Gambar 3.56 Sequence Diagram untuk Set Default Admin 95 Gambar 3.57 Sequence Diagram untuk Posisi Modul Admin 96 Gambar 3.58 Sequence Diagram untuk Setting Konfigurasi Admin 97 xviii

16 Gambar 3.59 Sequence Diagram untuk Tambah User Admin 98 Gambar 3.60 Sequence Diagram untuk Hapus Halaman Admin 99 Gambar 3.61 Sequence Diagram untuk Hapus Halaman Member 100 Gambar 3.62 Sequence Diagram untuk Add RSS Member 101 Gambar 3.63 Sequence Diagram untuk Edit Modul Member 102 Gambar 3.64 Sequence Diagram untuk Hapus Modul Member 103 Gambar 3.65 Sequence Diagram untuk Set Posisi Modul 104 Gambar 3.66 Sequence Diagram untuk Tambah Halaman Member 105 Gambar 3.67 Sequence Diagram untuk Tambah Modul Member 106 Gambar 3.68 Sequence Diagram untuk Ubah Halaman Member 107 Gambar 3.69 Diagram ERD Aplikasi 116 Gambar 3.70 Rancangan Layar Sebelum Login 117 Gambar 3.71 Rancangan Layar Daftar 118 Gambar 3.72 Rancangan Layar Tambah Konten 119 Gambar 3.73 Rancangan Layar Preview RSS 120 Gambar 3.74 Rancangan Layar Cari Modul 121 Gambar 3.75 Rancangan Layar Opsi 122 Gambar 3.76 Rancangan Layar tanpa Kontrol pada Modul 123 Gambar 3.77 Rancangan Layar Login 124 Gambar 3.78 Rancangan Layar Lupa Kata Sandi 125 Gambar 3.79 Rancangan Layar Detil Artikel 126 Gambar 3.80 Rancangan Layar Situs di dalam Pembaca Internal 127 Gambar 3.81 Rancangan Layar Setelah Login 128 xix

17 Gambar 3.82 Rancangan Layar Hapus Halaman 129 Gambar 3.83 Rancangan Layar Customize Modul 130 Gambar 3.84 Rancangan Layar Edit Catatan 131 Gambar 3.85 Rancangan Layar Tambah Bookmark 132 Gambar 3.86 Rancangan Layar Ubah Profil 133 Gambar 3.87 Rancangan Layar Penjelasan RSS 134 Gambar 3.88 Rancangan Layar Tambah Tab 135 Gambar 3.89 Rancangan Layar Temtamg Kami 136 Gambar 3.90 Rancangan Layar Hubungi Kami 137 Gambar 3.91 Rancangan Layar Kebijakan Privasi 138 Gambar 3.92 Rancangan Layar Admin 139 Gambar 3.93 Rancangan Layar Manajemen Modul 140 Gambar 3.94 Rancangan Layar Ubah Modul 141 Gambar 3.95 Rancangan Layar Cari Modul 142 Gambar 3.96 Rancangan Layar Direktori 143 Gambar 3.97 Rancangan Layar Ubah Direktori 144 Gambar 3.98 Rancangan Layar Tambah Sub-direktori 145 Gambar 3.99 Rancangan Layar Ubah Sub-direktori 146 Gambar Rancangan Layar Hapus Sub-direktori 147 Gambar Rancangan Layar Pindah Sub-direktori 148 Gambar Rancangan Layar Manajemen Pengguna 149 Gambar Rancangan Layar Tambah Pengguna 150 Gambar Rancangan Layar Ubah Pengguna 151 xx

18 Gambar Rancangan Layar Cari Pengguna 152 Gambar Rancangan Layar Manajemen Tab 153 Gambar Rancangan Layar Tambah Tab 154 Gambar Rancangan Layar Ubah Tab 155 Gambar Rancangan Layar Hapus Tab 156 Gambar Rancangan Layar Konfigurasi 157 Gambar 4.1 Halaman Awal 159 Gambar 4.2 Panduan Penggunaan Aplikasi 160 Gambar 4.3 Halaman Internasional 161 Gambar 4.4 Halaman Penjelasan RSS 162 Gambar 4.5 Form Simpan Halaman dan Registrasi Member 163 Gambar 4.6 Validasi Pendaftaran 163 Gambar 4.7 Jendela Modul RSS 164 Gambar 4.8 Modul Catatan 165 Gambar 4.9 Jendela Catatan Setelah di-klik 165 Gambar 4.10 Modul Bookmark 166 Gambar 4.11 Modul Bookmark Setelah Di-klik 166 Gambar 4.12 Setelah Penambahan Bookmark Baru 166 Gambar 4.13 Menghapus Bookmark 167 Gambar 4.14 Pindah Modul 168 Gambar 4.15 Menu Konfigurasi pada Bar Modul 169 Gambar 4.16 Warna pada Bar Modul 169 Gambar 4.17 Modul dengan Jumlah Artikel Bertambah 170 xxi

19 Gambar 4.18 Refresh Modul 170 Gambar 4.19 Minimize Modul 171 Gambar 4.20 Tutup Modul 171 Gambar 4.21 Menu Opsi di Bagian Kanan Atas Halaman 172 Gambar 4.22 Form Opsi 172 Gambar 4.23 Halaman Tanpa Kontrol 173 Gambar 4.24 Form Login 174 Gambar 4.25 Pesan Kesalahan Login 174 Gambar 4.26 Nama Profil Anggota 175 Gambar 4.27 Form Ubah Profil 175 Gambar 4.28 Lupa Kata Sandi 176 Gambar 4.29 Menu Tambah Halaman Baru 176 Gambar 4.30 Ubah Nama Halaman 177 Gambar 4.31 Form Tambah Konten 178 Gambar 4.32 Konfirmasi Penambahan Modul 178 Gambar 4.33 Daftar Modul yang Sudah Ada 179 Gambar 4.34 Form Ekpor dan Impor OPML 180 Gambar 4.35 RSS Internal Reader 181 Gambar 4.36 Daftar Sumber RSS 181 Gambar 4.37 Menu Refresh pada RSS Internal Reader 182 Gambar 4.38 Artikel pada Jendela Internal 182 Gambar 4.39 Melihat Situs Sumber Artikel pada Jendela Internal 183 Gambar 4.40 Menu Close pada Jendela Internal 184 xxii

20 Gambar 4.41 Halaman Kebijakan Privasi 185 Gambar 4.42 Form Login 186 Gambar 4.43 Pesan Kesalahan Login 186 Gambar 4.44 Halaman Depan Admin 187 Gambar 4.45 Halaman Konfigurasi Modul 189 Gambar 4.46 Pencarian Modul 190 Gambar 4.47 Ubah Konfigurasi Modul 191 Gambar 4.48 Direktori Modul 192 Gambar 4.49 Ubah/Tambah Direktori 193 Gambar 4.50 Hapus Direktori 193 Gambar 4.51 Tambah Sub-Direktori 194 Gambar 4.52 Manajemen Pengguna 195 Gambar 4.53 Pencarian pengguna 195 Gambar 4.54 Form Tambah Pengguna 196 Gambar 4.55 Ubah Detil Pengguna 197 Gambar 4.56 Hapus pengguna 197 Gambar 4.57 Halaman Konfigurasi Tab 198 Gambar 4.58 Menu Tambah Tab 199 Gambar 4.59 Form Tambah Tab 199 Gambar 4.60 Menu Ubah Tab 200 Gambar 4.61 Form Ubah Tab 200 Gambar 4.62 Konfirmasi Penghapusan Halaman 201 Gambar 4.63 Halaman Pengaturan Konfigurasi Umum 202 xxiii

21 Gambar 4.64 Proses Instalasi Layar Pertama 203 Gambar 4.65 Pilih Direktori instalasi 204 Gambar 4.66 Mengatur Opsi 204 Gambar 4.67 Proses Instalasi Berjalan 205 Gambar 4.68 Selesai Proses Instalasi 205 Gambar 4.69 Impor SQL 206 Gambar 4.70 Pilih File SQL 207 Gambar 4.71 Diagram Batang Perbandingan Total Ukuran File 208 xxiv