BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM
4.1 Implementasi Sistem
Implementasi sistem merupakan penerapan sistem yang telah di analisa dan di rancang pada bahasa pemrograman untuk menghasilkan aplikasi yang bermanfaat.
4.1.1 Spesifikasi perangkat keras Hardware Berikut ini adalah perangkat keras yang digunakan untuk mengimplementasikan
sistem ini, di antaranya adalah : a. Processor Intel Core 2 Duo 2.13 GHz
b. Memory 2048 MB c. Hardisk 320 GB
d. VGA Nvidia GeForce 9200M GS 256 MB e. Smartphone Android dengan kamera dan Memory 512 MB
4.1.2 Spesifikasi perangkat lunak Software Berikut ini adalah perangkat lunak yang digunakan untuk mengimplementasi sistem
ini, di antaranya adalah : a. Windows 7 Ultimate 32 bit
b. Notepad++ c. Xampp 1.7.3
d. Eclipse Android e. Inkscape
f. Google Chrome g. Andoid OS 4.0.4 Ice Cream Sandwich
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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
vigenere lalu data hasil vigenere di ubah ke dalam bentuk qr code. Untuk mengubah
Universitas Sumatera Utara
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
Gambar 4.7 Tampilan hasil cetak qr code admin STNK
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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, tanggaljam 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.
Gambar 4.10 Tampilan input data admin laporan
Universitas Sumatera Utara
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.
Gambar 4.11 Tampilan edit data admin laporan
Universitas Sumatera Utara
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.
Gambar 4.12 Tampilan lihat data admin laporan
Universitas Sumatera Utara
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
pixel.
Universitas Sumatera Utara
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
a b
Universitas Sumatera Utara
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
b
Universitas Sumatera Utara
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
a b
Universitas Sumatera Utara
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.20 Tampilan about dan keluar a Tampilan about, b Tampilan
pertanyaan keluar
4.3 Implementasi Sandi Vigenere dan QR Code