56
BAB III ANALISA DAN PERANCANGAN SISTEM
3.1
Gambaran Umum Webportal adalah sebuah aplikasi berbasis internet dengan format html
yang menyajikan informasi dan kegiatan anggota-anggotanya. Informasi yang tersedia harus dapat disebarluaskan demi kepentingan organisasi dengan maksud untuk memperluas penyebaran informasi kepada masyarakat umum. Selain itu, komunikasi yang terdapat dalam forum webportal sangat membantu pengguna internet yang ingin mengetahui sesuatu tentang kesehatan alternatif dan kegiatan paranormal terkait penyembuhan dengan menggunakan energi supra-natural yang dimiliki oleh anggota organisasi ini. Agar tersedia informasi yang up-to-date dan memudahkan penjelajahinternet untuk mengakses, maka dibutuhkan strategi penyajian website yang mudah, cepat dan lengkap dengan mengimplementasikan JavaScript dan Mysql database untuk mengelola webportal yang akan dibuat. Khusus untuk para pengunjung website FKPPAI maka informasi yang disajikan akan memudahkan mereka mencari pengetahuan tentang kesehatan alternatif dan apabila mereka tertarik untuk menanyakan sesuatu dengan anggota maka akan diberikan tempat untuk berkomunikasi dan berinteraksi melalui fasilitas forum. Dengan demikian aktivitas webportal akan semakin dinamis dan berkembang sesuai kebutuhan pengunjung dan menjadikan informasi yang didapat sebagai pengetahuan mereka tentang Organisasi.
56
57
3.2
Sejarah Singkat Forum Komunikasi Paranormal Penyembuh Alternatif Indonesia (PPAI) Organisasi FKPPAI adalah sebuah badan sosial non-komersial yang
menampung kegiatan dan aktivitas anggota untuk disajikan sebagai kumpulan informasi dengan tujuan memberikan pengetahuan kepada masyarakat umum tentang kesehatan alternatif di Indonesia. Khususnya untuk mewadahi kegiatan anggota sehari-hari dalam praktik penyembuhan maupun acara-acara sosial kepada masyarakat. FKPPAI adalah forum komunikasi yang diwujudkan dalam sebuah aplikasi berbasis website. Aplikasi ini merupakan suatu wadah diskusi bagi sesama anggota dan juga tempat mendapatkan semua informasi mengenai pengobatan alternatif di seluruh Indonesia. Forum ini terbuka untuk semua masyarakat yang ingin mengetahui lebih jauh penyembuhan melalui Supranatural. Berikut
ini
penjelasan
mengenai
Organisasi
Forum
Komunikasi
Paranormal Penyembuh Alternatif Indonesia. Struktur organisasi, Visi dan Misi serta Tujuan organisasi untuk mengembangkan sebuah sistem informasi. 3.2.1
Struktur Organisasi FKPPAI
Nama Organisasi : Forum Komunikasi Paranormal Penyembuhan Indonesia Mulai Berdiri
: 27 Januari 2001
Alamat
: Jl. Pintu Timur II Taman Mini Indonesia Indah Jakarta Timur
58
3.2.2
Kebutuhan Sistem Informasi Organisasi Menggunakan teknologi informasi sebagai sarana komunikasi dan pertukaran informasi antara anggota dan pengurus merupakan suatu kebutuhan yang sangat utama bagi terlaksanakan tujuan-tujuan organsasi di pusat maupun di daerah/cabang. Dengan demikian tercipta hubungan yang harmonis / saling erat antara anggota dan dapat membawa pengaruh positif ke masyarakat luas terhadap citra organisasi FKPPAI.
3.2.3
Visi dan Misi Organisasi -
Mewadahi kegiatan dan aktivitas anggota di seluruh wilayah baik pusat maupun daerah/cabang.
-
Forum komunikasi yang terintegrasi berbasis Teknologi Informasi terkini untuk kegiatan seluruh anggota.
-
Meningkatkan peran serta masyarakat luas dan pengetahuan mereka terhadap kesehatan alternatif di Indonesia.
3.2.4
Deskripsi Organisasi FKPPAI Memiliki kantor pusat di bentara budaya TMII Jakarta Timur. Setiap dewan anggota merupakan perwakilan dari masing-masing daerah. Dan terdapat di 12 provinsi seluruh Wilayah Indonesia. Jabatan tertinggi adalah H.R. Wiranto (Purn) sebagai Ketua Pembina. Berikut strukturnya:
59
KETUA PEMBINA (H.R. Wiranto)
Anggota Dewan Pembina (….)
KETUA / SEKJEN Mas’Ud Thoyib Eduard Manik, SH
PAKAR FKPPAI
Dewan Pengawas (….)
HUMAS/PUBLI C RELATIONS
LIT/BANG
PENGURUS HARIAN (….)
ANGGOTA
Anggota Khusus (kehormatan)
Anggota (Pusat dan Daerah)
Gambar 3.1 Struktur Organisasi FKPPAI (Dewan PimpinanPusat) Secara singkat pembahasan mengenai organisasi FKPPAI dibatasi hanya sampai chart organisasi. Kemudian yang akan dibuat penulis adalah fokus tentang pengembangan sistem informasi organisasi tersebut.
3.3 3.3.1
Analisa Kebutuhan Sistem Informasi Analisa sistem berjalan Berikut ini tampilan website dalam internet yang telah dibangun dan aktif
dalam jangka watu 1 (satu) tahun terakhir.
60
Gambar 3.2 Sistem yang berjalan Melalui serangkaian wawancara dan fakta-fakta yang dikumpulkan, maka hasil penelusuran penulis untuk website yang ada sekarang terangkum dalam tabel hasil wawancara sebagai berikut:
61
Tabel 3.1 Analisa Sistem Berjalan No.
Objek Analisa
Observasi
Wawancara
Keterangan
1
Struktur Organisasi
Wisma TMII
Humas FKPPAI
[lihat gambar 3.1]
2
Struktur Informasi
Sistem Organisasi
mengajukan Belum memiliki struktur Sistem Informasi dalam
tidak Sedang
memiliki
saran
departement TI
pihak
penggunaan organisasi luar
FKPPAI
klasik.
Mengingat
Sistem 2009/2014 menyarankan digunakannya pihak luar
Informasi Desain
bersifat
sebagai perkembangan Iptek, maka anggota pengurus tahun
konsultan
3
yang
sebagai konsultan SI
Website Pengecekan situs Sekertaris dan humas Pembuatan website forum FKPPAI tidak dilanjutkan www.fkppai.com
bidang teknologi
sebagaimana desain tujuan awal dari ketua organisasi karena kekurangan sumber daya dan komunikasi dengan pihak ketiga
4
Komponen Sistem Modul Website
informasi ada
sistem [tidak ada wawancara] tidak Data di dapat dari tampilan website yang
Komponen yang diinginkan terdiri dari: Forum komunikasi, Berita dan artikel Blogging
62
ada 5
Tujuan Website
Sebagai
dengan Mengaplikasikan suatu informasi kegiatan organisasi
contoh Wawancara
saja dari model pihak yang
anggota, Dokumentasi photo dari kegiatan sehari-hari
diinginkan organisasi
oleh organisasi
komunikasi
Sekretariat dan anggota baik secara online maupun kegiatan hasil praktik
dan
dunia
nyata.
Menyatukan
keseragaman
dengan aktivitas dan interaksi anggota dengan masyarakat
anggota di lapangan
luas. Membantu masyarakat mendapatkan informasi tentang kesehatan alternatif dan dunia paranormal penyembuhan.
6.
Interaksi Anggota
Tidak
ada
/ Sama seperti No.2
offline 7.
Kebutuhan lainnya
Tidak diperlukan
Belum
ada
interaksi
anggota.
Karena
tidak
berfungsinya website yang sudah ada Sama seperti no.5
Kebutuhan Hubungan kemasyarakatan dan lain-lain.
63
3.3.2
Pemodelan sistem yang berjalan Sebelum masuk ke idetifikasi kebutuhan sistem, maka dijelaskan dahulu
kondisi sistem yang telah berjalan pada website FKPPAI. Pembahasan dari sistem yang berjalan ini menggunakan pendekatan pemodelan objek dengan menggunakan model use case diagram. Berikut ini uraian use case diagram sistem yang berjalan.
A. Use Case Diagram Halaman Utama Halaman utama website disusun menggunakan dokumen format HTML yang tidak menyertakan modul bahasa skript web-server untuk menangani interaksi pengunjung web. Oleh karena web bersifat statis ini, maka hanya ada satu aktor pada use case yang dimiliki halaman utama. Seperti gambar berikut:
Halaman utama
Membaca berita
mengelola konten halaman *
*
Melihat daftar anggota *
* admin
pengunjung mengisi pooling *
* melihat forum
Gambar 3.3 Use case Diagram Halaman utama
64
B. Activity Diagram Pengunjung mulai
Kunjungi halaman web
Isi komentar pengunjung
Terjadi kesalahan
Tampilkan komentar
selesai Lihat isi komentar
Gambar 3.4 Activity Diagram pengunjung halaman utama Pembahasan selanjutkan masuk kepada
usulan sistem. Dimulai dengan
mengindentifikasi persyaratan dan kebutuhan dari sistem yang akan dibuat.
3.4 3.4.1
Analisa Sistem yang Diusulkan Identifikasi kebutuhan Sistem Berdasarkan analisa yang telah dilakukan oleh penulis pada Website Forum FKPPAI Jakarta, maka dapat diidentifikasikan komponen sistem yang dibutuhkan untuk mendesain webportal FKPPAI yang lebih baik yang disusun antara lain:
a. Kebutuhan
: website Forum komunikasi anggota FKPPAI
65
Masalah
: komponen halaman situs yang telah ada tidak mampu merepresentasikan aktifitas anggota dalam kegiatan nyata praktik kesehatan alternatif.
Usulan
: Dibuatkan
komponen
aplikasi
forum
dengan
memakai template yang terintegrasi dari situs jejaring sosial yang sudah biasa digunakan (OCRA-forum). Menyesuaikan
kebutuhan
dengan
memasukkan
bagian forum diskusi untuk kebutuhan anggota. Membuat modifikasi dari standar template website komunitas yang disesuaikan, menghapus bagian komentar dan multimedia, untuk dipindahkan ke modul lain yang sesuai konteks komunikasi yang dibutuhkan anggota dan organisasi b. Kebutuhan
: Penyisipan tulisan artikel anggota yang dimuat di website lain dalam halaman utama dan profil anggota. Penyisipan dengan teknologi RSS (Really Simple Syndicate).
Masalah
: kebutuhan diatas belum disertakan dalam website yang sudah ada, sehingga harus dikomunikasikan ke bagian sekretariat anggota. Dari hasil diskusi disetujui untuk menyertakan tulisan artikel dan berita terkaitnya dalam modul tersendiri dan terlepas dari tampilan layout yang sudah ada.
66
Usulan
: Dibuatkan dari panel admin untuk menyertakan modul artikel berupa blog yang dibuat sendiri oleh anggota dengan template bisa disesuaikan oleh admin sesuai keinginan anggota..
c. Kebutuhan
: Modul Kategori yang mengintegrasikan semua komponen aplikasi yang disediakan website. Hal ini dimaksudkan untuk mempermudah navigasi halaman bagi pengguna.
Masalah
: Tidak ditemukan integrasi aplikasi-aplikasi yang disediakan. Sehingga pengunjung dan anggota yang sudah ada menjadi enggan untuk menggunakan website yang ada.
Usulan
: Integrasi komponen aplikasi sangat penting dalam mendesain aplikasi website. Karenanya, software yang digunakan oleh pengembangan aplikasi website FKPPAI menggunakan modul-modul yang dapat dipasang atau dilepas sesuai keinginan organisasi. Oleh karena itu pengembangan modul kategori ini menyesuaikan dengan halaman utama website agar penggunaannya lebih praktis.
d. Kebutuhan
: Hasil Poling dan tagging untuk mengetahui trend terkini yang menjadi pembahasan pada situs berita nasional terkait aktivitas anggota di dunia nyata.
67
Masalah
: Belum adanya sub-sistem poll dan tags (tool yg menyertakan katakunci topik yang sering dibahas) yang dapat menganalisa karakteristik penggunaan website dan menampung tema-tema apas aja yang sedang menjadi topik hangat pembahasan di kegiatan anggota sehari-hari. Menyisipkan form yang dapat diaplikasikan anggota untuk membuat poling sendiri berdasarkan kebutuhannya dan alasan apa yang membuat pengunjung atau customer dalam memilih.
Usulan
: Menambahkan komponen poling untuk anggota. Dimana subjek pembahasan dapat ditentukan sendiri oleh mereka.
e. Kebutuhan Masalah
: Multimedia (photo dan chatting) : Belum adanya komponen multimedia untuk merekam kegiatan sehari-hari anggota dan organisasi. Dan kebutuhan komunikasi langsung antara anggota dan organisasi sebagai suatu struktur yang saling membutuhkan. Pemakaian instant-messeging (chat) di usulkan oleh salah seorang anggota agar mereka dapat berkonsultasi langsung kepada organisasi dan pengunjung lain (masyarakat).
Usulan
: menambahkan modul dari template aplikasi website. Menyusun
item-item
dan
menyesuaikan
sifat
68
informasi
dan
jenis
komunikasi
dari
instant-
messenger. Membuat desain interaktif dimana pada halaman website utama, anggota dapat langsung mengetahui status aktivitas anggota lainnya. f. Kebutuhan
: Statistik pengunjung halaman dan informasi umum (Contact-Info) keanggotaan
untuk dan
kepentingan
kemungkinan
perluasan
pengembangan
website dimasa datang. Masalah
: Belum adanya sub-sistem statisktik pengguna dan feedback dari aktivitas anggota di website forum yang memungkinkan administrator website dapat menganalisa karakteristik penggunaan website dan membantu pengunjung mendapatkan pelayanan yang nyaman dalam menggunakan aplikasi yang ada.
Usulan
: disertakan modul pada halaman utama sebagai informasi realtime. Setiap pengunjung dapat dengan mudah melihat aktivitas website dan anggota yg sedang online pada saat tertentu.
Masalah lainnya terkait kebutuhan ini akan diberitahukan kemudian. Penulis membatasi hanya kepada kebutuhan yang belum disediakan. Selain analisa kebutuhan di atas, pemilik website yaitu organisasi FKPPAI menginginkan sebuah website dengan komunikasi lengkap namun dengan tetap memperhatikan privasi
69
keanggotaan dan kegiatan mereka sehingga kontrol kendali dalam sepenuhnya dipegang oleh anggota itu sendiri. Dan fungsi organisasi hanya sebagai fasilitator kegiatan sesuai tujuan dari visi-misi organisasi sebagai wadah komunikasi anggotaanggotanya. Berdasarkan hasil analisa awal yang dilakukan, maka dibuat usulan perancangan sistem aplikasi website berdasarkan kebutuhan yang dimaksud. Perancangan sistem perangkat lunak diusulkan dengan menggunakan model analisis berorientasi objek (OOA) yang menyesuaikan kebutuhan dan pemanfaatan tools berorientasi objek. Hasil dari analisa ini kemudian diproses kedalam permodelan sistem dengan prinsip Object Oriented Modelling yang menggunakan tool USECASE Modelling dan mendesain penggunaan Unified Modelling Languange (UML). Proses analisa dan hasilnya digunakan untuk pemetaan awal mengenai perilaku yang diisyaratkan dalam kebutuhan sistem aplikasi kedalam elemen-elemen pemodelan.
Untuk
membantu
perancangan
dan
melengkapi
dokumentasi
perancangan, digunakan Microsoft Office Visio versi 2007 yang mendukung perancangan dengan basis UML. 3.4.2
Analisa Sistem Usulan dengan Metode UML Dalam perancangan website ini, penulis menggunakan metode standar UML.
Dengan bahasa pemprograman Object Oriented Programming (OOP) atau pemrograman berorientasi objek yang menggunakan notasi grafis dalam menyatakan suatu desain. Pemodelan dengan UML menggambarkan persyaratan kebutuhan dasar sebagaimana telah didefinisikan oleh Organisasi ke dalam format model. Seorang
70
analis sistem membuat model yang dapat dipahami oleh programmer sistem dan dapat dikomunikasikan dengan stake holder sistem informasi (pengurus organisasi, anggota, programmer, administrator dan pihak terkait) menggunakan notasi standar UML. Tahapan pada UML mensyaratkan minimal 3-8 diagram pemodelan sistem. Oleh karena itu, penulis membuat UML-diagram dengan batasan pada syarat tersebut. Urutan pemodelan disusun sebagai berikut: 1. Domain Model Diagram 2. Robustness Diagram 3. Class diagram 4. Use Case Diagram 5. Activity Diagram 6. Sequence Diagram 7. Communication Diagram Pemodelan website menggunakan UML adalah proses analisa yang bertahap dan berlangsung selama desain dan pengujian sistem sehingga dihasilkan sebuah aplikasi yang memenuhi persyaratan awal kebutuhan sistem oleh organisasi. Dalam proses modeling menggunakan object-oriented analyst and design dibutuhkan proses iterasi yang berkesinambungan untuk mendapatkan hasil berupa objek yang dapat mewakili keseluruhan sistem. Pemodelan menggunakan metoda UML karena dalam pembuatannya lebih ditekankan pada objek yang menyusun komponen sistem mulai dari pendefinisian masalah yang ingin dibuat sampai dengan detail komponen yang menyusun sistem website ini.
71
Berikut ini urutan pemodelan sistem website FKPPAI. 3.4.2.1 Analisa Sistem Usulan dengan Domain Model Diagram Analisa pertama adalah membuat domain model yang mewakili keseluruhan pembahasan rancangan sistem. Domain Model menfokuskan pada masalah yang ingin ditemukan / mengidentifikasi permasalahan dari definisi persyaratan yang telah dibuat sebelumnya. Berdasarkan hasil analisa tersebut ditetapkanlah cakupan masalah perancangan website, yaitu “objek-objek apa saja yang tercakup dalam sistem”. Objek disini bukan sebuah instan kelas, melainkan sebuah model dari permasalahan yang mencakup keseluruhan aplikasi website. Sehingga pada tahap model ini belum dikenal apa yang disebut kelas (dan turunannya). Untuk lebih jelasnya, akan digambarkan pada ilustrasi berikut:
72
Gambar 3.5 Domain Model Sistem Website usulan
73
Tabel.3.2 Keterangan objek pada Domain Model Diagram Objek Website
Deskripsi
Catatan Sistem
Abstraksi dari website itu sendiri
Superclass sistem
Komunitas Profil anggota
website keseluruhan Adalah objek yang mewakili sebuah Representasi objek keanggotaan pada aplikasi website. dari profil yang Anggota merupakan aktor utama pada disebelah kiri (syarat sistem web yang disyaratkan pada ilustrasi domain) tahapan indentifikasi permasalah. Warna biru artinya Dalam
tahap
selanjutkan
dapat dia menjadi kandidat
menjadi ’pertanda’ sebuah kelas yang class yg penting. mewakili komponen pada sistem yang dibuat. Photo, blogs dan
Adalah objek yang mewakili sebuah
Dalam identifikasi
surat
karakteristik pribadi seorang anggota.
kandidat kelas, objek
Objek ini menyusun ‘bangunan’
ini menjelaskan
sebuah objek profil_anggota yang
”ketergantungan”
artinya objek ini adalah bagian
(has-a) yang
(atribut) dari anggota yang dimaksud.
membentuk objek parent-nya.
Review profil
keanggotaan
Adalah objek yang menjelaskan
Sebagai syarat untuk
atribut dan kaitan apa saja dari sebuah
user_customization
profil bisa berinteraksi dengan instan-
dan user_tracking
profile lain.
oleh objek system
Objek yang mewakili sebuah abstraksi
Warna orange
anggota atau tamu dan bersifat
artinya akan berubah
74
dinamis, artinya pada tahapan
seiring proses tahap
berikutnya bisa hilang atau bertambah. berikutnya Objek yang menampung beberapa
Setiap objek dapat di
kategori yang mewakili aktivitas
berikan jenis/ kate-
anggota pada website. Objek ini
gorinya agar memu-
membutuhkan superclass forum pada
dahkan pengelolaan
pemodelan tahapan selanjutnya.
fitur website
Forum
Merupakan objek yang menjadi fokus
Pada tahapan
komunitas
fitur utama aplikasi Website FKPPAI.
selanjutnya objek ini
Sebagai kandidat superclass untuk
membutuhkan lebih
menampung berbagai objek dan
banyak penjelasan.
kategori
kegiatan komunikasi pada anggota baik di website maupun kegiatan dunia sehari-hari. Interaktif
Adalah objek yang mewakili perilaku
Penjelasan lebih
atau aktivitas yang bisa dilakukan
detail dapat dilihat
pada objek sistem, misalnya ’forum’
pada tahapan
dan memiliki sub-type yang khas.
selanjutnya.
Oleh karena itu keberadaannya dimaksudnya untuk abstaksi dalam aktivitas anggota Master catalog
Adalah objek yang menyimpan data
Menjadi objek
dan segala aktivitas keseluruhan
’tabel’ dan relasi
sistem dalam sebuah basisdata. Ini
pada ER Diagram
merupakan abstraksi dari basisdata Pencarian
Adalah komponen yang berguna
Implementasi dari
keyword atau
dalam aktivitas peng-index data oleh
fungsi content-
75
tagging
sistem pada konten yg dibuat member
indexing pada sistem
Komentar, rating
Objek yang merupakan bagian dari
Turunan kelas dari
sebuah aktivitas anggota pada forum
konten yang dibuat
komunikasi.
anggota
3.4.2.2 Analisa Sistem Usulan dengan Robustness Diagram Sebelum membuat class diagram dan use case diagram, dibahas terlebih dahulu mengenai intermediate-diagram yaitu Robustness Diagram yang menjembatani antara objek pada domain-diagram dan teks / actor dari use-case diagram. Dibuat karena, agar konstruksi model class-diagram dari website dapat utuh sampai kepada proses pengujian software (bab 4). Karena terdapat banyak sekali objek yang ada pada domain model diagram, maka dalam pemodelan ini, dibatasi hanya untuk objek pendaftaran, login anggota forum (komentar dan rating) dan objek kategori blog.
1. Robustness diagram Pendaftaran Anggota.
76
Gambar 3.6 Robustness Diagram daftar
Tabel 3.3 Keterangan Diagram Robustness Daftar Nama
Keterangan
Aktor
Pengunjung
Boundary object
halaman gabung (registration), login form dan form kesalahan pendaftaran
Entity object
tabel profiles dan tabel terkait pada basisdata
Controller
form pendaftaran, pesan konfirmasi, validasi input data, simpan data input, pesan kesalahan
Deskripsi
Pengunjung bernavigasi dihalaman utama lalu masuk ke halaman registrasi anggota. Sistem akan menampilkan halaman gabung
Catatan
(pop-up form disamakan sebagai halaman web)
77
2. Robustness diagram login Anggota.
Gambar 3.7 Robustness Diagram Login Tabel 3.4 Keterangan Robustness Diagram Login Nama
Keterangan
Aktor
Pengunjung
Boundary object
Pop-up form login, halaman utama (selamat datang), dan form kesalahan entry
Entity object
tabel profiles, messeges_entry pada basisdata
Controller
Pop-up form login, tampilkan halaman utama (beserta menu_anggota), validasi input data, pesan kesalahan
Deskripsi
Pengunjung bernavigasi dihalaman utama lalu klik masuk
untuk
login
anggota.
Sistem
akan
menampilkan pop-up form login. User mengisi data
username
dan
password.
Sistem
akan
mengecek validitas data dan menampilkan form kesalahan jika data yang dimasukkan tidak valid. Atau sistem akan me-redirect user ke halaman
78
utama dengan disertai menu anggota dibawah halaman utama. Catatan
(pop-up form disamakan sebagai halaman web)
3. Robustness diagram pembuatan tulisan blog
Gambar 3.8 Robustness Diagram Blog
79
Tabel 3.5 Keterangan Robustness Diagram buat blog Nama
Keterangan
Aktor
pengunjung, use case login, use case moderator (admin)
Boundary object
Halaman kategori, halaman blog, form tulis blog, halaman konfirmasi blog, form komentar, form kesalahan (warna merah)
Entity object
User_session (httpSession), review (komentar) pada blog, blog itu sendir, konfirmasi dari admin *)
Controller
Pop-up
form login,
is_userLogin,
tampilkan
halaman blog, tulis_blog, simpan blog_id pada tabel, beri_rating, input komentar, validasi input data,
tampilkan
pesan
kesalahan,
tampilkan
komentar, Deskripsi
Pengunjung bernavigasi di halaman kategori blog lalu melihat entry blog. Kemudian klik login anggota
untuk
buat
blog.
Sistem
akan
menampilkan pop-up form login. Setelah proses login, user dikembalikan kehalaman blog untuk membuat blog dengan klik “buat blog”. User menginput text di form new_blog (title, tags dan body blog, gambar, dll) kemudian klik ‘tambah blog’ dan halaman utama. Catatan
(pop-up form disamakan sebagai halaman web)
80
3.4.2.3 Analisa Sistem Usulan dengan menggunakan metode Class Diagram Setelah domain permasalahan ditetapkan, analisa berikutnya adalah menetapkan kelas-kelas dari objek yang membangun sistem tersebut. Untuk itu dibuatkan class diagram dimana cakupan objek domain didekomposisi untuk mendapatkan struktur kelas yang kemudian di analisa kembali dalam detailedclass diagram. Class diagram website keseluruhan adalah sebagai berikut:
Gambar 3.9 Class Diagram Website (non-detail)
81
TabeL 3.6 Class Diagram sistem usulan Class
Keterangan
Profil Anggota
Kelas untuk keanggotaan komunitas
Photo
Diagam kelas untuk gambar photografik yg ditampilkan tiap profile
Blogs
Kelas untuk menjelaskan tulisan artikel anggota
Kotak Pesan
Kelas untuk pesan inbox profil anggota
Kategori
Kelas untuk kategori item / tag yang di masukkan pada photo/blog/forum dan lainlain sebagainya
Forum
Kelas untuk fitur forum komunikasi dan komentar forum.
Komunitas
Kelas abstrak untuk aktivitas anggota (seperti forum, blog, news, video, artikel dll)
Voting/rating/komentar
Kelas untuk komentar , memberikan rating atau mengikuti voting/usulan
3.4.2.4 Analisa sistem Usulan dengan Use Case Diagram 1.
Use case Pengunjung (anggota/tamu). Dimulai dari halaman utama. Sistem akan menampilkan halaman utama dan pengunjung berinteraksi dengan salah satu form dihalaman utama. Seperti pada gambar berikut:
82
Gambar 3.10 Use Case Pengunjung website Tabel 3.7 Deskripsi Use Case Pengunjung Nama Deskripsi
Use Case Pengunjung Pengunjung melakukan navigasi halaman website FKPPAI. Disini dimulai aktivitas sistem pertama kali. Selanjutnya interaksi antara pengunjung dan sistem dikendalikan oleh modul admin yang berisi pagecontroller dari API yang digunakan oleh sistem. Use case login/daftar
Aktor
-
Pengunjung, admin (page-controller)
Skenario A
-
Pengunjung klik salah satu anggota. Sistem akan
lihat profil anggota.
menampilkan
halaman
profile
tersebut.
pengunjung klik salah satu button, misalnya subscribe profile. Sistem menampilkan pop-up kolom input. Pengunjung mengisi email dan namanya. Skenario B daftar anggota
-
Seperti
skenario1,
ketika
pengunjung
ingin
mendaftar jadi anggota (karena keterbatasan
83
interaksi yg disediakan sistem buat pengunjung). Dimulai dengan klik button gabung. Sistem akan menampilkan form pendaftaran. Lalu pengunjung diminta mengisi semua kolom yang ada, jika selesai kemudian klik tombol Gabung. Sistem akan mengecek validitas data input, melakukan update basisdata dan menampilkan halaman konfirmasi disertai pesan surat masuk ”welcome messege” pada inbox anggota. Alternatif skenario
-
User ditolak. Jika setelah user menginput nama pada form pendaftaran anggota dan setelah sistem melakukan verifikasi data ditemukan bahwa email, username, password tidak valid dengan berbagai alasan, maka sistem akan mencatat instan_ID pengunjung berupa IP-address, session_time dan detail
lainnya
ke
dalam
katalog
master.
Pengunjung diminta untuk mengulanginya dalam beberapa saat kemudian. Pra Kondisi
-
Pengunjung melakukan navigasi ke halaman utama
Pasca Kondisi
-
user dalam posisi telah login ke website
2.
Use Case Anggota, kategori dan interaktif. Berisi interaksi objek dan anggota. Setelah login, pengunjung dapat menggunakan aplikasi yang terdapat dalam modul kategori. Interaksi instan kategori dengan anggota terdapat pada use case interaktif yang menjelaskan apa saja yang bisa dilakukan pada instan kategori tersebut. Dapat digambarkan sebagai berikut:
84
Gambar 3.11 Use Case Diagram Anggota & Kategori dan Interaktif Tabel 3.8 Deskripsi Usecase Halaman Anggota Nama
Use Case Diagram Halaman anggota
Aktor
-
Anggota
Deskripsi
-
Setiap anggota yg sudah terdaftar dapat masuk kapan saja pada halaman yg posisi sekarang dengan mengklik link masuk. Maka akan muncul form dinamis untuk pengunjung mengisikan informasi nama dan password yang dibutuhkan untuk masuk ke aplikasi.
Skenario
-
Pengunjung login dengan klik button gabung. Sistem menampilkan layar pop-up
login. Pengunjung input
username
Sistem
dan
password.
mengecek
dan
menampilkan halaman terakhir sebelum login disertai
85
menu anggota dibawah halaman web. Pengunjung (user) mencari halaman yang diinginkan dengan mengklik menu kategori. Sistem menampilkan halaman tersebut. User melakukan aktivitas pada kategori (misalnya membuat blog/membaca pesan komentar). Sistem memberitahu user informasi mengenai halaman yang dimaksud. Dan seterusnya Alternatif
-
skenario
Pengunjung mendaftarkan diri pada form gabung. Mengisi input teks yang disediakan, sistem akan konfirmasi dengan email dan me-redirect user ke halaman customize_profile.
Pra-kondisi
-
Pengunjung harus masuk ke halaman utama. Bisa melalui shortcut atau dng mengetik langsung di addressbar. Navigasi halaman ke form login bisa dimana saja karena perintah login dapat dilakukan secara dinamis pada halaman yg aktiv sekarang.
Pasca-kondisi
-
Anggota akan diberikan visual notifikasi di halaman utama. Menu anggota (bagian bawah) akan aktif dan memberikan status terakhir aktivitas anggota seperti kotak pesan, status update dll.
Tabel 3.9 Deskripsi Use Case Halaman Kategori Nama
Use Case Diagram halaman kategori
Deskripsi
Anggota yg sudah login dapat melihat blog, menyimpan dokumen foto aktivitas sehari-hari, mencari informasi berita dan seterusnya, dengan memilih menu kategori dan beranda kategori. Setelah itu akan di redirect ke form beranda dari konten kategori yang dimaksud. Kategori kemudian dapat dikelola oleh anggota dengan meng-klik button yang ada pada halaman kategori tersebut.
86
Skenario A
Anggota mengunjungi halaman kategori. Sistem membukan halaman
kategori
(sistem
jg
menyimpan
informasi
user_session dan HttpSession). Anggota klik menu blog dan mengamati form yang diberikan oleh sistem. Kemudian memilih kategori blog dengan klik ’tambah blog’. Sistem membuka form ’new post’. User menginput title dan tags yang sesuai dan menuliskan blognya di ”blog_text”. Setelah itu input data dari blog tersebut disimpan dengan perintah submit/publish. Sistem akan merespon dengan mengecek validitas
input
teks
yang
diberikan
user
dan
memberitahukan user statusnya (berhasil atau tidak) pada halaman tersebut. Skenario B
kategori yg sudah dibuat sebelumnya bisa di ubah/edit atau dihapus sesuai keinginan anggota. Juga bisa memberikan keterangan / komentar sendiri terhadap objek yang di publish. Sistem juga mengecek level keanggotaan dan security_context dari kategori yang di kunjungi oleh user. Dan memberikan visual-alert untuk informasi user.
Alternatif
sessionHTTP user sudah tidak sah, dan sistem meminta user
skenario
untuk login kembali. User kembali kepada use case login. Setelah itu dia akan di-redirect kehalaman blog kembali.
Pra-kondisi
Login anggota. Navigasi ke menu kategori.
Pasca-kondisi
Kategori Blog di publish pada halaman beranda kategori dan bisa dilihat oleh anggota lain. Pencipta kategori juga dapat mengubah atau menghapus kategori yang dimilikinya. Selain itu anggota dapat mengomentari reply (jawabankomentar) dari blog yang sudah ada sebelumnya.
87
Tabel 3.10 Deskripsi Use Case interaktif Nama
Use Case Diagram Interaktif
Deskripsi
Anggota dapat memberikan kontribusi pada kategori yang ditampilkan
halaman
kategori
dengan
memberikan
komentar atau rating/voting (menjadikan kategori tertentu popular – terbanyak dilihat). Interaksi ini memerlukan anggota sudah login dan konteks-sekuriti yang valid terhadap konten dari kategori yang dimaksud. Pengisian form input untuk interaktif ini lebih kurang sama seperti membuat blog namun dengan batasan pada kontennya. Skenario A
Sistem menampilkan sebuah konten kategori. User dapat mengklik button pada bagian bawah dari konten (di bawah quote atau vote). Setelah itu akan muncul pop-up form untuk user mengisi teks komentar. Sistem melakukan verifikasi input dan menampilkan pesan sukses jika tidak ada kesalahan.
Skenario B
Sistem menampilkan sebuah konten kategori. Kemudian juga menampilkan informasi bahwa user tidak bisa berinteraktif pada topik/subjek yang dimaksud. Anggota dapat melihat instan kategori lain yang sesuai keinginan. Atau dapat meng-klik button pada sub-form ”aksi” untuk membuat beberapa perintah interaksi tambahan yang tidak terkait konteks-sekuriti.
Skenario
Pada beberapa kategori user dapat melakukan interaktif
Alternatif
dengan konfirmasi seorang ’moderator’ atau creator instan. Caranya adalah mengirim pesan kepada anggota yang jadi moderator/creator instan kategori tersebut. Oleh sebab itu, dalam kategori ini batasan interaktif diperkecil hanya pada beberapa objek dari kategori yang ada.
Pra-kondisi
Tidak ada.
88
Pasca Kondisi
Sistem menampilkan pesan dan menyisipkan interaktif dari user pada instan kategori yang dimaksud
3.
Use Case Diagram Forum. Menjelaskan interaksi user dengan anggota lain dalam melakukan komunikasi pada wadah forum diskusi. Sesuai dengan analisa persyaratan yang ditetapkan sebelumnya, forum ini terintegrasi pada menu kategori dan bersifat user generated content. Sehingga interaksi bersifat lebih terbuka. Selanjutnya anggota yg sudah login dapat mengunjungi halaman forum untuk melihat aktivitas anggota lain dan berinteraksi dengan menjawab atau membuat sub-topik baru di halaman forum.
forum kunjungi halaman forum mengatur post forum
membuat topik post baru
edit / komentar posting
anggota
<<uses>>
Moderator forum
«uses»
«uses» submit komentar
menyimpan data admin
keluar forum
Gambar 3.12 Use Case Forum
89
Tabel 3.11 Deskripsi Use Case Forum Nama
Use Case Diagram forum
Actor
Anggota, pencipta forum (anggota lain)
Deskripsi
Anggota yg sudah login dapat berinteraksi pada forum tanya jawab dengan memilih menu kategori forum pada beranda kategori atau klik menu utama. Setelah itu akan di redirect ke form forum. Terdapat beberapa use case yaitu, tampilan halaman posting yang mencakup posting forum index forum dan interaktif terakhir posting tersebut. Use case edit posting digunakan untuk mengedit postingan anggota yang ada. Use case interaksi dengan forum digunakan untuk memberikan komentar atau rating
Skenario
Sistem menampilkan halaman forum setelah user klik menu kategori. Anggota dapat melihat diskusi forum yang sedang berjalan di forum post dengan meng-klik posting anggota ( use case lihat postingan). Untuk berinteraksi dengan memberi komentar pada form yang disediakan, Klik pada tombol ’buat topik baru’ uUntuk menuliskan topik forum, maka user akan dimintai judul topik dan menuliskan postingan forum pada isian teks-box. Kedua, anggota dapat melihat postingan anggota lain pada form sub-forum
yang
ada
disebelah
kanan.
kemudian
komentarnya dengan perintah submit/publish. Pra-kondisi
Login anggota. Navigasi ke menu forum atau kategori>beranda forum.
Pasca-kondisi
Form untuk sub-topik forum akan bertambah dengan postingan baru dari anggota. Komentar dari forum yang sudah ada juga dapat dilihat pada halaman ini.
90
4.
Use case Diagram Kontak Pesan digunakan untuk interaksi pengunjung (bisa anggota atau tamu) dengan administrator sistem untuk selanjutnya di review oleh user yang bertindak sebagai admin.
Use case diagram form Bantuan->kontak digambarkan sebagai berkut:
Gambar 3.13 Use Case Diagram Form Kontak Tabel 3.12 Keterangan Use Case Kontak pesan Nama
Use Case Diagram Kontak pesan
Deskripsi
Terdapat dua aktor yaitu pengunjung/anggota dan beberapa use case yaitu form kontak, input( nama, alamat, email, pesan), submit, dan konfirmasi pesan. Pengunjung dapat mengisi form kontak kemudian menekan tombol submit. Setiap form yang masuk kedalam buku daftar buku tamu tersebut akan tersimpan kedalam database.
Skenario
Pengunjung bernavigasi ke halaman tentang Bantuan, mengisi daftar kontak pada form yang tersedia.
91
Sistem akan menampilkan halaman bantuan dan form input kontak. Pengunjung memasukkan teks kedalam input_teks dan mengkonfirmasi visual-capcha lalu menekan tombol submit. Sistem akan memberikan konfirmasi sekaligus mengirim data ke dalam database Alternatif skenario
Pengunjung mengisi form dan sistem menampilkan pesan kesalahan (tanda *) pada field_input yang belum/salah.
Sistem
menyediakan
mekanisme
capcha untuk mencegah proses otomasi kode jahat. Jika pengunjung tidak ingin mengisi form kontak, maka pengunjung tidak perlu mengklik submit. Kondisi awal
Pengunjung tidak perlu melakukan proses daftar. Pengunjung harus melakukan navigasi dari menu bantuan terlebih dulu.
Kondisi akhir
Pengunjung/anggota akan diberitahu melalui email atau inbox mereka respond dari webmaster mengenai saran atau komentar yang diajukan pada form ini.
5.
Use Case Administrator Untuk kepentingan admin website makan dibutuhkan kontrol halaman oleh seorang administrator. Fitur administrator dengan use-case kelola anggota yang terdaftar (subscription member), dan pengaturan halaman utama untuk anggota dan tamu.
92
Gambar 3.14 Use Case Diagram Admin Tabel 3.13 Keterangan Use Case Admin Nama Deskripsi
Use Case Diagram Admin Terdapat satu aktor yaitu admin, administrasi sendiri digunakan untuk dapat mengelola layout halaman website, mengelola module halaman web (misalnya, foto, artikel, forum, video, pesan-singkat dan lainnya) dan kelola subscription anggota. Karenanya, administrator perlu menjaga agar website yang ada tetap dalam kondisi operasional dan kesalahan2 dapat dihindari.
Skenario
Administrasi
Harus
login.
Sistem
akan
menampilkan
menu_anggota dibawah halaman seperti anggota lain, dengan tambahan icon administration. Admin klik icon tersebut lalu sistem akan menampilkan halaman depan administration. Aktivitas selanjutnya sudah diluar skenario ini. Skenario
Tidak ada…
alternatif
Kecuali ada kesalahan konfigurasi instalasi sistem. Maka sistem akan menampilkan pesan error..
Pra-kondisi
Tidak ada (navigasi halaman bisa dimana saja) karena perintah
93
login untuk admin dapat dilakukan secara dinamis pada halaman yg sekarang. Pasca-
Menu anggota (bagian bawah) akan aktif seperti umumnya
kondisi
anggota. Hanya ada tambahan icon administration untuk keperluan administrasi website.
3.4.2.5 Analisa sistem usulan dengan Activity Diagram A. Activity Diagram Login pengunjung
Gambar 3.15 Activity Diagram Login
Tabel 3.14 Keterangan Activity Diagram Login Acitivity Diagram Login
Nama Deskripsi
Admin website secara otomatis melakukan verifikasi anggota
Singkat
sebelum masuk dalam aplikasi terlebih dahulu melakukan login.
Aktor
Pengunjung, sistem
94
Pra Kondisi
Pencatatan IP-address untuk pencegahan spamming
Tindakan
Pengunjung mengisi form daftar anggota
Utama
kirim konfirmasi balik ke pengunjung dengan email. Calon anggota melakukan aktivasi keanggotaan
Tindakan
membukan website email klien pengunjung untuk mendapatkan
Alternatif
informasi keanggotaan, jika belum bisa login.
Pasca Kondisi
anggota terdaftar dan aktif menu dan feature keanggotaan bisa diakses.
B. Activity Diagram kategori Node awal (mulai) Kunjungi kategori
pilih kategori
Posting komentar baru
Buat kategori baru
Kelola kategori saya posting kategori
Simpan ke database
Akhir Kegiatan
Gambar 3.16 Aktivity Diagram Kategori
95
Tabel 3.15 Keterangan Diagram aktivitas Nama Activity Deskripsi Singkat
Activity Diagram Kategori - Anggota yang telah login dapat mengunjungi halaman kategori. Kemudian navigasi ke bagian tertentu dari kategori yang ingin dilihat.
Aktor utama
-
Anggota/tamu
Pra Kondisi
-
login anggota
-
navigasi kehalaman kategori
-
Memilih salah satu kategori. Memilih informasi
Tindakan Utama
yang ditampilkan dan mengelola ’kategori saya’ untuk selanjutnya anggota dapat memberi komentar, membuat postingan baru atau menghapus kategori / komentar yg sebelumnya dia buat. -
Berinteraksi dengan kategori yang dipublis oleh anggota lain.
Tindakan Alternatif
-
sistem akan mengingatkan anggota sesuai dengan level keanggotaan
-
memberitahukan anggota jika terjadi kesalahan sistem
Pasca Kondisi
-
halaman
kategori
akan
bertambah/berubah
menyesuaikan aktivitas yang dilakukan anggota pada tindakan utama. -
Menyimpan perubahan pada database
-
Menampilkan kesalahan jika terjadi error dalam aplikasi yang dimaksud.
96
C. Activity Diagram forum dan kotak pesan
Gambar 3.17 Activity Diagram forum dan kotak pesan Tabel 3.16 Keterangan Aktivity diagram forum dan kotak pesan Nama Activity
Activity Diagram forum & kotak pesan
Deskripsi Singkat
-
Anggota yang telah login dapat mengunjungi halaman beranda forum dengan klik menu aplikasi. Kemudian navigasi ke bagian tertentu dari kategori yang ingin dilihat.
Aktor utama
-
Anggota/tamu
Pra Kondisi
-
login anggota
-
navigasi kehalaman kategori
97
Tindakan Utama
-
Memilih menu “beranda forum”. Klik salah satu kategori dalam forum atau memilih isi forum terakhir yang aktif. untuk selanjutnya anggota dapat memberi komentar, membuat postingan baru atau menghapus topik dalam forum. Sesuai level user, maka dia juga dapat menjadi moderator dalam forum tersebut
-
Berinteraksi dengan kategori yang dipublis oleh anggota lain.
Tindakan
-
Alternatif
sistem akan mengingatkan anggota sesuai dengan level keanggotaan atau pengunjung belum login ke sistem.
-
memberitahukan anggota jika terjadi kesalahan sistem
Pasca Kondisi
-
halaman beranda forum dan kategori dalam forum akan bertambah/berubah menyesuaikan aktivitas yang dilakukan anggota pada tindakan utama.
-
Menyimpan perubahan pada database
-
Menampilkan kesalahan jika terjadi error dalam aplikasi yang dimaksud.
98
D. Activity diagram admin website
Gambar 3. 18 Activity diagram Admin website Tabel 3.17 Keterangan Tabel activity diagram Admin Nama
Acitivity Diagram Admin
Deskripsi Singkat
Admin website secara otomatis melakukan verifikasi anggota
sebelum masuk dalam aplikasi terlebih
dahulu melakukan login. Aktor
admin, sistem
Pra Kondisi
login pengunjung sebagai admin webste
Tindakan Utama
administrasi sendiri digunakan untuk dapat mengelola layout halaman website, mengelola module halaman web (misalnya, foto, artikel, forum, video, pesansingkat dan lainnya) dan kelola subscription anggota.
99
Karenanya, administrator perlu menjaga agar website yang ada tetap dalam kondisi operasional dan kesalahan2 dapat dihindari. Tindakan Alternatif
Tidak ada
Pasca Kondisi
anggota terdaftar dan aktif menu dan feature keanggotaan terbuka dan bisa diakses.
3.4.2.6 Analisa Sistem Usulan dengan Sequence Diagram A. Login pengunjung
Gambar 3.19 Sequence Diagram Login Tabel 3.18 Keterangan Sequence Diagram Login Nama
Sequence Diagram Login
Deskripsi
Menjelaskan
proses
terjadinya
masuk
(login)
Singkat
Pengunjung pada website. Dimulai ketika pengunjung login, akan diminta userID dan password untuk dicek melawan data yg ada di basisdata.
100
Setelah selesai, dia akan dikembalikan pada halaman terakhir navigasi atau kembali ke halaman utama website. Selain itu terdapat shortcut informasi di bagian bawah halaman yang setiap waktu dapat digunakan oleh anggota yg sudah masuk (login) Aktor
Pengunjung
Pra Kondisi
Mengunjungi halaman utama website
Tindakan Utama
Kunjungi halaman utama atau URL navigasi kemudian sistem menampilkan button login dan pengunjung klik button login. Sistem menampilkan pop-up form login dan memberi kesempatan user untuk masukkan nama dan password. Setelah selesai input data, user dibawa kehalaman utama kembali sambil sistem mengupdate informasi ’selamat datang’ kepada anggota. klik login/masuk Memasukkan user id dan password
Tindakan
Klik teks ’ayo gabung’ pada form-login, jika user tidak
Alternatif
mempunyai akun sebelumnya. Kemudian sistem menampilkan
form
gabung
untuk
diisi
oleh
pengunjung. Setelah semua input teks terisi dan klik tombol gabung pada form ini, user dibalikkan kembali kehalaman utama website, sambil sistem mengupdate informasi ’selamat datang’ kepada anggota (baru). Pasca Kondisi
tampilan menu_anggota akan aktif dibagian bawah website. Informasi pesan, status dan aktivitas pengguna dan interaksi terakhir dengan anggota lain. Terbuka feature tambahan yang sebelumnya tidak aktif.
101
B. Sequence Diagram buat blog baru
Gambar 3.20 Sequence Diagram buat Blog Tabel 3.19 Keterangan Sequence Diagram buat Blog Nama
Sequence Diagram buat Blog
Deskripsi Singkat Menjelaskan proses terjadinya pembuatan blog Pengunjung pada website. Dimulai ketika pengunjung login, kemudian melihat blog yang dipublish anggota pada halaman utama. Dan membuat blog baru berdasarkan kebutuhan user. Aktor
Anggota
Pra Kondisi
Mengunjungi halaman utama website, kunjungi form beranda blog
Tindakan Utama
Kunjungi halaman utama atau URL navigasi ke kategori blog/ atau ke blog anggota. klik buat blog Memasukkan title dan kategori blog
102
Masukkan post teks yang berisi body blog. Selesai klik button ”publish blog” Tindakan
Melihat blog anggota, membuat blog sendiri dari menu
Alternatif
profile_anggota. Membuat blog tapi tidak jadi menyimpan atau terdapat kesalahan pada proses menulis blog.
Pasca Kondisi
Blog akan dipublish di profile anggota dan halaman utama Blog bisa di edit / di hapus sesuai keinginan. Atau bisa dikirim link ke anggota lain. Jumlah Tag-website dan entri form pada halaman utama bertambah dengan kategori blog yang baru dibuat.
C. Sequence Diagram kategori forum
Gambar 3.21 Sequence Diagram forum
103
Tabel 3.20 Buat Forum di halaman kategori forum Nama
Use Case Diagram forum
Actor
Anggota, pencipta forum (anggota lain)
Deskripsi
Anggota yg sudah login dapat berinteraksi pada forum tanya jawab dengan memilih menu kategori forum pada beranda kategori atau klik menu utama. Setelah itu akan di redirect ke form forum. Terdapat beberapa use case yaitu, tampilan halaman posting yang mencakup posting forum index forum dan interaktif terakhir posting tersebut. Use case edit posting digunakan untuk mengedit postingan anggota yang sudah ada. Use case interaksi dengan forum digunakan untuk memberikan komentar atau rating terhadap postingan yang telah ada.
Skenario
Sistem menampilkan halaman forum setelah user klik menu kategori. Anggota dapat melihat diskusi forum yang sedang berjalan di forum post dengan meng-klik postingan anggota ( use case lihat postingan). Untuk berinteraksi dengan memberi komentar pada form yang disediakan, Klik pada Untuk menuliskan topik forum, maka user akan dimintai judul topik dan menuliskan postingan forum pada isian teks-box. Kedua, anggota dapat melihat postingan anggota lain pada form sub-forum yang ada disebelah kanan. kemudian komentarnya dengan perintah submit/publish.
Pra-kondisi
Login anggota. Navigasi ke menu forum atau kategori>beranda forum.
Pasca-kondisi
Form untuk sub-topik forum akan bertambah dengan postingan baru dari anggota. Komentar dari forum yang sudah ada juga dapat dilihat pada halaman ini.
104
3.4.2.7 Communication Diagram Untuk analisa communication Diagram dari instan-class anggota selama login sampai dengan selesai (logout). Di gambarkan sebagai berikut:
pageID(home)
isLogged() :getMemberLoginCode
:memberID
rejected()
Finish
pageCode(ID, categori())
Start
:showCategories
ErrorsExcption()
*code_accepted()
Logout() cmd_sent()
newCats:BlogPage getPage_user()
Update Database
Buat objek/kategori baru (foto,blog, video, user_activity) dari input perintah user
Approve action
Gambar 3.22 Communication Diagram Website Tabel 3.23 Keterangan Communication Diagram Nama Deskripsi singkat Object_messege
Keterangan :
User mengunjungi website, methode applikasi yg dipakai: • main_init(); • pageview(ID); • object_start(); • flash_app(); • designBoxContent(); • modul_init(); file yg di eksekusi - index.php, - top_menu.php - design.inc.php
105
Objek yg termasuk
- header_inc.php - content_inc.php - db_inc.php - profile.inc.php pengunjung, Anggota, Admin
Skenario
Pengunjung melakukan navigasi website dengan mengklik subjek apa saja yang diinginkan. Atau melakukan login jika dia sudah menjadi anggota. Kemudian sistem akan merespon atas aktivitas user. -
Khusus untuk anggota, tampilan website setelah
login
akan
diperluas
dengan
tambahan menu_anggota untuk melakukan Instant-messeging, status update dan aktivitas antar-anggota lainnya. -
Khusu untuk admin, tampilan menu_anggota ditambah
dengan
administration
page.
Halaman ini digunakan untuk mengelola website dan aktivitas user atau mengelola fitur-fitur tambahan yang disediakan aplikasi. Semuanya akan berakhir pada saat anggota logoff yang ditandai dengan proses update ke database dari setiap aktivitas yang dilakukan. (untuk anggota dan admin saja). Pasca kondisi
Data pada basisdata di update sesuai aktivitas yang dilakukan anggota atau admin. Jika terjadi kesalahan,
sistem
akan
memberitahukan
pengunjung atas kesalahan tersebut dengan keterangan yang muncul dilayar aplikasi.
106
3.5
Pemodelan Basisdata Website FKPPAI (ER-Diagram) Untuk memungkinkan aktivitas anggota pada website FKPPAI, maka
dibuatkan rancangan basisdata untuk menampung segala informasi yang disediakan oleh aplikasi yang diusulkan tersebut. Rancangan basis data (database) bertujuan untuk diperolehnya basisdata yang efesiensi dalam penggunaan ruang penyimpanan, cepat dalam pengaksesan dan mudah untuk memanipulasi data serta bebas dari redudansi data. 3.5.1
Rencana Struktur Basisdata website Menggunakan pemodelan basisdata Entity-Relationship Diagram, maka
dibutuhkan entitas sebagai berikut: Tabel 3.22 Daftar entitas basisdata Website FKPPAI (ringkasan) Entitas Type No. 1 profiles Table profile_custom sys_cmts_profile 2 sys_top_menu Table sys_module sys_menu_member sys_menu_bottom sys_admin_top sys_object sys_option sys_page_compose sys_cats 3. sys_menu_main Table sys_page_compose sys_index 4
bx_photo bx_video bx_news
Table
keterangan Berisi objek anggota yang sudah terdaftar pada website FKPPAI. Berisi data dari komponen yang membangun halaman web dan objek yang menyusun modul-mudul halaman (misalnya menu halaman, form isian, command_button, dan lainnya) Catatan: Komponen utama yang tidak bisa di edit langsung dari basis-data, karena berisi kode program utama. Berisi index dari aktivitas terkini yang bersifat real time dari pengguna website. Index digunakan untuk mempercepat akses kebeberapa item dalam website Adalah container yang berisi data native dari objek yang berdapat pada keseluruhan halaman. Data yang ditampung pada tabel ini
107
5
bx_news_entries bx_blogs bx_blog_cmts bx_forums bx_forums_topic bx_forums_post sys_acl_action sys_acl_level sys_acl_matrix
berukuran besar dan merupakan objek yang diproteksi dengan tabel sekurity.
Table
Adalah komponen yang mengatur keamanan (security) dan level akses dari setiap objek yang ada pada website maupun objek di database.
Table
Adalah tabel yang berisi variable konstant yang dibutuhkan untuk beberapa fungsi dari website. Berisi komponen yg digunakan oleh administrator website untuk mengelola komposisi website dan variabel-variable terkait.
6
sys_prevalues sys_color
7
sys_admin_page Table sys_module_admin sys_member_subs sys_cron_jobs
3.5.2
Entity-relationship Diagram Entity-relationship Diagram mengambil bagian modul Profil anggota untuk
menjelaskan hubungan antara anggota dengan aktivitas yang terkait dengan aplikasi pada website yang dibuat. Dalam ER-Diagram ini, entitas profiles menjadi tabel yang memiliki ketergantungan terikat untuk keberadaan entitias lain dalam website.
108
Gambar 3.23 Entity-relationship Diagram Profile
109
Gambar 3.24 Entity-relationship Diagram Forum bx_blogs_main
bx_blogs_posts
OwnerID U1
ID Description
PostUri U1 I1 I1
PostID PostCaption PostText PostDate PostStatus PostPhoto Tags Featured Views Rate RateCount CommentsCount OwnerID Categories allowView allowRate allowComment
profiles I5,I6
NickName
U1
ID Status Role City Featured DateReg Tags Views Rate allow_view_to Avatar Occupation Hobbies Interests FirstName LastName
I5,I6 I3 I5,I6
bx_blogs_cmts
I1
bx_blogs_views_track id viewer ip
sys_objects_cmts
cmt_parent_id cmt_object_id U1 U1
cmt_id cmt_author_id cmt_text cmt_mood cmt_rate cmt_rate_count cmt_time cmt_replies
bx_blogs_voting_track blogp_id blogp_ip blogp_date
bx_blogs_rating blogp_id blogp_rating_count blogp_rating_sum
ts
Gambar 3.25 Entity-relationship Diagram Blog
ID ObjectName TableCmts TableTrack AllowTags Nl2br SecToEdit PerView IsRatable ViewingThreshold AnimationEffect AnimationSpeed IsOn IsMood RootStylePrefix TriggerTable TriggerFieldId TriggerFieldComments ClassName ClassFile
110
3.5.3
Kamus Data (DDL) aplikasi Website
Keterangan Diagram Entity-Relationship
a.
Tabel profiles Entitas
Tipe data
ID
int(10)unsigned
NickName Email Password Salt Status
varchar(255) varchar(255) varchar(40) varchar(10) Enum ('Unconfirmed', 'Approval', 'Active', 'Rejected', 'Suspended') tinyint(4)unsigned int(10)unsigned varchar(255) set('male','female') varchar(255) Text varchar(255) varchar(255) Date tinyint(1) Datetime Datetime Datetime Datetime int(10)unsigned varchar(255) varchar(255) tinyint(1) int(11) tinyint(1) int(11) Float int(11) int(11)
Role Couple Sex LookingFor Headline DescriptionMe Country City DateOfBirth Featured DateReg DateLastEdit DateLastLogin DateLastNav aff_num Tags zip EmailNOT NULLify LangID UpdateMatch Views Rate RateCount CommentsCount
Keterangan NOT NULL, auto_increment NOT NULL NOT NULL NOT NULL NOT NULL
NOT NOT NOT NOT NOT NOT NOT NOT NOT NOT NOT NOT NOT NOT NOT NOT NOT NOT NOT NOT NOT NOT NOT NOT NOT
NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL
111
PrivacyDefaultGroup allow_view_to UserStatus UserStatusMessage UserStatusMessageWhen Avatar Height Weight Income Occupation Religion Education RelationshipStatus
Hobbies Interests Ethnicity FavoriteSites FavoriteMusic FavoriteFilms FavoriteBooks FirstName LastName FacebookProfile
int(11) int(11) varchar(64) varchar(255) int(10) int(10)unsigned varchar(255) varchar(255) varchar(255) varchar(255) varchar(255) varchar(255) Enum ('Single', 'In a Relationship', 'Engaged', 'Married', 'It's Complicated', 'In an Open Relationship') text text varchar(255) text text text text varchar(255) varchar(255) int(10) Constraint
NOT NOT NOT NOT NOT NOT NOT NOT NOT NOT NOT NOT
NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL NULL
NULL, NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL
PRIMARY KEY ("ID"), UNIQUE KEY "NickName" ("NickName"), KEY "Country" ("Country"), KEY "DateOfBirth" ("DateOfBirth"), KEY "DateReg" ("DateReg"), KEY "DateLastNav" ("DateLastNav"), FULLTEXT KEY "NickName_2" ("NickName","City","Headline","DescriptionMe","Tags"), FULLTEXT KEY "NickName_3" ("NickName","City","Headline","DescriptionMe","Tags")
b.
Tabel bx_photo_main Entitas
ID Categories Owner Ext Size Title Uri Desc
Tipedata int(10)unsigned text int(10)unsigned varchar(4) varchar(10) varchar(255) varchar(255) text
Keterangan NOT NULL NOT NULL NOT NULL NULL NOT NULL NOT NULL NOT NULL NOT NULL
112
Tags Date Views Rate RateCount CommentsCount Featured Status Hash
NOT NULL varchar(255) NOT NULL int(11) int(11) float int(11) int(11) tinyint(4) enum('approved','disapproved','pending') Varchar(32)
constraint PRIMARY KEY ("ID"), UNIQUE KEY "Hash" ("Hash"), KEY "Owner" ("Owner"), FULLTEXT KEY "ftMain" ("Title","Tags","Desc","Categories"), FULLTEXT KEY "ftTags" ("Tags"), FULLTEXT KEY "ftCategories" ("Categories")
c.
Tabel cmts_profile Entitas
Tipedata
Keterangan
cmt_id cmt_parent_id cmt_object_id cmt_author_id cmt_text cmt_mood cmt_rate cmt_rate_count cmt_time cmt_replies
int(11) NOT NULL int(11) NOT NULL int(11) NOT NULL int(10)unsigned NULL text NOT NULL tinyint(4) NOT NULL int(11) NOT NULL int(11) NOT NULL datetime NOT NULL int(11) NOT NULL constraint PRIMARY KEY ("cmt_id"), KEY cmt_object_id ("cmt_object_id","cmt_parent_id")
d.
Tabel bx_forum
Entitas forum_id forum_uri cat_id forum_title forum_desc forum_posts forum_topics
Tipe data int(10)unsigned varchar(255) int(11) varchar(255) varchar(255) int(11) int(11)
Keterangan NOT NULL auto_increment, NOT NULL, default '' NOT NULL, default'0' NULL,default NOT NULL,default'' NOT NULL,default'0' NOT NULL,default'0'
113
forum_last forum_type
int(11) enum('public','private')
NOT NULL,default'0' NOTNULL,default'public'
Constraint PRIMARY KEY ("forum_id"), KEY "cat_id" ("cat_id"), KEY "forum_uri" ("forum_uri")
e.
Tabel bx_forum_topic
Entitas
Tipe data
Keterangan
topic_id topic_uri forum_id topic_title when topic_posts first_post_user first_post_when last_post_user last_post_when topic_sticky topic_locked
int(10)unsigned NOT NULL varchar(255) NOT NULL int(11) NOT NULL varchar(255) NOT NULL int(11) NOT NULL int(11) NOT NULL varchar(32) NOT NULL int(11) NOT NULL varchar(32) NOT NULL int(11) NOT NULL int(11) NOT NULL tinyint(4) NOT NULL constraint PRIMARY KEY ("topic_id"), KEY "forum_id" ("forum_id"), KEY "forum_id_2" ("forum_id","when"), KEY "topic_uri" ("topic_uri")
f.
auto_increment default default default default default default default default default default Default
Tabel forum_post
Entitas post_id topic_id forum_id user post_text when votes reports
Tipedata int(10) unsigned NOT int(11) NOT int(11) NOT varchar(32) NOT mediumtext NOT int(11) NOT int(11) NOT int(11) NOT constraint PRIMARY KEY ("post_id"), KEY "topic_id" ("topic_id"), KEY "forum_id" ("forum_id"), KEY "user" ("user"), KEY "when" ("when")
NULL NULL NULL NULL NULL NULL NULL NULL
Keterangan auto_increment default default default default default Default
114
g.
Tabel forum_cats
Entitas cat_id cat_uri cat_name cat_icon cat_order
Tipe data int(10)unsigned varchar(255) varchar(255) varchar(32) float
NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL constraint
Keterangan auto_increment default default default Default
PRIMARY KEY ("cat_id"), KEY "cat_order" ("cat_order"), KEY "cat_uri" ("cat_uri")
h.
Tabel news_entries
Entitas id author_id caption content uri tags categories comment vote date status featured rate rate_count view_count cmts_count
Tipe data int(11)unsigned int(11)unsigned varchar(64) text varchar(64) varchar(255) varchar(255) tinyint(4) tinyint(4) int(11) tinyint(4) tinyint(4) int(11) int(11) int(11) int(11)
NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL constraint
Keterangan auto_increment default default default default default default default default default default default default default Default
PRIMARY KEY ("id"), UNIQUE KEY "uri" ("uri"), FULLTEXT KEY "search_group" ("caption","content","tags","categories"), FULLTEXT KEY "search_caption" ("caption"), FULLTEXT KEY "search_content" ("content"), FULLTEXT KEY "search_tags" ("tags"), FULLTEXT KEY "search_categories" ("categories")
i.
Tabel blog_cmnts
Entitas cmt_id cmt_parent_id cmt_object_id cmt_author_id
Tipe data int(11) int(11) int(11) int(10)unsigned
NOT NOT NOT NOT
Keterangan NULL auto_increment NULL default NULL default NULL default
115
cmt_text cmt_mood cmt_rate cmt_rate_count cmt_time cmt_replies
text tinyint(4) int(11) int(11) datetime int(11)
NOT NOT NOT NOT NOT NOT
NULL NULL NULL NULL NULL NULL
default default default default Default
constraint PRIMARY KEY ("cmt_id"), KEY "cmt_object_id" ("cmt_object_id","cmt_parent_id")
j.
Tabel blog_post
Entitas PostID PostCaption PostUri PostText PostDate PostStatus
Tipe data Keterangan int(11)unsigned NOT NULL auto_increment varchar(255) NOT NULL default varchar(255) NOT NULL default text NOT NULL int(11)unsigned NOT NULL default enum ('approval' 'disapproval') NOT NULL default PostPhoto varchar(64) default Tags varchar(255) NOT NULL default Featured tinyint(1) NOT NULL default Views int(11)unsigned NOT NULL Rate float NOT NULL RateCount int(11)unsigned NOT NULL CommentsCount int(11)unsigned NOT NULL OwnerID int(11)unsigned NOT NULL Categories varchar(255) NOT NULL default allowView int(11) NOT NULL allowRate int(11) NOT NULL allowComment int(11) NOT NULL constraint PRIMARY KEY ("PostID"), UNIQUE KEY "PostUri" ("PostUri"), FULLTEXT KEY "PostCaption" ("PostCaption","PostText","Tags")
k.
Tabel blog_cmts
Entitas cmt_id cmt_parent_id cmt_object_id cmt_author_id cmt_text cmt_mood cmt_rate cmt_rate_count cmt_time
Tipe data int(11)unsigned int(11)unsigned int(11)unsigned int(11)unsigned text tinyint(4) int(11)unsigned int(11)unsigned datetime
NOT NOT NOT NOT NOT NOT NOT NOT NOT
Keterangan NULL auto_increment NULL default NULL default NULL default NULL NULL default NULL default NULL default NULL default
116
cmt_replies
int(11)unsigned NOT NULL Default Constraint PRIMARY KEY ("cmt_id"), KEY "cmt_object_id" ("cmt_object_id","cmt_parent_id")
l.
Tabel blog_main
Entitas ID OwnerID Description
Tipe data (panjang) Keterangan int(11)unsigned NOT NULL auto_increment int(11)unsigned NOT NULL default varchar(255) NOT NULL Default Constraint PRIMARY KEY ("ID"), KEY "OwnerID" ("OwnerID")
m.
Tabel sys_admin_banlist
Entitas ProfID Time DateTime
Tipe data (panjang) int(11) int(20) datetime
PRIMARY KEY
n.
Keterangan NOT NULL default NOT NULL default NOT NULL Default
("ProfID")
Tabel sys_categories
Entitas Category ID Type Owner Status Date
Tipe data (panjang) varchar(32) int(10)unsigned varchar(20) int(10)unsigned enum('active','passive')
timestamp
PRIMARY KEY
o.
NOT NOT NOT NOT NOT NOT
NULL NULL NULL NULL NULL NULL
Keterangan default '' default '0' default 'photo' default default
'active' CURRENT_TIMESTAMP
("Category","ID","Type")
Tabel sys_friend_list
Entitas ID Profile Check
Type data int(10)unsigned int(10)unsigned tinyint(2)
When
timestamp
Keterangan NOT NULL default '0' NOT NULL default '0' NOT NULL default '0' CCURRENT_TIMESTAMP on update NOT NULL default CURRENT_TIMESTAMP constraint
UNIQUE KEY FriendPair ("ID" Profile) KEY ID ("ID") KEY Profile ("Profile")
117
3.6
Rancangan Antarmuka Aplikasi A. Struktur Halaman Website Struktur yang membangun komponen halaman utama (homepage) website
ini terdiri dari file-file modul php. Setiap modul merupakan bagian yang menangani tugas tertentu dan dimuat secara dinamis sesuai kebutuhan dan pengaturan yang telah dibuat oleh administrator website. Untuk lebih jelasnya, berikut ini gambar struktur halaman utama website.
Gambar 3.25 Struktur Halaman Utama
118
Modul file php halaman utama yang dimuat setelah anggota login terdiri dari: NAMA
TIPE
AllMember
Page
CLASS FILE
METODA
class BxDolPageView.php
Simple Messenger
service
Module BxSimpleMessengerModule.php serviceGetMessengerCore
Shoutbox
service
Module BxShoutBoxModule.php
serviceGetShoutbox
Quotes
service
Module BxQuotesModule.php
serviceGetQuoteUnit
Poll
service
Module BxPollModule.php
serviceGetPolls
News
service
Module BxNewsModule.php;archive.php serviceArchiveBlock
Messenger
service
Module BxMsgModule.php
serviceGetInvitation
Blog
service
Module BxBlogsModule.php
serviceBlogsIndexPage
Profile Custom
service
Module BxProfileCustomizeModule.php serviceGetCustomizeBlock
B. Antarmuka Halaman Utama Antarmuka halaman website FKPPAI secara keseluruhan dapat digambarkan seperti dibawah ini
Gambar 3.26 Rancangan Halaman Utama Website FKPPA
119
Rancangan antarmuka halaman utama ini terdiri dari: C. Login sub-form
Gambar 3.27 Form Statistik Website D. Form keanggotaan (member_list)
photo
Detail anggota
photo
Detail anggota
photo
Detail anggota
photo
Detail anggota
statistik anggota: • teraktif • menarik • konten • negara • terbaik
Gambar 3.28 Form list keanggotaan
120
E. Form kategori forum Forum headline Forum kategori posting
1. 2. 3. 4.
G A M B A R
Forum topik
Tentang forum Aturan .........
Kesehatan komunitas berita lain-lain
Anggota forum komunitas dan link terkait lainnya
Internal link address / iklan
Gambar 3.29 form halaman utama forum F. pencarian anggota Pencarian anggota Spesifik : Nama user: ID-user :
Pilihan Saya ini laki
wanita
Mencari: Umur Negara: Dengan status:
online
Ada photo
Gambar 3.30 Form Cari Anggota
121
G. Form pendaftaran
Gambar 3.31 Form pendaftaran Anggota
122
H. Menu di atas Halaman Utama
Gambar 3.32 Form Menu Atas I. Form post yg di publiskan oleh anggota (kategori, forum, komentar, dll)
Gambar 3.33 Form komentar interaktif
