## PERANCANGAN SISTEM INFORMASI ABSENSI ONLINE DETEKSI LOKASI BERBASIS WEB
Bryan Daniel Pesik, Penidas Fiodinggo Tanaem Program Studi Sistem Informasi, Fakultas Teknologi Informasi Universitas Kristen Satya Wacana Salatiga Jl. O. Notohamidjojo, Salatiga 50711, Indonesia 682018115@student.uksw.edu, penidas.fiodinggo@uksw.edu

## Abstrak
Absensi merupakan hal penting untuk pegawai dalam melakukan absen di suatu instansi atau perusahaan. Dalam melakukan absensi masih menggunakan cara manual, sehingga mengakibatkan masalah seperti kehilangan data, rusaknya data kertas absensi, dan memakan waktu untuk mencari data absensi yang dibutuhkan.  Sehubungan dengan permasalahan itu, maka diperlukan suatu sistem absensi online yang dapat mempermudah pegawai kantor Badan Pengelola Keuangan Aset Daerah melakukan absen secara efektif dan efisien setiap harinya. Metode yang digunakan  yakni  metode  observasi  dan  wawancara.  Perancangan  sistem  absensi  menggunakan  bahasa pemrograman PHP dan Bootstrap. Dengan ini penulis merancang sistem absensi online deteksi lokasi di kantor BPKAD  berbasis  web  yang  dapat  diterapkan  di  kantor  tersebut,  dengan  adanya  absensi  online  berbasis  web mempermudah  pegawai  kantor  untuk  melakukan  absensi,  merekap  data  laporan  absensi,  karena  setiap  absensi yang dilakukan tercatat di dalam database sistem.
Kata kunci: Absensi Online, Sistem Informasi, Website

## 1. PENDAHULUAN
Sistem  informasi  adalah  cara  yang  terorganisir untuk  mengumpulkan,  memasukkan,  memproses, menyimpan data, menyimpan, mengelola, mengendalikan, dan melaporkan informasi sedemikian rupa sehingga organisasi dapat mencapai tujuan yang telah  ditetapkan  [1].  Absensi  online  yaitu  sebuah pengambilan  data  untuk  bisa  mengetahui  jumlah kehadiran  pegawai  di  suatu  kantor,  untuk  setiap pegawai yang melakukan absensi datanya akan masuk ke  dalam  sistem  absensi,  data  pegawai  berupa  NIP, Nama,  Jabatan,  No  telp.  Hasil  absensi  ini  untuk mendapatkan  rekapan  data  setiap  bulan  dan  tahun. Data  absensi  pegawai  yang  sudah  ada  sebelumnya masih  menggunakan daftar hadir  yang secara  manual sehingga kurang  optimal untuk memenuhi kebutuhan pegawai.
Kantor  badan  pengelola  keuangan  dan  asset daerah  masih  menggunakan  cara  absensi  manual, namun  ada  kendala,  seperti  kehilangan  dan  mudah rusaknya  kertas  data  absensi,  Sulitnya  mencari  data absensi,  dan  waktu  pengolahan  datanya  lambat, diyakini  masih  banyak  sistem  informasi  yang  belum diterapkan,  salah  satunya  sistem  informasi.  absensi online  berbasis  web.  Penyimpanan  data  absensi pegawai  masih  menggunakan  metode  yang  kurang efisien  dan  efektif  sehingga  mempersulit  mengatur serta  mengakses  data  absensi  pegawai  yang  berubah tiap  bulannya.  Untuk  mengatasi  masalah  tersebut dilakukan pengembangan sistem dengan memanfaatkan Web , sehingga selaras dengan penggunaan akses internet yang sudah dapat dilakukan oleh semua pegawai perusahaan. Sehingga memudahkan  pegawai  mengakses  sistem  ini  dari manapun [2].
Pengembangan  sistem  absensi  online  berbasis web  dapat  mempermudah  proses  pendataan  absensi pegawai dalam bentuk sistem komputerisasi, sehingga dapat mempermudah dalam pencarian data informasi. Dengan  mempertimbangkan  permasalahan  yang  ada, penulis  ingin  memberikan  sebuah  solusi  dengan merancang  suatu  sistem  absensi  manual  yang  sudah ada  pada  kantor  badan  pengelola  keuangan  dan  aset daerah  yang  tidak  efisien  dan  efektif,  kemudian merancang sistem absensi online berbasis web, dengan desain tampilan user interface sistem, database sebagai sistem  pengelola  data,  menggunakan  fitur  deteksi lokasi,  foto,  rekapan  data  yang  lebih  efektif  serta memberikan kemudahan bagi pegawai untuk menginput absen.

## 2. TINJAUAN PUSTAKA

## 2.1. Penelitian terdahulu
Absensi di kantor kecamatan Puwodadi yang saat ini sedang dilaksanakan dapat dikatakan kurang efisien dan  efisien.  Mulai  dari  pendataan  dan  perhitungan waktu kehadiran, waktu keterangan tidak masuk masih dilakukan secara manual, yang memakan waktu lama, hal  ini  berdampak  waktu  jangka  panjang  yang  lama. Selama  proses,  perhitungan  rekapitulasi  kehadiran pegawai  dan  bentuk  laporan  kehadiran  yang  dibuat dalam  bentuk  kertas  dapat  menyebabkan  kesalahan pencatatan  data,  menyulitkan  proses  pencarian  data dan dapat mengkhawatirkan hilangnya data kehadiran pegawai [3].
Dinas  Perhubungan  Palembang  merupakan organisasi  pelayanan  publik  milik  negara  yang  besar dengan  jumlah  pegawai  yang  banyak,  sehingga informasi data pegawai harus diorganisir dengan baik terutama  dalam  hal  absensi  pegawai.  dishub  telah menggunakan sistem absensi dengan sidik jari, namun
dalam  keadaan  pandemi  sekarang,  sudah  tidak digunakan. Saat ini pegawai melakukan absensi secara manual,  namun  absensi  manual  tersebut  tidak  efektif karena  sering  terjadi  kesalahan  saat  memasukkan informasi pegawai [4].
Proses  absensi  di  kantor  Desa  Nagreg  masih dilakukan  secara  manual.  Absensi  manual  adalah metode  memasukkan  absensi  atau  kedatangan menggunakan pulpen dengan tanda tangan dan kertas [5].
Proses  absensi  pegawai  di  desa  cihaur  masih dilakukan secara manual, data absensi pegawai masih disimpan  dalam  bentuk  berkas/arsip  sehingga  tidak aman,  sulit  dicari,  dan  dirasa  kurang  efektif  dan efisien.  Dalam  proses  absensi  secara  manual mengakibatkan kurangnya tingkat pengawasan, sehingga kedisiplinan pegawai menjadi turun [6].

## 2.2. Absensi
Absensi adalah suatu bentuk pendataan presensi atau  kehadiran  seseorang  atau  pegawai  yang merupakan bagian pelaporan dari suatu institusi yang berisi  data  –  data  status  kehadiran  yang  disusun  dan diatur  secara  rapi  dan  mudah  untuk  dicari,  dan digunakan  apabila  sewaktu-waktu  diperlukan  oleh pihak yang berkepentingan [7].
Terdapat beberapa jenis absensi yang dibedakan berdasarkan  cara  penggunaan  dan  tingkat  daya gunanya.  Secara  umum,  jenis  –  jenis  absensi  dibagi menjadi dua [8], yaitu: 1. Absensi  secara  manual,  yaitu  cara  pengentrian kehadiran atau kedatangan dengan cara menggunakan pena melaui tanda tangan dan kertas. 2. Absensi secara non manual, yaitu cara pengentrian kehadiran  atau  kedatangan  dengan  menggunakan alat atau dengan menggunakan sistem terkomputerisasi  seperti  pengunaan  kartu  dengan kode batang (barcode) dan pengambilan sidik  jari (fingerprint).

## 2.3. PHP
PHP  adalah  bahasa  pemrograman  yang  banyak digunakan secara luas dan secara khusus sesuai untuk pengembangan  web.  Sebelum  dinamakan  demikian, arti  PHP  adalah Personal  Home  Page  Tools karena dipakai membangun web pribadi. Namun, perkembangan pesat membuatnya bertumbuh menjadi bahasa pemrograman web yang kuat [9]. PHP bukan lagi sekadar dipakai membangun halaman web sederhana,  tetapi  membuat  berbagai  web  ternama dunia seperti WordPress dan Wikipedia.

## 2.4. Bootstrap
Bootstrap  adalah  framework  HTML,  CSS,  dan JavaScript yang berfungsi untuk mendesain website responsive dengan cepat dan mudah [10]. Framework  open  source  ini  diciptakan  pada tahun  2011  oleh  Mark  Otto  dan  Jacob  Thornton  dari Twitter. Itulah kenapa dulunya Bootstrap dinamakan Twitter Blueprint.
Bootstrap  dengan  cepat  meraih  popularitas digunakan oleh 27% website di seluruh dunia. Hal itu karena kesederhanaan dan konsistensi yang ditawarkan  Bootstrap  dibanding  framework  lainnya saat itu.
Kemudahan  yang  ditawarkan  oleh  Bootstrap adalah  Anda tak perlu coding komponen website  dari nol.  Framework  ini  tersusun  dari  kumpulan  file  CSS dan JavaScript berbentuk class yang tinggal pakai. Class yang  disediakan  Bootstrap  juga  cukup lengkap.
Mulai dari class untuk layout
halaman, class menu navigasi, class animasi, dan masih banyak lainnya.
Menariknya  lagi,  Bootstrap  bersifat  responsive berkat grid  system yang  digunakan.  Sistem  grid  pada bootstrap  menggunakan  rangkaian containers ,  baris, dan  kolom  untuk  menyesuaikan  bentuk  layout  dan konten website Anda.

## 3. METODE PENELITIAN

## 3.1. Model Waterfall
Model  waterfall  digunakan  sebagai  gambaran dalam  perancangan  sistem  absensi  berbasis web , gambaran model waterfall dapat dilihat pada Gambar 1 berikut:
Gambar 1. Model Proses Waterfall
Model proses waterfall terdiri dari lima tahap, yaitu:
 Analisis kebutuhan dan definisi Pengembang  sistem  memperoleh  keluhan  dari pelanggan Koperasi Tani Makmur melaluiwawancara  dan  observasi  langsung. Menganalisis  informasi  yang  diperoleh  untuk mendapatkan kebutuhan sistem.
 Sistem dan desain perangkat lunak Tahap ini bertujuan untuk menetapkan kebutuhan sistem  yang  dibutuhkan  oleh  Koperasi  Tani Makmur. Kebutuhan sistem mencakup perangkat keras dan perangkat lunak yang diperlukan untuk membuat keseluruhan sistem.
 Implementasi dan pengujian unit Dimana  desain  sistem  diaplikasikan  dalam serangkaian  program.  Tes  Koperasi  Tani Makmur  dirancang  untuk  memverifikasi  bahwa setiap unit berfungsi dengan baik.
 Integrasi dan pengujian sistem Dimana  bagian  sistem  yang  dibuat  untuk Koperasi Tani Makmur disatukan dan diuji coba sebagai  sistem  yang  lengkap  untuk  memastikan mereka memenuhi keperluan pengguna.
 Operasi dan pemeliharaan
Sistem yang telah dikembangkan untuk Koperasi Tani Makmur sehingga berjalan sesuai tahapan serta adanya pemeliharaan [11].

## 3.2. Perancangan Sistem
Pada  tahap  perancangan  memiliki  gambaran mengenai  tampilan  desain  sistem  website  yang  nanti akan dikembangkan oleh programmer. Tahap ini  juga akan  dibuat  aktivitas  diagram  sistem  dengan  model Use  Case diagram,  class  diagram,  activity  diagram, dengan  menggunakan  Aplikasi Rational  Rose Enterprise Edition.

## 3.3. Use Case Diagram
Use  case  diagram  dirangkai  yang  merujuk  pada kebutuhan  input  dan  output  yang  telah  dibuat sebelumnya.  Bahwa  pegawai  dapat  melakukan  login, daftar  akun,  absen  masuk  dan  pulang.  Kemudian admin  dapat  melakukan  login,  melakukan  rekap  data absensi,  mengatur  jam  kerja,  melihat  lokasi  absensi pegawai, dan melihat data pegawai.
Gambar 2. Use Case Diagram Pegawai
Gambar 3. Use Case Diagram Admin

## 3.4. Activity Diagram
Activity  diagram  yaitu  alur  kerja  sistem  yang menggambarkan  aktivitas  yang  terjadi  pada  sebuah sistem.  sistem  absensi  online  yang  diakses  oleh pegawai terverifikasi  dengan  sistem.  Sistem  absensi online  mendata  absen  masuk  dan  absen  pulang,
verifikasi login, dan data lokasi absensi tercatat sesuai dengan lokasi pegawai tersebut.
Gambar 4. Activity diagram untuk login dan absen pegawai
Activity diagram dibawah ini, admin terverifikasi langsung  juga  dengan  sistem.  admin  bisa  melakukan login menggunakan akun yang sudah terdaftar. admin juga  bisa  melihat  data  absensi  pegawai,  serta  bisa mencetak laporan absensi pegawai.
Gambar 5. Activity diagram untuk login admin dan cetak absensi

## 3.5. Class Diagram
Terdapat  4  class  diagram  dalam  sistem  absensi yaitu  login,  pegawai,  admin,  absensi  pegawai.  Class diagram untuk sistem absensi online sebagai berikut:
Gambar 6. Gambar Clas Diagram
Class  diagram  ini  merupakan  kumpulan  table yang  berada  pada  suatu  program,  yang  menjelaskan secara  detail  entitas  yang  ada  pada  tabel,  serta hubungan  antar  entitas  satu  dengan  lainnya  dalam suatu basis data.

## 4. HASIL DAN PEMBAHASAN
Hasil  dari  pengembangan  ini  berupa  sebuah aplikasi  absensi  online  bagi  pegawai  yang  dirancang dan  dikembangkan  menggunakan framework php. Aplikasi  absensi  online  ini  dapat  mempermudah pegawai  untuk  melakukan  absensi  online  dengan mudah tanpa harus melakukan absensi secara manual lagi. Selain  itu, pada pengembangan aplikasi  ini  juga terdapat fitur lokasi yang digunakan untuk mengetahui posisi  absensi  yang dilakukan oleh pegawai dan  juga fitur  foto  selfie  bagi  pegawai  yang  akan  melakukan absensi online tersebut.
Berikut tampilan desain User Interface (UI) dari absensi online berbasis web:

## 4.1. Tampilan proses absensi
Pada halaman dashboard, pegawai mengklik icon absen, kemudian pegawai akan dialihkan ke halaman absensi dan pegawai tinggal  mengklik absens  masuk. Setelah  itu,  akan  ada  notifikasi  bahwa  absensi  telah berhasil.
Gambar 7. Halaman Dashboard
Gambar 8. Halaman Absensi
Gambar 9. Proses Absensi Berhasil
Pada tampilan halaman absensi, saya menambahkan  tanggal,  waktu,  button  absen  masuk dan pulang beserta icon di dalam button, menambahkan  webcam  capture  yang  posisi  body textnya berada di tengah.

## 4.2. Tampilan Deteksi Lokasi
Admin  bisa  melihat  lokasi  absensi  pegawai. Sistem  absensi  mendata  lokasi  absen  pegawai  sesuai dengan longitude dan latitude perangkat pegawai.
Gambar 10. Deteksi Lokasi
Disini  saya  menggunakan  api  mapbox  untuk menampilkan  map,  sehingga  longitude  dan  latitude bisa  didapatkan  sesuai  dengan  lokasi  perangkat pegawai. Mapbox ini telah menyediakan template map beserta  code,  kita  juga  dapat  mengisi  size,  color, opacity,  sesuai  yang  diinginkan,  dan  kita  dapat menambahkan code tersebut ke file codingannya kita.

## 4.3. Pengujian
Masuk  dalam  proses  integrasi  dan  pengujian sistem.  Pada  tahap  ini,  modul  yang  telah  dibuat sebelumnya  akan  disatukan.  Setelah  proses  integrasi
sistem telah selesai, berikutnya masuk pada pengujian modul.
Tabel 1. Pengujian Aplikasi Kasus uji Data uji Tipe uji Output Hasil Regist rasi Nama, username, email, nomor handphone,
password, dan konfirmasi password tidak kosong serta pengguna belum terdaftar Valid
Pop up registrasi berhasil dan akan menerima email otomatis mengenai proses registrasi Berhasil Username,Pass word, Email, No hp kosong Invalid Field masih kosong Berhasil Username atau email sudah terdaftar Invalid Username atau email telah terdaftar Berhasil
Login Username dan Password benar
Valid Pop up berhasil dan menuju ke halaman dashboard
Berhasil
Username dan Password salah Invalid Username tidak terdaftar dan password salah Berhasil Username dan password kosong Invalid Username dan Password tidak boleh kosong Berhasil
Absen Lokasi tidak diaktifkan/tidak diizinkan
Invalid
Tidak bisa absen, muncul notif “anda tidak mengaktifkan lokasi”,
kembali ke menu
dashboard
Berhasil
Lokasi diaktifkan
valid Absen berhasil, muncul jam dan tanggal absen Berhasil
Tujuan  dari  pengujian  modul  untuk  mengetahui apakah desain dan fungsi aplikasi dari perangkat lunak telah  sesuai  dan  berjalan  dengan  baik.  Jadi,  dengan adanya tahap pengujian, maka dapat mengetahui serta mencegah  terjadinya  kesalahan,  bug,  atau  error  pada program sebelum masuk pada tahap produksi.

## 5. KESIMPULAN DAN SARAN
Absensi  online  berbasis  web  mempermudah pegawai  kantor  untuk  melakukan  absensi,  merekap data  laporan  absensi,  karena  setiap  absensi  yang dilakukan  tercatat  di  dalam  database  sistem.  Hal  ini juga  mengurangi  penyebaran  virus  covid  19  melalui mesin  absensi  sidik  jari  yang  dahulu  digunakan. Dengan  adanya  absensi  online  berbasis  web menggunakan  deteksi  lokasi,  kita  bisa  mengetahui lokasi tempat absen pegawai secara akurat, maka data kehadiran pegawai bisa termonitor dengan baik.
Terdapat  saran  yang dapat penulis  berikan  yang dapat  membantu  pengembangan  perancangan  sistem informasi absensi online deteksi  lokasi  berbasis  web, pada kantor bpkad biak kota di masa yang akan datang, yaitu: Sstem absensi pegawai pada kantor bpkad biak kota, dapat dikembangkan lagi dengan menambahkan radius  lokasi  absensi  dari  kantor,  sehingga  pegawai dapat melakukan absensi dengan batas jarak maksimal yang  sudah  ditentukan.  Bagian  data  master,  dapat dikembangkan  lagi  dengan  menambahkan  profile  id card  pegawai.  Sistem  absensi  pegawai  kantor  bpkad biak  kota,  dapat  dikembangkan  lagi  dengan menambahkan  fitur  lainnya.  perlu  adanya  pelatihan bagi  admin  (pegawai  kantor)  dengan  baik,  agar memahami  cara  mengoperasikan  aplikasi  yang  telah dibuat.

## Daftar Pustaka
[1] G. A. Manu and Y. A. Benufinit, “Pengembangan
Sistem Absensi Online Berbasis Web Menggunakan Maps Javasripts Api,” J. Pendidik. Teknol.  Inf. ,  vol.  3,  no.  2,  pp.  9–16,  2020,  doi: 10.37792/jukanti.v3i2.216.
[2] P.  D.  Larasati  and  N.  F.  Sa’ba,  “Perancangan Sistem  Pelaporan  Absensi  Berbasis  Web  pada PT. Solar Control Specialist (SCS),” J. SISKOM- KB  (Sistem  Komput.  dan  Kecerdasan  Buatan) , vol.  5,  no.  1,  pp.  74–80,  2021,  doi: 10.47970/siskom-kb.v5i1.231.
[3] S. Kasus, : Kantor, K. Purwodadi, ) Subiantoro, and  )  Sardiarinto,  “PERANCANGAN  SISTEM ABSENSI  PEGAWAI  BERBASIS  WEB,” J. SWABUMI , vol. 6, no. 2, 2018.
[4] M.  Deka  and  M.  Kadafi,  “Sistem  Informasi Absensi  Pegawai  Berbasis  Web  Pada  Dinas Perhubungan  Kota  Palembang  (Bagian  TJR),” Pros. Semin. Naional Sains dan Teknol. Terap. , vol. 3, no. 1, pp. 212–222, 2020.
[5] U.  Aryanti  and  S.  Karmila,  “Sistem  Informasi Absensi  Pegawai  Berbasis  Web  di  Kantor  Desa Nagreg,” Intern. (Information Syst. J. , vol. 5, no. 1, pp. 90–101, 2022, doi: 10.32627.
[6] D.  Susanti,  “PERANCANGAN  APLIKASI ABSENSI  DAN  CATATAN  PEGAWAI  DI DESA CIHAUR
BERBASIS WEB MENGGUNAKAN CODEIGNITER Jurnal Ilmiah Komputer dan Informatika
(KOMPUTA),” Univ. Majalengka , vol. 6, no. 1, 2017.
[7] Afriansyah,  A.  and  Syaripudin,  A.,  2022. PERANCANGAN SISTEM INFORMASI ABSENSI DEWAN GURU TENAGA HARIAN LEPAS  BERBASIS  WEB  PADA  SEKOLAH DASAR  NEGERI  KUNCIRAN  6  KOTA
TANGERANG. Biner: Jurnal Ilmiah Informatika dan Komputer , 1 (1), pp.17-25.
[8] Wibowo ,  K.,  2015.  Analisa  Konsep  Object Oriented
Programming Pada Bahasa Pemrograman PHP. Jurnal Khatulistiwa
Informatika , 3 (2).
[9] Setiyati,  N.  and  Anam,  C.,  2021,  September. Penerapan  Absensi  Share  Location  Terhadap Disiplin Kinerja Aparatur Sipil Negara (ASN) di Kabupaten Jombang. In NiCMa: National Conference  Multidisplinary (Vol.  1,  No.  1,  pp. 426-435).
[10] Zakir,  A.,  2016.  Rancang  Bangun  Responsive Web  Layout  Dengan  Menggunakan  Bootstrap
Framework. InfoTekJar: Jurnal Nasional Informatika dan Teknologi Jaringan , 1 (1), pp.7-
10.
[11] B. A. E. Praditya, Y. Nataliani, and P. F. Tanaem, “Perancangan  sistem  informasi  penyimpanan data koperasi berbasis web,” Aiti , vol. 18, no. 1, pp. 34–53, 2021, doi: 10.24246/aiti.v18i1.34-53.