Flowcart gambar 3.5 merupakan input data sederhana. Pengguna di minta untuk melakukan input kemudian dilakukan pengecekan data. Jika valid data tersebut akan
di simpan pada databese jika tidak pengguna akan diminta untuk melakukan input kembali.
3.3.5 Diagram use case
Use case merupakan gambaran dari sebuah sistem dari sudut pandang pengguna. Diagram use case digunakan untuk menggambarkan fungsi-fungsi dari aspek perilaku
sebuah sistem tersebut. Pada sistem ini aktor dibagi menjadi 3 bagian yaitu user, admin STNK, admin
laporan. User merupakan pengguna pada mobile device yaitu petugas yang bekerja di lapangan. Sedangkan admin STNK adalah petugas administrasi yang menginput data
pengguna kendaraan ke sistem. Dan terakhir adalah admin Laporan adalah petugas yang menginput data laporan kehilangan pada sistem yang di laporkan oleh
masyarakat. Diagram use case sistem dapat dilihat pada gambar 3.6.
Gambar 3.6 Diagram use case.
Universitas Sumatera Utara
a. Model spesifikasi Use Case
Tabel 3.3 Use case input data
Nama Use Case Input data
Penjelasan singkat Digunakan untuk menginput data yang di butuh pada
sistem Aktor
Admin STNK, Admin Laporan Pra kondisi
Aktor harus terlebih dahulu login pada sistem dan masuk ke halaman input
Skenario Flow of events
a. Dimulai dengan login terlebih dahulu b. Memilih “input data” untuk admin STNK dan “input
kehilangan” untuk admin laporan pada menu c. Sistem akan menampilkan halaman input
d. aktor dapat meng-input data sesuai pada data yang dibutuhkan sistem di form tersebut dan melakukan
penyimpanan e. sistem akan melakukan penyimpanan data
f. selanjutnya akan ada tampilan cetak, jika dipilih akan mencetak file tersebut. Admin STNK akan mencetak
qr code. Sedangkan admin laporan tidak ada halaman cetak data.
Pasca kondisi Aktor dapat menambahkan data lengkap sesuai pada
form yang tersedia
Tabel 3.4 Use case Edit data
Nama Use Case Edit data
Penjelasan singkat Digunakan untuk mengedit data yang telah tersimpan di
sistem Aktor
Admin STNK, Admin Laporan Pra kondisi
Admin Aktor harus terlebih dahulu login pada sistem dan masuk ke halaman daftar data untuk admin STNK dan
data laporan untuk admin laporan Skenario Flow of
a. Dimulai dengan login terlebih dahulu
Universitas Sumatera Utara
events b. Memilih daftar data untuk admin STNK dan data
laporan untuk admin laporan pada menu c. Sistem akan menampilkan halaman Daftar datadata
laporan d. aktor dapat memilih data pemilik yang akan di edit
e. sistem akan melakukan penyimpanan data Pasca kondisi
Aktor dapat menyimpan data yang telah di edit
Tabel 3.5 Use case Hapus data
Nama Use Case Hapus data
Penjelasan singkat Digunakan untuk menghapus data pemilik kendaraan
bermotor yang sebelumnya telah tersimpan pada sistem. Aktor
Admin STNK Pra kondisi
Aktor harus terlebih dahulu login pada sistem dan masuk ke halaman hapus data
Skenario Flow of events
a. Dimulai dengan login terlebih dahulu b. Memilih “daftar data” pada menu
c. aktor dapat memilih data pemilik yang akan di hapus d. data yang dipilih akan terhapus dari database
Pasca kondisi Data yang di hapus tidak lagi terlihat pada sistem
Tabel 3.6 Use case Cetak QR Code
Nama Use Case Cetak qr code
Penjelasan singkat Digunakan untuk mencetak data sebelumnya yang telah
tersimpan pada sistem. Aktor
Admin STNK Pra kondisi
Aktor harus terlebih dahulu login pada sistem dan masuk ke halaman hapus data
Skenario Flow of events
a. Dimulai dengan login terlebih dahulu b. Memilih “beranda” pada menu
c. Memasukkan plat kendaraan yang akan dicetak d. sistem akan melakukan pencetakan data
Universitas Sumatera Utara
Pasca kondisi Halaman akan kembali pada halaman beranda
Tabel 3.7 Use case login
Nama Use Case login
Penjelasan singkat Digunakan untuk masuk ke dalam sistem.
Aktor Admin STNK, admin Laporan
Pra kondisi -
Skenario Flow of events
a. Dimulai dengan memasukkan username dan
password b. Lalu menekan tombil login
Pasca kondisi Aktor akan masuk ke sistem
Tabel 3.8 Use case User Scan QR Code
Nama Use Case Scan QR Code
Penjelasan singkat Digunakan untuk menscan qr code
Aktor User
Pra kondisi User dapat langsung menggunakan sistem tanpa login
Skenario Flow of events
a. Dimulai menscan qr code b. Hasil scan akan di deskripsi dan dilakukan
pengecekan secara online c. Data kendaraan akan terlihat
Pasca kondisi Menampilkan hasil dekripsi scan qr code
Tabel 3.9 Use case User Input
Nama Use Case Input Manual
Penjelasan singkat Digunakan untuk mencari informasi kendaraan secara
manual Aktor
User Pra kondisi
User dapat langsung menggunakan sistem tanpa login Skenario Flow of
a. Dimulai men- Tab cek data
Universitas Sumatera Utara
events b. Pilih jenis input, cek no polisi no mesin no rangka
c. Kemudian user memasukkan input dan men Tab cek d. Sistem akan melakukan pengecekan secara online
e. Data kendaraan akan terlihat Pasca kondisi
Halaman akan kembali pada halaman Cek data
3.3.6 Perancangan antarmuka sistem Perancangan antarmuka sistem adalah sketsa dasar yang digunakan untuk
mempermudah perancangan sistem. Sketsa ini yang akan di implementasikan ke dalam sistem. Perancangan antarmuka sistem yang akan dibuat untuk sistem ini yaitu :
1. Rancangan halaman login
Gambar 3.7 Rancangan Halaman Login
Universitas Sumatera Utara
2. Rancangan halaman menu utama admin STNK
Gambar 3.8 Rancangan halaman menu utama admin STNK
3. Rancangan halaman input data admin STNK
Gambar 3.9 Rancangan halaman Input data Admin STNK
Universitas Sumatera Utara
4. Rancangan halaman daftar data kendaraan admin STNK
Gambar 3.10 Rancangan halaman daftar data kendaraan admin STNK
5. Rancangan halaman edit data admin STNK
Gambar 3.11 Rancangan halaman edit data admin STNK
Universitas Sumatera Utara
6. Halaman cetak qr code admin STNK
Gambar 3.12 Rancangan halaman cetak qr code admin STNK
7. Rancangan halaman menu utama admin Laporan
Gambar 3.13 Rancangan halaman menu utama admin Laporan
Universitas Sumatera Utara
8. Rancangan halaman input laporan admin Laporan
Gambar 3.14 Rancangan halaman input laporan admin laporan
9. Rancangan halaman data laporan admin Laporan
Gambar 3.15 Rancangan halaman data laporan admin laporan
Universitas Sumatera Utara
10. Rancangan halaman edit data kehilangan admin Laporan
Gambar 3.16 Rancangan halaman edit data kehilangan admin laporan
11. Tampilan lihat data admin laporan
Gambar 3.17 Rancangan Halaman Input admin laporan
Universitas Sumatera Utara
12. Rancangan aplikasi mobile user
Gambar 3.18 Rancangan Aplikasi mobile User
13. Rancangan plat kendaraan
Gambar 3.19 Rancangan Plat kendaraan dengan qr code
Qr code yang terletak pada plat kendaraan berukuran 3,5 x 3,5 cm. Qr code di cetak pada kertas stiker dan di tempel pada plat kendaraan tersebut.
Universitas Sumatera Utara
BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM
