134 4c
Klik menu About Application
Menampilkan informasi seputar aplikasi
OK 4c.1 Klik tombol Back
Kembali pada halaman utama OK
4d Klik menu Logout
Keluar dari hak akses login dan kembali ke halaman
utama OK
5 Klik menu Exit
Keluar dari sistem aplikasi android
OK
4.7.3. Implementasi User Interface Design
Pada tahap ini desain tampilan antar muka dari konsep Aplikasi Historical Maintenance telah diimplementasikan.
Terdapat 2 kelompok tampilan antar muka yang dibuat yaitu tampilan pada web administrator dan tampilan aplikasi pada
perangkat android, berikut adalah hasil tampilan antar muka dari web administrator :
1. Tampilan Halaman Login User
Pada halaman ini administrator dapat login, jika admin memasukan data benar maka dinyatakan sukses dan masuk pada
halaman utama web tetapi jika salah maka akan diminta untuk memasukan data yang benar dan belum dapat masuk ke dalam
sistem. Seperti pada gambar 4.37. dibawah ini.
135
Gambar 4.37. Tampilan Halaman Login Web Administrasi
2. Tampilan Halaman Utama Home
Jika admin telah berhasil login maka akan masuk pada halaman utama web, pada halaman utama web administrasi terdapat 5 menu
utama pada sebelah kiri web yaitu menu admin, menu operator, menu bus, menu maintenance bus dan logout. Menu logout juga
terdapat pada pokok kanan atas web dan menu home terdapat pada bagian atas web, berikut tampilannya. Seperti pada gambar 4.38.
dibawah ini.
136
Gambar 4.38. Tampilan Halaman Utama Home Web
Administrator
3. Tampilan Halaman Admin
Pada menu admin, user dapat melihat seluruh data admin, merubah data admin, menghapus admin dan menambahkan admin
baru. Berikut tampilan menu admin beserta tampilan form tambah admin sekaligus ubah admin pada gambar 4.39. dan gambar 4.40.
Gambar 4.39. Tampilan Halaman Admin
137
4. Tampilan Halaman Tambah Admin dan Edit Admin
Gambar 4.40.
Tampilan Halaman Tambah Admin dan Edit Admin
5. Tampilan Halaman Operator
Menu operator pada web administrasi dimaksudkan untuk keperluan administrasi data operator teknik pool bus 1 yang
bertugas dilapangan untuk memeriksa dan mencatat data kondisi terakhir dan juga perbaikan-perbaikan yang akan dilakukan
terhadap unit bus pada pool bus 1. Pada menu operator terdapat form pengisian data diri operator dan sekaligus informasi yang
ditampilkan pada bagian bawah form, tampilan ditunjukkan pada gambar 4.41. dibawah ini.
138
Gambar 4.41. Tampilan Halaman Operator
6. Tampilan Halaman Bus
