BAB IV RANCANGAN USER INTERFACE 4.1 Perancangan User Interface Dalam Aplikasi Monitoring Proyek terdapat user interface yang digunakan sebagai interaksi antar pengguna dengan aplikasi. Pengguna merupakan aktor- aktor yang menggunakan aplikasi. Rancangan user interface digambarkan sebagai berikut.
4.1.1 Perancangan pada Perangkat Android (Client) Perancangan user interface pada perangkat android dapat dilihat pada gambar berikut.
Gambar 4. 1 User Interface Home
Pada homepage aplikasi menampilkan menu aplikasi – aplikasi versi android yang ada di PT. SML Technologies. Menu manpro adalah aplikasi monitoring proyek yang dirancang. User mengklik icon manpro dan aplikasi menampilkan form login. Form login adalah form yang digunakan oleh user supaya mempunyai hak akses terhadap aplikasi. Form login dapat dilihat pada gambar berikut.
88
http://digilib.mercubuana.ac.id/
89
Gambar 4. 2 User Interface Login
Pada halaman login user melakukan pengecekan terhadap username dan password yang dimasukkan oleh user. Tabel 4. 1 Detail User Interface Login Deskripsi Asumsi Keterangan
Form yang digunakan user untuk melakukan login ke aplikasi User telah terdaftar di database Text Field : - username : diisi dengan nama username - Password : diisi dengan password user Button : - Login : Untuk melakukan login ke aplikasi - Lupa Password : Jika user lupa password
Ketika user berhasil untuk melakukan login ke aplikasi maka aplikasi menampilkan home seperti pada gambar. Aplikasi yang ditampilkan akan disesuaikan dengan role user yang login ke aplikasi. Delivery Head adalah user yang dapat melihat semua project yang sedang dikerjakan sedangkan project manager, team leader, developer dan tester hanya bisa melihat project yang di assign kepadanya.
http://digilib.mercubuana.ac.id/
90
Tampilan home aplikasi untuk delivery head dapat dilihat pada gambar berikut.
Gambar 4. 3 User Interface List Menu Untuk menampilkan list data pegawai user memilih Nama project, Nama module, periode dan team yang mengerjakan proyek. Nama project ditampilkan sesuai dengan role user yang login ke aplikasi.Detail user interface list menu dijelaskan pada tabel. Tabel 4. 2 Detail user Interface List Menu Deskripsi
Form yang digunakan user ketika user berhasil login ke aplikasi. Form ini akan digunakan untuk memilih project, module, period, dan team yang mengerjakan proyek.
http://digilib.mercubuana.ac.id/
91
Asumsi Keterangan
User telah berhasil login ke aplikasi dan sistem akan melakukan pengecekan role user yang login ke aplikasi. Dropdown list - Project – nama project yang sedang dikerjakan oleh divisi project delivery - Module – nama module akan ditampilkan sesuai dengan nama project yang dipilih - Period – period menampilkan periode yang dihitung per weekly - Team – akan menampilkan list team yang mengerjakan project dan module yang dipilih Image Button - ImgAllItem – button ini menampilkan list task sesuai dengan project, module, period dan nama team yang dipilih oleh user. - Rejected – button ini menampilkan list task yang tidak lulus proses testing (status task rejected) - Chart – Aplikasi ini akan menampilkan tampilan visual tentang status progress dalam bentuk tampilan chart
LIST TASK
Ketika user menekan button ImgAllItem maka akan menampilkan list task sesuai dengan nama project/module/period/team yang dipilih oleh user.
Gambar 4. 4 User Interface List Task
List task memberikan informasi nomor task, nama task, nama project, target task selesai, assigned task, status task dan priority task, dijelaskan seperti pada gambar.
http://digilib.mercubuana.ac.id/
92
Gambar 4. 5 Keterangan List Menu
Detail user interface list menu dijelaskan pada tabel. Tabel 4. 3 List Data Task Deskripsi Asumsi Keterangan
Form yang digunakan oleh user untuk menampilkan list task List task yang ditampilkan sesuai dengan project/module/team/period yang dipilih oleh user List View LstDetailTask: Menampilkan list data task sesuai dengan project, module, team, period yang dipilih. Image Button - imgDetail : menampilkan detail data task yang dipilih oleh user - imgAdd : menampilkan form data add task untuk proses penambahan data task
Add Task Untuk menambahkan data task user menekan button ADD dan tampil form add task. Detail user interface pada form add task dijelaskan sebagai berikut: Tabel 4. 4 Detail Add Task Deskripsi Asumsi Keterangan
Form ini digunakan untuk menambahkan data task User yang dapat menambahkan data task adalah head delivery atau project manager /team leader yang menangani project Edit Tex - Taskname : nama task - Description : keterangan mengenai detail data task - Initial estimate: waktu pengerjaan yang diberikan di awal (hours) untuk mengerjakan suatu task. - Remainung estimate: waktu yang tersisa dari waktu yang diberikan untuk mengerjakan task. Remaining estimate didaptkan dari initial estimate dikurang actual duration yang digunakan oleh user dalam mengerjakan proyek. Spinner - Workflow setup : status task (terdiri dari New, In Progress, Rejected, Completed - Priority : prioritas task (terdiri dari High,Medium,dan Low) - Assig to : yang akan mengerjakan task Datepicker - Due date : tanggal seharusnya task selesai dikerjakan
http://digilib.mercubuana.ac.id/
93
Button - Simpan : digunakan untuk menyimpan data task yang sudah diisi di form add data task - Cancel : button untuk membatalkan proses penambahan data task
Form add task ditampilkan pada gambar berikut.
Gambar 4. 6 User Interface Add Task
http://digilib.mercubuana.ac.id/
94
Detail task User dapat melihat detail data task dengan menekan button
dan muncul form detail
data task.Detail data task berisi informasi mengenai task id, nama task, nama project, nama module
,status
task,
due
date,
initial
estimate,remaining
estimate,
duration,description dan komentar, seperti yang ditampilkan pada gambar.
Gambar 4. 7 User Interface List Menu
http://digilib.mercubuana.ac.id/
actual
95
Keterangan detail data task dijelaskan pada tabel berikut: Tabel 4. 5 Detail User Interface List Menu Deskripsi Asumsi Keterangan
Form ini digunakan untuk melihat detail data task Task id adalah autoincrement yang di generate sendiri oleh database aplikasi Text - Module name – nama module - Status : status task - Priority : prioritas task - Due date : tanggal seharusnya task dikerjakan - Initial estimate: waktu yang di tentukan di awal pengerajaan proyek - Remaining estimate : waktu tersisa untuk mengerjakan task - Actual duration : waktu sebenarnya yang telah digunakan untuk mengerjakan task - Description : keterangan mengenai task - Comment : komentar yang diberikan terkait task Button - Change workflow : untuk mengubah status pengerjaan task - View: melihat worklog pekerjaan ImageButton - Detail comment : melihat semua komentar task
Detail comment Image button disamping field comment menampilkan list komentar yang pernah diberikan oleh setiap user pada suatu task. Setiap komentar terdiri dari informasi isi komentar, user yang memberikan komentar, dan tanggal/jam komentar diberikan, seperti yang ditampilkan pada gambar.
Gambar 4. 8 User Interface Detail Comment
http://digilib.mercubuana.ac.id/
96
Keterangan detail data view list komentar dijelaskan pada tabel berikut: Tabel 4. 6 Detail User Interface Detail Comment Deskripsi Asumsi Keterangan
Form ini digunakan untuk melihat semua komentar yang pernah diberikan oleh semua user terhadap suatu task. Text Button -
Isi komentar Nama user yang memberikan komentar Waktu(tanggal dan jam) user memberikan komentar ADD – untuk menambahkan komentar
Add comment Untuk menambahkan komentar klik ADD button dan muncul form tambah komentar
Gambar 4. 9 User Interface Add Comment
http://digilib.mercubuana.ac.id/
97
Keterangan detail data tambah komentar dijelaskan pada tabel berikut: Tabel 4. 7 Detail User Interface Add Comment Deskripsi Asumsi Keterangan
Form ini digunakan untuk menambahkan data komentar Text - Tambah komentar Edit Text - Isi komentar Button - Save – menyimpan data komentar
Change workflow Change workflow digunakan untuk mengubah status task.
Gambar 4. 10 User Interface Change Workflow
http://digilib.mercubuana.ac.id/
98
Keterangan detail data ubah workflow dijelaskan pada tabel berikut: Tabel 4. 8 Detail User Interface Change Workflow Deskripsi Asumsi Keterangan
Form ini digunakan untuk menambahkan data komentar Spinner - Status pengerjaan task Edit Text - Notes : tambahan keterangan mengenai status pengerjaan task Button - Change – mengubah data task
View Worklog Worklog pekerjaan yang dilakukan oleh user dapat dilihat dengan menekan button “View” dan aplikasi menampilkan formworklog list seperti yang ditampilkan pada gambar.
Gambar 4. 11 User Interface View Worklog
Keterangan detail data ubah workflow dijelaskan pada tabel berikut:
http://digilib.mercubuana.ac.id/
99
Tabel 4. 9 Detail User Interface View Worklog Deskripsi Asumsi Keterangan
Form ini digunakan untuk menambahkan data komentar ListView - Menampilkan list data worklog Button - ADD worklog – menambahkan worklog
Add Worklog Untuk menambahkan data worklog, user dapat menekan button ADD dan muncul form Add Worklog seperti yang ditampilkan pada form berikut.
Gambar 4. 12 User Interface Add Worklog
Keterangan detail data add worklog dijelaskan pada tabel berikut:
http://digilib.mercubuana.ac.id/
100
Tabel 4. 10 Detail User Interface Add Worklog Deskripsi Asumsi Keterangan
Form ini digunakan untuk menambahkan data worklog Remaining Estimate akan tergenerate sendiri ketika user mengisi work (waktu yang digunakan untuk mengerjakan task) Spinner - Work done by : task dikerjakan oleh siapa ( akan tergenerate sendiri sesuai dengan nama user yang login ke aplikasi) Edit Text - Work : jumlah jam yang dibutuhkan untuk mengerjakan suatu worklog - Remaining estimate : sisa jam yang dibutuhkan untuk mengerjakan task - On : tanggal dan jam pengerjaan worklog - Description: keterangan mengenai worklog yang dikerjakan Progress bar on chart : Menampilkan actual work (total jam untuk mengerjakan task, dan remaining estimate (Sisa pengerjaan task) akan berubah sesuai dengan inputan yang dimasukkan oleh user. Button - Save – menyimpan data worklog - Cancel – membatalkan penyimpanan data worklog
Task Reject Task dengan status rejected ditampilkan seperti gambar berikut.
Gambar 4. 13 User Interface List Task Rejected
http://digilib.mercubuana.ac.id/
101
Task dengan status rejected akan ditampilkan di form rejected untuk selanjutnya diproses oleh project manager / team leader. Task reject akan ditampilkan dalam bentuk list view. Keterangan detail task reject dijelaskan pada tabel berikut: Tabel 4. 11 Detail User Interface List Task Rejected Deskripsi Asumsi Keterangan
Form ini digunakan untuk menampilkan list data task yang di reject -
Listview Menampilkan list task dengan status reject – informasi yang diberikan adalah nama module dan user yang mengerjakan task tersebut. ImageButton Menampilkan form re – assign data task.
Re-assign task Form re-assign task ditampilkan seperti pada form berikut.
Gambar 4. 14 User Interface Re-Assign Task
Detail user interface pada form re-assign task dijelaskan sebagai berikut:
http://digilib.mercubuana.ac.id/
102
Tabel 4. 12 Detail User Interface Re-Assign Task Deskripsi Asumsi Keterangan
Form ini digunakan untuk mengassign kembali task denganstatus rejected User yang dapat mengassign kembali data task adalah head delivery atau project manager /team leader yang menangani project Edit Tex - Taskname : nama task - Description : keterangan task - Initial estimate : waktu pengerjaan yang diberikan di awal (hours) - Remainung estimate : waktu yang tersisa dari waktu yanf diberikan untuk mengerjakan task Spinner - Workflow setup : status task (terdiri dari New, In Progress, Rejected, Completed - Priority : prioritas task (terdiri dari High,Medium,dan Low) - Assig to : yang akan mengerjakan task Datepicker - Due date : tanggal seharusnya task selesai dikerjakan Button - Simpan : digunakan untuk menyimpan data task yang sudah diisi di form add data task - Cancel : button untuk membatalkan proses penambahan data task
View Chart
Gambar 4. 15 User Interface Chart
http://digilib.mercubuana.ac.id/
103
Aplikasi
menampilkan
Chart
sesuai
dengan
filtering
terhadap
data
project/module/period/team yang dilakukan oleh user. Chart menampilkan presentasi dari masing – masing task berdasarkan status tasknya. User dapat melihat presentasi nya dalam bentuk bar chart. Chart juga menampilkan Chart estimated vs actual untuk melihat progress pekerjaan dari masing – masing developer seperti yang ditampilkan pada gambar berikut.
Gambar 4. 16 User Interface Chart-Estimated vs Actual
4.1.2 Perancangan pada Perangkat Web Server Tampilan utama dari web server adalah form login, yang mengharuskan user memasukkan username dan password terlebih dahulu untuk dapat mengakses halaman web.
http://digilib.mercubuana.ac.id/
104
Gambar 4. 17 User Interface Login Tabel 4. 13 Keterangan User Interface Login Member
Deskripsi Asumsi Keterangan
Form yang digunakan member untuk melakukan login Data user telah terdaftar di tabel user Text Field : - Email : diisi dengan email member - Password : diisi dengan password member Drop down list - Role : memilih role user Button : - Submit : Konfirmasi form telah terisi, jika login berhasil terhubung ke home
Terdapat 8 kategori data yang dapat diolah yaitu pengelolaan data role, user, project, module, task, jabatan dan team. Setelah user berhasil login ke aplikasi akan muncul tampilan homepage. 1. Homepage
Gambar 4. 18 User Interface Home
http://digilib.mercubuana.ac.id/
105
Homepage terdiri dari daftar menu di sebelah kiri, header, dan footer.Untuk melakukan proses penambahan data user, user memilih tab user dan menampilkan form berikut.
Gambar 4. 19 User Interface user
2. User Aplikasi menampilkan form edit data user, system akan melakukan pengecekan terhadap data yang dimasukkan oleh user, seperti jumlah minimal karakter dan akan ditampilkan sebagai warning seperti yang ditampilkan pada gambar berikut.
Gambar 4. 20 User Interface Check Input User
Untuk melakukan penambahan data user, admin mengisi form “Add New User” yang ditampilkan di sebelah kanan web, kemudian menekan button “Submit”. Jika proses penambahan data berhasil aplikasi menampilkan pop up yang berisi informasi bahwa data telah berhasil disimpan, seperti pada gambar.
http://digilib.mercubuana.ac.id/
106
Gambar 4. 21 User Interface sukses input data
Data user yang baru saja ditambahkan ditampilkan pada grid list view data user.
Gambar 4. 22 User Interface Add data user success
Untuk melakukan pengubahan data user, administrator akan menekan button update dan system akan menampilkan form update data user.
http://digilib.mercubuana.ac.id/
107
Gambar 4. 23 User Interface Update Form data user
Isi form update form kemudian menekan button submit dan data user akan diubah sesuai dengan perubahan data yang dilakukan oleh admin. Untuk menghapus data user, admin akan memilih delete dan akan muncul pop up seperti pada gambar.
Gambar 4. 24 User Interface Notifikasi Delete Data
Jika user menekan button submit data user akan dihapus. 3. Role Rancangan interface untuk role ditampilkan pada gambar berikut.
Gambar 4. 25 User Interface Kelola data Role
http://digilib.mercubuana.ac.id/
108
Untuk menambah user dapat menambahkan data di form add data dan mengisi form Add new role.
Gambar 4. 26 User Interface Add role
User akan mengisi role name, description dan valid date kemudian menekan button submit. Jika proses penambahan data berhasil dilakukan maka data role yang baru akan ditambahkan di grid list data role seperti pada gambar.
Gambar 4. 27 User Interface Add role Success
Administrator dapat mengubah data user dengan menekan button update dan menghapus data user dengan menekan button delete.
http://digilib.mercubuana.ac.id/
109
Gambar 4. 28 User Interface Update Role
Adinistrator juga dapat mengassign setiap user untuk masuk ke role mana di dalam aplikasi pada menu user in role. 4. User in Role Form menu user in role ditampilkan seperti pada gambar.
Gambar 4. 29 User Interface New User Role
Untuk melakukan assign ke user pada form add new user in role. Pada form ini user akan memilih username, role, status dan valid date kemudian menekan button submit.
http://digilib.mercubuana.ac.id/
110
Gambar 4. 30 User Interface Assign User in Role
Data yang ditambahkan akan ditampilkan pada grid result add new user role seperti pada gambar.
Gambar 4. 31 User Interface Add New User Role Success
Untuk melakukan update data admin menekan button Update dan menampilkan form berikut.
http://digilib.mercubuana.ac.id/
111
Gambar 4. 32 User Interface Update Form
Setelah proses update form dilakukan selanjutnya user akan menekan button submit dan aplikasi akan melakukan pengubahan data user in role.User juga dapat melakukan pengelolaan data menu dengan memilih menu “Menu”. 1. Menu Administrator dapat menambahkan menu secara langsung melalui aplikasi dengan mengisi form ADD NEW MENU.
Gambar 4. 33 User Interface New Menu
Add menu digunakan untuk menambahkan menu, menu akan ditampilkan di list menu jika proses penambahan data menu berhasil dilakukan.
http://digilib.mercubuana.ac.id/
112
Untuk melakukan pengubahan data menu, administrator akan menekan button delete dan aplikasi akan menampilkan form update data menu seperti pada gambar.
Gambar 4. 34 User Interface Add New Module in Role
Untuk melakukan penghapusan data menu user memilih button delete dan aplikasi akan menghapus data menu dan tidak ditampilkan di grid. 2. Menu in Role Menu ini mengelola role yang dapat mengakses menu yang ada diaplikasi. Form menu in role seperti pada gambar.
Gambar 4. 35 User Interface Menu in Role
http://digilib.mercubuana.ac.id/
113
Administrator akan memberikan thick mark pada combo box untuk memilih menu di dalam aplikasi dan memilih role user dan valid date pada form dan menekan button submit.
Gambar 4. 36 User Interface Assign Role in Menu
3. Project Menu project digunakan untuk mengelola data project. Proses pengelolaan terdiri dari menambah, mengubah dan menghapus data project.
Gambar 4. 37 User Interface List Project
Detail rancangan pengelolaan project dijelaskan pada tabel. Tabel 4. 14 Detail User Interface Pengelolaa Data Project Deskripsi Asumsi Keterangan
Form yang digunakan oleh user untuk melakukan penambahan data user User telah login ke aplikasi Datagrid :
http://digilib.mercubuana.ac.id/
114
-
List data project di datagrid yang terdiri dari : nama project, tanggal project mulai, tanggal project berakhir dan tanggal data di insert ke aplikasi.
Button : - Update : Untuk melakukan update data - Delete : untuk menghapus data project
Gambar 4. 38 User Interface Add Project
Untuk melakukan penambahan data project, user dapat mengisi form add new project. Masukkan project id, project name, start date, end date dan deskripsi project kemudian tekan button submit untuk menyimpan data project. Untuk melakukan update data gunakan perintah Update dan Delete untuk menghapus data.
Gambar 4. 39 User Interface Untuk Fungsi Update dan Delete
http://digilib.mercubuana.ac.id/
115
4. Module Menu Module digunakan untuk mengelola data Module. Proses pengelolaan terdiri dari menambah, mengubah dan menghapus data Module.
Gambar 4. 40 User Interface List Module
Detail rancangan pengelolaan project dijelaskan pada tabel. Tabel 4. 15 Detail User Interface Pengelolaa Data Module Deskripsi Asumsi Keterangan
Form yang digunakan oleh user untuk melakukan penambahan data user User telah login ke aplikasi Datagrid : - List data module di datagrid yang terdiri dari : nama module, tanggal module mulai dikerjakan, tanggal project berakhir dan tanggal data di insert ke aplikasi. Button : - Update : Untuk melakukan update data - Delete : untuk menghapus data project
Gambar 4. 41 User Interface Add Module
http://digilib.mercubuana.ac.id/
116
Untuk melakukan penambahan data project, user dapat mengisi form add module pilih nama project, module name, start date, end date dan deskripsi project kemudian tekan button submit untuk menyimpan data module. 5. Task Task akan menampilkan list task seperti yang ditampilkan pada gambar.
Gambar 4. 42 User Interface Task
Untuk melakukan penambahan data task user mengisi form add task.
http://digilib.mercubuana.ac.id/
117
Gambar 4. 43 User Interface Add Task
Detail tampilan penambahan data task dijelaskan pada tabel. Tabel 4. 16 Detail User Interface Add Data Task Deskripsi Asumsi Keterangan
Form yang digunakan user untuk menambahkan data task. Remaining Estimate akan diupdate otomatis oleh system. Edit Text - Task name : nama task yang akan diassign - Initial estimate : waktu (jam) yang digunakan untuk mengerjakan suatu task - Remaining estimate: sisa waktu (jam) yang digunakan oleh user untuk mengerjakan suatu task Drop down list - Project name: task ada di project yang mana. - Module name : task ada di module yang mana - Priority: prioritas task yangakan di assign misalnya high, medium dan small. - Period : waktu pengerjaan task - Assign to : orang yang bertanggung jawab untukmengerjakan task
http://digilib.mercubuana.ac.id/
118
Area Text - Description : deskripsi task Due date - Tanggal pengerjaaan task
Untuk melakukan menghapus data user dapat memilih button delete dan aplikasi akan menampilkan pop up seperti pada gambar.
Gambar 4. 44 User Interface Notifikasi Delete Data
http://digilib.mercubuana.ac.id/