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

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 <<include>> Data Project <<include>> LOGIN Project Manager (PM) <<include>> 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 Admin Login Admin User Managemet 4-2

PM (Project Management) Member Project Management Keluar Login PM Project Management Keluar Login Member Preview S-Curve Project Keluar a. Use Case Admin 1. Use Case Login Admin Tabel 4-3 Spesifikasi Use Case Login Admin Login Admin Admin Brief Description Digunakan untuk login, sebagai pintu utama admin untuk memulai prosesnya selanjutnya 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

Tabel 4-4 Spesifikasi Use Case User Management User Management Admin Brief Description Digunakan untuk menambah user agar bisa mengakses web proyek 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 Project Management Admin Brief Description Digunakan untuk pengelolaan data Progress Project 1. Admin klik Project 2. Admin pilih project mana yang 4-4

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 Logout Admin Brief Description Digunakan untuk keluar dari aplikasi 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 Brief Description Basic flow Alternate Flow Pre-Condition Login PM PM Digunakan sebagai pintu utama PM untuk memulai proses selanjutnya 1. PM masuk Home 2. PM login dengan memasukan username dan password sesuai data User Management Jika data login tidak diisi atau valid (tidak terdaftar) akan muncul pesan error User membuka sebuah aplikasi web 4-5

Post Condition browser dan membuka alamat domain/url aplikasi User berada halaman Project Update Progress 2. Use Case Project Management Tabel 4-8 Spesifikasi Use Case Project Management Project Management PM Brief Description Digunakan untuk pengelolaan data Progress Project dan menambah Project yang akan di Monitoring 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 Keluar PM Brief Description Digunakan untuk keluar dari aplikasi 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

Brief Description Alternate Flow Pre-Condition Post Condition Login Member Member Digunakan untuk login, sebagai pintu utama member untuk memulai prosesnya selanjutnya 1. Member masukan username dan password sesuai data user 2. Member klik tombol Login Jika data login tidak diisi atau tidak valid (tidak terdaftar) akan muncul pesan Username/Password salah Member membuka sebuah aplikasi web browser dan membuka alamat domain/url aplikasi Member berada halaman Project Update Progress 2. Use Case Preview S-Curve Project Tabel 4-11 Spesifikasi Use Case Preview S-Curve Project Brief Description Preview S-Curve Project Member Member bisa melihat progress pekerjaan proyek melalui grafik S-Curve 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

3. Use Case Keluar Member Tabel 4-12 Spesifikasi Use Case Keluar Member Keluar Member Brief Description Digunakan untuk keluar dari aplikasi 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 TIDAK YA UPDATE YA UPDATE Gambar 4-4 Activity Diagram User 4-8

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

Sequences Diagram, menunjukkan antara sekelompok objek melalui pesan (messages) yang dapat dikirimkan antara objek-objek tersebut. Sequences Diagram User Management Admin User HOME User Managament Data New User Home Login Add 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 HOME Project Managament Data Home Login Add Project Isi Data Project Klik Project Klik Detail Update 4-10

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 Pengguna Project Update HOME Progress Project Progress Data Home Login View S-Curve 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

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

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

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

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

Gambar 4-16 Tampilan Grafik Curva-S Keterangan : pada halaman ini, user bisa melihat presentase project. 4-16