118
5. Perancangan HalamanOperator
HEADER
FOOTER
Admin Operator
Bus Maintenance Bus
PHP QR Code Generate Logout
Operator ID
Username Password
Telepon Foto
Jabatan
Simpan Batal
Keterangan Button Choose File
No. ID Operator
Username Password Telepon
Foto Jabatan
Keterangan Menu
Gambar 4.26. Rancangan HalamanOperator
6. Perancangan Halaman Bus
HEADER
Admin Operator
Bus Maintenance Bus
PHP QR Code Generate Logout
No. Polisi
No. Rangka No. Mesin
HT Seat
Tahun Chasis
Simpan Batal
Merk
No. Informasi Bus
QR Code Menu
Karoseri Kapasitas Tangki
Driver Helper
Gambar 4.27. Rancangan HalamanBus
119
7. Perancangan Halaman Maintenance Bus
HEADER
Admin Operator
Bus Maintenance Bus
PHP QR Code Generate Logout
Maintenance ID
No. Polisi Operator ID
Tanggal Masuk Target Selesai
Status
Simpan Batal
Kilometer
No. Informasi Maintenance Bus
Menu
Keterangan
FOOTER
Gambar 4.28. Rancangan Halaman Maintenance Bus
8. Perancangan Halaman Maintenance Detail Bus
HEADER
Admin Operator
Bus Maintenance Bus
PHP QR Code Generate Logout
Maintenance ID Maintenance ID
No. Polisi Tanggal Masuk
Target Selesai Perbaikan
No. Polisi Kilometer
Tanggal Masuk
Simpan Batal
Kilometer Target Selesai
No. Informasi Perbaikan Bus
Menu
FOOTER
Gambar 4.29. Rancangan Maintenance Detail Bus
120
Sebagaimana dijelaskan sebelumnya bahwa terdapat 2 kelompok tampilan rancangan antarmuka yang dibuat, yaitu
rancangan tampilan untuk web administrator dan aplikasi android. Berikut rancangan tampilan pada aplikasi android :
1. Tampilan Halaman Login User
Form Login merupakan tampilan untuk login. Pengguna telah terdaftar diharuskan untuk mengisikan username dan passwordnya.
Login
Username Password
Login
Back
Gambar 4.30. Rancangan Halaman LoginAplikasi Android
2. Tampilan Halaman Utama
Form Home merupakan tampilan utama berisi informasi dan fungsi aplikasi. Home pada aplikasi android terdapat 4 tombol
utama.
121
4 tombol utama pada home aplikasi android masing-masing mempunyai fungsi sebagai berikut :
Scan QR Code : Untuk menscan QR Code yang terdapat pada bus sekaligus menampilkan data informasi bus
About Application : Untuk menampilkan informasi mengenai aplikasi
LoginOperator : Untuk mengisi form berisi username dan password dari operator teknik
Exit : Untuk keluar dari aplikasi
Image Button Image Button
Image Button Image Button
Scan QR Code About Application
Login Exit
Gambar 4.31. Rancangan Halaman Utama Aplikasi Android
122
3. Tampilan Halaman Scan QR Code
