Terbit online pada laman web jurnal: http://journal.isas.or.id/index.php/JACOST

## JOURNAL OF APPLIED COMPUTER SCIENCE AND TECHNOLOGY (JACOST)
Vol. 2 No. 1 (2021) 1 – 6 | ISSN: 2723-1453 (Media Online)
Sistem Presensi Online Berdasarkan Metode Rapid Application Development Menggunakan Block Programming
Agus Cahyo Nugroho Sistem Informasi, Ilmu Komputer, Unika Soegijapranata agus.nugroho@unika.ac.id

## Abstract
Today, the millennial generation is increasingly inseparable from gadgets. Most of their time is spent interacting using these gadgets.  So  that  even  during  lectures,  they  can  be  sure  that  they  will  continue  to  interact  using  these  gadgets.  When  this millennial generation is undergoing lectures in the classroom, usually attendance will be circulated using a paper attendance list and students must sign the paper as proof of class attendance. This often creates problems when there are students who leave their presence through classmates. The solution to this problem is to develop a mobile-based online presence system. The urgent need for an online presence system causes the system to be developed quickly. The suitable method for rapid system development  is  Rapid  Application  Development  (RAD).  This  QRCode-based  online  attendance  system  has  succeeded  in overcoming the problem of entrusting presence through classmates.
Keywords: online presence, RAD, block programming, visual programming, computational thinking

## Abstrak
Pada masa sekarang ini generasi milenial semakin tidak dapat dipisahkan dari gadget. Hampir sebagian besar waktu mereka dihabiskan untuk berinteraksi menggunakan gadget tersebut. Sehingga saat perkuliahan pun bisa dipastikan mereka akan tetap berinteraksi menggunakan gadget tersebut. Saat generasi milenial ini menjalani perkuliahan di dalam kelas biasanya presensi akan diedarkan menggunakan daftar hadir berupa kertas dan mahasiswa harus menandatangani kertas tersebut sebagai bukti kehadiran di kelas. Hal ini seringkali menimbulkan permasalahan saat ada mahasiswa yang titip presensi melalui teman satu kelas. Solusi permasalahan tersebut adalah dengan mengembangkan sebuah sistem presensi online berbasis mobile. Kebutuhan yang mendesak akan sistem presensi online tersebut menyebabkan sistem harus dikembangkan dengan cepat. Metode yang cocok untuk pengembangan sistem secara cepat adalah Rapid Application Development (RAD) . Sistem presensi online berbasis QRCode ini telah berhasil mengatasi permasalahan titip presensi melalui teman satu kelas.
Kata kunci: presensi online, RAD , block programming , visual programming , computational thinking

## 1. Pendahuluan
Gadget semakin  tidak  dapat  dipisahkan  dari  generasi milenial saat ini. Hal ini bisa kita lihat melalui lamanya generasi  milenial  dalam  berinteraksi  melalui gadget. Sehingga  hal  ini  juga  berpengaruh  terhadap  strategi Perguruan  Tinggi  dalam  mendekatkan  diri  terhadap mereka.  Perguruan  Tinggi  yang  tidak  mempersiapkan hal ini maka akan kalah bersaing dengan kompetitornya. Bahkan  yang  lebih  tragis  adalah  tidak  memperoleh jumlah  mahasiswa  baru  yang  memadai.  Jika  hal  ini terjadi  secara  berkelanjutan  maka  Perguruan  Tinggi tersebut tidak akan bertahan.
Mengantisipasi  hal  ini  ada  beberapa  Perguruan  Tinggi yang kemudian menemukan solusi dengan mengimplementasikan teknologi. Baik itu  media sosial maupun memasukan teknologi dalam proses perkuliahan.  Perguruan  Tinggi  berharap  hal  tersebut akan  semakin  mempopulerkan  brand  mereka  kepada
generasi millenial saat ini. Sehingga di masa depan anak- anak tersebut akan berminat untuk melanjutkan kuliah di Perguruan Tinggi tersebut.
Disamping menggunakan berbagai macam media sosial Perguruan  Tinggi  ada  juga  yang  sudah  tertarik meningkatkan  efektifitas  dan  efisiensi  dalam  proses belajar mengajar. Salah satu contoh adalah pemanfaatan sistem presensi online untuk menggantikan tanda tangan di  kelas.  Hal  ini  tentunya  sangat  bermanfaat  bagi Perguruan  Tinggi,  mahasiswa,  maupun  orang  tua mahasiswa. Sehingga para mahasiswa dapat melakukan presensi  hanya  dengan  memindai QRCode matakuliah yang dihadiri.
Penelitian  terdahulu  seperti  Pengembangan  Sistem Presensi yang dilengkapi QR Code sebagai media input presensi serta SMS G ateway sebagai media pengiriman informasi  untuk  orang  tua  siswa.  Selain  itu  sebagai bahan  penyusunan  laporan  presensi  harian  siswa.  S taff tata  usaha  menjadi  dimudahkan  pekerjaannya  dengan
adanya sistem presensi yang dibangun berbasis QR Code [1].
Penelitian  terdahulu  juga  menyimpulkan  penggunaan teknologi QR Code bisa mempermudah proses presensi karena akan berjalan secara otomatis dan terkomputerisasi serta akan mengurangi potensi curang oleh mahasiswa dalam proses presensi, karena QR Code akan  berganti  setiap  kali  pertemuan.  Sistem  presensi yang dibangun mempunyai fitur scanning QR Code dari aplikasi  yang  ada  di  Smartphone  mahasiswa  kemudian akan  direkam  dalam database yang  terdapat  di Server Universitas [2].
Penelitian  terdahulu  juga  mengambil  kesimpulan QR Code merupakan  teknologi  yang  memungkinkan penyampaikan informasi secara cepat kemudian respon juga akan diperoleh secara cepat juga [3]. Rekomendasi pembacaan QR  Code oleh  mahasiswa  nantinya  bisa menggunakan QR  Code  Reader . QR  Code yang disarankan  untuk  digunakan  sebagai  alat  untuk memunculkan kode QR Code yang nantinya akan dibaca oleh Quick  Respon  Code yang  sudah  harus  terdapat  di handphone mahasiswa  adalah Generate  QR  Code . Penggunakan  teknologi  tersebut  dalam  pengambilan presensi  diharapkan  menjadikan  sebuah  inovasi  baru sebagai sebuah smart system yang bisa digunakan dalam proses perkuliahan. Salah satu alasan pembuatan smart system ini  didasari  oleh  seringnya  mahasiswa  menitip absen pada saat perkuliahan, sehingga penilaian presensi supaya  bisa  dijadikan  sebagai  salah  satu  parameter dalam penilaian perkuliahan menjadi tidak akurat.

## 2. Metode Penelitian
Pendekatan penelitian yang diterapkan adalah penelitian kualitatif.  Pendekatan  ini  digunakan  karena  dapat menggambarkan  analisis  kondisi  dan  prosedur  absensi yang diterapkan sampai sekarang.
Terdapat  2  jenis  data  di  dalam  penelitian  yaitu  (1). Penelitian  ini  menggunakan  jenis  data  primer  yang berupa  data  wawancara  kepada  para  dosen  dan mahasiswa di Universitas, dan (2). Data sekunder berupa data Universitas yaitu arsip/dokumen terkait absensi.
Teknik pengumpulan data yang dilakukan menggunakan metode  wawancara  dan  observasi,  penulis  melakukan wawancara terhadap beberapa informan antara lain para dosen  di  Universitas,  bagian  Tata  Usaha  di  Program Studi  yang  terbiasa  dalam  mengerjakan  absensi. Sedangkan  observasi  dilakukan  dengan  cara  membaca dan  memahami Standard  Operating  Procedure  (SOP) yang selama ini telah berjalan. Berdasarkan wawancara yang  telah  dilakukan  ditemukan  beberapa  kelemahan dan solusi yang diinginkan Universitas untuk mengatasi beberapa  permasalahan  yang  muncul.  Selain  itu  juga dilakukan analisis terhadap dokumen yang ada di dalam Universitas.  Berikut  teknik  pengumpulan  data  yang digunakan :

## Metode Observasi
Metode  Observasi  dilaksanakan  dengan  mengadakan kunjungan    langsung  ke  kelas  di  salah  satu  Program Studi  tertentu  dengan  tujuan  untuk  mengetahui bagaimana proses absensi berjalan.

## Metode Interview
Metode  Interview  dilaksanakan  dengan  menggali berbagai  kendala  yang  dialami  selama  menggunakan absensi  dengan  menggunakan  tanda  tangan  di  kertas yang selama ini dikerjakan.

## Metode Dokumentasi
Metode  Dokumentasi  dilaksanakan  dengan  melihat data-data  tertulis  yaitu  berupa  dokumen-dokumen Universitas seperti daftar absensi di tiap-tiap kelas.
Penelitian  ini  menggunakan  teknik  analisis  data kualitatif dalam pembuatan sistem presensi online.
Dari permasalahan yang muncul yaitu tentang beberapa mahasiswa  yang  masih  titip  absen  melalui  teman sekelasnya maka diambil sejumlah data yang kemudian di analisis sesuai kebutuhan dari sistem presensi online yaitu  NIM,  nama  dan  pengambilan  matakuliah mahasiswa  tersebut.  Hasil  analisis  akan  dirancang dengan  menggunakan Flowchart , Use  Case  Diagram kemudian dilakukan implementasi program.
User Interface sistem presensi online ini dikembangkan menggunakan Block Programming menggunakan warna dasar putih dengan kombinasi warna lain yang sesuai.

## Quick Response Code (QR Code)
QR  Code adalah  sebuah  matriks  2  dimensi  yang  dapat menyimpan  data  dalam  bentuk  tulisan,  gambar,  dan sebagainya.  Pertama  kali  dikembangkan  oleh  Denso Corporation  Jepang  untuk  perusahan  otomotif  pada tahun 1994 [4].
Contoh QR Code dapat dilihat pada Gambar 1.
Gambar 1. QR Code
Pada QR Code terdapat 2 prosedur yaitu pembangkitan QR (Generate) dan pembacaan QR Code (Scanning) [5]. Prosedur  pembangkitan QR  Code bisa  kita    lihat  pada Gambar 2.
Journal of Applied Computer Science and Technology (JACOST) Vol. 2 No. 1 (2021)

## Gambar 2. Generate QR Code
Untuk  prosedur  pembacaan QR  Code adalah  proses sebaliknya dari pembangkitan QR Code , bisa kita  lihat pada Gambar 3.

## Gambar 3. Scanning QR Code

## Rapid Application Development (RAD)
Metodologi  ini  mengembangkan  desain  siklus  hidup perangkat  lunak  dengan  menyediakan  pengembangan cepat  dan  berkualitas  tinggi.  Efisiensi  waktu  adalah keunggulan RAD dibandingkan  dengan  metode  lama yang  membutuhkan  proses  lebih  lama.  Pengembangan perangkat  lunak  menggunakan RAD adalah  peluang bagus dalam proses pengembangan aplikasi [6].
Metode  ini  kurang  fokus  pada  perencanaan  dan  lebih fokus  pada  pembangunan.  Oleh  karena  itu,  beberapa siklus pengembangan dapat dilakukan secara bersamaan. Setiap siklus memiliki dua fase pengembangan  dan  pengujian,  yang  disebut  modul. Komentar  dari  pemilik  proyek  diterima  setelah  setiap unit  selesai.  Metodologi  ini  cocok  untuk  usaha  kecil, menengah dan besar, tetapi pastikan bahwa proyek harus dibagi  menjadi  beberapa  unit.  Metodologi  ini  cocok untuk  perusahaan  kecil,  menengah  dan  besar,  tetapi penting untuk membagi proyek menjadi unit-unit seperti yang ditunjukkan pada Gambar 4 [6].
Gambar 4. Metodologi RAD

## MIT App Inventor 2
MIT  App  Inventor  2 adalah  platform  pengembangan online  yang  dapat  digunakan  oleh  siapa  saja  untuk menyelesaikan masalah dunia nyata. MIT App Inventor 2 menyediakan  editor  "Apa  yang  Anda  lihat  adalah  yang Anda  dapatkan"  ( WYSIWYG )  berbasis  web  untuk membangun  aplikasi  seluler  yang  menargetkan  sistem operasi Android dan iOS .  Editor WYSIWYG dapat  kita lihat pada Gambar 5.
Gambar 5. MIT App Inventor 2 Pallette
MIT App Inventor 2 menggunakan bahasa pemrograman berbasis blok yang dibangun di Google Blockly [7] dan terinspirasi  oleh  bahasa  seperti StarLogo  TNG [8]  dan Scratch [9]  memungkinkan  siapa  pun  dengan  berbagai tingkat  pengetahuan  sehingga  dapat  mengembangkan aplikasi  seluler  untuk  memenuhi  kebutuhan  dan menyelesaikan masalah di masyarakat. Bahasa pemrograman berbasis blok di MIT App Inventor 2 dapat kita lihat pada Gambar 3. Hingga saat ini, 6,8 juta orang di  lebih  dari  190  negara  telah  menggunakan MIT  App Inventor 2 untuk membangun lebih dari 24 juta aplikasi. MIT App Inventor 2 menawarkan antarmuka dalam lebih dari  selusin  bahasa.  Orang-orang  di  seluruh  dunia menggunakan MIT  App  Inventor  2 untuk  memberikan solusi  melalui  aplikasi  selular  untuk  menyelesaikan masalah  dunia  nyata  dalam  keluarga,  komunitas,  dan dunia  mereka.  Platform  ini  juga  telah  diadaptasi  untuk
melayani kebutuhan populasi yang lebih spesifik, seperti membangun  aplikasi  untuk  merespon  kondisi  darurat  / pertama [10] dan robotika [11].
Gambar 6. MIT App Inventor 2 Block Programming

## 3.   Hasil dan Pembahasan
Pada  tahap  perancangan  sistem  presensi  online  kita awali  dengan  membuat flowchart seperti  pada  Gambar 7.
Gambar 7. Flowchart Sistem Presensi Online
Flowchart ini  dimulai  saat  mahasiswa  login  ke  dalam sistem presensi online menggunakan username yaitu NIM dan password. Setelah validasi berhasil mahasiswa akan sampai  di  halaman  menu  utama.  Pada  halaman  utama tersebut ditampilkan informasi NIM mahasiswa tersebut dan  status  kehadirannya.  Selain  itu  terdapat  dua  buah tombol Scan dan Logout. Jika akan presensi mahasiswa bisa  menekan  tombol  Scan.  Setelah  itu  mengarahkan scanner  ke QRCode kelas.  Jika  proses  scan  ini  berhasil
maka sistem akan mengubah status kehadiran mahasiswa tersebut menjadi hadir. Namun jika proses scan ini tidak berhasil  karena  berbagai  faktor  maka  mahasiswa  akan kembali diarahkan menuju halaman menu utama. Setelah semua  proses  selesai  mahasiswa  bisa  menekan  tombol Logout untuk keluar dari sistem.
Use Case Diagram sistem ini bisa kita lihat di Gambar 8.
Gambar 8. Use Case Diagram Sistem Presensi Online
Use Case Diagram sistem ini dimulai dengan mahasiswa register terlebih dulu untuk mendaftarkan username yaitu NIM dan password yang akan digunakan untuk login ke dalam sistem. Setelah register mahasiswa sudah bisa login ke  dalam  sistem  dan  menggunakan  menu  utama  dari sistem  tersebut.  Jika  semua  proses  sudah  selesai mahasiswa bisa logout dari sistem tersebut.
Setelah  proses  perancangan  selesai  dilanjutkan  dengan pembuatan sistem presensi online menggunakan MIT App Inventor 2. Pada aplikasi yang dikembangkan terdapat 2 Screen  yaitu:  Screen1  dan  Screen2.  Screen1  digunakan untuk halaman login ke dalam aplikasi. Berikut ini adalah tampilan  halaman  login  aplikasi  yang  terdapat  pada Screen  1 MIT  App  Inventor  2 yang  bisa  kita  lihat  di Gambar 9.
Gambar 9. Halaman Login Aplikasi
Journal of Applied Computer Science and Technology (JACOST) Vol. 2 No. 1 (2021)
Sedangkan flowchart untuk halaman login bisa kita lihat di  Gambar  10.  Pada flowchart di  halaman  login  ini  kita melakukan  validasi  terhadap username dan password . Jika username dan password yang diberikan benar maka user bisa  menuju  Screen2.  Pada block ini  juga  terdapat notifier yang  akan  menampilkan  informasi  apakah username dan password yang  diberikan  itu  benar  atau salah.
Gambar 10. Flowchart Halaman Login Aplikasi pada Screen 1
Selanjutnya pada Screen2 yang bisa kita lihat di Gambar 11 merupakan halaman presensi online dimana terdapat 2 buah tombol yaitu Scan dan Logout . Jika user menekan tombol Scan maka user bisa  melakukan scan QRCode kelas  dan  melakukan  presensi.  Label  NIM  akan  terisi Nomor Induk Mahasiswa yang digunakan untuk login ke dalam sistem. Sedangkan label Belum Hadir akan berubah menjadi  Hadir  setelah user berhasil  melakukan scan terhadap QRCode kelas.  Jika user keliru  memindai QRCode maka  akan  muncul  pesan  bahwa  itu  bukan QRCode kelas dan label tidak berubah tetap Belum Hadir.
Gambar 11. Halaman Presensi Online
Pada Flowchart halaman presensi online yang bisa kita lihat  di  Gambar  12  ini  digunakan  komponen BarCodeScanner untuk memvalidasi apakah user benar dalam  memindai QRCode kelas.  Kemudian  di  dalam block ini  akan  mengubah label Belum  Hadir  menjadi Hadir  apabila user benar  memindai QRCode kelas. Setelah itu aplikasi akan menampilkan informasi apakah presensi sudah berhasil atau user keliru dalam memindai QRCode kelas.
Gambar 12. Flowchart Halaman Presensi Online
Sistem  presensi  online  yang  dibangun  telah  mampu memberikan  inspirasi  bahwa  hal  ini  sangat  mungkin dilakukan  dan  bermanfaat  untuk  diterapkan  dalam kegiatan  perkuliahan.  Sehingga  persoalan  mahasiswa titip absen bisa teratasi. Selain itu dengan sistem ini turut mendukung  pengurangan  penggunaan  kertas.  Hal  ini tentunya  mendukung  program  ramah  lingkungan  di lingkungan kampus. Manfaat lainnya adalah dengan data absensi yang sudah digital maka memudahkan berbagai pihak dalam menggunakan data tersebut. Sebagai contoh biro akademik di kampus akan sangat terbantu di dalam mengolah  data  perkuliahan.  Orang  tua  juga  akan merasakan  manfaat  dari  aplikasi  ini  karena  bisa mengecek apakah hari ini menghadiri perkuliahan atau tidak.  Sehingga  orang  tua  juga  turut  dibantu  dalam mengawasi dan mengontrol anaknya meskipun berada di luar kota.
Dari  segi  kampus  tentunya  akan  terbantu  dalam  hal promosi karena ini tentunya akan menjadi promosi yang baik  karena  kampus  tersebut  mengikuti  perkembangan teknologi  terbaru  sehingga  memiliki  keunggulan kompetitif daripada kompetitornya.
Promosi  berikutnya  adalah  mahasiswa  tentunya  akan turut  bangga  dan  membantu  promosi  yang  baik  dari mulut ke mulut terhadap lingkungan di sekitarnya.
Journal of Applied Computer Science and Technology (JACOST) Vol. 2 No. 1 (2021)
Promosi-promosi  dari  semua  pihak  ini  sangat  penting karena  tentunya  berpengaruh  terhadap  penerimaan mahasiswa  baru  tiap  tahunnya.  Semakin  banyak mahasiswa  yang  masuk  ke  kampus  maka  akan menentukan perkembangan kampus di masa depan.

## 4.   Kesimpulan
Penelitian  ini  telah  menghasilkan  aplikasi  sistem presensi  online  yang  bisa  menjadi  solusi  terhadap permasalahan titip presensi di perkuliahan, lebih ramah lingkungan  karena  mengurangi  penggunaan  kertas  dan memudahkan  orang  tua  mahasiswa  dalam  mengawasi anaknya meskipun berada di luar kota.
MIT  App  Inventor  2 yang mengimplementasikan block programming terbukti  tools  yang  sesuai  digunakan dalam  penerapan RAD karena  meringkas  baris-baris program  yang  panjang  ke  dalam block  programming sehingga  waktu  pengembangan  menjadi  lebih  singkat dan cepat. Selain itu pengembang bisa lebih fokus untuk memecahkan masalah dunia nyata daripada menghabiskan waktu untuk menangani syntax error .

## Daftar Rujukan
[1] D. Juardi, “Presensi dan Reminder menggunakan QR Code (Studi Kasus : SMA XXX)”, Systematics Journal , vol. 1, no. 1, pp. 33- 43, Aug. 2019.
[2] Supendi, Y., Supriadi, I., & Isto, A. A., “Pemanfaatan Teknologi QR-Code  Pada  Sistem  Presensi  Mahasiswa  Berbasis  Mobile”, Seminar  Nasional  APTIKOM  (SEMNASTIK),  pp.  550-558, 2019.
[3] Hermanto, N., & Riyanto, N. R. D. R., “Aplikasi sistem presensi mahasiswa  berbasis  android.”,  Simetris:  Jurnal  Teknik  Mesin, Elektro dan Ilmu Komputer, 10(1), 107-116, 2019.
[4] Satrio, M. A., Abdillah, L. A., & Syazili, A., “Aplikasi Presensi Mahasiswa  dengan  Menggunakan  QR  Code  Berbasis  Android pada Universitas Bina Darma”, 2017.
[5] Piercy,  N.  F.  (Ed.).,  “Management  information  systems:  the technology challenge (Vol. 40).”, Routledge, 2018.
[6] Ressin, M., “Choice of a visual programming language in a level 3 introductory computing course”, 2017.
[7] Tse, P. H., “Data analytics and visualizations for StarLogo Nova block programming platform (Doctoral dissertation,
Massachusetts Institute of Technology)”, 2017.
[8] opalli,  D., & Cagiltay,  N. E.,  “Improving programming  skills  in engineering education through problem-based game projects with Scratch”, Computers & Education , 120 , 64-74, 2018.
[9] Jain, A., Adebayo, J., De Leon, E., Li, W., Kagal, L., Meier, P., & Castillo,  C.,  “Mobile  application  development  for  crisis  data”, Procedia Engineering, 107, 255-262, 2015.
[10] Papadakis,  S.,  Kalogiannakis,  M.,  Zaranis,  N.,  &  Orfanakis,  V., “Using  Scratch  and  App  Inventor  for  teaching  introductory programming in secondary education. A case study. International Journal  of  Technology  Enhanced  Learning”,  8(3-4),  217-233, 2016.