Jurnal Sistem Informasi, Teknologi Informasi, dan Edukasi Sistem Informasi (JUST-SI) Vol. 3, No. 2, Desember 2022, hlm. 57-67
PENGEMBANGAN SISTEM INFORMASI PRESENSI SEKOLAH MENGGUNAKAN METODE PROTOTYPE (STUDI KASUS: SMAN 13 PANGKEP)
Muhajir *1 , Dian Eka Ratnawati 2 , Issa Arwani 3
1,2,3 Universitas Brawijaya, Kota Malang Email: 1 hajir.nf@gmail.com, 2 dian_ilkom@ub.ac.id, 3 issa.arwani@ub.ac.id
* Penulis Korespondensi (Naskah masuk: 15 Januari 2022, diterima untuk diterbitkan: 09 Maret 2022)

## Abstrak
Presensi  siswa  dalam  kelas  merupakan  salah  satu  indikator  penting  dalam  penilaian  proses pembelajaran  di  sekolah.  Di  SMAN  13  Pangkep,  kegiatan  presensi  dilakukan  secara  daring sejak tahun 2020 akibat pandemi yang sedang berlangsung.  Guru mengarahkan siswa untuk melakukan  absensi  masing-masing  melalui whatsapp .  Presensi  melalui whatsapp ini  dinilai tidak efektif dikarenakan data presensi di whatsapp dapat dengan mudah dimanipulasi siswa. Penelitian ini dilakukan berdasarkan permasalahan presensi melalui whatsapp dengan tujuan untuk dapat mempermudah guru dan siswa dengan membuat sebuah sistem informasi presensi yang dikembangkan dengan metode pengembangan prototype . Hasil dari penelitian ini yaitu sistem  dibuat  dalam  bentuk website dan  aplikasi mobile android.  Hasil  analisis  kebutuhan didapatkan  setelah  melakukan  3  iterasi prototyping dengan  pengguna.  Hasil  analisis kebutuhan  yaitu  29  kebutuhan fungsional dan  2  kebutuhan non  fungsional .  Proses implementasi  dilakukan  dengan  menggunakan framework laravel  untuk  website  dan framework flutter  untuk  aplikasi mobile .  Proses  pengujian  dilakukan  dengan  pengujian validasi ,  pengujian compatibility dan  pengujian usability .  Pengujian  validasi  mendapatkan hasil 100%, pengujian compatibility yaitu aplikasi mobile dapat berjalan pada 4 versi android dan website dapat  berjalan  pada  4 browser yang  berbeda.  Pengujian usability dilakukan dengan  metode  SUS  mendapatkan  nilai  87,5  yang  artinya  sistem  yang  dikembangkan  telah sesuai dan mudah untuk digunakan.
Kata kunci : Sistem presensi, Metode prototype, Laravel framework, Flutter framework.

## THE DEVELOPMENT OF AN INFORMATION SYSTEM OF SCHOOL ATTENDANCE USING THE PROTOTYPE METHOD (A STUDY CASE AT SMAN 13 PANGKEP)

## Abstract
Student attendance in the classroom is considered as one of the most important indicators in assessing  students’  learning  process.  At  SMAN  13  Pangkep,  student  attendance  has  been managed via online since 2020 due to the current pandemic. Teachers direct students to check their attendance by themselves via WhatsApp. This matter is considered ineffective regarding its data to be easily manipulated by students. Therefore, this research was conducted in order to  ease  students’  and  teachers’  activities  by  designing  an  attendance  information  system which  was  developed  using  the  prototype  method.  The  results  of  this  study  are  a  website based  system  and  an  android  mobile  application.  The  needs  analysis  results  are;  29
58 Jurnal Sistem Informasi,Teknologi Informasi,dan Edukasi Sistem Informasi(JUST-SI) ,Vol. 3, No.2,September 2022, hlm.57-67
functional requirements and 2 non-functional requirements. The implementation process was carried  out  using  the  laravel  framework  for  websites  and  the  flutter  framework  for  mobile applications. The testing process was carried out with validation testing, compatibility testing and usability testing. Validation testing gets 100% results, compatibility testing, i.e the mobile application can run on 4 versions of Android and the website can run on 4 different browsers. Usability testing was carried out using the SUS method which scores 87.5 meaning that the system developed was compatible and easy to use.
Keywords : Attendance system, Prototype method, Laravel framework, Flutter framework.

## 1. PENDAHULUAN
SMAN  13  Pangkep  adalah  sekolah  yang  berada  pada  jenjang  menengah  atas  yang terletak  pada  Kab.  Pangkajene  dan  kepulauan  di  Provinsi  Sulawesi  Selatan.  sekolah  ini dibangun  pada  tahun  2014  dan  mulai  menerima  siswa  angkatan  pertama  pada  tahun  2016. SMAN 13 Pangkep merupakan sekolah yang terbilang baru karena hingga saat ini per tahun 2021  baru  terdapat  9  angkatan.  SMAN  13  Pangkep  mempunyai  3  aktor  dalam  proses pembelajaran yaitu guru, siswa dan bimbingan konseling (BK). Proses pembelajaran saat ini dilakukan secara daring akibat pandemi.
Pembelajaran  yang  dilakukan  secara  daring  dinilai  belum  efektif.  Berdasarkan  hasil wawancara  dengan  salah  satu  guru  yang  mengajar  di  SMAN  13  Pangkep,  proses pembelajaran  selama  pandemi  yang  dilakukan  secara  daring  belum  efektif  karena  susahnya komunikasi  ataupun  koordinasi  yang  dilakukan  antar  guru  dan  siswa.  Guru  kesulitan  untuk mengetahui tingkat keseriusan belajar dari siswa yang diajar. Beberapa siswa yang hadir pada pertemuan  kelas  terkadang  hanya  sekedar  hadir  dan  tidak  memperhatikan  materi  yang disampaikan.  Proses  administrasi  seperti  presensi  sekarang  pun  masih  dilakukan  secara manual  seperti  menulis  nama  siswa  yang  hadir  pada  kolom  chat  grup whatsapp .  Guru kemudian meneruskan chat yang berisi list nama siswa yang hadir ke pihak tata usaha untuk melakukan  penginputan  presensi.  Penyebaran  informasi  seperti  pengumuman  juga  menjadi salah  satu  masalah  pada  pembelajaran  daring.  Pengumuman  yang  dibuat  secara  manual melalui whatsapp kemudian diteruskan ke beberapa grup kelas membuat pengumuman yang dibuat  dapat  diubah  oleh  orang-orang  yang  tidak  bertanggung  jawab.  Pengumuman  yang diubah ubah menyebabkan kredibilitas informasi yang disebar berkurang dan dapat membuat pengumuman tersebut menjadi hoaks.
Dari uraian permasalahan yang ditemukan maka penulis menawarkan untuk membangun sebuah  sistem  informasi  presensi  yang  dapat  memfasilitasi  seluruh  pihak  sekolah  untuk menjalankan  kegiatan  pembelajaran  secara  daring.  Sistem  yang  dibangun  akan  berbasis website  dan mobile  android .  Sistem  yang  dibangun  memiliki  fasilitas  untuk  melakukan presensi.  Presensi  dapat  dilakukan  ketika  siswa  telah  mengerjakan assessment yang  dibuat oleh  guru.  Contoh assessment yang  diberikan  seperti  menjawab  pertanyaan  dari  pelajaran yang  telah  diberikan. Assessment yang  diberikan  dapat  menjadi  penilaian  bagi  guru  untuk mengetahui tingkat keseriusan siswa dalam mengikuti pelajaran. Sistem yang dibangun akan memiliki  fasilitas  untuk  melihat  pengumuman  yang  terpusat  sehingga  tingkat  kredibilitas informasi  yang  dibuat valid karena  pengumuman  yang  dikeluarkan  hanya  dapat  dibuat  atau diedit oleh pihak berwenang yang ada pada sekolah.
Dalam  proses  pengembangan  sistem  akan  menggunakan  metode  pengembangan prototype ,  metode  pengembangan prototype dinilai  tepat  karena  pada  tahap  pengembangan akan  dibutuhkan  partisipasi  pengguna  secara  aktif.  Dengan  menggunakan  metode prototype proses  pengembangan  sistem  akan  lebih  fleksibel  karena  metode prototype bisa  mengatasi
perubahan-perubahan yang dibutuhkan pada proses analisis kebutuhan dan validasi dilakukan jika sesuai keinginan pengguna (Sommerville, 2016).

## 2. LANDASAN KEPUSTAKAAN

## 2.1. Kajian Pustaka
Penelitian  sebelumnya  oleh  Aryputra  dkk.  (2020)  tentang  membuat  sistem  informasi sekolah  berbasis website .  Penelitian  ini  menghasilkan  bahwa  proses  pembuatan  laporan presensi lebih efektif dengan membangun sistem akademik untuk mempermudah pembuatan laporan presensi kehadiran di SSB Sumbersari FC dibandingkan dengan melakukan presensi secara manual.
Penelitian dari Permana dkk. (2020) tentang sistem presensi berbasis lokasi menggunakan geofence wifi .  Penelitian  menghasilkan  pengembangan  sistem  presensi  dibangun  diatas  2 platform yaitu mobile dan  web.  Kedua platform dihubungkan  oleh  REST  sebagai  jembatan pertukaran  data  masuk  maupun  keluar.  Hasil  dari  penelitian  ini  sudah  tidak  relevan  untuk digunakan  pada  kondisi  pembelajaran  daring  karena  proses  presensi  hanya  dapat  dilakukan pada lokasi tertentu.
Penelitian  lain  oleh  Irawan  Januar  (2018)  tentang  penerapan  absen  mahasiswa menggunakan  teknologi QR Code dan Geofence .  Penelitian  ini  didapatkan  beberapa kekurangan seperti proses presensi hanya terbatas pada QR Code dan hanya dapat dilakukan pada  lokasi  tertentu,  sehingga  tidak  relevan  untuk  digunakan  pada  kondisi  pembelajaran daring  saat  ini.    Teknologi  yang  digunakan  untuk  mengembangkan  aplikasi  pada penelitian sudah  lama  yaitu  menggunakan laravel 5  dan  android  studio  3  yang  berbasis  bahasa pemrograman java.

## 2.2. REST API
REST (Representational State Transfer) adalah salah satu jenis arsitektur yang digunakan untuk membangun web service . REST atau biasa disebut dengan REST API dikarenakan web service ini digunakan untuk menjembatani komunikasi antara client dan server (Richardson et al.,  2013).  Komunikasi  yang  terjadi  antara client dan server berjalan  diatas  protokol  HTTP dengan  menggunakan  pola request-response .  Proses  implementasi  dari  REST  ini  akan memisahkan peran dari sisi client dan server sehingga jika terjadi perubahan dari sisi client maka tidak akan berdampak pada pada sisi server (Masse, 2011).

## 2.3. Usability Testing
Usability  testing adalah  salah  satu  jenis  pengujian  untuk  menguji  tingkat  kemudahan sistem yang dibuat (Pressman & Bruce R. Maxim, 2014). Sistem yang dibuat akan diuji oleh pengguna (end  user) .  Hasil  dari  pengujian usability testing akan  mendapatkan  nilai.  Nilai diperoleh dari System Usability Scale (SUS). SUS adalah sebuah kuesioner yang  digunakan untuk mengukur tingkat kepuasan dari pengguna. SUS memiliki kelebihan yaitu lebih murah karena  hanya  memerlukan  sedikit  sumber  daya,  dan  cepat  karena  tersedia  tempat  untuk membuat kuesioner baru (Albert & Tullis, 2010).

## 3. METODE PENELITIAN
Bab metodologi penelitian membahas tahapan yang akan dilakukan untuk menyelesaikan penelitian.  Proses  pembuatan  sistem  informasi  presensi  SMAN  13  Pangkep  memiliki beberapa  proses  yaitu  wawancara  dan  identifikasi  permasalahan,  studi  literatur,  analisis kebutuhan,  perancangan,  implementasi,  pengujian  dan  proses  terakhir  yang  dilakukan
pengambilan kesimpulan dan saran. Diagram alir proses pembuatan sistem dapat dilihat pada Gambar 1.

## Gambar 1. Diagram Alir

## 4. HASIL DAN PEMBAHASAN

## 4.1. Deskripsi Umum Sistem
Sistem  informasi  yang  dikembangkan  adalah  sistem  informasi  presensi  untuk memfasilitasi  kegiatan  presensi  pada  pembelajaran  daring.  Analisis  kebutuhan  dilakukan dengan menggunakan metode pengembangan prototype. Banyak iterasi yang dilakukan pada penelitian  ini  adalah  sebanyak  3  kali  sehingga  didapat  kebutuhan  sistem  yaitu  sistem  yang akan  dikembangkan  memiliki  fasilitas  untuk  melakukan  presensi online dan  juga  memiliki fasilitas untuk melihat informasi pengumuman yang ada pada sekolah.

## 4.2. Identifikasi Aktor
Identifikasi aktor adalah proses untuk menentukan siapa saja yang akan berperan dalam sistem  secara  langsung.  Berdasarkan  pada  tahap  elisitasi  kebutuhan,  didapatkan  identifikasi aktor seperti pada Tabel 1.
Tabel 1. Idetifikasi Aktor Aktor Deskripsi Siswa Merupakan aktor yang melakukan presensi dan melihat pengumuman yang telah dibuat Guru Merupakan aktor yang dapat membuat presensi dan pengumuman pada kelas yang diajar. Bimbingan Konseling (BK) Merupakan aktor yang bertugas untuk melakukan rekapitulasi presensi dan manajemen siswa dan guru pada kelas.

## Gambar 2. Use Case Diagram

## 4.3. Use Case Diagram
Use case diagram digunakan untuk menggambarkan fungsionalitas dari sistem. Use case diagram berfokus pada apa yang diperbuat oleh sistem (Pressman & Bruce R. Maxim, 2014). Use case diagram menggambarkan interaksi antara aktor dan sistem. Hasil analisis kebutuhan pada  iterasi  pertama  didapatkan  18  kebutuhan  fungsional,  pada  iterasi  kedua  didapatkan tambahan 7 kebutuhan fungsional dan pada iterasi ketiga didapatkan 4 kebutuhan fungsional. Hasil analisis kebutuhan kemudian dilakukan pemodelan dalam bentuk use case diagram . Use case diagram dari seluruh kebutuhan fungsional sistem terdapat pada Gambar 2.

## 4.4. Use Case Skenario
Use  case skenario  adalah  interaksi  antara  aktor  dan  sistem  yang  dituliskan  menjadi  1 skenario  atau  alur  cerita  dari  aksi  aktor  terhadap  sistem.  Contoh  use  case  skenario  buat presensi terdapat pada Tabel 2.

## Tabel 2. Use Case Buat Presensi
Kode Fungsi SIP_F_G-03 Nama Use Case Buat Presensi Objective Aktor dapat membuat presensi baru pada sistem Aktor Guru Pre Condition Aktor berada di halaman beranda Main Flow 1. Aktor menekan menu presensi
2. Aktor berada di halaman presensi
3. Aktor menekan tombol buat presensi
4. Aktor mengisi data presensi seperti kelas, topik, pertanyaan assessment, jam buka dan jam tutup
62 Jurnal Sistem Informasi,Teknologi Informasi,dan Edukasi Sistem Informasi(JUST-SI) ,Vol. 3, No.2,September 2022, hlm. 57-67
Kode Fungsi SIP_F_G-03
5. Aktor menekan tombol simpan Alternative Flow Muncul pesan error jika data presensi yang diisi tidak lengkap Post Condition Aktor berada di halaman presensi dan presensi yang dibuat muncul

## 4.5. Hasil Prototype
Prototype adalah rancangan antarmuka yang digunakan untuk memperlihatkan gambaran awal sistem kepada pengguna. Contoh hasil prototype untuk membuat presensi terdapat pada Gambar 3.
Gambar 3. Prototype Halaman Buat Presensi

## 4.6. Perancangan Arsitektur
Perancangan arsitektur pada  sistem informasi presensi sekolah dirancang menggunakan pola Model  View  Controller (MVC).  MVC  adalah  sebuah  pendekatan  dalam  membangun perangkat  lunak  untuk  memisahkan  bagian  bagian  dari  aplikasi  yaitu  manipulasi  data, controller dan  tampilan  (Sulaeman,  2019).  Gambaran  arsitektur  sistem  informasi  presensi terdapat pada Gambar 4.
Gambar 4. Arsitektur Sistem

## 4.7. Perancangan Sequence Diagram
Perancangan sequence diagram adalah  rancangan  diagram  yang  menampilkan  interaksi antara  objek  yang  ada  pada  sistem.  Contoh sequence  diagram buat  presensi  yang  berfungsi untuk membuat presensi baru terdapat pada Gambar 5.
Gambar 5. Use Case Diagram Buat Presensi

## 4.8. Perancangan Class Diagram
Perancangan class diagram dibuat untuk menggambarkan kelas-kelas yang saling berelasi pada sistem yang akan dikembangan. Contoh class diagram model pada website terdapat pada Gambar 6.
Gambar 6. Class Diagram Model

## Gambar 7. Perancangan Basis Data

## 4.9. Perancangan Basis Data
Perancangan  basis  data  pada  sistem  yang  akan  dikembangkan  menggunakan  basis  data yaitu  MySQL  yang  berbasis  SQL.  Basis  data  MySQL  selanjutnya  akan  diolah  pada  sisi backend dengan menggunakan framework laravel. Perancangan basis data pada sistem akan digambarkan dengan menggunakan entity relationship diagram . Rancangan basis data sistem informasi presensi SMAN 13 Pangkep terdapat pada Gambar 7.

## 4.10. Implementasi Antarmuka
Hasil  implementasi  antarmuka  dilakukan  berdasarkan  hasil  perancangan  antarmuka  pada  bab perancangan. Proses implementasi antarmuka dibagi menjadi 2 yaitu implementasi antarmuka mobile dan  implementasi  antarmuka webisite .  Gambar  8  sampai  Gambar  10  adalah  beberapa  hasil implementasi antarmuka yang telah dilakukan.
Gambar 8. Implementasi Antarmuka Lihat Presensi

## 4.11. Implementasi Basis Data
Implementasi  basis  data  sistem  presensi  SMAN  13  Pangkep  diimplementasikan menggunakan  basis  data MySQL .  Proses  implementasi  dilakukan  sesuai  dengan  hasil perancangan basis data yang telah dilakukan pada sub bab perancangan basis data.
Gambar 9. Implementasi Antarmuka Buat Presensi
Gambar 10. Implementasi Antarmuka Record Presensi

## 4.12. Implementasi Kode Program
Kode  program  sistem  informasi  presensi  SMAN  13  Pangkep  diimplementasikan menggunakan framework laravel untuk website dan framework flutter untuk aplikasi mobile dengan menggunakan bantuan aplikasi Visual Studio Code untuk menulis kode program.

## 5. PENGUJIAN
Pengujian validasi dilakukan dengan menguji 29 kebutuhan fungsional. Hasil pengujian validasi didapatkan skor 100% dan dapat disimpulkan sistem yang dibuat berhasil memenuhi semua kebutuhan yang ada.
Pengujian  compatibility  dilakukan  untuk  menjalankan  website  pada  beberapa  web browser  dan  aplikasi mobile pada  beberapa  perangkat.  Hasil  pengujian  compatibility  yaitu website dapat berjalan pada 4 jenis browser yang berbeda dan aplikasi mobile dapat berjalan pada 4 versi android.
Pengujian  usability  dilakukan  untuk  menguji  sistem  yang  telah  dikembangkan  telah sesuai  dengan  kebutuhan  pengguna.  Pengujian  usability  dilakukan  kepada  calon  pengguna dengan  menggunakan  metode System  Usability  Scale (SUS).  Pengujian  dilakukan    dengan menjalankan task sesuai dengan kebutuhan fungsional masing masing aktor yaitu guru, siswa,
dan  bimbingan  konseling  (BK).  Aktor  yang  telah  melakukan  pengujian  kemudian diberikan form  kuesioner  untuk  menilai  tingkat  kepuasan  aktor.  Form  kuesioner  diberikan  kepada  5 orang responden. Hasil perhitungan SUS kepada 5 orang responden terdapat pada Tabel 3.
Tabel 3. Skor Hasil SUS Responden Nilai 1 37 x 2,5 = 92,5 2 37 x 2,5 = 92,5 3 35 x 2,5 = 85 4 29 x 2,5 = 72,5 5 38 x 2,5 = 95 Total 437,5 Rata-rata 87,5
Tabel  3  adalah  hasil  skor  yang  didapatkan  setelah  dilakukan  perhitungan  berdasarkan aturan  SUS  yaitu  sebesar  87,5  yang  dikategorikan  sebagai acceptable dan  masuk  ke  dalam grade  A  berdasarkan  tingkat  grade  dan  skala  kategori  pada  Gambar  11.  Dengan  demikian dapat disimpulkan bahwa sistem informasi presensi SMAN 13 Pangkep dikembangkan telah sesuai dan dapat diterima oleh calon pengguna.

## Gambar 11. Rentang Grade SUS

## 6. KESIMPULAN DAN SARAN
Pengembangan  Sistem  informasi  presensi  SMAN  13  Pangkep  dilakukan  dengan menggunakan  metode  pengembangan prototype .  Penggalian  kebutuhan  dilakukan  dengan metode prototype sehingga  didapatkan  sebanyak  29  kebutuhan fungsional dan  2  kebutuhan non fungsional . Setiap kebutuhan fungsional digambarkan kedalam use case diagram dan use case skenario untuk mendeskripsikan setiap kebutuhan.
Hasil  analisis  kebutuhan  kemudian  dibuat  menjadi  sebuah  rancangan  perangkat  lunak. Perancangan  perangkat  lunak  dilakukan  dalam  bentuk  perancangan  arsitekur, sequence diagram, class diagram, basis data dan perancangan antarmuka untuk menampilkan rancangan antarmuka kepada pengguna sebelum diimplementasikan.
Tahap  implementasi  dilakukan  berdasarkan  hasil  dari  tahap  perancangan.  Implementasi aplikasi mobile dilakukan  menggunakan  framework  flutter  dan  implementasi  website dilakukan  menggunakan  framework  laravel.  Implementasi  basis  data  menggunakan MySQL berdasarkan hasil perancangan basis data.
Hasil pengujian dilakukan dengan 3 tahap pengujian yaitu pengujian validasi, pengujian compatibility dan pengujian usability. Hasil pengujian didapatkan pengujian validasi sebesar 100%, pengujian compabilitiy sebesar 100% dan hasil pengujian usability dengan nilai SUS sebesar 87,5. Akumulasi hasil pengujian didapatkan bahwa sistem informasi presensi SMAN 13 Pangkep telah sesuai dan mudah untuk digunakan.
Saran  dari  penelitian  yang  telah  dilakukan  adalah  menambahkan  fitur  upload  surat  izin atau  surat  keterangan  sakit  pada  saat  melakukan  presensi  dengan  status  presensi  izin  atau sakit.

## DAFTAR PUSTAKA
ALBERT, W., & TULLIS, T. 2010. Measuring the User Experience: Collecting, Analyzing, and Presenting Usability Metrics . Elsevier Science.
ARYPUTRA, E. R., HANGGARA, B. T., & WICAKSONO, S. A. 2020. Pengembangan Sistem Informasi Akademik Sekolah Sepak Bola berbasis Website menggunakan Metode Waterfall ( Studi Kasus : SSB Sumbersari FC ) . 4 (5), 1584 – 1590.
IRAWAN JANUAR. 2018. Penerapan Mahasiswa Berbasis Android Menggunakan Teknologi Qr Code Dan Geofence . xvi + 117 Halaman.
MASSE, M. 2011. REST API Design Rulebook: Designing Consistent RESTful Web Service Interfaces . “ O’Reilly Media, Inc.”
PERMANA, I. G. T., RUSDIANTO, D. S., & FANANI, L. 2020. Pengembangan Sistem Presensi berbasis Lokasi menggunakan Geofence WiFi dan REST API pada Fakultas Ilmu Komputer Universitas Brawijaya. Jurnal Pengembangan Teknologi Informasi Dan Ilmu Komputer , 3 (9), 9305 – 9313.
PRESSMAN, R. S., & BRUCE R. MAXIM, D. 2014. Software Engineering: A
Practitioner’s Approach . McGraw-Hill Education.
RICHARDSON, L., AMUNDSEN, M., & RUBY, S. 2013. RESTful Web APIs: Services for a Changing World . O ’Reilly Media.
SOMMERVILLE, IAN. 2016. Software Engineering 6TH Edition Synopses and Reviews Table of Contents . 1 – 7.
SULAEMAN, Y. S. 2019. Semua Bisa Menjadi Programmer Laravel Basic . Elex Media Komputindo.