BAB IV ANALISIS DAN PERANCANGAN SISTEM 4.1 Analisa

BAB IV
ANALISIS DAN PERANCANGAN SISTEM
4.1 Analisa Sistem
Analisa sistem terdiri dari bagaimana tahap perancangan dari forum yang
dibangun secara terinci dan menganalisa desain Unified Modeling Language dari
sistem yang dibangun. Analisa penelitian bertujuan untuk mengetahui bagaimana
perancangan awal dari forum yang dibangun. Dalam pembentukan aplikasi ini
lebih memperhatikan untuk kenyamanan pengguna dengan interface yang
disesuaikan dengan selera pengguna. Dengan adanya penelitian yang kami
lakukan diharapkan dengan adanya forum ini dapat memenuhi keinginan
pengguna dalam berdiskusi.
4.1.1
Kebutuhan Sistem
Untuk melakukan sebuah analisa sistem maka diperlukan perangkat atau
peralatan dalam penelitian ini, perangkat terdiri dari perangkat keras dan
perangkat lunak, yang akan dijelaskan dan dijabarkan dibawah ini.
4.1.1.1 Perangkat Keras Sistem
Sistem atau aplikasi yang dirancang membutuhkan perangkat keras untuk
membantu penelitian ini, yaitu dengan menggunakan seperangkat komputer untuk
installasi program.
4.1.1.2 Perangkat Lunak Sistem
Sistem atau aplikasi yang dirancang membutuhkan perangkat lunak untuk
membantu dalam menyelesaikan rancangan aplikasi yang akan digunakan yaitu:
1. Software Local Web Server
Software ini terdiri dari PHP, Apache , dan MySql. Dalam penelitian ini
penulis menggunakan XAMPP versi 1.7.2 yang komponennya terdiri dari:
32
a.
b.
c.
d.
Apache versi 2.2. 12.
PHP versi 5.3.0.
MySQL client version: 5.1.37
PhpMyAdmin versi 3.2.0.1
2. Software Web Browser
Web Browser yang berguna untuk menampilkan interface dari script dari
PHP, HTML, CSS, JavaScript dan sebagainya.
3. Php Framework : Yii Framework
4.1.2
Pengolahan Data
Pada bagian ini akan dilakukan pengolahan data yang mana data yang
diambil masih baku dan belum jelas. Maka diperlukan beberapa langkah dalam
melakukan pengolahan data dengan benar sehingga menghasilkan sebuah
program.
4.1.3
Use Case Diagram
Pada diagram ini dijelaskan tentang bagaimana proses dari user yang
menggunakan forum diskusi dengan mendaftar dan login sehingga bisa
berinteraksi dan berpatisipasi dalam forum diskusi ini.
4.1.3.1 Defenisi / Identifikasi Aktor
Tabel 4.1 Defenisi / Identifikasi Aktor
NO
ACTOR
1
Admin
DESKRIPSI
Seorang aktor yang mengontrol dan mengatur semua
konten dan kegaiatan user dalam forum diskusi.
Member Seorang aktor yang menggunakan konten
2
Member
dalam forum dan hanya dapat mengatur konten dari
kepunyaannya sendiri.
3
Guest
Guest Seorang aktor yang mana hanya bisa melihat
konten dari forum, dan tidak dapat menggunakannya.
33
4.1.3.2 Diagram Use Case
Forum
Lihat List user
Lihat profil
Manage berita
edit profil
«extends»
Lihat berita
«extends»
Guest
Lihat KAtegori
Lihat thread
Admin
Login
«extends»
Member
«extends»
Tambah thread
«extends»
Tambah Kategori
«extends»
Lihat komentar
«extends»
Tambah user
Tambah komentar
Logout
Gambar 4.1 Use Case Diagram
4.2 Perancangan Sistem
Perancangan program dengan menggunakan bahasa pemrograman PHP
Framework termasuk file CSS untuk desain halaman web dan file JavaScript
untuk supaya halaman web berjalan dengan optimal.
4.2.1
Class Diagram
Pada class diagram ini dijelaskan bagaimana proses pengembangan sistem
dari sebuah komponen-komponen aplikasi, atribut-atribut dari elemen-elemen
data serta menjelaskan tentang struktur dan deskripsi class diagram bagaimana
seorang user dapat menggunakan forum.
34
Gambar 4.2 Class Diagram
4.2.1.1 Tabel Database dari Class Diagram
1. Tabel Kategori
Gambar 4.3 Tabel kategori
2. Tabel thread
Gambar 4.4 Tabel thread
35
3. Tabel User
Gambar 4.5 Tabel user
4. Tabel level
Gambar 4.6 Tabel level
5. Tabel news
Gambar 4.7 Tabel news
6. Tabel reputasi
Gambar 4.8 Tabel reputasi
7. Tabel threadstar
Gambar 4.9. Tabel threadstar
36
8. Tabel comment
Gambar 4.10 Tabel comment
4.2.2
Statechart Diagram
Pada diagram ini dijelaskan bagaimana seorang user memasuki
forum sehinga dapat berinteraksi dan mengunakan konten-konten yang
tersedia.
1.
Statechart Diagram proses mengirim post
Guest
buka browser
Login
_________
Masuk Username
Masuk pasword
login
Index
_______
Tampil berita
Tampil terbanyak thread
Tampil koment terakhir
Tampil thread terakhir
Tampil top thread
Sebagai admin
Sebagai member
Forum
__________
Tambah user
_________
Tampil kategori
Post
___________
Tambah thread
Tambah koment
Beri reputasi
Kategori
_______
Post
_________
Tambah berita
Tabah kategori
Inout username
Input paeord
Input email
Input tanggal lahir
Input photo
register
Tampil thread
Tampil komentar
logout
akhir
Gambar 4.11 Statechart Diagram proses mengirim post
37
2.
Statechart Diagram proses melihat profil
Guest
buka browser
Login
_________
Masuk Username
Masuk pasword
login
User List
_______
Tampil user
Sebagai admin
Sebagai member
Profil
_______
Tampil profil user
Profil
_________
Tambah profil
Update profil
Hapus profil
Manage profili
Profil
______
Update profil
logout
akhir
Gambar 4.12 Statechart Diagram proses melihat profile
4.2.3
Activity Diagram
Diagram ini menjelaskan bagaimana kegiatan berawal yaitu dari
proses mendaftar dan login untuk bisa memasuki forum diskusi.
1. Diagram active untuk guest
Mulai
Lihat Berita
Lihat daftar user
Lihat Forum
Lihat profil user
Lihat Kategori
Tambah thread
Lihat Komentar
Akhir
Gambar 4.13 Diagram active untuk guest
38
2. Diagram Activity untuk member
Mulai
Login
/ Salah usename / pasword
Lihat Berita
Edit Profil
Lihat Forum
Lihat daftar user
Lihat Kategori
Lihat Thread
Lihat profil user
Tamah thread
Lihat coment
Tambah KAtegori
tambah komen
Akhir
Gambar 4.14 Diagram activity untuk member
3. Diagram activity untuk admin
Mulai
Login
/ Salah user/ pass
Lihat Berita
Edit Profil
Tambah berita
Lihat Forum
Tambah USer
Lihat daftar user
Hapus Berita
Lihat Kategori
Hapus USer
Lihat profil user
Lihat Thread
Tambah KAtegori
Lihat Komentar
Akhir
Gambar 4.15 Diagram activity untuk admin
39
4.2.4
Sequence Diagram
Sequence Diagram menggambarkan perilaku pada sebuah skenario,
diagram ini menunjukkan sejumlah contoh objek dan pesan yang diletakkan
diantara objek objek ini didalam use case. Sequence diagram menambahkan
dimensi waktu pada tiap interaksi diantara objek dimana antar objek saling
berhubungan dan diwakili oleh sebuah pesan antar objek.
4.2.4.1 Sequence Diagram proses mengirim post
1. Sequence Diagram proses mengirim post untuk member
Login
Berita
Kategori
Forum
Thread
Komentar
Member
Lihat ()
lihst ()
Lihat
lihat ()
lihat
Login ()
lihat berita ()
lihat kategori ()
Lihat Forum ()
Tambah Thread ()
Tambah Komentar ()
Gambar 4.16 Sequence Diagram proses mengirim post untuk member
40
2. Sequence Diagram proses mengirim post untuk admin
Login
Berita
Kategori
Forum
Thread
Komentar
Admin
Lihat ()
lihst ()
Lihat
lihat ()
lihat
Login ()
tambah berita ()
Edit berita ()
Hapus berita
Tambah Kategori
Edit kategori ()
Lihat Forum ()
Lihat Thread ()
Lihat Komentar ()
Gambar 4.17 Sequence Diagram proses mengirim post untuk Admin
3. Sequence Diagram proses mengirim post untuk guest
Login
Berita
Kategori
Forum
Thread
Komentar
Guest
Lihat ()
lihst ()
Lihat
lihat ()
lihat
Gambar 4.18 Sequence Diagram proses mengirim post untuk Guest
41
4.2.4.2 Sequence Diagram proses melihat profile
Dalam kasus ini dimana kegiatan user untuk melihat profil
Login
User List
Profil
Lihat ()
lihst ()
Login ()
Lihat ()
Lihat
edit
Admin : Create User / profl ()
Admn : Hapus Profil ()
Gambar 4.19 Sequence Diagram proses member melihat profile
4.2.5
Collaboration Diagram
Merupakan cara alternatif untuk menampilkan suatu scenario.
Menampilkan interaksi obyek yang terorganisasi di sekitar obyek dan
hubungannya dengan obyek yang lain.
1. Collaboration Diagram untuk guest
Kategori
Berita
lihat ()
lihat ()
lihat ()
Thread
lihat ()
guest
lihat ()
Listuser
Komentar
Gambar 4.20 Collaboration Diagram untuk guest
42
2. Collaboration Diagram untuk member
Berita
Login
Kategori
lihat () - Thread baru() - hapus ()
Login ()
lihat ()
lihat ()
Thread
lihat () - tambah komentar ()
lihat () - update profil ()
user
Komentar
member
Gambar 4.21 Collaboration Diagram untuk guest
3. Collaboration Diagram untuk Admin
Lihat () - Tambah kategori() - Hapus kategori ()
Berita
Login
Komentar
lihat ()
lihat ()
Thread
Login ()
lihat () - tambah kategori () - hapus kategori ()
lihat () - update profil () - Tambah profil ()
Kategori
user
Admin
Gambar 4.22 Collaboration Diagram untuk guest
4.2.6
Deployment Diagram
Menggambarkan tentang detail hubungan infrastruktur yang
terhubung dalam sistem, yaitu di mana komponen akan terletak (pada
mesin, server atau piranti keras apa), bagaimana kemampuan jaringan pada
lokasi tersebut, spesifikasi server, dan hal-hal lain yang bersifat fisikal.
43
Web Browser
Request
Apache web
server dan
Mysql Server
Gambar 4.23 Deployment Diagram
4.3 Perancangan Input Output
4.3.1
Tampilan Menu Utama
Desain menampilkan tampilan menu utama diantaranya terdapat isi berita
dan berhubungan dengan thread.
Gambar 4.24 Perancangan Tampilan Menu Utama
4.3.2
Salah Satu Tampilan Input Output Pada Members
Desain menampilkan tampilan pada member dan isi profil dari member.
44
Gambar 4.25 Perancangan Tampilan Salah Satu Tampilan Input Output Pada Member
4.3.3
Salah Satu Tampilan Input Output Pada Admin
Desain menampilkan tampilan halaman profil admin.
Gambar 4.26 Perancangan Tampilan Salah Satu Tampilan Input Output Pada Admin
45
4.3.4
Tampilan Kegiatan Forum
Desain tampilan kegiatan forum yang menampilkan thread, komentar dan
tambah komentar.
Gambar 4.27 Perancangan Tampilan Kegiatan Forum
46