BAB IV RANCANGAN USER INTERFACE

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

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 Form yang digunakan user untuk melakukan login ke aplikasi User telah terdaftar di database Keterangan 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.

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 Form yang digunakan user ketika user berhasil login ke aplikasi. Form ini akan digunakan untuk memilih project, module, period, dan team yang mengerjakan proyek.

91 Keterangan LIST TASK 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 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.

92 Gambar 4. 5 Keterangan List Menu Detail user interface list menu dijelaskan pada tabel. Tabel 4. 3 List Data Task 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 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

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

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, actual duration,description dan komentar, seperti yang ditampilkan pada gambar. Gambar 4. 7 User Interface List Menu

95 Keterangan detail data task dijelaskan pada tabel berikut: Tabel 4. 5 Detail User Interface List Menu 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

96 Keterangan detail data view list komentar dijelaskan pada tabel berikut: Tabel 4. 6 Detail User Interface Detail Comment Keterangan Form ini digunakan untuk melihat semua komentar yang pernah diberikan oleh semua user terhadap suatu task. Text - Isi komentar - Nama user yang memberikan komentar - Waktu(tanggal dan jam) user memberikan komentar Button - ADD untuk menambahkan komentar Add comment Untuk menambahkan komentar klik ADD button dan muncul form tambah komentar Gambar 4. 9 User Interface Add Comment

97 Keterangan detail data tambah komentar dijelaskan pada tabel berikut: Tabel 4. 7 Detail User Interface Add Comment 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

98 Keterangan detail data ubah workflow dijelaskan pada tabel berikut: Tabel 4. 8 Detail User Interface Change Workflow 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:

99 Keterangan Add Worklog Tabel 4. 9 Detail User Interface View Worklog Form ini digunakan untuk menambahkan data komentar ListView - Menampilkan list data worklog Button - ADD worklog menambahkan 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:

100 Tabel 4. 10 Detail User Interface Add Worklog 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. Task Reject Button - Save menyimpan data worklog - Cancel membatalkan penyimpanan data worklog Task dengan status rejected ditampilkan seperti gambar berikut. Gambar 4. 13 User Interface List Task Rejected

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 Form ini digunakan untuk menampilkan list data task yang di reject Keterangan - 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:

102 Tabel 4. 12 Detail User Interface Re-Assign Task 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

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.

104 Gambar 4. 17 User Interface Login Tabel 4. 13 Keterangan User Interface Login Member Form yang digunakan member untuk melakukan login Data user telah terdaftar di tabel user Keterangan 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

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.

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.

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

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.

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.

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.

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.

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

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 Form yang digunakan oleh user untuk melakukan penambahan data user User telah login ke aplikasi Keterangan Datagrid :

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

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 Form yang digunakan oleh user untuk melakukan penambahan data user User telah login ke aplikasi Keterangan 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

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.

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 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

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