BAB 4.
PERANCANGAN
Setelah melakukan proses analisa sistem maka akan dilakukan proses perancangan sistem yang diharapkan sesuai dengan kebutuhan pengguna yang sudah dijabarkan di bab analisa sebelumnya. Perancangan sistem ini menggunakan bahasa UML (Unified Modeling Language) sebagai bahasa pemodelan. Perancangan aplikasi ini menggunakan software utama sebagai berikut: 1. Visual Studio 2015 sebagai alat bantu utama pembuatan aplikasi monitoring 2. Visio Profesional 2013 sebagai alat bantu untuk mengolah UML 4.1. Perancangan Sistem Untuk merancang sebuah sistem pemograman berorientasi objek bekerja dengan baik ketika dibarengi dengan Object-orianted Analysis and Design Process (OOAD).(Wampler, 2002: 2) mengatakan kita membuat program berorientasi objek tanpa OOAD, ibarat membangun rumah tanpa terlebih dahulu menganalisa apa saja yang dibutuhkan oleh rumah itu, tanpa perancanaan, tanpa blueprint, tanpa menganalisis ruangan apa saja yang diperlukan, berapa besar rumah yang akan dibangun dan sebagainya. Dengan bantuan UML, penulis akan mendeskripsikan proses perancangannya dengan bantuan 3 (tiga) komponen yang terdiri dari use case diagram, activity diagram, dan sequence diagram.
UML (Unified Modelling Language)
Use Case Diagram
Sequence Diagram Gambar 4-1 UML (Unified Modelling Language)
4-1
http://digilib.mercubuana.ac.id/
4.1.1 Use Case Diagram Use case menggambarkan external view dari sistem yang akan dibuat untuk menggambarkan sebuah tampilan yang terdapat pada suatu sistem. Menurut (Pilone, 2005: bab 7.1) use case menggambarkan fungsi tertentu dalam suatu sistem berupa komponen, kejadian atau kelas. Pada diagram use case, relasi digambarkan sebagai sebuah garis antar dua simbol. Untuk perancangan aplikasi ini, use case yang dibuat ada 3 (tiga) aktor yang memiliki role berbeda-beda seperti digambarkan dibawah ini:
Data User Admin
<
>
Data Project Project Manager (PM)
<>
LOGIN
<>
Preview Progress Member
Gambar 4-2 Diagram Use Case User
LOGIN
Select Project
Preview Grafik Curva S
Pengguna
Gambar 4-3 Diagram Use Case System Tabel 4-1 Use Case Diagram
Tabel 4-2 Use Case Diagram Actor Admin
Login Admin User Managemet 4-2
http://digilib.mercubuana.ac.id/
Project Management Keluar PM (Project Management)
Login PM Project Management Keluar
Member
Login Member Preview S-Curve Project Keluar
a. Use Case Admin 1. Use Case Login Admin Tabel 4-3 Spesifikasi Use Case Login Admin Use Case Name
Login Admin
Actor
Admin
Brief Description
Digunakan untuk login, sebagai pintu utama admin untuk memulai prosesnya selanjutnya
Basic Flow
1. Admin klik menu “Login Admin” 2. Admin mengisikan data login berupa “Username dan Password” pada formulir login yang tampil 3. Admin klik tombol “Login”
Alternate Flow
Jika data login tidak diisi atau tidak valid (tidak
terdaftar)
akan
muncul
pesan
Username/Password salah Pre-Condition
Admin membuka sebuah aplikasi web browser
dan
membuka
alamat
domain/URL aplikasi Post Condition
Admin
berada
halaman
Dashboard/halaman setelah login 2. Use Case User Management 4-3
http://digilib.mercubuana.ac.id/
Tabel 4-4 Spesifikasi Use Case User Management Use Case Name
User Management
Actor
Admin
Brief Description
Digunakan untuk menambah user agar bisa mengakses web proyek
Basic Flow
1. Admin klik “User” pada list menu 2. Admin login -
Isi username dan password
3. Admin masuk user management 4. Admin klik tombol “add user” -
Sebelumnya admin dapat request dari user diregistrasikan
-
admin isi “username”, “full name”, “password” dan “role”
-
admin klik tombol save
5. Admin sukses tambah user 6. Admin bisa “edit” user Alternate Flow
-
Pre-Condition
-
Post Condition
Admin berada di halaman User
3. Use Case Project Management Tabel 4-5 Spesifikasi Use Case Project Management Use Case Name
Project Management
Actor
Admin
Brief Description
Digunakan
untuk
pengelolaan
data
Progress Project Basic Flow
1. Admin klik “Project” 2. Admin pilih project mana yang 4-4
http://digilib.mercubuana.ac.id/
akan di “edit” atau dilihat “detail” 3. Admin bisa Manambah, koreksi dan hapus data proyek Alternate Flow
-
Pre-Condition
-
Post Condition
Admin
berada
di
halaman
“Project
Management” 4. Use Case Keluar Admin Tabel 4-6 Spesifikasi Use Case Keluar Admin Use Case Name
Logout
Actor
Admin
Brief Description
Digunakan untuk keluar dari aplikasi
Basic Flow
Admin klik menu tombol “Logout”
Alternate Flow
-
Pre-Condition
-
Post Condition
Admin keluar dari aplikasi
b. Use Case PM 1. Use Case Login PM Tabel 4-7 Spesifikasi Use Case Login PM Use Case Name
Login PM
Actor
PM
Brief Description
Digunakan sebagai pintu utama PM untuk memulai proses selanjutnya
Basic flow
1. PM masuk Home 2. PM login dengan memasukan “username” dan “password” sesuai data User Management
Alternate Flow
Jika data login tidak diisi atau valid (tidak terdaftar) akan muncul pesan error
Pre-Condition
User membuka
sebuah aplikasi
web 4-5
http://digilib.mercubuana.ac.id/
browser
dan
membuka
alamat
domain/URL aplikasi Post Condition
User berada halaman Project Update Progress
2. Use Case Project Management Tabel 4-8 Spesifikasi Use Case Project Management Use Case Name
Project Management
Actor
PM
Brief Description
Digunakan
untuk
pengelolaan
data
Progress Project dan menambah Project yang akan di Monitoring Basic Flow
Koreksi dan pemuktahiran data Proyek
Alternate Flow
-
Pre-Condition
-
Post Condition
PM
berada
dihalaman
“Project
Management” 3. Use Case Keluar PM Tabel 4-9 Spesifikasi Use Case Keluar PM Use Case Name
Keluar
Actor
PM
Brief Description
Digunakan untuk keluar dari aplikasi
Basic Flow
PM klik menu tombol “Logout”
Alternate Flow
-
Pre-Codition
-
Post Condition
PM keluar dari aplikasi
c. Use Case Member 1. Use Case Login Member Tabel 4-10 Spesifikasi Use Case Login Member
4-6
http://digilib.mercubuana.ac.id/
Use Case Name
Login Member
Actor
Member
Brief Description
Digunakan untuk login, sebagai pintu utama member untuk memulai prosesnya selanjutnya
Basic Flow
1. Member masukan “username” dan “password” sesuai data user 2. Member klik tombol “Login”
Alternate Flow
Jika data login tidak diisi atau tidak valid (tidak
terdaftar)
akan
muncul
pesan
Username/Password salah Pre-Condition
Member membuka sebuah aplikasi web browser
dan
membuka
alamat
domain/URL aplikasi Post Condition
Member berada halaman Project Update Progress
2. Use Case Preview S-Curve Project Tabel 4-11 Spesifikasi Use Case Preview S-Curve Project Use Case Name
Preview S-Curve Project
Actor
Member
Brief Description
Member bisa melihat progress pekerjaan proyek melalui grafik S-Curve
Basic Flow
1. Member kilik “Select Project” 2. Member masuk kehalaman Project Progress
Alternate Flow
-
Pre-Condition
-
Post Condition
Member berada dihalaman “Project Update Management”
4-7
http://digilib.mercubuana.ac.id/
3. Use Case Keluar Member Tabel 4-12 Spesifikasi Use Case Keluar Member Use Case Name
Keluar
Actor
Member
Brief Description
Digunakan untuk keluar dari aplikasi
Basic Flow
Member klik menu tombol “Logout”
Alternate Flow
-
Pre-Codition
-
Post Condition
Member keluar dari aplikasi
4.1.2 Activity Diagram Activity diagram yang menggambarkan aliran yang melalui program, dari titik mulai yang sudah didefinisikan sebelumnya, sampai ke titik akhir. Activity diagram atau diagram aktivitas lebih memfokuskan diri pada eksekusi dan alur sistem dari pada bagaimana sistem itu dirakit. Berikut diagram aktivitas sesuai rancangan sistemnya: Diagram Activity Data User USER
TAMPILAN DATA USER
ADD USER
EDIT USER
ISI DATA USER TIDAK YA
TIDAK
UPDATE YA
UPDATE
Gambar 4-4 Activity Diagram User
4-8
http://digilib.mercubuana.ac.id/
PROJECT
DATA PROJECT
ADD
EDIT
DETAIL
NO
DETAIL
EDIT
YES
UPDATE
NO
YES
UPDATE
Gambar 4-5 Activity Diagram Project
LOGIN
SELECT PROJECT
TAMPILAN GRAFIK S-CURVE
TIDAK
LOGOUT YA
Gambar 4-6 Activity Diagram Preview Progress Project 4.1.3 Sequences Diagram 4-9
http://digilib.mercubuana.ac.id/
Sequences Diagram, menunjukkan antara sekelompok objek melalui pesan (messages) yang dapat dikirimkan antara objek-objek tersebut. Sequences Diagram User Management
Admin
User Managament
HOME User
Home Login
Add User
Data New User
Isi data new user
Klik User Klik Detail
Updte User
Gambar 4-7 Sequences Diagram User Management a. Sequences Diagram User Management Keterangan: 1. Nama
: Sequences Diagram User Management
2. Deskripsi
: Halaman ini hanya disediakan bagi admin untuk menambah
user dan meng-edit user sesuai dengan kebutuhannya. Sequences Diagram Project Management
Pengguna
Project Managament
HOME Project
Home Login
Add Project
Data
Isi Data Project
Klik Project Klik Detail
Update
4-10
http://digilib.mercubuana.ac.id/
Gambar 4-8 Sequences Diagram Project Management b. Sequences Diagram Project Management 1. Nama
: Sequences Diagram Project Management
2. Deskripsi
: Halaman ini hanya disediakan bagi admin dan PM. Bagi
admin, data yang dimasukkan atau di-update sesuai dengan permintaan by PM. Sedangkan PM, bisa mereview data proyek sekaligus meng-update data proyek tersebut. Sequences Diagram Project Update Progress
Project Progress
Project Update HOME Progress
Pengguna
Home Login
View S-Curve
Data
Isi Data Project
Select Project View Progress
Update
Gambar 4-9 Sequences Diagram Project Update Progress c. Sequences Diagram Project Update Progress 1. Nama
: Diagram Project Update Progress
2. Deskripsi
: Halaman ini menunjukkan progress nya pekerjaan yang
berjalan memalui grafik S-Curve. Halaman ini bisa diakses semua pengguna oleh admin, PM dan member. 4.2. Perancangan Database Tabel 4-13 dbo.Project
4-11
http://digilib.mercubuana.ac.id/
Tabel 4-14 dbo.Project Detail
Tabel 4-15 dbo.Project Detail Plan_Actual
Tabel 4-16 dbo.User Project
4.3. Desain Antarmuka (Design Interface) Halaman Utama 4-12
http://digilib.mercubuana.ac.id/
Berikut adalah tampilan menu utama pada aplikasi web ini. Pada tampilan menu utama ini akan ada beberapa menu fungsi sebagai berikut: a. Home : tampilan login user b. User
: akan menampilkan data user yang bisa akses ke aplikasi web ini
c. Project : akan menampilkan data project yang akan di monitoring
1. Halaman Utama Gambar 4-10 Tampilan halaman depan Keterangan : ini adalah halaman utama yang menampilkan halaman login user untuk melanjutkan user untuk melihat grafik curva-s 2. Halaman User
Gambar 4-11 Halaman Data User dan tambah user Keterangan : ini adalah halaman data user, dimana user bisa memilih untuk tambah user atau meng-edit user 3. Halaman Tambah User
4-13
http://digilib.mercubuana.ac.id/
Gambar 4-12 Halaman Tambah user Keterangan : pada halaman ini, user bisa menambah user agar bisa akses ke aplikasi web sesuai request user tersebut. 4. Halaman Data Project
Gambar 4-13 Halaman List Data Project Keterangan : pada halaman ini, user bisa melihat list project mana yang bisa di monitoring melalui aplikasi web ini. User bisa edit dan melihat detail project nya 5. Halaman tambah project
4-14
http://digilib.mercubuana.ac.id/
Gambar 4-14 Halaman Tambah Data Project Keterangan : pada halaman ini, user bisa menambah data project yang akan di monitoring melalui aplikasi web ini. 6. Halaman “Select Project”
Gambar 4-15 Halaman Pilih Project Keterangan : pada halaman ini, user bisa memilih project mana yang mau di tampilkan grafik Curva-S nya 7. Halaman Tampilan Gafik Curva-S
4-15
http://digilib.mercubuana.ac.id/
Gambar 4-16 Tampilan Grafik Curva-S Keterangan : pada halaman ini, user bisa melihat presentase project.
4-16
http://digilib.mercubuana.ac.id/
