BAB III ANALISIS DAN PERANCANGAN

(1)

22

3.1 Analisis Permasalahan

3.1.1. Diskripsi Sistem yang Berjalan

Bekerja secara kolaborasi menimbulkan masalah – malasah yang sering terjadi, dimana masalah yang akan timbul sebelum adanya media komunikasi ini, yaitu :

1. Bekerja harus diruangan yang sama.

2. Jam kerja yang terbatas sehingga kurang optimal dalam

pengambilan keputusan.

3. Pemantauan proyek harus dilakukan per individu agar sesuai dengan

jadwal yang sudah ditetapkan.

4. Pemberian bukti pekerjaan harus dilakukan dengan bertemu secara

langsung dengan pihak yang bersangkutan.

3.2 Perancangan Sistem

Untuk membuat sebuah sistem yang dapat berjalan baik dan sesuai harapan yang diinginkan, maka tentunya terlebih dahulu haruslah membuat

tahapan perencanaan sistem berupa use case diagram, activity diagram, sequence

diagram, class diagram.

3.2.1. Use Case Diagram

Use case diagram ini dibuat dengan tujuan untuk mendeskripsikan siapa yang akan menggunakan sistem dan dalam cara apa pengguna mengharapkan interaksi dengan sistem itu.

(2)

Dalam sistem ini terdapat satu user, bila user membuat proyek maka status user tersebut menjadi pimpinan proyek dan user yang terdaftar dalam proyek maka status user berubah menjadi anggota proyek. Untuk dapat masuk kedalam sistem user harus terdaftar dan melakukan login terlebih dahulu kedalam sistem. Berikut ini adalah bentuk use case secara garis besar yang terdapat dalam sistem :

1. Diagram Use Case Untuk User

Berikut ini adalah bentuk dari use case untuk user yang sudah mendaftar dan melakukan login terlebih dahulu kedalam sistem :

Gambar 3. 1 Diagram Use Case Untuk User

Dari gambar di atas dapat dijelaskan bahwa terdapat actor sebagai user.

Actor tersebut dapat melakukan akses melihat profil user lain, melihat profil, edit profil, bergabung dengan proyek, membuat proyek, melihat posting proyek, melihat undangan bergabung dengan proyek, memberikan konfirmasi bergabung dengan proyek.

(3)

2. Diagram Use Case Untuk Pimpinan Proyek

Berikut ini adalah bentuk dari use case untuk user yang membuat proyek didalam sistem :

Gambar 3. 2 Diagram Use Case Untuk Pimpinan Proyek

Dari gambar diatas dapat dijelaskan bahwa terdapa actor pembuat proyek.

Actor tersebut dapat melakukan edit profil proyek, tambah divisi, edit divisi, ahapus divisi, tambah anggota, hapus anggota, melihat profil anggota, set divisi anggota, memberikan konfirmasi lapoaran, dowaload laporan, melihat udandangan bergabung menjadi anggota proyek, memberikan konfirmasi undangan proyek.

(4)

3. Diagram Use Case Untuk Anggota Proyek

Berikut ini adalah bentuk use case untuk user yang bergabung dengan proyek user lain :

Gambar 3. 3 Diagram Use Case Untuk Anggota Proyek

Dari gambar diatas dapat dijelaskan bahwa terdapat actor anggota proyek. Actor

tersebut dapat melakukan melihat anggota proyek, melihat profil anggota proyek,

melihat divisi proyek, upload laporan, download laporan, melihat status lalporan.

3.2.2. Activity Diagram

Activity diagram menggambarkan aktifitas sistem secara keseluruhan. Menggambarkan bagaimana alur sebuah sistem tersebut berjalan pada setiap actor.

1. Actor User

(5)

a. Activity Diagram Bergabung dengan proyek

Gambar 3. 4 Activity Diagram Bergabung dengan proyek

Pada gamabar diatas alur yang tejadi pada proses bergabung dengan proyek adalah :

1. User login terlebih dahulu.

2. Klik menu time line.

3. Pilih salah satu postingan proyek yang user inginkan

untuk bergabung menjadi anggota proyek.

4. Pilih menu join.

b. Activity Diagram Membuat proyek

Gambar 3. 5 Activity Diagram Membuat proyek

Pada gamabar diatas alur yang tejadi pada proses bergabung dengan proyek adalah :

1. Klik menu time Line

2. Pilih menu set archivment

(6)

4. Bila sudah selesai memasukan data

5. Klik tombol simpan.

c. Activity Diagram Melihat undangan bergabung dengan proyek

Gambar 3. 6 Activity Diagram Melihat undangan bergabung dengan proyek Pada gamabar diatas alur yang tejadi pada proses bergabung dengan proyek adalah :

1. Klik menu dashboard.

2. Pilih menu my Project.

3. Pilih menu konfirmasi.

4. Tampil halaman konfirmasi proyek.

d. Activity Diagram Memberikan konfirmasi bergabung dengan proyek

Gambar 3. 7 Activity Diagram Memberikan Konfirmasi Bergabung Dengan Proyek

(7)

Pada gambar diatas alur yang tejadi pada proses konfirmasi bergabung dengan proyek adalah :

1. Klik halaman dashboard.

2. Pilih menu my Project.

3. Klik menu konfirmasi

4. Tampil konfirmasi undangan dari pimpinan proyek

5. Pilih salah satu undangan.

6. Klik yes untuk setuju bergabung menjadi anggota proyek tersebut.

7. Klik no untuk tidak setuju bergabung menjadi anggota proyek tersebut.

2. Actor Pembuat Proyek

Berikut ini adalah model dari activity diagram untuk actor pembuat proyek :

a. Activity Diagram Edit Profil Proyek

Gambar 3. 8 Activity Diagram Edit Profil Proyek

Pada gambar diatas alur pada activity diagram edit profil proyek sebagai berikut :

2. Klik menu my Project.

3. Pilih menu Project leader pengguna.

(8)

5. Input data

6. dan klik tombol edit Project.

b. Activity Diagram Tambah Divisi

Gambar 3. 9 Activity Diagram Tambah Divisi

Pada gambar diatas alur pada activity diagram tambah divisi sebagai berikut :

1. Login.

4. Pilih menu Project.

5. Pilih salah satu data Project leader pengguna.

6. Klik tombol view.

7. Pilih menu divisi.

8. Klik tombol tambah divisi.

9. Inputkan data divisi.

(9)

c. Activity Diagram Edit Divisi

Gambar 3. 10 Activity Diagram Edit Divisi

Pada gambar diatas alur pada activity diagram edit divisi adalah sebagai berikut :

1. Login.

8. Klik menu table divisi.

9. Pilih salah satu data klik tombol update.

10. Input data.

(10)

d. Activity Diagram Hapus Divisi

Gambar 3. 11 Activity Diagram Hapus Divisi

Pada gambar diatas alur pada activity diagram hapus divisi adalah sebagai berikut :

1. Login.

8. Klik menu table divisi.

9. Pilih salah satu data klik tombol delete.

e. Activity Diagram Tambah Anggota

(11)

Pada gambar diatas alur pada activity diagram tambah anggota adalah sebagai berikut :

1. Login.

7. Pilih menu tim.

8. Pilih menu tambah anggota.

9. Inputkan data.

10. Klik tombol tambah anggota.

11. Pilih data klik undang.

f. Activity Diagram Hapus Anggota

Gambar 3. 13 Activity Diagram Hapus Aggota

Pada gambar diatas alur pada activity diagram hapus anggota adalah sebagai berikut :

1. Login.

(12)

7. Pilih menu tim.

8. Pilih menu anggota tim.

9. Pilih data anggota.

10. Klik tombol delete.

g. Activity Diagram Melihat Profil Anggota

Gambar 3. 14 Activity Diagram Melihat Profil Anggota

Pada gambar diatas alur pada activity diagram melihat profil anggota adalah sebagai berikut :

1. Login.

7. Pilih menu tim.

login klick menu my

project

klick menu project klick data view

klick menu dashboard

klik menu tim klik menu anggota tim pilih data anggota klik tombol view detail

(13)

10.Klik tombol view detail.

h. Activity Diagram Set Divisi Anggota

Gambar 3. 15 Activity Diagram Set Divisi Anggota

Pada gambar diatas alur pada activity diagram set divisi anggota adalah sebagai berikut :

1. Login.

7. Pilih menu tim.

10. Pilih divisi anggota.

11. Klik tombol update.

login klick menu my

project

klik menu tim klik menu anggota tim pilih data anggota pilih divisi anggota klik tombol update

(14)

i. Activity Diagram Konfirmasi Laporan

Gambar 3.16 Activity Diagram Konfirmasi Laporan

Pada gambar diatas alur pada activity diagram konfiramsi laporan adalah sebagai berikut :

1. Login.

7. Pilih menu laporan.

8. Pilih data konfiramsi.

9. Pilih tombol yes untuk diterima dan tombol tidak untuk di tolak

10. Muncul pesan konfiramsi.

login klick menu my project

klick menu dashboard klik menu laporan pilih data konfirmasi yes no pesan

(15)

j. Activity Diagram Download Laporan

Gambar 3. 17 Activity Diaram Download Laporan

1. Login.

7. Pilih menu laporan.

8. Pilih data yang akan di download.

9. Pilih tombol dowanload.

login klick menu my project

klick menu dashboard klik menu laporan pilih data klik tombol download

(16)

k. Activity Diagram Konfirmasi Udangan Anggota Proyek

Gambar 3. 18 Activity Diagram Konfiramsi Undangan Proyek

1. Login.

7. Klik menu tim

8. Klik menu konfirmasi

9. Pilih data.

10. Untuk menyetujui pengguna untuk bergabung dengan proyek.

11. Klik tombol yes dan untuk membatalkan klik tombol no.

12. Dan untuk menghapus undangan menjadi anggota kepada penguna klik

tombol hapus konfiramsi.

login klick menu my

project

klik menu tim pilih menu

konfirmasi

pilih data

yes no hapus konfirmasi

(17)

3. Actor Anggota Proyek

Berikut ini adalah model dari activity diagram untuk user :

a. Melihat Anggota Proyek

Gambar 3. 19 Melihat Aggota Proyek

1. Login.

7. Klik menu tim

9. Pilih tombol lihat profil.

login klick menu my

project

klik menu tim pilih data

klik tombol lihat profil

(18)

b.Activity Diagram Lihat Divisi Proyek

Gambar 3. 10 Activity Diagram Lihat Divisi Proyek

1. Login.

7. Klik menu divisi

c. Activity Diagram Upaload Laporan

Gambar 3. 21 Activity Diagram Upload Laporan

login klick menu my

project

klik menu divisi

login klick menu my

project

klick menu dashboard klik menu laporan pilih menu upload laporan input data laporan klik tombol simpan

(19)

1. Login.

7. Klik menu laporan.

8. Pilih menu upload laporan.

9. Input data laporan.

10.Klik tombol simpan.

3.2.3. Class Diagram

Class diagram ini dibuat dengan tujuan untuk mendeskripsikan class dari sistem dan dalam cara apa pengguna mengharapkan interaksi dengan masing – masing class dalam sistem itu.

a. Class Diagram User

(20)

Gambar 3. 22 Class Diagram User

b. Class Diagram Project

Class Diagram ini menggambarkan keadaan sistem serta fungsi – fungsi yang berjalan saat mengunakan aplikasi :

Gambar 3. 11 Class Diagram Project

c. Class Diagram Anggota Proyek

user + Id_id_akun : integer + level_akun : string + layout : string + data : string + detail : string + icon : string + projectGlobal : string + akun : integer + project : string + message : string + message2 : string + edit : string + template_timeLine(layout : integer, data : string) + index() + template_dasbord(layout : integer, data : string) + dasbord() + editProfil() + page1() + page2() + myProjectDasbord() + pencarian() + logOut() + timeLine dbUser + userProfilTimeine (id_akun : integer) + icon(id_akun : integer) + userProfilDasbord (id_akun : integer) + timeLine() dbTim + cekUserTimJoin(id_akun : integer, id_project : integer) + joinTimProject(id_project : integer,id_akun integer,id_tim : integer)

validasi_edit_profil

+ editNamaDepan(id_akun : integer, data : integer)

+ editNamaBelakang(id_akun : integer, data : string)

+ editTempatLahir(id_akun : integer, data : string)

+ editTglLahir(id_akun : integer, tglLahir : date)

+ editPesan(id_akun : integer, pesan : string)

+ editFoto(id : integer, file : string) + emptyData() * 1 * 1 * 1

(21)

Gambar 3. 24 Class Diagram Anggora Proyek

d. Class Diagram Login

Gambar 3. 25 Class Diagram Login

3.2.4. ERD (Entity Relationship Diagram)

ERD (Entity Relationship Diagram) adalah gambaran yang menunjukkan informasi yang digunakan untuk merancang basis data dalam sistim. Berikut adalah perancangan pembuatan basis data :

Login + id_akun : integer + level_akun : string + username : string + email : string + password : integer + password_retry : integer + index() + formRegistrasi() + prosesRegistrasi() + prosesLogin() dbLogin +cekUser(username : string) + cekEmail(email : string)

+ create_login(username : string, email : string, password : integer, password_retry : integer)

+ create_user(create : string)

+ create_detail_user(id_user : integer, username : string, email : string)

+ cekLogin(email : string, password : integer) 1

(22)

2.3.Tabel Data

Berdasarkan pada perancangan proses dan perencangan basis data sistem yang dibuat, maka berikut adalah table data dari manajemen proyek berbasis web :

A. Login

Tabel 3. 1 Login

Nama_Field Type Length

Id_user Varchar ₂₅ Username _Varchar ₂₅ Email _Text _- Password Text - Level Varchar 10 B. User_detail Tabel 3. 2 User_detail

Id_user Varchar 25

Username Varchar 25

Nama_depan Text -

(23)

Email Text - Pesan Text - Tempat_lahir Text - Tgl_lahir Date - Tgl_bergabung Timestamp - Foto_profil Text 100 Thumb Text - C. Project Tabel 3. 3 Project

Id_Project Varchar 100

Id_user Text 25

Nama_Project Text -

Detail_Project text -

exp_proyek date -

Tgl_Project date -

D. Divisi

Tabel 3. 4 Divisi

Id_divisi Varchar 100

(24)

Detail_divisi Text -

Start_divisi Date -

End_divisi Date -

E. Db_laporan

Tabel 3. 5 db_laporan

Id_laporan Varchar 100 Id_tim Varchar 25 Nama_laporan Text - Diskripsi_laporan Text - Progress float - File_laporan text - Tgl_laporan Date - Status_laporan text - F. Tim Tabel 3. 8 Tim

Id_tim Varchar 25

Id_user Varchar 25

Id_divisi Varchar 100

(25)

3.3. Desain Tampilan Interface

Pembuatan desain antar muka sebagai acuan awal dalam pembuatan sistem manajemen proyek bebasis web. Berikut adalah beberapa desain tampilan sistem manajemen proyek berbasis web :

1.Login User

Halaman login user, adalah halaman pertama yang ditampilkan kepada pengguna pada saat sistem dibuka. Halaman login ini berfungsi untuk membatasi akses terhadap pengguna yang mengakses sistem. Hanya pengguna yang memiliki akun saja yang dapat masuk dan menggunakan fitur-fitur sistem.

Gambar 3. 25 Login User

2.Registrasi User

Halaman Registrasi user, adalah halaman yang ditampilkan kepada pengguna pada saat untuk mendaftar pada sistem.

(26)

Gambar 3. 26 Registrasi User

3.Time Line

Halaman time line, adalah halaman yang digunakan untuk melihat projek secara global dari pengguna lain yang membuat proyek.

Gambar 3. 27 Time Line 4.Dashboard

Halaman dashboard, adalah halaman yang digunakan untuk menjelaskan

(27)

Gambar 3. 28 Dahsboard

5.CreateProject