BAB II LANDASAN TEOR
IMPLEMENTASI DAN PENGUJIAN SISTEM
4.2 Implementasi Perancangan Antarmuka
4.2.1 Tampilan halaman login
Halaman ini merupakan halaman pertama yang ditampilkan kepada pengguna sebelum masuk ke dalam sistem. Pengguna dapat memasukkan username dan
password pada kotak teks yang tersedia. Tampilan login dapat dilihat di gambar 4.1.
Gambar 4.1 Tampilan halaman login
4.2.2 Tampilan halaman menu utama admin STNK
Ini merupakan halaman utama admin STNK. Di halaman ini pengguna dapat melakukan pencarian nomor polisi secara detail untuk mencetak menjadi qr code. Dapat dilihat pada gambar 4.2.
Gambar 4.2 Tampilan halaman utama admin STNK
4.2.3 Tampilan halaman input data admin STNK
Halaman ini digunakan untuk menginput data kendaraan pengguna ke dalam database dan membuat qr code dari data tersebut. Halaman input dapat dilihat pada gambar 4.3.
Gambar 4.3 Tampilan halaman input data admin STNK
4.2.4 Tampilan halaman daftar data admin STNK
Halaman ini menampilkan data kendaraan yang ada di database, pengguna dapat melakukan edit, delete dan cetak. Halaman daftar data dapat dilihat pada gambar 4.3.
Gambar 4.4 Tampilan halaman daftar data admin STNK
4.2.5 Tampilan halaman edit data Admin STNK
Halaman edit data digunakan untuk melakukan perubahan data dan menyimpannya kembali ke database. Halaman edit tersebut dapat dilihat pada gambar 4.5.
Gambar 4.5 Tampilan halaman edit data admin STNK
4.2.6 Tampilan cetak qr code admin STNK
Halaman ini adalah halaman cetak qr code, data kendaraan di enkripsi dengan
dalam bentuk qr code digunakan library php qr code. Halaman cetak data qr code dapat dilihat pada gambar 4.6. Dan pengguna dapat melakukan cetak dengan mengklik “cetak”. Hasil cetak data dapat dilihat pada gambar 4.7.
Gambar 4.6 Tampilan halaman cetak qr code admin stnk
4.2.7 Tampilan halaman utama admin laporan
Ini merupakan halaman utama admin laporan. Pada halaman ini akan ditampilkan semua data laporan kehilangan kendaraan sesuai daerah pengguna. Contoh, Username = anjar, lokasi = kota Binjai, maka data yang ditampilkan hanya yang berada di kota Binjai. Halaman ini dapat dilihat pada gambar 4.8.
Gambar 4.8 Tampilan halaman utama admin laporan
4.2.8 Tampilan halaman data laporan admin laporan
Sama seperti gambar 4.8, tetapi halaman ini menampilkan keseluruhan data laporan kehilangan kendaraan yang ada di database. Pengguna dapat melakukan pencarian nomor polisi atau nama pelapor kendaraan. Apabila kendaraan berstatus hilang, maka status kendaraan akan diberi status hilang dan di beri tanda merah, sedangkan apabila kendaraan telah ditemukan status akan berubah menjadi ditemukan dan diberi warna hijau. Halaman data laporan dapat dilihat pada gambar 4.9.
Gambar 4.9 Tampilan data laporan admin laporan
4.2.9 Tampilan halaman input data admin laporan
Halaman input data terdiri dari no. polisi, nama pelapor, jenis kelamin, alamat, tempat tanggal lahir, no. telepon, agama, pekerjaan, keterangan, tanggal/jam terjadi dan lokasi. Data ini harus di isi sesuai data yang sah. Untuk field no. polisi, sistem akan melakukan cek otomatis apabila no. kendaraan tidak terdaftar maka sistem tidak dapat melakukan penyimpanan laporan. Halaman dapat dilihat pada gambar 4.10.
4.2.10 Tampilan halaman edit data admin laporan
Halaman edit ini dapat diakses pada halaman utama, data laporan kehilangan daerah dan data laporan. Pengguna dapat melakukan perubahan perubahan data yang terdapat pada form kecuali nomor polisi. Pengguna juga dapat mengganti status kendaraan dari hilang menjadi ditemukan dan sebaliknya. Apabila status menjadi ditemukan akan ada 2 field yang harus diisi berupa tanggal ditemukan dan lokasi ditemukan. Dapat dilihat pada gambar 4.11.
4.2.11 Tampilan halaman lihat data admin laporan
Halaman ini hanya menampilkan data saja tidak dapat melakukan perubahan. Halaman dapat di pada gambar 4.12.
4.2.12 Tampilan QR Code pada plat kendaraan
Gambar 4.13 Tampilan QR Code pada plat belakang kendaraan
Gambar 4.14 Tampilan QR Code pada plat depan kendaraan
Qr code yang di tempel pada plat kendaraan berukuran 3,5 x 3,5 cm. QR Code ditempel pada plat kendaraan bagian depan dan di letakkan pada sebelah kiri tanggal berlaku plat kendaraan.
4.2.13 Tampilan aplikasi mobile user
Pada tampilan aplikasi mobile user android ini, menggunakan resolusi layar 320x480
a. Tampilan awal aplikasi
Gambar 4.15 Tampilan awal aplikasi (a) Splash Screen, (b) Halaman Utama Gambar 4.15 (a) adalah splash screen aplikasi yaitu tampilan saat program dijalankan sebelum masuk ke halaman utama. Sedangkan gambar 4.15 (b) merupakan tampilan halaman utama. Hanya terdapat 3 button utama, scan, cek data dan keluar. b. Tampilan saat melakukan Scanning
Gambar 4.16 Library Zxing (a) Proses Scan, (b) Memproses qr code Dalam melakukan scan qr code ini menggunakan library zxing dapat dilihat di gambar 4.16. pada gambar 4.16 (a) mencari objek qr code yang akan di scan sedangkan gambar 4.16 (b) adalah proses apabila qr code berhasil di scan.
(a) (b)
c. Tampilan hasil scan
Gambar 4.17 Tampilan hasil scan (a) tidak di laporkan hilang, (b) dilaporkan hilang
Pada bagian ini data yang berhasil di scan dari qr code kemudian di deskripsikan dengan vigenere dan hasilnya kemudian ditampilkan. Lihat gambar 4.17. background merah menandakan kendaraan tersebut dalam pelaporan hilang akan tampil nama pelapor dan nomor telepon.
(a)
d. Tampilan cek data
Gambar 4.18 Tampilan cek data
Pada gambar 4.16 adalah tampilan cek data dengan menginput secara manual nomor polisi, nomor mesin atau nomor rangka. Pilihannya dapat dilihat pada gambar 4.18 (b) apabila tidak dipilih maka textbox dan button cek tidak akan muncul.
e. Tampilan hasil cek data
Gambar 4.19 Tampilan hasil cek data, (a) tidak dalam pelaporan hilang, (b) dalam pelaporan hilang
(a) (b) (c)
Pada gambar 4.19 (a), terdapat no. polisi, nama, alamat, no. rangka, no. mesin, merk, jenis, type, warna, dan masa berlaku STNK. Ini merupakan tampilan data kendaraan yang tidak dalam pelaporan hilang. Sedangkan untuk gambar 4.19 (b), tidak berbeda jauh hanya saja warna tulisan data kendaraan berubah menjadi merah, tidak menampilkan masa berlaku kendaraan dan ada tambahan nama pelapor dan nomor telepon.
f. Tampilan about dan keluar
Gambar 4.20Tampilan about dan keluar (a) Tampilan about, (b) Tampilan pertanyaan keluar