Embed Size (px)
Citation preview
54
BAB 3
ANALISIS DAN PERANCANGAN
3.1 Permasalahan-permasalahan yang dihadapi
1. Untuk mengetahui apakah ada berita baru di sebuah situs berita kita harus
membuka keseluruhan situs web penyedia berita sehingga hal ini sangat
memboros waktu dan diperparah oleh koneksi Internet yang masih terbatas
dalam hal kecepatan terutama di Indonesia
2. Pengguna Internet tidak hanya berlangganan berita terhadap satu jenis situs
penyedia berita, melainkan ke beberapa atau berbagai penyedia berita
sehingga pengguna Internet harus membuka berbagai jendela halaman pada
browser, sehingga hal ini tidak praktis dan efisien
3. Aplikasi-aplikasi RSS terutama browser tidak dapat menampilkan berbagai
artikel dari berbagai penyedia konten secara bersamaan
4. Aplikasi RSS yang terintegrasi pada browser seperti Firefox dan IE 7.0 tidak
dapat melakukan pencarian RSS yang telah ditambahkan ke dalam aplikasi
5. RSS reader di browser yang sudah mendukung RSS tidak dapat
menampilkan semua ringkasan semua judul berita secara bersamaan. Hal ini
sangat tidak efisien karena apabila pengguna internet setiap kali ingin melihat
judul berita maka harus melakukan klik terhadap RSS yang sudah
ditambahkan ke dalam browsernya.
6. Browser yang sudah mendukung RSS tidak dapat melakukan refresh RSS
secara manual untuk mengetahui apakah ada berita baru
55
3.2 Usulan pemecahan masalah
1. Merancang sistem aplikasi web yang dapat mengambil konten dalam bentuk
RSS dari penyedia konten sehingga pengguna tidak lagi harus membuka
keseluruhan situs hanya untuk mengetahui apakah ada berita baru pada situs
tersebut
2. Merancang sistem aplikasi web yang dapat mengorganisasikan berbagai
sumber penyedia RSS dan dapat menampilkan semua sumber RSS secara
bersamaan secara efisien untuk memenuhi kebutuhan pengguna akan berita-
berita yang beragam
2. Mengimplementasikan fitur pembaca RSS internal, sehingga pengguna dapat
membaca berbagai sumber RSS secara detil tanpa harus keluar dari aplikasi
atau membuka situs sumber berita
3. Aplikasi yang akan dirancang menggunakan pendekatan AJAX untuk
meningkatkan respon aplikasi sehingga menghemat bandwidth dan waktu
4. Mengimplementasi fungsionalitas-fungsionalitas untuk para pengguna
sehingga pengguna dapat dengan leluasa memodifikasi RSS yang ada
5. Mengimplementasikan fitur pencarian pada aplikasi untuk memudahkan
pengguna
6. Menyediakan fitur refresh secara khusus untuk meng-update berita dari situs
penyedia konten RSS tanpa harus merefresh keseluruhan halaman
56
3.3 Analisis Kuesioner pada Studi Kasus
Untuk mendukung analisis pada studi kasus ini, kami melakukan penyebaran
kuesioner ke salah satu situs jaringan sosial Indonesia yang cukup populer, FUPEI.com,
dengan demografi koresponden (berjumlah 30 orang) sebagai berikut:
Gambar 3.1 Demografi Koresponden Kuesioner pada FUPEI.COM
No. Pertanyaan Alternatif jawaban Tujuan
1.
Seberapa sering anda
menggunakan internet dalam
satu minggu?
< 4
4 - 7
8 - 11
12 - 15 jam
> 15
Untuk mengetahui
frekuesi penggunaan
internet
2. Koneksi Internet apa yang
anda gunakan?
Dial-up
Kabel
ADSL
Lainnya______
Untuk mengetahui
kecepatan akses rata-
rata pengguna
Internet
57
3. Seberapa sering anda
mengakses situs berita?
Sangat sering
Sering
Jarang
Kadang-kadang
Tidak pernah
Untuk mengetahui
seberapa besar
kebutuhan pengguna
terhadap situs berita
4.
Berapa banyak situs berita
yang Anda buka dalam waktu
yang bersamaan?
> 9
6 – 9
2 - 5
< 2
Untuk mengetahui
kebutuhan pengguna
akan berbagai jenis
situs berita
5.
Bagaimana tanggapan anda
terhadap tingkat kenyamanan
situs berita yang sering anda
kunjungi dalam hal:
Tampilan
Sangat Bagus
Bagus
Biasa
Kurang Bagus
Tidak bagus
Navigasi
Sangat bagus
Bagus
Biasa
Kurang bagus
Tidak bagus
Untuk memperbaiki
atau melengkapi
kekurangan dari situs
yang sudah ada
58
Kecepatan akses
Sangat cepat
Cepat
Biasa
Lambat
Sangat lambat
6.
Apakah Anda pernah
mengetahui tentang RSS
(Really Simple Syndication)
Ya
Tidak
Untuk mengetahui
tingkat pengetahuan
pengguna tentang
teknologi di web
7.
Apakah Anda pernah
menggunakan RSS Reader
berbasis web?
Ya, sebutkan____
Tidak
Untuk mengetahui
aplikasi-aplikasi
sejenis yang pernah
digunakan oleh
pengguna
8.
Bagaimana menurut Anda
apakah dengan aplikasi yang
dapat mengorganisasikan
semua berita RSS secara
bersamaan tanpa harus
Sangat bagus
Bagus
Biasa
Kurang bagus
Tidak bagus
Untuk mendukung
pengembangan
aplikasi RSS
aggregator ini
59
membuka semua situs yang
terkait akan membantu Anda
dalam membaca berita-berita
dengan efisien?
9.
Kegunaaan fitur-fitur yang
Anda harapkan dalam sistem
ini?
Pengelompokan
berita
Sangat berguna
Berguna
Biasa
Kurang berguna
Tidak berguna
Page
customization
Sangat berguna
Berguna
Biasa
Kurang berguna
Tidak berguna
Bookmark
Sangat berguna
Berguna
Untuk mengetahui
kegunaaan setiap fitur
untuk para pengguna
60
Biasa
Kurang berguna
Tidak berguna
Catatan
Sangat berguna
Berguna
Biasa
Kurang berguna
Tidak berguna
Tabel 3.1 Daftar Pertanyaan dan Tujuan Pertanyaan Kuesioner
Hasil dari pertanyaan kuesioner di atas dengan statistik sebagai berikut:
1. Seberapa sering anda menggunakan internet dalam satu minggu?
61
17%
17%
33%
23%
10%< 4 jam
4 - 7 jam
8 - 11 jam
12 - 15 jam
> 15 jam
Gambar 3.2 Diagram Pie Hasil Kuesioner Pertanyaan 1
2. Koneksi Internet apa yang anda gunakan?
23%
34%10%
33% Dial upADSLKabelLainnya
Gambar 3.3 Diagram Pie Hasil Kuesioner Pertanyaan 2
62
Hasil analisis terhadap diagram di atas menunjukkan bahwa
pemakaian koneksi internet beragam, tetapi didominasi oleh ADSL dan
lainnya, dan sebagian besar yang memilih lainnya tersebut menuliskan
wireless.
3. Seberapa sering Anda mengakses situs berita?
33%
47%
17%
3%0%
Sangat seringSeringJarang Kadang-kadangTidak Pernah
Gambar 3.4 Diagram Pie Hasil Kuesioner Pertanyaan 3
Hasil dari pertanyaan ini menjawab bahwa koresponden tidak terlepas dari
situs berita
4. Berapa banyak situs berita yang Anda buka dalam waktu yang
bersamaan?
63
3% 7%
83%
7%> 96 - 92 - 5< 2
Gambar 3.5 Diagram Pie Hasil Kuesioner Pertanyaan 4
Hasil analisis menunjukkan bahwa pengguna tidak hanya mengakses
1 macam berita secara bersamaan, melainkan beberapa berita.
5. Bagaimana tanggapan anda terhadap tingkat kenyamanan situs berita
yang sering anda kunjungi dalam hal:
a. Tampilan
64
33%
40%
17%7% 3% Sangat bagus
BagusBiasaKurang bagusSangat tidak bagus
Gambar 3.6 Diagram Pie Hasil Kuesioner Pertanyaan 5
b. Navigasi
10%17%
39%
27%
7% Sangat bagusBagusBiasaKurang bagusTidak bagus
Gambar 3.7 Diagram Pie Hasil Kuesioner Pertanyaan 6
c. Kecepatan Akses
65
3% 17%
40%
30%
10% Sangat cepatCepatBiasaLambatSangat lambat
Gambar 3.8 Diagram Pie Hasil Kuesioner Pertanyaan 7
Berdasarkan pengalaman pengguna, tampilan situs-situs berita sudah
cukup baik, tetapi untuk navigasi dan kecepatan akses hasilnya didominasi
oleh opsi biasa saja.
6. Apakah Anda pernah mengetahui tentang RSS?
3% 7%
83%
7%> 96 - 92 - 5< 2
Gambar 3.9 Diagram Pie Hasil Kuesioner Pertanyaan 8
66
Hasil pertanyaan ini Memberikan fakta menunjukkan pengguna
internet sebesar 70% belum mengetahui tentang RSS. Sebagai solusi dalam
aplikasi perlu menambahkan penjelasan detil tentang teknologi RSS dan cara
menggunakannya dalam aplikasi ini.
7. Apakah Anda pernah memakai RSS Reader berbasis web?
17%
83%
Ya
Tidak
Gambar 3.10 Diagram Pie Hasil Kuesioner Pertanyaan 9
Dari jawaban no. 6, masih minim sekali penggunaan RSS Reader
oleh para pengguna.
8. Bagaimana menurut Anda apakah dengan aplikasi yang dapat
mengorganisasikan semua berita RSS secara bersamaan tanpa harus
67
membuka semua situs yang terkait akan membantu Anda dalam
membaca artikel-artikel berita/lainnya dengan efisien?
39%
32%
18%
7% 4%
Sangat bagus
Bagus
Biasa
Kurang bagus
Sangat tidakbagus
Gambar 3.11 Diagram Pie Hasil Kuesioner Pertanyaan 10
Hasil ini menunjukkan bahwa pengguna sangat antusias akan
kehadiran aplikasi ini.
9. Kegunaaan fitur-fitur yang Anda harapkan dalam sistem ini?
a. Pengelompokan artikel dari berbagai situs penyedia konten
68
70%
20%
7%
3%
0%Sangat bergunaBergunaBiasaKurang bergunaTidak berguna
Gambar 3.12 Diagram Pie Hasil Kuesioner Pertanyaan 11
b. Page Customization
67%17%
10% 3% 3% Sangat bergunaBergunaBiasaKurang bergunaTidak berguna
Gambar 3.13 Diagram Pie Hasil Kuesioner Pertanyaan 12
c. Bookmark
69
43%
27%
20%
7% 3%Sangat bergunaBergunaBiasaKurang bergunaTidak berguna
Gambar 3.14 Diagram Pie Hasil Kuesioner Pertanyaan 13
d. Catatan
17%
49%
17%
10% 7%Sangat bergunaBergunaBiasaKurang bergunaTidak berguna
Gambar 3.15 Diagram Pie Hasil Kuesioner Pertanyaan 14
Hasil analisis menunjukkan fitur-fitur yang akan diimplementasikan
diterima dengan baik oleh para pengguna.
70
3.4 Analisis dan Perancangan Aplikasi RSS aggregator
3.4.1 Class Diagram
Gambar 3.16 Class Diagram
71
3.4.2 Behavior Diagram
3.4.2.1 Detail Activiy Diagram
Gambar 3.17 Activiy Diagram untuk Login
72
Gambar 3.18 Activiy Diagram untuk Logout
73
Gambar 3.19 Activiy Diagram untuk Tambah Account
74
Gambar 3.20 Activiy Diagram untuk Tampilkan Account
75
Gambar 3.21 Activiy Diagram untuk Ubah Account
76
Gambar 3.22 Activiy Diagram untuk Hapus Account
77
Gambar 3.23 Activiy Diagram untuk Ubah Posisi
78
Gambar 3.24 Activiy Diagram untuk Tambah Halaman
79
Gambar 3.25 Activiy Diagram untuk Tampilkan Halaman
80
Gambar 3.26 Activiy Diagram untuk Ubah Halaman
81
Gambar 3.27 Activiy Diagram untuk Hapus Halaman
82
Gambar 3.28 Activiy Diagram untuk Tambah Notes
83
Gambar 3.29 Activiy Diagram untuk Tampilkan Notes
84
Gambar 3.30 Activiy Diagram untuk Ubah Notes
85
3.4.2.2 State Machine Diagram
Gambar 3.31 State Machine Diagram untuk Ubah Halaman Admin
Gambar 3.32 State Machine Diagram untuk mengatur halaman admin
Gambar 3.33 State Machine Diagram untuk Hapus Halaman Admin
86
Gambar 3.34 State Machine Diagram untuk Mengatur Posisi Modul Admin
Gambar 3.35 State Machine Diagram untuk Tambah URL Admin
Gambar 3.36 State Machine Diagram untuk Persetujuan Modul Admin
87
Gambar 3.37 State Machine Diagram untuk Mengubah Modul Admin
Gambar 3.38 State Machine Diagram untuk Hapus Modul Admin
Gambar 3.39 State Machine Diagram untuk Tambah User Admin
88
Gambar 3.40 State Machine Diagram untuk Mengatur Konfigurasi Halaman Admin
Gambar 3.41 State Machine Diagram untuk Mengubah Halaman Admin
Gambar 3.42 State Machine Diagram untuk Tambah Halaman User
89
Gambar 3.43 State Machine Diagram untuk Hapus Halaman User
Gambar 3.44 State Machine Diagram untuk Konfigurasi Halaman User
Gambar 3.45 State Machine Diagram untuk Mengatur Posisi Modul User
90
Gambar 3.46 State Machine Diagram untuk Menambahkan URL User
Gambar 3.47 State Machine Diagram untuk Tambah Modul User
Gambar 3.48 State Machine Diagram Modul RSS
91
Gambar3.49 State Machine Diagram Modul
Gambar 3.50 State Machine Diagram Halaman
Gambar 3.51 State Machine Diagram
92
3.4.2.3 Use Case Diagram
Gambar 3.52 Use Case Diagram
93
3.4.2.4 Sequence Diagram
Gambar 3.53 Sequence Diagram untuk Edit Modul Admin
94
Gambar 3.54 Sequence Diagram untuk Add RSS Admin
Gambar 3.55 Sequence Diagram untuk Hapus Modul Admin
95
Gambar 3.56 Sequence Diagram untuk Set Default Halaman Admin
96
Gambar 3.57 Sequence Diagram untuk Set Posisi Modul Admin
97
Gambar 3.58 Sequence Diagram untuk Setting Konfigurasi Admin
98
Gambar 3.59 Sequence Diagram untuk Tambah User Admin
99
Gambar 3.60 Sequence Diagram untuk Hapus Halaman Admin
100
Gambar 3.61 Sequence Diagram untuk Hapus Halaman Member
101
Gambar 3.62 Sequence Diagram untuk Add RSS Member
102
Gambar 3.63 Sequence Diagram untuk Edit Modul Member
103
Gambar 3.64 Sequence Diagram untuk Hapus Modul Member
104
Gambar 3.65 Sequence Diagram untuk Set Posisi Modul
105
Gambar 3.66 Sequence Diagram untuk Tambah Halaman Member
106
Gambar 3.67 Sequence Diagram untuk Tambah Modul Member
107
Gambar 3.68 Sequence Diagram untuk Ubah Halaman Member
3.4.3 Perancangan Basis Data
Pada bagian ini akan dijelaskan mengenai perancangan basis data
(database) yang digunakan pada aplikasi. Keluaran dari bagian ini adalah
rancangan tabel-tabel dan field-field yang digunakan. Tabel-tabel ini secara
keseluruhan akan dirangkum dalam diagram entity (Entity Relationship
Diagram).
108
Rancangan tabel-tabel pada aplikasi ini akan diimplementasikan dengan
menggunakan database engine MySQL versi yang digunakan adalah versi 5.0.41.
Berikut ini merupakan definisi dari tabel-tabel yang akan digunakan pada
aplikasi yang diusulkan. Perancangan database ini terdiri dari 14 tabel, yaitu :
1. Filename : ms_user
Deskripsi : table ini berisi data user
Primary Key : user_id
Nama Field Tipe Data Keterangan
user_id Int PK 1, id dari tabel ms_user
username Varchar (20) username dari pengguna
long_name Varchar (100) nama lengkap pengguna
pass Varchar (10) password dari pengguna
last_connect Datetime waktu terakhir connect
Tabel 3.2 Tabel ms_user
2. Filename : ms_admin
Deskripsi : table ini berisi data admin
Primary Key : user_id
Nama Field Tipe Data Keterangan
user_id Int PK 2, FK, id dari tabel
ms_admin
username Varchar (20) username dari pengguna
Pass Varchar (10) password dari admin
109
Tabel 3.3 Tabel ms_admin
3. Filename : profile_user
Deskripsi : table ini berisi profile dari user
Primary Key : profile_id
Nama Field Tipe Data Keterangan
profile_id Int PK 3, id dari tabel profile_user
user_id Int FK, id berelasi dengan tabel
ms_user
Width Int lebar jendela modul
Nbcols Int jumlah kolom dalam 1 halaman
internal_reader Varchar (10) status internal reader
control_bar Varchar (10) status control bar
Nbrss Int jumlah rss
Nbnotes Int jumlah notes
Nbpages Int jumlah halaman
nbbookmark Int jumlah bookmark
Tabel 3.4 Tabel profile_user
4. Filename : profile_detail_rss
Deskripsi : table ini berisi detail profile user terhadap rss
Primary Key : pro_det_rss_id
Nama Field Tipe Data Keterangan
110
pro_det_rss_id Int PK 4, id dari tabel
profile_detail_rss
profile_id Int FK, id berelasi dengan tabel
profile_user
rss_id Int FK, id berelasi dengan tabel
ms_rss
title_bar Varchar (20) Judul rss
Color Varchar (10) Warna bar
Nb Int Jumlah artikel
pos_x Int Posisi x
pos_y Int Posisi y
Tabel 3.5 Tabel profile_detail_rss
5. Filename : profile_detail_notes
Deskripsi : table ini berisi detail profile user terhadap notes
Primary Key : pro_det_notes_id
Nama Field Tipe Data Keterangan
pro_det_notes_id Int PK 5, id dari tabel
profile_detail_notes
profile_id Int FK, id berelasi dengan tabel
profile_user
notes_id Int FK, id berelasi dengan tabel
ms_notes
111
title_bar Varchar (20) Judul notes
color Varchar (10) Warna bar
color_bg Varchar (10) Warna background
pos_x Int Posisi x
pos_y Int Posisi y
Tabel 3.6 Tabel profile_detail_notes
6. Filename : profile_detail_pages
Deskripsi : table ini berisi detail profile user terhadap pages
Primary Key : pro_det_pages_id
Nama Field Tipe Data Keterangan
pro_det_pages_id Int PK 6, id dari tabel
profile_detail_pages
profile_id Int FK, id berelasi dengan tabel
profile_user
pages_id Int FK, id berelasi dengan tabel
ms_pages
pages_no Int Urutan pages yang ke-berapa
Tabel 3.7 Tabel profile_detail_pages
7. Filename : profile_detail_bookmark
Deskripsi : table ini berisi detail profile user terhadap bookmark
Primary Key : pro_det_bookmark_id
112
Nama Field Tipe Data Keterangan
pro_det_bookmark_id Int PK 7, id dari tabel
profile_detail_bookmark
profile_id Int FK, id berelasi dengan tabel
profile_user
bookmark_id Int FK, id berelasi dengan tabel
ms_bookmark
title_bar Varchar (20) Judul bookmark
color Varchar (10) Warna bar
pos_x Int Posisi x
pos_y Int Posisi y
Tabel 3.8 Tabel profile_detail_bookmark
8. Filename : ms_rss
Deskripsi : table ini berisi data alamat url rss
Primary Key : rss_id
Nama Field Tipe Data Keterangan
rss_id Int PK 8, id dari tabel ms_rss
url Varchar (100) alamat url rss
Icon Varchar (100) path dari file icon
Tabel 3.9 Tabel ms_rss
9. Filename : ms_notes
113
Deskripsi : table ini berisi data catatan (notes)
Primary Key : notes_id
Nama Field Tipe Data Keterangan
rss_id Int PK 9, id dari tabel ms_notes
Content Varchar (200) isi dari notes
Tabel 3.10 Tabel ms_notes
10. Filename : ms_pages
Deskripsi : table ini berisi data pages
Primary Key : pages_id
Nama Field Tipe Data Keterangan
pages_id Int PK 10, id dari tabel ms_pages
name Varchar (20) nama dari halaman
mode Varchar (10) mode page apakah ditampilkan
buat user yang sdh login atau
belum
type Varchar (10) tipe dari halaman
Tabel 3.11 Tabel ms_pages
11. Filename : ms_bookmark
Deskripsi : table ini berisi data bookmark
Primary Key : bookmark_id
Nama Field Tipe Data Keterangan
114
pages_id Int PK 11, id dari tabel
ms_bookmark
name Varchar (20) nama bookmark
url_bookmark Varchar (100) alamat situs yang dituju
Tabel 3.12 Tabel ms_bookmark
12. Filename : sys_config_default_rss
Deskripsi : table ini berisi data konfigurasi default aplikasi tentang rss
Primary Key : sys_config_rss_id
Nama Field Tipe Data Keterangan
sys_config_rss_id Int PK 12, id dari tabel
sys_config_default_rss
rss_id Int FK, id berelasi dengan tabel
ms_rss
Tabel 3.13 Tabel sys_config_default_rss
13. Filename : sys_config_default_pages
Deskripsi : table ini berisi data konfigurasi default aplikasi tentang pages
Primary Key : sys_config_pages_id
Nama Field Tipe Data Keterangan
sys_config_pages_id Int PK 13, id dari tabel
sys_config_default_pages
pages_id Int FK, id berelasi dari ms_pages
115
Tabel 3.14 Tabel sys_config_default_pages
14. Filename : sys_ default_general
Deskripsi : table ini berisi data konfigurasi default aplikasi
Primary Key : sys_def_general_id
Nama Field Tipe Data Keterangan
sys_def_general_id Int PK 14, id dari tabel
sys_default_general
parameter Varchar (50) parameter konfigurasi
value Varchar (50) value konfigurasi
data_type Varchar (10) tipe data value untuk konfigurasi
Tabel 3.15 Tabel _ default_general
Berikut ini merupakan diagram yang menggambarkan keterhubungan antara
tabel-tabel diatas :
116
Gambar 3.69 Diagram ERD Aplikasi
Pada gambar Diagram ERD di atas, menjelaskan mengenai hubungan antara
tabel database yang satu dengan tabel database yang lainnya. Dalam hubungan antara
tabel database tersebut terdapat hubungan entity yang terdiri dari entity zero to many
(0.*), one (1), dan entity one to many (1.*).
117
3.5 Rancangan Layar
3.5.1 Rancangan Layar Sebelum Login
Gambar 3.70 Rancangan Layar Sebelum Login
118
3.5.2 Rancangan Layar Daftar/Simpan Halaman
Gambar 3.71 Rancangan Layar Daftar
119
3.5.3 Rancangan Layar Tambah Konten
Gambar 3.72 Rancangan Layar Tambah Konten
120
3.5.4 Rancangan Layar Preview RSS
Gambar 3.73 Rancangan Layar Preview RSS
121
3.5.5 Rancangan Layar Cari Modul
Gambar 3.74 Rancangan Layar Cari Modul
122
3.5.6 Rancangan Layar Opsi
Gambar 3.75 Rancangan Layar Opsi
123
3.5.7 Rancangan Layar tanpa Kontrol pada Modul
Gambar 3.76 Rancangan Layar tanpa Kontrol pada Modul
124
3.5.8 Rancangan Layar Login
Gambar 3.77 Rancangan Layar Login
125
3.5.9 Rancangan Layar Lupa Kata Sandi
Gambar 3.78 Rancangan Layar Lupa Kata Sandi
126
3.5.10 Rancangan Layar Detil Artikel
Gambar 3.79 Rancangan Layar Detil Artikel
127
3.5.11 Rancangan Layar Situs di dalam Pembaca Internal
Gambar 3.80 Rancangan Layar Situs di dalam Pembaca Internal
128
3.5.12 Rancangan Layar Setelah Login
Gambar 3.81Rancangan Layar Setelah Login
