DOI:  https://doi.org/10.33330/jurteksi.v7i1.903 Available online at http://jurnal.stmikroyal.ac.id/index.php/jurteksi

## RANCANG BANGUN APLIKASI PRESENSI MULTI EVENT DENGAN QR-
CODE BERBASIS RESTFUL WEB SERVICE
Fandy Indra Pratama 1* , Mustagfirin 1 , Ardian Fachreza 1
1 Teknik Informatika, Universitas Wahid Hasyim email : fandy@unwahas.ac.id
Abstract: Activities in the world of education and institutions are documents that must be doc- umented which can be used as activity reports to the leadership. One such documentation is at- tendance  documentation  because  attendance  is  sometimes  very  sensitive  because  it  affects  the prerequisites  for  further  activities.  Meanwhile,  most  attendance  systems  currently  use  conven- tional methods, namely printing attendance forms and participants taking notes on the form. Af- ter completion of the event, it is recorded in an electronic storage and the original sheet is ar- chived.  Meanwhile,  universities  and  schools  are  required to  be sensitive  to  technology  so  that they are not out of date. So the researchers proposed a presence system based on Scan Id QR Code based on Restful Web Service technology with the following process: (i) Schedule 1 time in advance; (ii) attendance by scanning the QR-Code ID to a scanner; (iii) Attendance monitor- ing. This proposed technology can be used for multi-platform and multi-event, so that to use this presence system, each agency can list its activities and its members. And as a member, you can do  attendance  by just  scanning  the  QR-Code  Id  you  have  into  a scanner. The  development  of this system uses the web engineering method because this method is appropriate for developing this system. So that the system is deemed capable of trimming the administration of the commit- tee and minimizing the problem of data fraud and corruption.
Keywords: presence, qr-code, web engineering
Abstrak: Kegiatan  pada  dunia  pendidikan  dan  instansi  merupakan  dokumen  yang  wajib didokumentasikan  yang  dapat  digunakan  sebagai  laporan  kegiatan  ke  pimpinan.  Salah  satu dokumentasi  tersebut  adalah  dokumentasi  presensi  kehadiran  karena  presensi  kehadiran terkadang  sangat  sensitif  karena  mempengaruhi  prasyarat  kegiatan  selanjutnya.  Sedangkan hampir  besar  sistem  presensi  saat  ini  menggunakan  cara  konvensional  yaitu  cetak  formulir presensi dan peserta mencatat di formulir tersebut. Setelah selesai acara, dicatat di penyimpanan elektronik  dan  lembar  aslinya  diarsipkan.  Sedangkan  universitas  dan  sekolah  dituntut  peka terhadap  teknologi  agar  tidak  ketinggalan  zaman.  Sehingga  peneliti  mengusulkan  sistem presensi berbasis dengan Scan Id qr-code berbasis teknologi Restful Web Service dengan proses sebagai  berikut:  (i)  Jadwal  1  kali  diawal;  (ii)  Presensi  dengan  cara  scan  Id  qr-code  ke  mesin scanner; (iii) Pemantauan kehadiran. Teknologi yang diusulkan ini dapat digunakan untuk multi platform dan multi event, sehingga untuk menggunakan sistem presensi ini, setiap instansi dapat membuat  daftar  kegiatan  dan  anggotanya  masing-masing.  Serta  sebagai  anggota  dapat melakukan  presensi  hanya  melakukan  scan  Id  qr-code  yang  dimiliki  ke  mesin  scanner. Pengembangan sistem ini menggunakan metode web engineering karena metode tersebut tepat untuk  mengembangkan  sistem  ini.  Sehingga  sistem  tersebut  dirasa  mampu  memangkas administrasi panitia dan memperkecil permasalahan kecurangan dan rusaknya data.
Kata kunci: presensi, qr-code, web engineering
DOI:  https://doi.org/10.33330/jurteksi.v7i1.903 Available online at http://jurnal.stmikroyal.ac.id/index.php/jurteksi

## PENDAHULUAN
Pesatnya  perkembangan  tekno- logi  internet  tidak  ada  batasan  lagi orang  untuk  membuat  atau  mengambil informasi  dengan  cepat.  Mudahnya mengakses  internet  dapat  memper- mudah  seseorang  untuk  menyelesaikan tujuannya  dan  menunjang  kegiatannya untuk  mencari  informasi, chatting, hingga bermain game . Teknologi internet  sudah membuat  sebagian orang berinisiatif untuk membuat produk yang dapat  mempermudah  menyelesaikan pekerjaan.  Inovasi  teknologi  internet antara  lain  adalah  pemasaran  produk, informasi akademik yang meliputi profil instansi, guru, karyawan, siswa/ mahasiswa dan yang lainnya.
Kegiatan  pada  dunia  pendidikan dan  instansi  wajib  didokumentasikan yang  nantinya  dapat  digunakan  sebagai laporan kegiatan ke pimpinan, selain itu bahkan dapat digunakan sebagai history yang  dapat  dilihat  kembali  kapan  saja jika  data  masih  tersimpan.  Salah  satu dokumentasi yang wajib tersedia adalah dokumentasi  presensi  kehadiran  karena presensi  kehadiran  terkadang  sangat sensitif  karena  presensi  mempengaruhi prasyarat kegiatan
selanjutnya.
Sedangkan hampir besar sistem presensi yang  digunakan  kegiatan  siswa  dan mahasiswa  saat  ini  menggunakan  cara konvensional  yaitu  selalu  cetak  dan presensi formulir dengan manual. Setelah  acara  selesai  kemudian  dicatat pada penyimpanan elektronik dan lembar  aslinya  diarsipkan.  Cara-cara tersebutlah  yang  terjadi  pada  beberapa sekolah,  universitas  dan  kantor  yang selanjutnya  disebut  institusi  pada  setiap kegiatan  pembelajarannya.  Sedangkan institusi dituntut peka terhadap teknologi  agar  tidak  ketinggalan  zaman dan fast respons .
Sudah  terdapat  beberapa  sistem presensi  berbasis  elektronik  antara  lain adalah presensi  menggunakan alat sidik jari  dan  sistem  presensi  berbasis android.  Presensi  menggunakan  alat sidik  jari  seperti  yang  dihasilkan penelitian [1] memberikan penyelesaian masalah  hanya  untuk  satu  kegiatan, namun  penelitian  tersebut  tidak  bisa digunakan dengan kegiatan yang jumlahnya  banyak  serta  hasil  penelitian tersebut  tidak memiliki validasi  batasan presensi. Penelitian [2] juga memanfaatkan  alat  sidik  jari  untuk media dekteksi siswa, namun perbedaannya dengan [1] adalah pelaporannya  menggunakan  aplikasi berbasis  android,  sehingga  siswa  dan orang  tua  dapat  melihat  presensi  siswa mengunakan  aplikasi  presensi  yang dihasilkan. Namun penelitian [2]
memiliki  kendala  yaitu  hanya  dapat melakukan  presensi  pada  alat  sidik  jari yang  disediakan,  kendala  lain  adalah tidak  dapat  melakukan  presensi  ketika terdapat  kebijakan  belajar  dari  rumah atau  belajar  yang  tidak  mengharuskan dilingkungan  institusi,  sehingga  dengan kebijakan yang mungkin tidak terfikirkan sebelumnya tidak bisa terselesaikan  dengan  sistem  presensi tersebut. Penelitian [3] membuat aplikasi presensi berbasis android dengan  memanfaatkan RESTful  Web Service untuk mengirimkan data presensi  disaat  area  tersebut  tidak tersedia jaringan internet / internet tidak stabil.  Sehingga RESTful  Web  Service tersebut  mampu memberikan pelayanan transaksi data yang lebih kecil dibandingkan sistem yang tidak menggunakan RESTful  Web  Service . RESTful  Web  Service sangat  ampuh untuk  memecahkan  berbagai software dan  masalah  integrasi  data  di  pusat kontrol  [4],  [5].  Selain  itu web  service
DOI:  https://doi.org/10.33330/jurteksi.v7i1.903 Available online at http://jurnal.stmikroyal.ac.id/index.php/jurteksi
menawarkan  keuntungan  mengurangi biaya integrasi dan meningkatkan kecepatan integrasi [6].
Berdasarkan hasil penelitian sebelumnya, peneliti mengusulkan membuat  sistem  presensi  menggunakan
Qr  Code yang  berbasis RESTful  Web Service yang  dapat  digunakan  presensi dengan  multi  kegiatan  dan  dapat melakukan presensi diluar area institusi. Usulan ini dikembangkan dengan sistem responsive dapat  diakses  pada  semua gadget dengan  memperhatikan  estetika tampilan, validasi waktu presentasi serta mengatasi  kecurangan  titip  presensi. Sehingga sistem yang dihasilkan diharapkan mampu menghasilkan sistem  yang  dapat  digunakan  presensi pada  multi  institusi  dan  multi  kegiatan hanya menggunakan satu sistem.

## METODE
Metode Penelitian ini menggunakan metode-metode yang diterapkan  tahap  demi  tahap,  yang meliputi:

## Metode Pengumpulan Data
Metode  pengumpulan  data  yang digunakan  dalam  penelitian  ini  terbagi atas dua bagian yaitu pengumpulan data primer dan pengumpulan data sekunder.

## Pengumpulan Data Primer
Pengumpulan  data  primer  yaitu menggunakan teknik wawancara. Teknik  wawancara  yaitu  suatu  teknik pengumpulan  data  yang  dilakukan dengan  cara  mengajukan  pertanyaan secara langsung kepada beberapa pengguna  tentang  kebutuhan  sistem yang  fleksibel,  aman  dan  mudah digunakan.

## Pengumpulan Data Sekunder
Pengumpulan data sekunder melalui  studi  kepustakaan,  yaitu  teknik pengumpulan data dengan cara
mempelajari  beberapa  dokumen  (data survey),  literatur,  atau  file-file  yang berhubungan  dengan  penelitian  yang dilakukan.

## Metode Pengembangan Sistem
Metode  pengembangan  sistem yang  digunakan  pada  penelitian  ini adalah web engineering . Web engineering merupakan  model  yang digunakan untuk mengembangkan
aplikasi berbasis web. Web  engineering mempunyai    pendekatan    secara menyeluruh  yang  melibatkan  semua aspek  pengembangan  aplikasi  berbasis web, mulai dari konsep, pengembangan, implementasi,  evaluasi  performa,  dan maintenance secara  terus-menerus  [7]. Web  engineering adalah  suatu  proses yang digunakan untuk membuat aplikasi web yang berkualitas tinggi [8].
Gambar 1. Tahapan Web Engineering .
Berikut adalah aktivitas-aktivitas pada model web engineering :
a. Costumer Communication Tahap ini meliputi 2 task, yaitu:
1. Business analysis , mendefin-
isikan  hal-hal  apa  saja  yang
DOI:  https://doi.org/10.33330/jurteksi.v7i1.903 Available online at http://jurnal.stmikroyal.ac.id/index.php/jurteksi
akan  termuat  di  dalam  sistem presensi  menggunakan Id  QR Code termasuk menentukan penggunanya,  databasenya,  serta integrasi antara sistem dan proses presensi.
2. Perumusan,  pengumpulan  sam- pel  informasi  mengenai  hal-hal apa  saja  yang akan ada di sistem presensi  menggunakan Id  QR Code dengan melakukan pengambilan  wawancara  dengan perwakilan dari Staff Administrasi  Fakultas  Teknik Universitas Wahid Hasyim Semarang dan Guru SD Negeri 1 Gulang Kudus. Hasil dari aktivitas ini yaitu informasi-informasi deskriptif tentang  proses  absensi  yang  berjalan dan  harapan  yang  akan  dimuat  pada sistem.
b. Planning Selanjutnya  adalah planning ,  tahap ini  merupakan  tahap  perencanaan yang  terdiri  dari  pendefinian  tugas dan target  waktu dari  tugas  yang su- dah  ditentukan  dalam  membangun sistem  presensi  menggunakan Id  QR Code .
c. Modelling
Tahap ini menjelasan hal-hal apa saja yang  diperlukan  sistem  presensi menggunakan Id QR Code .
1. Analisis Model
- Analisis  Isi,  melakukan  analisa dengan cara merumuskan kebutuhan  dari  sistem  presensi menggunakan Id QR Code .
- Analisis  Interaksi,  menganalisa dengan mengidentifikasi interaksi antara pengguna
dengan  sistem  berdasarkan  hak akses pengguna terhadap sistem.
- Analisis Fungsional, menga- nalisa  dengan  mengidentifikasi
proses-proses yang terpisah dengan  sistem  tetapi  bagi  user sangat penting dan juga mengidentifiksai  operasi-operasi yang akan dijalankan. - Analisa  konfigurasi,  identifikasi terhadap infrastruktur dan lingkungan  yang  tepat  untuk sistem presensi  menggunakan Id
QR Code .
Hasil  dari  aktivitas  ini  yaitu menyimpulkan informasi- informasi  yang  akan  dimuat pada sistem
2. Design Modelling
Ada      beberapa      tahap      yang dilakukan   dalam   proses   design modelling, yaitu:
- Desain  Antarmuka,  merupakan tahap    pembuatan    sketsa antarmuka  web  untuk  sistem presensi  menggunakan Id  QR Code . - Desain    Estetika,    merupakan proses    merancang    tampilan untuk  halaman  web  dan  aplikasi mobile  dengan  warna  yang  di kombinasikan  dengan  gambar dan text.
- Desain    Isi,          adalah    proses perancangan    isi    dari    sistem presensi  yang  akan  di  buat. Desain  isi  dibuat  berdasarkan kebutuhan yang sudah di kumpulkan pada tahap analisa.
- Desain  Navigasi,  adalah  tahap pemberian hak otorisasi atau hak akses  untuk  pengguna  sistem presensi  menggunakan Id  QR Code .
- Desain    Arsitektur,    merupakan desain    yang    berhubungan dengan  tujuan  dari  pembuatan sistem presensi menggunakan Id QR  Code ,  konten  yang  ada  di dalamnya, serta para
DOI:  https://doi.org/10.33330/jurteksi.v7i1.903 Available online at http://jurnal.stmikroyal.ac.id/index.php/jurteksi

## penggunanya.
d. Contruction
Dalam membangun presensi menggunakan Id QR Code menggunakan teknologi yang berkembang dan populer saat ini, dan juga menggunakan tool sesuai dengan  kebutuhan.  Dalam  tahap  ini ada 2 proses, yaitu:
1. Implementasi,  merupakan  proses penulisan  kode  program  untuk membangun    API,    dan  web. Bahasa pemrograman yang digunakan  untuk  membuat  API
dan  web  adalah  PHP  dengan kerangka  kerja  laravel  [9].  Pada sisi client menggunakan javascript dengan kerangka kerja Angularjs .
2. Pengujian,   adalah   tahap   untuk mengetahui kemungkinan terjadinya kesalahan pada presensi menggunakan Id QR Code .
Pengujian  tidak  hanya  dilakukan dengan  metode blackbox ,  tetapi juga  berdasarkan UAT yaitu user acceptance test .
e. Delivery dan Feedback
Dalam  tahap  ini  user  memberikan respon  dan  umpan  balik    berupa masukan-masukan kepada pihak pengembang aplikasi agar bisa dilakukan perbaikan untuk kedepannya

## HASIL DAN PEMBAHASAN
Hasil  yang  telah  dicapai  sampai saat ini yaitu tahap perancangan sistem, dimulai  dari  analisa  kebutuhan  sistem yang  terdiri  dari:  konten,  interaksi, fungsional dan konfigurasi.
Perancangan yang terdiri dari:
arsitektur,  antarmuka , konten,  dan navigasi.
Arsitektur Restful Web Service
Gambar 2. Arsitektur Restful Web Service
Berdasarkan  arsitekturnya, rest menyediakan resource yang bisa diakses  oleh client . Client dapat berbagai platform seperti website, dekstop ,  atau mobile  app .  Bukan  hanya pengembang sendiri yang dapat menggunakan rest ,  namun  pengembang lain  dapat  juga  mengakses  informasi dari server jika  diperlukan.  Agar pengembang lain dapat  mengakses rest , client membutuhkan token atau  kunci rahasia yang digunakan untuk mengidentifikasi  setiap  user.  Sehingga token berfungsi  sebagai  otorisasi  untuk mengamankan
informasi-informasi
yang disiapkan server .
Setiap client melakukan request , client harus  menyertakan token pada HTTP  Header sebagai  identitas  bahwa client tersebut  adalah  pengguna  yang sah.  Meskipun  begitu, token memiliki masa  berlaku.  Jika  masa  berlaku token sudah kadaluarsa atau tidak menyertakan token pada HTTP  Header maka rest akan mengembalikan response dengan  kode  401  yaitu
Unauthorized.
Server side yang digunakan pada penelitian  ini  menggunakan framework laravel yang  mana  kerangka  kerja laravel mudah  dipahami  dan  kuat,
DOI:  https://doi.org/10.33330/jurteksi.v7i1.903 Available online at http://jurnal.stmikroyal.ac.id/index.php/jurteksi
kerangka itu sendiri menyediakan otentikasi, route,  session,  caching, migration dan  lainnya  yang  diberikan untuk pengembang membangun aplikasi berbasis  web  yang  komplek  [9].  Pada laravel  tersebut  sudah  disediakan  fitur yang  berbasis  web  secara  langsung  dan berbasis resfull yaitu  menggunakan teknologi API. API ( Application Programmable Interface) adalah sekumpulan  perintah,  fungsi,  serta protokol  yang  dapat  digunakan  oleh programmer saat membangun perangkat lunak untuk sistem operasi tertentu. API merupakan  perantara  perangkat  lunak yang memungkinkan dua aplikasi saling berkomunikasi [10].
Client-side yang digunakan pada penelitian  ini  menggunakan framework AngularJs yang  amana framework tersebut  juga  menggunakan  metode MVC seperti framework Laravel .
Kelebihan  dari framework ini  yaitu dapat  melakukan  data  binding  antara model  dan controller sehingga  dapat tersinkron secara asynchronous [11].

## Perancangan Sistem
Perancangan sistem dengan arsitektur Application  Programmable Interface  Restful  Web  Service untuk sistem  presensi  yang  multi  instansi  dan multi  kegiatan  menggunakan Unified Modelling  Language (UML)  yang terdiri  dari use  case  diagram,  activity diagramm, class
diagram , dan perancangan database.

## Use Case Diagram
Dalam usecase diagram pada Gambar 3 terdapat  2  aktor,  yaitu  Admin    dan Peserta.  Kedua  aktor  tersebut  memiliki peran  masing-masing.  Admin  bisa mengelola pesera, kegiatan, rekap daftar hadir  dan profile .  Peserta  hanya  bisa melakukan  presensi  dengan  memindai
Qr Code dengan Id Card
Gambar 3. Usecase Diagram

## Implementasi Sistem
Berdasarkan  hasil  perancangan sistemnya  yang  mulai  dari usecase sampai database selanjutknya diimplemantasikan  ke  bentuk  koding dan  dapat  dijlankan  pada browser sehingga  dapat  dilakukan  pengujian oleh developer dan user .  Berikut  hasil implementasi dari hasil pengkodean:
Gambar 4. Halaman Login
DOI:  https://doi.org/10.33330/jurteksi.v7i1.903 Available online at http://jurnal.stmikroyal.ac.id/index.php/jurteksi
Gambar 5. Halaman Peserta
Gambar 6. Halaman Kegiatan
Gambar 7. Halaman Tambah Peserta pada Setiap Kegiatan
Gambar 8. Halaman Daftar Hadir
Gambar 9. Halaman Presensi Peserta

## SIMPULAN
Berdasarkan  hasil  dan  pembahasan perancangan  prototipe  Sistem  Presensi, maka  simpulan  yang  dapat  adalah sistem presensi berbasis web ini mampu membantu mengurangi penggunaan kertas  dalam  melakukan  presensi  serta mampu  digunakan  multi  departemen dan multi kegiatan, sehingga layanan ini bersifat  publik  serta  pencarian  data  dan rekapitulasi  presensi  menjadi  lebih mudah dan cepat.

## UCAPAN TERIMA KASIH
Peneliti  mengucapkan  terima  kasih kepada  Deputi  Bidang  Penguatan  Riset dan  Pengembangan  Kementerian  Riset dan Teknologi/ Badan Riset dan Inovasi Nasional yang mendanai penelitian ini.

## DAFTAR PUSTAKA
[1]  M.  Nuh,  “Pembangunan  Sistem Informasi  Presensi  Siswa  Pada Sekolah  Menegah  Atas  (  Sma  )
Negeri 1 Rembang,” vol. 10, no. 1, pp. 104–108, 2013. [2]  S.  N.  Edusainstek  and  A.  N. Wardathi, “PERANCANGAN APLIKASI  E-PRESENSI  SISWA SEKOLAH MENENGAH DI KOTA PEKALONGAN BERBASIS ANDROID,” in Seminar Nasional Edusainstek FMIPA  UNIMUS  2018 ,  2018,  pp. 498–505. [3]  D. K. Pamuji, M. Yunus, and D. W. Widarti, “Implementasi Sinkronisasi Database Berbasis RESTful Web Services pada Aplikasi Presensi,” JOINTECS
(Journal Inf. Technol. Comput. Sci. ,
DOI:  https://doi.org/10.33330/jurteksi.v7i1.903 Available online at http://jurnal.stmikroyal.ac.id/index.php/jurteksi
vol. 5, no. 1, p. 1, 2020.
[4]  E. Varga, I. Lendak, M. Gavrić, and A.  Erdeljan,  “Applicability  of
RESTful  web  services  in  control center  software  integrations,”  in
2011  International  Conference  on Innovations in Information Technology,  IIT  2011 ,  2011,  pp.
282–286.
[5]  Y.  Liu et  al. ,  “Characterizing RESTful  Web  Services  Usage  on
Smartphones:  A  Tale  of  Native Apps and Web Apps,” in Proceedings - 2015 IEEE International  Conference  on  Web Services,  ICWS  2015 ,  2015,  pp.
337–344.
[6]  K.  T.  Tran, Introduction  to  Web Service  with  Java .  bookboon.com,
2013.
[7]  A. Ginige and S. Murugesan, “Web Engineering:  An  Introduction,”
IEEE  Multimed. ,  vol.  8,  no.  1,  pp. 14–18, 2001.
[8]  R. S. Pressman,
Software Engineering: A Practitioner’s Approach , vol. 9781118592. 2001. [9]  “Laravel,” 2011. [Online].
Available: https://laravel.com/.
[Accessed: 01-Jul-2020].
[10] M.  Stowe, Undisturbed  REST:  a Guide to Designing the Perfect API First-look Edition . MuleSoft, 2015.
[11] B. S. S. Green, AngularJs .
O’REILLY, 2013.