3.2 Perancangan Antarmuka
Perancangan antarmuka pada perangkat lunak manajemen proyek ini dibagi dalam beberapa bagian, antara lain:
3.2.1 Form Utama
Perancangan antarmuka dimulai dari perancangan form utama. Form utama terdiri dari beberapa bagian, antara lain:
Gambar 3.13 Rancangan Jendela Utama
Keterangan gambar: 1.
Tombol menu utamaapplication button
2. Tabtab
3. Tombolbutton
4. Grup tabtab group
5. Control box
6. Ribbon
7. Status bar
Universitas Sumatera Utara
3.2.2 Ribbon
Pada gambar 3.2, terlihat rancangan antarmuka mengambil tema dari Microsoft Office 2007 yang memakai teknologi antarmuka Ribbon. Menurut
Microsoft® Office System User Interface Design Guidelines 2007, implementasi Ribbon dalam perangkat lunak sendiri harus memenuhi beberapa syarat:
1. Ribbon adalah pengganti utama dari menu dan toolbar dalam program
2. Ribbon harus menggantikan semua fungsi top-level menus contoh: File, Edit,
View, Insert, Window, Help, dan lain-lain. 3.
Ribbon tidak boleh muncul bersama-sama dengan menu dan toolbar lainnya.
Gambar 3.14 Perbandingan Tampilan antara Menu Biasa dan Ribbon
Terlihat pada gambar 3.14 adalah perbandingan antara menu biasa dan menu Ribbon. Pada menu biasa, pencarian dan navigasi pilihan menu item tidak mudah
dilakukan, dan icon pada menu biasa sangat kecil dan tidak mudah dibedakan. Lain halnya dengan menu Ribbon. Pada Ribbon, menu-menu sudah disusun sedemikian
rupa, sehingga pencarian dan navigasi dapat dilakukan berdasarkan kelompok fungsi kegunaan. Gambar-gambar pada tombol-tombol pilihan cukup besar, mudah dilihat,
dan mudah dibedakan antara satu dengan lainnya.
Dalam perangkat lunak manajemen proyek ini, penulis membagi tab pada Ribbon berdasarkan fungsi menjadi 3 tab group, seperti pada gambar 3.2, yaitu:
Universitas Sumatera Utara
1. Proyek
Gambar 3.15 Tab Proyek
Tab Proyek berisi grup tab yang berkaitan dengan fungsi dalam pengerjaan proyek, dan hanya akan tampak pada layar apabila pengguna sudah
berhasil melalui proses login. Isi tab Proyek antara lain sebagai berikut: a.
Proyek Grup tab ini berisi tiga tombol utama, yaitu tombol untuk membuat
proyek baru, tombol untuk membuka proyek, dan tombol untuk menutup proyek.
b. Gantt Chart
Grup tab ini berisi 2 buah tombol, yaitu tombol opsi untuk mengubah tampilan Gantt Chart menjadi tampilan persen, atau tampilan nama.
c. Opsi Lain
Group tab ini berisi opsi untuk menampilak sebuah kalender kecil untuk membantu dalam pengorganisasian proyek.
2. Pengguna
Gambar 3.16 Tab Pengguna
Universitas Sumatera Utara
Tab Pengguna berisi grup tab yang memiliki fungsi untuk membantu pengguna, antara lain sebagai berikut:
a. Login
Grup tab ini berisi tombol-tombol yang akan membantu pengguna untuk login ke dalam aplikasi, mengganti kata kunci, dan membuat
akun pengguna baru. b.
Lain-lain Grup tab ini berisi tombol pilihan bantuan dan tombol tentang aplikasi
Firefly Project Manager. c.
Keluar Grup tab ini memberikan dua pilihan kepada pengguna, antara logout
dari aplikasi, atau keluar dari aplikasi
3. Pengaturan
Gambar 3.17 Tab Pengaturan
Tab ini memiliki fungsi untuk membantu pengguna dalam pengaturan aplikasi. Adapun dua tombol yang terletak dalam grup tab Pengaturan
adalah untuk pengaturan pangkalan data dan tema aplikasi.
3.2.3 Form Login
Gambar 3.18 Form Login
Universitas Sumatera Utara
Gambar 3.6 memperlihatkan form Login yang akan muncul bila pengguna menekan tombol Login dari tab Login. Kotak dialog ini akan meminta masukkan dari
pengguna, berupa Login ID dan kata kunci. Adapun tiga tombol yang dapat digunakan pengguna untuk berinteraksi dengan kotak dialog tersebut adalah tombol Login,
tombol Batal, dan tombol X di sebelah kanan atas kotak dialog. Tombol Batal dan tombol X akan menutup kotak form Login ini. Tombol Login akan memeriksa apakah
Login ID pengguna dan kata kunci yang dimasukkan sudah sesuai. Bila sesuai, pengguna dapat menggunakan aplikasi.
Gambar 3.19 Peringatan Kesalahan 1
Gambar 3.20 Peringatan Kesalahan 2
Bila pengguna salah dalam memasukkan isian pada kotak form Login, akan muncul dua jenis peringatan. Peringatan pertama seperti pada gambar 3.7 akan
muncul bila pengguna memasukkan Login ID yang tidak terdaftar pada pangkalan data, sedangkan peringatan kedua seperti pada gambar 3.8 akan muncul bila pengguna
memasukkan Login ID yang sudah terdaftar, tetapi dengan kata kunci yang salah.
Universitas Sumatera Utara
Gambar 3.21 Bantuan pada Mouse Over pada Text Box
Gambar 3.9 memperlihatkan tulisan bantuan ketika cursor mouse sedang berada diatasmouse over komponen-komponen pada aplikasi. Tulisan bantuan ini
akan membantu pengguna untuk mengetahui rincian pada isiantext box dan tombol, sehingga pengguna tidak bingung dalam penggunaan aplikasi. Hampir semua tombol
dan isian mempunyai tulisan interaktif ini, sebagai contoh pada gambar 3.20 menunjukkan tulisan bantuan yang serupa pada tombol pada Ribbon.
Gambar 3.22 Bantuan pada Mouse Over pada Ribbon
3.2.4 Sidebar Pengaturan Pangkalan Data
Universitas Sumatera Utara
Gambar 3.23 Sidebar Pengaturan Pangkalan Data
Sidebar pengaturan pangkalan data ini akan muncul apabila tombol Pengaturan Pangkalan Data pada Ribbon ditekan. Pengguna diberikan opsi pengaturan
pangkalan data berupa nama pengguna pangkalan data, kata kunci pangkalan data, nama server pangkalan data, dan nama database pangkalan data. Pengguna dapat
mengklik tombol OK setelah mengisi rincian pangkalan data. Apabila aplikasi digunakan untuk pertama kalinya, tombol Penggunaan pertama dapat dipilih untuk
pengaturan pangkalan data secara otomatis.
3.2.5 Sidebar Pengaturan Tema
Universitas Sumatera Utara
Gambar 3.24 Sidebar Pengaturan Tema
Sidebar pengaturan tema diperuntukkan bagi pengguna untuk dapat memilih tema sesuai dengan keinginan masing-masing pengguna. Menu ini dapat diakses
melalui Pengaturan Tema pada Ribbon. Terdapat sepuluh jenis tema yang dapat dipilih oleh pengguna, antara lain:
Tabel 3.1 Tabel Tema pada Aplikasi
Nama Tema Keterangan
Abu-abu Tema silver seperti pada Microsoft Office
Biru Tema blue seperti pada Microsoft Office
Biru Gelombang Tema dengan warna dasar biru dengan pola gelombang
Hijau Tema dengan warna dasar hijau
Hitam Tema black seperti pada Microsoft Office
Imaginasi Tema warna seperti pada komputer Apple
Karamel Tema dengan warna dasar cokelat
Merah Jambu Tema dengan warna dasar merah jambu
Windows Seven Tema dengan warna seperti pada Windows Seven
Valentin Tema dengan nuansa Hari Kasih Sayang
Universitas Sumatera Utara
Gambar 3.25 Tampilan Tema Abu-abu
Gambar 3.26 Tampilan Tema Biru
Gambar 3.27 Tampilan Tema Biru Bergelombang
Universitas Sumatera Utara
Gambar 3.28 Tampilan Tema Hijau
Gambar 3.29 Tampilan Tema Hitam
Gambar 3.30 Tampilan Tema Imaginasi
Universitas Sumatera Utara
Gambar 3.31 Tampilan Tema Karamel
Gambar 3.32 Tampilan Tema Merah Jambu
Gambar 3.33 Tampilan Tema Windows Seven
Universitas Sumatera Utara
Gambar 3.34 Tampilan Tema Valentin
3.2.6 Sidebar Proyek Baru
Gambar 3.35 Sidebar Proyek Baru
Sidebar proyek baru dapat diakses melalui tombol Proyek Baru pada Ribbon. Sidebar ini menampung informasi yang diperlukan aplikasi untuk membuat sebuah
proyek baru, antara lain: judul proyek, kata kunci dan catatan proyek. Bila rincian telah selesai diisi, maka pengguna dapat menekan tombol Simpan untuk menyimpan
proyek baru tersebut.
Universitas Sumatera Utara
Ada beberapa jenis kotak dialog yang akan muncul untuk memperingatkan pengguna apabila pengguna lalai dalam pengisian informasi proyek. Bila pengguna
lupa menuliskan judul proyek, maka aplikasi akan mengeluarkan sebuah kotak dialog yang akan memperingatkan pengguna, seperti pada Gambar 3.23.
Gambar 3.36 Peringatan Judul Proyek Kosong
Dalam pembuatan proyek baru, pengguna diberikan pilihan untuk dapat mengunci proyek dengan kata kunci, ataupun membiarkan proyek tidak terkunci
dengan kata kunci apapun. Bila pengguna mengosongkan kedua isian kata kunci dan perulangannya, maka program akan memunculkan kotak dialog informasi yang akan
mengkonfirmasi pengguna perihal isian kata kunci yang kosong, seperti pada Gambar 3.25. Apabila pengguna memilih Ya, maka kata kunci proyek akan dibiarkan kosong.
Bila pengguna memilih Tidak, pengguna akan diberikan kesempatan lagi untuk melengkapi isian kata kunci.
Gambar 3.37 Informasi Kata Kunci Kosong
Kotak dialog peringatan kesalahan seperti pada Gambar 3.26 akan muncul bila kata kunci yang dimasukkan pada textbox pertama tidak sesuai dengan kata kunci
yang ada pada textbox kata kunci yang harus diulangi. Pengguna akan diminta untuk mengulangi pengisian kata kunci.
Universitas Sumatera Utara
Gambar 3.38 Peringatan Kata Kunci Tidak Sesuai
3.2.7 Sidebar Buka Proyek
Gambar 3.39 Sidebar Buka Proyek
Sidebar buka proyek dapat diakses melalui tombol Buka Proyek pada Ribbon. Sidebar ini memungkinkan pengguna untuk dapat membuka proyek yang sudah
pernah disimpan sebelumnya. Di dalam sidebar ini, terdapat sebuah tabel yang akan menampilkan informasi mengenai proyek yang sudah disimpan, antara lain: nama
proyek, nama pembuat proyek, dan tanggal proyek tersebut dibuat.
Universitas Sumatera Utara
Bila pengguna pemilih salah satu proyek, maka textbox catatan akan langsung otomatis menampilkan catatan dari proyek yang dipilih. Untuk dapat membuka
proyek tersebut, pengguna harus memasukkan kata kunci. Bila pengguna salah memasukkan kata kunci proyek, maka aplikasi akan memunculkan kotak dialog
peringatan, seperti pada Gambar 3.28.
Gambar 3.40 Peringatan Kata Kunci Salah
3.2.8 Lembar Kerja Utama
Gambar 3.41 Lembar Kerja Utama
Lembar kerja utama dapat diakses setelah pengguna membuat sebuah proyek baru atau membuka sebuah proyek yang telah ada sebelumnya. Tampilan lembar kerja
utama dapat dilihat pada Gambar 3.29. Lembar kerja utama terbagi menjadi dua bagian utama, yaitu:
Universitas Sumatera Utara
3.2.8.1 Tabel Jadwal Kegiatan
Gambar 3.42 Tabel Jadwal Kegiatan
Tabel jadwal kegiatan yang berada pada sisi kiri lembar kerja utama, berisi rincian kegiatan yang dilakukan selama proyek berlangsung, antara lain sebagai
berikut: nama kegiatan, waktu mulai, waktu selesai, dan persen selesai.
3.2.8.2 Gantt Chart
Gambar 3.43 Gantt Chart
Universitas Sumatera Utara
Gantt chart, yang berada pada sisi kanan lembar kerja utama, berisi tampilan diagram yang merepresentasikan kegiatan-kegiatan pada proyek menjadi bentuk
visual. Batang-batang diagram ini dapat digeser, diedit, dihubungkan dengan batang- batang diagram lainya. Garis merah pada diagram ini menunjukkan hari pada saat
pengguna memakai aplikasi tersebut. Di sisi kiri dan kanan Gantt chart, terdapat masing-masing sebuah navigator yang apabila diklik, akan menunjukkan kegiatan
selanjutnya dari proyek kepada pengguna. Scroll bar horizontal dibawahnya berfungsi untuk memudahkan pengguna dalam melakukan navigasi ke kiri dan ke kanan Gantt
chart.
Gambar 3.44 Pop-up Menu pada Gantt Chart
Menu klik kanan pop-up menu pada Gantt chart akan menampilkan beberapa pilihan, seperti tampak pada Gambar 3.32. Adapun keterangan menu adalah sebagai
berikut:
Tabel 3.2 Keterangan Pop-up Menu pada Gantt Chart
Nama Menu Keterangan
Kegiatan Baru Berfungsi untuk membuat kegiatan baru yang sederhana dalam
proyek Kegiatan Sehari Penuh
Berfungsi untuk membuat kegiatan proyek yang memerlukan waktu penyelesaian seharian penuh
Kejadian Berulang Baru Berfungsi untuk membuat kejadian berulang yang terjadi selama
proyek berlangsung Hari ini
Berfungsi untuk menavigasi pengguna kembali ke kegiatan hari ini
Universitas Sumatera Utara
3.2.9 Kegiatan Baru
Gambar 3.45 Jendela Kegiatan Baru
Gambar 3.33 menunjukkan jendela yang muncul setelah kegiatan baru dipilih. Kegiatan baru ini berisi rincian kegiatan pada proyek, misalnya: judul kegiatan, lokasi
kegiatan, label kegiatan, waktu mulai, waktu selesai, persen selesainya kegiatan tersebut, status kegiatan, pengingat reminder, penunjuk waktu, dan catatan kegiatan.
3.2.10 Pengingat
Pengingat berfungsi sebagai jendela pengingat bila diatur untuk mengingatkan pengguna untuk kegiatan tertentu pada Gantt Chart. Pengingat akan muncul sesuai
dengan waktu yang diatur oleh pengguna. Pengguna mempunyai opsi untuk menunda pengingat, atau bisa langsung menghapus pengingat.
Universitas Sumatera Utara
Gambar 3.46 Jendela Pengingat
Universitas Sumatera Utara
3.3 Perancangan Pangkalan Data