## MONITORING SLOT PARKIR BERBASIS WEB DAN ANDROID
Oleh : Parsumo Rahardjo 1 , Mardiyono 2 , Nirwana Safitri 3 , Wahja’as Nur Rizky 4
Teknik Informatika Politeknik Negeri Semarang
Jl. Prof. Sudarto, Tembalang, Kec. Tembalang, Kota Semarang, Jawa Tengah, 50275 Telp. (024) 7473417 E-mail : parsumo@polines.ac.id, mardiyono@polines.ac.id, nanasftr1@gmail.com, wahjaas.nurrizky@gmail.com

## Abstrak
Penelitian ini dilakukan untuk memudahkan pengemudi dalam memilih tempat parkir, meminimalisir menyentuh benda dan meminimalisir terjadinya kemacetan jalan akibat mobil parkir sembarangan. Tujuan dari penilitin ini dengan  judul  Monitoring  Slot  Parkir  Berbasis  Web  dan  Android  yaitu  memudahkan  pengendara  untuk mengetahui slot parkir yang masih kosong. Metode yang digunakan dalam membangun sistem ini adalah metode Waterfall yang tahapannya berjalan berurutan melalui tahap demi tahap. Pada sistem ini menggunakan aplikasi android dan web yang digunakan untuk memantau ketersediaan slot parkir. Aplikasi android digunakan sebagai aplikasi  pembayaran  &  informasi  mengenai  slot  parkir  yang  tersedia.  Pengujian  yang  dilakukan  meliputi pengujian  tampilan  antarmuka  dan  fungsi pada  aplikasi android,  serta keseluruhan  sistem.  Berdasarkan  hasil kuesioner  dari  20  responden,  didapatkan  hasil  presentase  penilaian  akhir  responden  sebesar  87.5%  yang berarti sangat setuju.
Kata kunci: Monitoring parkir, Android

## Abstract
This research was conducted to make it easier for drivers to choose a parking space, minimize touching objects and  minimize  road  congestion  due  to  car  parking  carelessly.  The purpose  of  making  this  final project  entitled Monitoring of Parking Slots Based on Web and Android is to make it easier for drivers to find out which parking slots  are  still  empty.  The  method  used  in  building  this  system  is  the  Waterfall  method,  which  stages  run sequentially by going through stages. This system uses android and web applications that are used to monitor the availability of parking slots. The android application is used as a payment application & information about available  parking  slots.  The  tests  carried  out  include  testing  the  interface  and  functions  of  the  android application, as well as the entire system. Based on the results of the questionnaire from 20 respondents, it was found that the percentage of respondents' final assessment was 87.5%, which means strongly agree.

## Keywords: Parking monitoring, Android

## 1. Pendahuluan
Bertambahnya  pengguna  kendaraan pribadi  yang  tidak  sebanding  dengan pertambahan  ketersediaan  lahan  parkir khususnya di perkotaan, merupakan sebuah permasalahan  yang  cukup  berpengaruh pada  era  modern  ini.  Terbatasnya  lahan parkir,  tetap  perlu  diperhatikan  dalam kenyamanan  dan  keamanan  pengemudi. Selain  terjadinya  penyempitan  lahan  parkir di  suatu  tempat,  ada  juga  tempat  lain  yang menyediakan lahan parkir yang cukup luas, namun  memiliki  permasalahan  dalam  hal pelayanan  dan  informasi  ketersediaan  slot parkir  yang  kosong  dan  posisi  parkir  yang tersedia, sehingga pengemudi menghabiskan waktunya untuk mencari slot parkir  yang  kosong.  Banyak  terjadi  ketika pengunjung yang kesulitan untuk
menemukan  tempat  parkir  yang  kosong, pengunjung  akan  memarkirkan  kendaraan di  tepi  jalan.  Jika  terjadi  peningkatan pengunjung di sebuah tempat (wisata, mall, rumah  sakit,  hotel,  dll),  maka  akan mengakibatkan  banyaknya  kendaraan  yang di  parkir  sembarangan  (tepi  jalan,  lorong- lorong, tidak teratur) yang akan mengakibatkan kemacetan jalan.
Pada era modern ini sistem monitoring parkir  termasuk  ide  yang  sangat  dinantikan untuk memberikan solusi kepada pengemudi  dalam  mencari  tempat  parkir yang  kosong.  Sistem  monitoring  parkir  ini tidak  hanya  memberikan  dampak  yang efisien  terhadap  pengemudi,  namun  juga kepada  pengelola  atau  penyedia  tempat parkir.  Saat  ini  ilmu  pengetahuan  dan teknologi  telah  berkembang  pesat,  orang-
MONITORING …………………………………… Parsumo 1 , Mardiyono 2 , Nirwana 3 , Wahja’as 4
orang  berlomba untuk  menyelesaikan
permasalahan tempat parkir dengan mengganti  sistem  parkir  yang  manual menjadi  sistem  parkir  yang  otomatis  dan praktis.  Dengan  merancang  sebuah  model sistem  informasi,  jumlah  slot  parkir otomatis  yang  terpantau  di  depan  pintu masuk tempat parkir. Sistem informasi akan ditampilkan  dilayar  yang  memberikan informasi  slot  parkir  yang  sudah  tersedia dan  sudah  terisi.  Pembuatan  sistem  ini menggunakan  library  opencv  python  yang digunakan  untuk  memberikan  informasi atau mendeteksi tempat parkir yang kosong dan terisi.
Dengan  dibuatnya  monitoring  slot  parkir berbasis  web  dan  android  ini  diharapkan yang  dapat  memudahkan  pengemudi  atau pengunjung  untuk  menemukan  tempat parkir  dan  meminimalisir  adanya  mobil yang parkir di bahu jalan.

## 2.   Bahan dan Metode
2.1.1 Bahan
2.1.1.1 Website Website merupakan sebuah fasilitas internet yang dapat
digunakan untuk menghubungkan dokumen yang mengandung  informasi  secara  lokal  atau jarak  jauh  ( long  distance ).  Dokumen  yang ada  pada  website  disebut  web  page,  link dalam sebuah website dapat digunakan oleh user  untuk  melakukan  perpindahan  dari page  satu  ke  page  lainnya.  Pages  dapat diakses  dan  dibaca  melalui  browser  seperti Internet  Explorer,  Mozila  Firefox,  Google Chrome  dan  aplikasi  browser  lainnya[4]. Website  pada  aplikasi  ini,  kami  gunakan media scanner QR-Code  yang  fungsinya untuk melihat daftar pengunjung masuk dan keluar.  Dalam  contoh  tampilan  website, bisa dilihat pada Gambar 1.
Gambar 1  Website

## 2.1.1.2 Android
Android  adalah  sebuah  perangkat  mobile yang disusun dengan sekumpulan perangkat yang terdiri dari sistem operasi, middleware ,  dan  aplikasi  utama  mobile. Android dibuat menggunakan sebauh mesin virtual yang dirancang untuk mengoptimalkan  memori,  sehingga  dapat melakukan beberapa aktivitas seperti telfon, mengirim pesan text, menggunakan kamera, dll.  Android  menyediakan  akses  yang sangat  luas  kepada  pengguna  untuk menggunakan library yang  diperlukan  dan tools yang dapat digunakan untuk membangun  aplikasi  yang  semakin  baik. Android  memiliki  sekumpulan tools yang dapat digunakan, sehingga dapat membantu para pengembang meningkatkan produktivitas  saat  membangun  aplikasi yang  dibuat  Google  Inc.  Para  pengembang dapat menggunakan Android tanpa mengeluarkan  biaya  untuk  lisensi  dari Google  dan  dapat  membangun  Android tanpa  adanya  batasan-batasan.  Android Software Development Kit (SDK) menyediakan alat dan Application Programming Interface (API) yang diperlukan,  pada platform Android  ini menggunakan bahasa pemrograman Java[5].  Android  pada  aplikasi  ini  kami gunakan  untuk  mendapatkan  QR-Code  dan media  pembayaran.  Berikut  ditampilkan logo android pada Gambar 2.

## Gambar 2  Logo Android
2.1.1.3 Figma
Figma  merupakan editor grafis  vector  dan alat prototyping berbasis  web,  serta  fitur offline tambahan  yang  diaktifkan  oleh aplikasi  desktop  untuk  Mac  Os  dan Windows.  Rangkaian  fitur  Figma  berfokus pada penggunaan dalam antarmuka pengguna dan desain pengalaman pengguna dengan  penekanan  pada  kolaborasi  waktu nyata  ( real-time ).  Figma  dibuat  untuk membantu  para  penggunanya,  agar  dapat
berkolaborasi  dalam  proyek  dan  bekerja dalam  bentuk  tim  sekaligusa.  Aplikasi  ini mirip  dengan  Sketch  dan  Adobe  XD, namun  yang  menjadi  pembeda  utamanya yaitu  kemampuan  untuk  bekerja  dalam bentuk tim. Figma didukung oleh komunitas desainer dan  pengembang  yang kuat di berbagai plugin untuk meningkatkan fungsional  dan  mempercepat  alur  kerja[6]. Untuk  logo  Figma,  dapat  dilihat  pada Gambar 3.
Gambar 3  Logo Figma
2.1.1.4 Flutter Flutter  merupakan  framework  open  source yang  dikembangkan  oleh  Google  yang sering  digunakan  untuk  membuat  dan mengembangkan  sebuah  aplikasi  yang dapat  dijalankan  dengan  sistem  operasi Android dan iOS. Pada flutter, pengkodeannya menggunakan Bahasa pemrograman Dart. Dipihnya dalam aplikasi  ini,  karena  untuk  mengcompile kode,  kode  akan  mengcompile  dalam  kode native-nya (NDK, LLVM, AOT-compiled), flutter  cenderung  lebih  cepat,  karena  pada proses  compilenya  tidak  ada  interpreter. Pada  aplikasi  ini,  framework  flutter digunakan untuk pembuatan aplikasi mobile[7].  logo  Flutter,  dapat  dilihat  pada Gambar 4.

## Gambar 4  Logo Flutter
2.1.1.5 Android Studio
Android  Studio  adalah  IDE  ( Integrated Development  Environment )  resmi  untuk pengembangan aplikasi Android dan bersifat open source atau gratis. Peluncuran Android Studio ini diumumkan oleh Google
pada  16  Mei  2013  pada event Google  I/O Conference untuk  tahun  2013.  Sejak  saat itu,  Android  Studio  mengantikan  Eclipse sebagai  IDE  resmi  untuk  mengembangkan aplikasi  Android  (Andi,  2015).  Logo Android  Studio,  dapat dilihat pada Gambar 5.

## Gambar 5  Logo Android Studio
Android  studio  sendiri  dikembangkan berdasarkan  Intellij  IDEA  mirip  dengan Eclipse  disertai  dengan  ADT  plugin ( Android  Development  Tools ).  Android studio memiliki fitur :
a. Projek berbasis pada Gradle Build
b. Refactory  dan  pembenahan  bug  yang cepat
c. Tools baru yang bernama “Lint” dikalim dapat  memonitor  kecepatan,  kegunaan, serta  kom-petibelitas  aplikasi  dengan cepat.
d. Mendukung  Proguard  And  App-signing untuk keamanan.
e. Memiliki  GUI  aplikasi  android  lebih mudah.
f. Didukung  oleh  Google  Cloud  Platfrom untuk setiap aplikasi yang dikembangkan.
Pada aplikasi ini, Android Studio digunakan  untuk  membuat  aplikasi  parkir yang  memiliki  3  menu  yaitu  QR-Code, Saldo dan Info slot.
2.1.1.6 Visual Studio Code Visual  Studio  Code  (VSCode)  merupakan perangkat  penyunting  kode-sumber  yang dapat  digunakan  dengan  beragam  Bahasa pemrograman, diantaranya Java, JavaScript, Node.js,  Python  dan  C++.  VSCode  ini buatan  Microsoft  yang  dapat  digunakan oleh pengguna Linux, MacOS, dan Windows.  VSCode  menyediakan  fitur seperti  penyorotan  sintaksis,  penyelesaian kode,  kutipan  kode,  merefaktor  kode, pemantauan, dan Git. VSCode memungkinkan  pengguna  untuk  membuka
MONITORING …………………………………… Parsumo 1 , Mardiyono 2 , Nirwana 3 , Wahja’as 4
satu atau lebih banyak direktori, yang dapat disimpan  di  ruang  kerja  untuk  digunakan ulang  nanti.  Ini  memungkinkan  untuk beroperasi sebagai penyunting kode languange-agnostic  untuk  semua  Bahasa (id.wikipedia.org.  19  Juni  2022.  Visual Studio  Code.  Diakses  pada  tanggal  15  Juni 2022 dari https://id.wikipedia.org/wiki/ Visual_Studio_Code).  Pada  aplikasi  ini, Visual  Studio  Code  digunakan  untuk pembuatan  website  scanner  QR-Code  dan pemantauan  riwayat  masuk  dan  keluar pengunjung.  Logo  Visual  Studio  Code, dapat dilihat pada Gambar 6.

## Gambar 6  Logo Visual Studio Code

## 2.2 Metode
Metode  Waterfall merupakan  suatu  proses pengembangan  perangkat  lunak  berurutan, dimana  kemajuan  dipandang  sebagai  terus mengalir  ke  bawah  melewati  fase-fase perencanaan, pemodelan, implementasi (konstruksi),  dan  pengujian.  Berikut  adalah Gambar 2.1 yang menunjukkan alur metode Waterfall[8]. Untuk contoh metode Waterfall, bisa dilihat pada Gambar 7.

## Gambar 7  Waterfall
Berdasarkan  Gambar  7,  terdapat  beberapa tahapan  dari  metode  pengembangan  sistem Waterfall yang dilakukan, diantaranya :
a) Requirements
Definition (Analisis Kebutuhan) Dalam  langkah  ini  dilakukan  analisis terhadap  kebutuhan  sistem.  Analisis yang  dilakukan  yaitu  berupa  analisis kebutuhan  perangkat  keras  ( hardware ) dan  perangkat  lunak  ( software )  yang dibutuhkan dalam pembuatan sistem.
b) Design System (Desain Sistem)
Proses  desain  akan  menerjemahkan syarat kebutuhan ke sebuah perancangan perangkat lunak yang dapat diperkirakan sebelum dibuat koding.
c) Implementation and Unit Testing (Implementasi  atau  Penulisan  Kode Program) Penulisan  kode  program  atau coding merupakan  penerjemahan  desain  dalam bahasa yang bisa dikenali oleh komputer. Tahapan inilah yang merupakan  tahapan  secara  nyata  dalam mengerjakan suatu sistem. Setelah pengkodean selesai maka akan dilakukan testing  terhadap  sistem  yang  telah dibuat.
d) Integration  and  Testing (Penerapan  dan Pengujian Program)
Tahapan  ini  bisa  dikatakan final dalam pembuatan sebuah sistem. Tujuan testing adalah  menemukan  kesalahan-kesalahan terhadap sistem tersebut untuk kemudian bisa diperbaiki.
e) Operation and Maintenance
(Pemeliharaan)
Sistem  yang  sudah  disampaikan  kepada user pasti  akan  mengalami  perubahan.
Perubahan  tersebut  dilakukan  karena mengalami  kesalahan  karena  sistem harus  menyesuaikan  dengan  lingkungan baru  atau  karena user membutuhkan perkembangan fungsional.
3. Kegiatan Pelaksanaan 3.1 Requirements Definition (Analisis Kebutuhan)
Tahapan awal ini merupakan tahapan analisis kebutuhan perangkat keras ( hardware ) dan perangkat lunak ( software ) yang dibutuhkan dalam pembuatan sistem.
a. Analisis kebutuhan hardware
1) Handphone
2) Laptop
b. Analisis kebutuhan Software
1) Sistem Operasi Windows
2) Visual Studio Code
c. Android Studio
1) Figma
2) Flutter
3) Website
3.2 Design System (Desain Sistem) Perancangan desain aplikasi dibuat menggunakan software Figma, serta perancangan database dibuat dengan menggunakan MySQL untuk memantau data user & parkir.
3.2.1 Gambaran Umum Sistem
Pada  bagian  perancangan  sistem  akan dijelaskan mengenai perancangan/desain  Gambaran  umum sistem, pemodelan sistem dengan UML (Unified  Modelling  Language)  dan tampilan aplikasi yang akan digunakan pada sistem.
Gambar 8 Gambaran Umum Sistem yang
Dibangun

## 3.2.2 Pemodelan Sistem dengan UML
1) Use Case Diagram Gambar 9 Use Case Diagram Terlihat, terdapat 2 aktor yang menggunakan  sistem,  yaitu  user  & admin.  Di  dalam  sistem,  terdapat  6  use case. User terhubung dengan 4 use case, sedangkan  admin  terhubung  dengan  3 use case.
2) Activity Diagram Pada  activity  diagram  Gambar  10, terlihat  proses  aktifitas  sistem.  Dimulai dari  user  yang  masuk  ke  parkiran  &
login aplikasi. Kemudian sistem
memverifikasi  data  akun  yang  ada. Setelah  terverifikasi,  user  menscan  QR code  untuk  mengirim  data  masuk/keluar kendaraan.  Kemudian,  sistem  mengirim ketersediaan slot parkir. Setelah itu, user mengecek & parkir di slot yang tersedia. Kemudian, sistem mengupdate
ketersediaan slot parkir.
Gambar 10 Activity Diagram
3) Flowchart Sistem Flowchart  dari  sistem  monitoring  slot parkir  dimulai  dari  pemindaian  rekaman tempat  parkir,  hingga  penentuan  kondisi slot  parkir  apakah  terisi  atau  kosong.
Flowchart  sistem  ditunjukkan  pada Gambar 11
Gambar 11 Flowchart Sistem
4) Entity Relationship Diagram (ERD)
MONITORING …………………………………… Parsumo 1 , Mardiyono 2 , Nirwana 3 , Wahja’as 4

## Gambar 12  ERD
Dari Gambar 12, dapat terlihat hubungan antar  entitas  dalam  sistem  monitoring slot  parkir  beserta  atribut  yang  dimiliki. Jika user telah memiliki akun, maka user bisa  langsung  menggunakannya.  Jika user  belum  memiliki  akun,  user  bisa mendaftarkan diri melalui aplikasi. ERD di  atas  mengGambarkan  3  entitas  yang memiliki  beberapa  atribut.  Entitas  User memiliki 4 atribut, yaitu id, nama, nik, & password.  Selanjutnya  entitas  Aplikasi yang  memiliki  2  atribut,  yaitu  id  &  nik. Yang  terakhir  yaitu  entitas  Logs  yang memiliki 3 atribut, yaitu id, nik, & waktu masuk/keluar.
5) Desain Monitoring
Perancangan  dalam  pembuatan  tampilan monitoring  berbentuk  sederhana,  yakni video  dengan  indikator ketersediaan  slot parkir beserta keterangan jumlah ketersediaan  slot  parkir  &  jumlah  slot parkir  yang  ada.  Selain  itu,  ada  juga tampilan  untuk  mendeteksi  QR  Code user  yang  masuk  &  keluar  parkiran. Wireframe monitoring diGambarkan pada Gambar 13 & Gambar 14.
Gambar 13 Wireframe Monitoring Slot Parkir
Gambar 14  Wireframe Scanner Masuk & Keluar
6) Desain Aplikasi
a. Wireframe Splash Screen
Splash  screen sebagai  tampilan  awal masuk  aplikasi.  Wireframe Splash Screen di  Gambarkan  pada  Gambar 15.
Gambar 15 Wireframe Splash Screen
b. Wireframe Login Wireframe  login terdapat  2  field, yaitu username & password yang digunakan  untuk  memasuki  aplikasi. Jika belum mendaftar, bisa menggunakan  menu Sign  Up untuk mendaftar  akun. Wireframe Login di Gambarkan pada Gambar 16.
c. Wireframe Register Wireframe  register terdapat  3 field , yaitu username ,  NIK,  & password .
Register digunakan untuk mendaftar akun  aplikasi. Wireframe Register digambarkan pada Gambar 17.
Gambar 17 Wireframe Register
d. Wireframe Menu
Wireframe menu terdiri dari berbagai macam fitur yang digunakan oleh user sistem monitoring parkir. Fitur-fitur tersebut diantaranya yaitu saldo, QR
Code, & informasi mengenai
ketersediaan  slot  parkir. Wireframe Menu di  Gambarkan  pada  Gambar 18.
Gambar 18: Wireframe Menu
e. Wireframe Pengisian Saldo
Wireframe pengisian saldo terdiri dari  field  yang  berguna  untuk mengisi saldo. Wireframe
pengisian  saldo  di  Gambarkan pada Gambar 19.
Gamabr 19 Wireframe pengisian saldo 3.3 Implementation and Unit Testing (Implementasi atau Penulisan Kode Program) Pada  tahap  ini,  melanjutkan  desain dengan  mentranslasikan  ke  dalam program sistem. Tahap ini menghasilkan  kode  program  yang sesuai  dengan  desain  sistem  yang dibuat.
3.4 Integration and Testing (Penerapan
dan Pengujian Program)
Tahapan ini untuk melakukan pengujian  sistem  apakah  keseluruhan sistem telah berjalan sesuai atau belum serta memastikan bahwa semua bagian sudah  diuji  untuk  meminimalisir  error dan keluaran harus sesuai.
Pengujian  sistem  yang  dilakukan  yaitu menguji  deteksi  slot  parkir.  Berikut penjelasan  mengenai  pengujian  sistem pada Tabel 1.
Tabel 1 Tabel Pengujian Penguj ian Tujuan  Cara Pengujia n Indikator Detek si slot parkir Men detek si slot parki r yang terse dia Menggu nakan video lahan parkir yang dibaca oleh sistem  Hijau: Kosong
 Merah: Isi
MONITORING …………………………………… Parsumo 1 , Mardiyono 2 , Nirwana 3 , Wahja’as 4
3.4.1 Rancangan Pengujian User Melakukan pengujian terhadap sistem  yang  telah  dibuat  kepada beberapa responden. Dalam melakukan  pengujiannya  dengan memberikan  beberapa  pertanyaan.
Setelah  responden  menggunakan sistem  yang  dibuat  maka  responden menilai  sistem  tersebut  melalui pertanyaan  yang  diberikan,  dari hasil  jawaban  responden  tersebut dapat digunakan sebagai hasil perhitungan untuk mengetahui
tingkat  penilaian  terhadap  sistem yang  dibuat.  Berikut  Tabel  dari daftar  pertanyaan  dan  indikator penilaian.
Tabel 2 Daftar Pertanyaan

## No
. Pertanyaan 1. Apakah Anda  setuju  dengan  adanya sistem monitoring parkir dapat memudahkan pemantauan slot parkir?
2. Apakah  Anda      setuju      aplikasi android      yang      digunakan membantu pengendara dalam mengecek ketersediaan slot parkir?
3. Apakah  Anda  setuju  dengan  adanya QR  Code  di  aplikasi  android  berguna untuk  pemantauan  waktu  masuk  & keluar kendaraan di lahan parkir?
4. Apakah  Anda  setuju  dengan  tampilan UI aplikasi android  cukup mudah digunakan?

## Tabel 3 Indikator Penilaian
Nilai Keterangan 5 Sangat Setuju 4 Setuju 3 Cukup Setuju 2 Kurang Setuju 1 Tidak Setuju Tabel 4:  Presenatsi hasil survey Kategori Presentase
Sangat Puas 81% - 100% Puas 61% - 80% Cukup Puas 41% - 60% Kurang Puas 21% - 40% Tidak Puas
Jumlah nilai maksimal indicator penilaian = 5 x 4 = 20
Jumlah  nilai  responden  yang  mengisi kuisioner    = 20
Jumlah  penilaian  maksimal    =  20  x  20  = 400 Skoring kuisioner pengujian =
= = 87,5 %
3.4.2 Pengujian Sistem Berdasarkan  pengujian  sistem  pada Tabel  4.1,  berikut  hasil  dari  pengujian sistem: 1) Pengujian Slot Parkir Dari pengujian slot parkir ini menampilkan  kotak  yang  dengan  warna yang berbeda, dimana yang warna merah tersebut  menandakan  jika  slot  parkir sudah  terisi  dan  yang  berwarna  hijau menandakan  jika  slot  parkir  kosong. pada  tampilan  tersebut  juga  terdapat informasi mengenai kapasitas slot parkir yang tersedia dan yang kosong.
Gambar 20 Monitoring Parkir sebelum satu kendaraan parkir
Gambar 21 Monitoring Parkir setelah satu kendaraan parkir 2) Pengujian Aplikasi User
Pengujian aplikasi user meliputi pengujian  pada  penggunaan  aplikasi untuk mengetahui apakah fitur-fitur pada masing-masing  halaman  aplikasi  sudah sesuai  dengan  fungsinya  atau  belum. Berikut pengujian masing-masing halaman aplikasi: a. Pengujian Halaman Splash Screen
Dari pengujian halaman splash screen dapat  menampilkan  logo  dan  button masuk  untuk  masuk  ke  menu  login. dan  tampilan  dapat  berjalan  dengan baik sesuai yang diharapkan. Hasil uji berupa tampilan pada Gambar 22.
Gambar 22 Tampilan Splash Screen
b. Pengujian Halaman Login
Dari  tampilan  halaman  login  yang dibuat,  halaman  login  dapat  tampil sesuai  yang  direncanakan.  Selain  itu, pada  form  memasukkan  username dan  password,  pada  form  password mendapatkan  fitur  show  dan  hide password  yang  berfungsi  dengan baik.  Kemudian  jika  kita  belum lengkap  dalam  pengisian  data  atau
salah  memasukkan  data,  maka  akan menampilkan  pop-up  singkat  yang bertuliskan  'Username  and  password invalid'. Selanjutnya jika memasukkan  data  username  dan password  sesuai  dengan  data  yang sudah  tersimpan  dalam  database,
maka  saat  kita  klik  button  login  dan akan  masuk  ke  halaman  menu.  dari pengujian  halaman  login  yang  sudah dilakukan,  maka  dapat  disimpulkan bahwa halaman login ini bisa berfungsi  dengan  baik  sesuai  dengan yang  direncanakan.  Hasil  uji  berupa tampilan pada Gambar 23.

## Gambar 23 Tampilan Halaman
Login
c. Pengujian Halaman Register
Dari tampilan halaman register yang dibuat,  halaman  tampil  sesuai  yang direnncanakan. Halaman ini berguna untuk  membuat  akun  baru.  Pada halaman  ini,  terdapat  3  field  yang harus  diisi  dalam  pembuatan  akun, yaitu username, NIK, dan password. Setelah  mengisinya,  klik  tombol Sign  Up  agar  data  yang  dibuat masuk  ke  dalam  database,  sehingga bisa  digunakan.  Hasil  uji  berupa tampilan pada Gambar 24.
MONITORING …………………………………… Parsumo 1 , Mardiyono 2 , Nirwana 3 , Wahja’as 4
Gambar 24 Tampilan Halaman Register
d. Pengujian Halaman Menu Dari  tampilan  halaman  menu  yang dibuat,  dapat  menampilkan  saldo yang  dimiliki,  button  isi  saldo,  QR- Code,  dan  info  slot.  pada  informasi saldo,  ini  diambil  dari  informasi saldo  yang  ada  di  database.  untuk QR-Codenya, diambil dari nik users yang  akan  digunakan  untuk  discan dipintu  masuk.  Selanjutnya  untuk info  slot,  fitur  ini  digunakan  untuk menampilkan  informasi  slot  yang disedakan  dan  berapa  slot  yang kosong.  data  kapasitas  slot  dan  slot yang  kosong  diambil  dari  database yang  tersimpan  saat  program  slot dijalankan.  dari  pengujian  halaman menu  yang  sudah  dilakukan,  maka dapat  disimpulkan  bahwa  halaman menu  ini  bisa  berfungsi  cukup  baik sesuai  dengan  yang  direncanakan. Hasil  uji  berupa  tampilan  pada Gambar 25.
Gambar 25 Tampilan Halaman Menu
e. Pengujian Halaman Isi Saldo Dari  tampilan  halaman  ini,  hanya terdapat  1  field  yang  berguna  untuk mengisi  saldo  &  1  tombol  isi  saldo. Jumlah  saldo  yang  dimasukkan, akan  masuk  ke  database  sesuai dengan  akun  yang  sedang  login. Sehingga,  saldo  dari  akun  akan bertambah. Hasil uji berupa tampilan pada Gambar 26.
Gambar 26 Tampilan Halaman Isi Saldo
3.5 Operation and Maintenance (Operasi dan Pemeliharaan) Tahapan terakhir yaitu tahapan pemeliharaan  dengan  menjalankan  dan melakukan pemeliharaan terhadap sistem.  Perubahan  dapat  terjadi  pada sistem  karena  adanya  kesalahan  yang tidak ditemukan pada langkah sebelumnya,  sehingga  perlu  adanya perbaikan pada sistem.

## 4. Kesimpulan
Monitoring  Slot  Parkir  Berbasis  Web dan  Android  ini  dibuat  untuk  memantau ketersediaan slot parkir di suatu area parkir. Dalam  berjalannya  sistem,  admin  dapat melihat  ketersediaan  slot  parkir  melalui web  &  user  melalui  aplikasi  android. Aplikasi  pada  android  digunakan  untuk men-scan  QR  Code  pengendara  yang datanya  akan  dimasukkan  ke  dalam database  sebagai  tanda  masuk  &  keluar pengendara ke dan dari tempat parkir.

## DAFTAR PUSTAKA
Darpono,  R  and  M.  F.  Aldi,  2020. “SISTEM MONITORING PARKIR
MOBIL BERTEMA IoT ( INTERNET
OF  THINGS  ),”  vol.  9,  no.  2,  pp.  47–
51
Enggar  Krisnada,  F  and  R.  Tanone,  2020,
“Aplikasi  Penjualan  Tiket  Kelas Pelatihan Berbasis Mobile
menggunakan  Flutter,” J.  Tek.  Inform.
dan  Sist.  Inf. ,  vol.  5,  no.  3,  pp.  281–
295, doi: 10.28932/ jutisi.v5i3.1865.
Kusuma  Arbi,  R.  2021  “Alat  Pengontrolan
Suhu Penetas Telur Otomatis Menggunakan  ESP8266  Wemos  D1
Mini  Berbasis  Internet  of  Things,” Go
Infotech  J.  Ilm.  STMIK  AUB ,  vol.  27, no. 2, pp. 167–176, doi:
10.36309/goi.v27i2.154.
Muhyidin,  M.  A.  Sulhan,  and  A.  Sevtiana, 2020.  “Perancangan  Ui/Ux  Aplikasi My  Cic  Layanan  Informasi  Akademik Mahasiswa Menggunakan Aplikasi Figma,” J. Digit , vol. 10, no. 2, p. 208,
doi: 10.51920/jd.v10i2.171.
Muliawan,  A  ,  S.  Tinggi,  T.  Bontang,  and
T. Printer, 2018 “P-55 PERANCANGAN PROTOTIPE SISTEM  MONITORING  PARKIR BERBASIS PROTOTYPE OF PARKING  MONITORING  SYSTEM
BASED ON,”.
Udin,  Turahyo,  and  A.  Muliawan,  2018
“Peran-cangan Prototipe Sistem Monitoring Parkir Berbasis Mikrokontroler Arduino Nano,” SNITT-Politeknik  Negeri  Balikpapan ,
pp. 299–308.
U.  G.  Maya,  2005  “Bab  2  Sejarah Android,”  pp.  5–14,    [Online].
Available: http://repository.untag- sby.ac.id/514/3/BAB 2.pdf