0% menganggap dokumen ini bermanfaat (0 suara)
2 tayangan10 halaman

Rel 3

Penelitian ini membahas pengembangan sistem absensi berbasis web menggunakan teknologi QR code di STIKOM Tunas Bangsa, Pematang Siantar, dengan metode Agile. Sistem ini bertujuan untuk meningkatkan efisiensi, akurasi data, dan akses informasi kehadiran secara real-time, serta mengurangi kesalahan dalam pencatatan manual. Hasil penelitian menunjukkan bahwa kombinasi QR code dan akses web menawarkan solusi inovatif untuk manajemen absensi yang lebih efektif.
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
0% menganggap dokumen ini bermanfaat (0 suara)
2 tayangan10 halaman

Rel 3

Penelitian ini membahas pengembangan sistem absensi berbasis web menggunakan teknologi QR code di STIKOM Tunas Bangsa, Pematang Siantar, dengan metode Agile. Sistem ini bertujuan untuk meningkatkan efisiensi, akurasi data, dan akses informasi kehadiran secara real-time, serta mengurangi kesalahan dalam pencatatan manual. Hasil penelitian menunjukkan bahwa kombinasi QR code dan akses web menawarkan solusi inovatif untuk manajemen absensi yang lebih efektif.
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd

Jurnal Manajemen Informatika Jayakarta P-ISSN: 2746-5985

Volume 4, Nomor 1, Februari 2024: halaman 51- 60 e-ISSN: 2797-0930

DOI: [Link]

PERANCANGAN ABSENSI QR CODE MAHASISWA


BERBASIS WEBSITE PADA STIKOM TUNAS BANGSA
PEMATANG SIANTAR MENGGUNAKAN METODE
AGILE
1
Muhammad Rafai*, 2 Solikhun, 3M. Safii
1,2,3
Teknik Informatika, STIKOM Tunas Bangsa, Pematang Siantar, Indonesia
Jln. Sudirman Blok A No. 1, 2, dan 3 Pematangsiantar, Sumatera Utara, Indonesia

*e-mail: 1*rafaimhd123@[Link], 2solikhun@[Link],


3
[Link]@[Link]

Abstrak
Penelitian ini membahas implementasi sistem absensi berbasis web yang memanfaatkan teknologi QR
scanner untuk mencatat kehadiran individu, khususnya dalam lingkungan pendidikan. Laporan ini
juga menyoroti manfaat utama dari pendekatan ini, seperti efisiensi proses, akurasi data, dan
kemudahan akses informasi yang real-time. Sistem absensi berbasis web menggunakan QR scanner
bukan hanya meningkatkan efektivitas administratif, tetapi juga memberikan pengalaman yang lebih
modern dan interaktif bagi individu yang harus diabsen. Ini membantu mengurangi risiko kesalahan
dalam pencatatan absensi manual dan memberikan akses data kehadiran yang lebih cepat dan akurat.
Dalam penelitian ini, penulis meggunakan beberapa metode untuk mengumpulkan data yaitu dengan
observasi dan studi literatur. Penulis menggunakan berbagai sumber dokumentasi online sebagai
sumber data yang di butuhkan oleh laporan ini. Adapun dokumen yang penulis gunakan adalah
beberapa jurnal terindeks scopus, e-book, dan beberapa laman berita digital dalam kurun waktu 5
tahun [Link] metode pengembangan website ini, penulis menggunakan metode Agile. Agile
merupakan salah satu model pengembangan Software Development Life Cycle (SDLC). Hasil
penelitian ini menggabungkan QR code dan akses web, sistem absensi ini menjadi solusi yang relevan
dan inovatif dalam manajemen kehadiran yang efisien.
Kata kunci: Absensi, Agile, Website, QR Code, Manajemen Kehadiran, Efisiensi.

Abstract
This research discusses the implementation of a web-based attendance system that utilizes QR
scanner technology to record individual attendance, especially in an educational environment. The
report also highlights the primary benefits of this approach, such as process efficiency, data
accuracy, and real-time information access. The web-based attendance system using QR scanner
technology not only enhances administrative effectiveness but also provides a more modern and
interactive experience for individuals who need to be accounted for. This helps reduce the risk of
errors in manual attendance recording and provides faster and more accurate access to attendance
data. In this research, the author used various methods to collect data, including observation and a
literature review. The author relied on various online documentation sources as data references for
this report. The documents used by the author included several Scopus-indexed journals, e-books, and
various digital news pages from the past 5 years. For the development method of this website, the
author employed the Agile methodology. Agile is one of the models of the Software Development Life

This work is licensed under a Creative Commons Attribution 4.0 International License.
[Link]

51
Jurnal Manajemen Informatika Jayakarta P-ISSN: 2746-5985
Volume 4, Nomor 1, Februari 2024: halaman 51- 60 e-ISSN: 2797-0930

DOI: [Link]

Cycle (SDLC). The results of this research, which combine QR codes and web access, make this
attendance system a relevant and innovative solution for efficient attendance management.
Keywords: Attendance, Agile, Website, QR Code, Attendance Management, Efficiency.

1 Pendahuluan (or Introduction)


Dalam lingkungan pendidikan, manajemen absensi merupakan aspek krusial yang
mempengaruhi kehadiran dan keterlibatan mahasiswa dalam proses pembelajaran. Tradisionalnya,
absensi sering dicatat secara manual oleh dosen atau staf administrasi, yang dapat memakan waktu
dan rentan terhadap kesalahan. Namun, dengan kemajuan teknologi, terutama dengan pemanfaatan
QR scanner berbasis web, proses absensi dapat ditingkatkan secara signifikan[1].
Absensi menggunakan QR scanner berbasis web adalah solusi modern yang memanfaatkan
teknologi QR code untuk mencatat kehadiran mahasiswa dengan lebih efisien dan akurat. QR code
adalah pola kotak-kotak hitam dan putih yang dapat dengan mudah diakses dan di-scan oleh
perangkat elektronik, seperti kamera smartphone. Dengan mengadopsi teknologi ini, universitas atau
institusi pendidikan dapat meningkatkan efektivitas dan efisiensi dalam manajemen absensi
mahasiswa yang jumlahnya banyak[2], [3].
Melalui pendekatan ini, kita dapat mengatasi beberapa tantangan dalam manajemen absensi
mahasiswa, seperti waktu yang terbuang, risiko kesalahan, dan kurangnya data yang akurat. Dengan
menerapkan solusi QR scanner berbasis web, universitas dapat menciptakan lingkungan pembelajaran
yang lebih canggih, berinteraksi, dan adaptif sesuai dengan kebutuhan mahasiswa dan perkembangan
teknologi.

2 Tinjauan Literatur (or Literature Review)


Penelitian ini membahas implementasi metode agile dalam pengembangan sistem absensi
menggunakan QR Code Berbasis website. Metode Agile merupakan pendekatan pengembangan
perangkat lunak yang menjalankan fleksibilitas, adaptabilitas, dan kolaborasi dalam setiap tahap
pengembangan. Prinsip-prinsip Agile dirancang untuk mengatasi tantangan dalam pengembangan
yang berubah-ubah dan kompleks, serta untuk memungkinkan tim untuk memberikan nilai secara
iterative kepada pengguna [4]. User stories adalah Deskripsi pendek tentang fungsionalitas yang di
inginkan oleh pengguna dalam sistem. Proses identifikasi user stories melibatkan pemahaman yang
mendalam tentang kebutuhan pengguna dan pemangku kepentingan [6]. Website dikenal juga sebagai
situs, situs web, atau portal. Ini merupakan koleksi halaman web yang saling terhubung satu sama
lain. Halaman pertama dari sebuah website disebut halaman utama (home page), sedangkan halaman-
halaman lainnya disebut halaman web (web page) secara individu [8]. Menurut [9] website dibagi
menjadi dua, yaitu Website Statis dan Website Dinamis. QR code (Quick Response code) adalah jenis
kode matriks dua dimensi yang dapat menyimpan informasi dalam bentuk simbol kotak-hitam-putih
pada latar belakang putih atau sebaliknya. QR code dapat menyimpan berbagai jenis data, seperti teks,
URL, nomor telepon, alamat email, informasi kontak, dan banyak lagi [1].
Penelitian ini menghasilkan sebuah website absensi dengan QR Code yang dikembangkan
dengan metode agile. Website ini diharapkan menjadi solusi dari tantangan dalam manajemen absensi
mahasiswa, seperti waktu yang terbuang, resiko kesalahan, dan keakuratan data absensi.

3 Metode Penelitian
Penulis menggunakan berbagai sumber dokumentasi online sebagai sumber data yang di butuhkan
oleh laporan ini. Adapun dokumen yang penulis gunakan adalah beberapa jurnal terindeks scopus, e-
book, dan beberapa laman berita digital dalam kurun waktu 5 tahun [Link] metode
pengembangan website ini, penulis menggunakan metode Agile.
3.1 Implementasi Metode Agile Dalam Pengembangan Sistem Absensi
3.1.1. Metode Agile

This work is licensed under a Creative Commons Attribution 4.0 International License.
[Link]

52
Jurnal Manajemen Informatika Jayakarta P-ISSN: 2746-5985
Volume 4, Nomor 1, Februari 2024: halaman 51- 60 e-ISSN: 2797-0930

DOI: [Link]

Dalam implementasi system absensi QR Code berbasis website. Menurut [5] penggunaan
metode Agile membawa sejumlah manfaat signifikan seperti :
a. Fleksibilitas Terhadap Perubahan Kebutuhan.
Metode Agile memungkinkan tim untuk dengan cepat menyesuaikan perubahan kebutuhan
yang mungkin timbul selama pengembangan. Dalam proyek absensi QR Code, kebutuhan
pengguna dan pemangku kepentingan dapat berubah seiring waktu. Dengan pendekatan
Agile, tim dapat dengan mudah mengakomodasi perubahan ini tanpa menghambat kemajuan
proyek.
b. Pengiriman Iteratif dan Berkelanjutan.
Agile memungkinkan pengiriman produk dalam iterasi pendek yang disebut sprint. Setiap
sprint menghasilkan bagian yang berfungsi dari sistem. Dalam konteks absensi QR Code, ini
berarti fitur-fitur penting dapat diuji dan digunakan oleh pengguna dalam waktu yang lebih
singkat. Hal ini meningkatkan kemampuan untuk memberikan nilai kepada pengguna secara
berkala.
c. Transparasi Dan Kolaborasi.
Metode Agile mendorong transparansi dalam semua aspek proyek. Kolaborasi antara anggota
tim dan pemangku kepentingan diaktifkan, memungkinkan berbagi pengetahuan dan solusi
yang lebih baik.

Gambar 1 Metode Agile


3.1.2 Penentuan User Stories
Dalam perancangan sistem absensi QR Code berbasis website, berikut adalah user stories yang
di identifikasi:
a. Sebagai mahasiswa, saya ingin mendaftarkan diri dengan menyediakan informasi seperti
nama dan NIM.
b. Sebagai administrator, saya ingin memiliki halaman dashboard untuk melihat statistik
kehadiran mahasiswa dalam mata kuliah dan kelas tertentu.
c. Sebagai dosen, saya ingin memiliki opsi untuk memberi izin khusus kepada mahasiswa yang
memerlukan pencatatan manual kehadiran.

3.1.2 Pembagian Dalam Sprint


Setelah mengidentifikasi user strory, Langkah selanjutnya adalah mengelompokkan dan
mengatur mereka ke dalam sprint-sprint. Sprint adalah periode waktu singkat dimana pengembang
fokus pada pengembangan fitur-fitur tertentu [7]. Pengelompokan ini membantu dalam merencanakan
dan mengatur alur kerja pengembangan. Hasil sprint dari identifikasi User Stories di atas adalah
sebagai berikut :
a. Sprint 1 : Pendaftaran dan Basis Data
b. Sprint 2 : Membuat Antarmuka Pengguna dan Pencatatan Kehadiran
c. Sprint 3 : Mengimplementasikan Library untuk Pembuatan dan Pembaca QR Code
d. Sprint 4 : Membuat Manajemen Absensi
e. Sprint 5 : Peningkatan Fungsionalitas dan Pengujian

3.2 Perancangan Sistem Absensi QR Code Berbasis Website


3.2.1 Front-End

This work is licensed under a Creative Commons Attribution 4.0 International License.
[Link]

53
Jurnal Manajemen Informatika Jayakarta P-ISSN: 2746-5985
Volume 4, Nomor 1, Februari 2024: halaman 51- 60 e-ISSN: 2797-0930

DOI: [Link]

Front-end adalah bagian dari sistem yang bertugas menyajikan tampilan kepada pengguna.
Tugas utamanya adalah mengembangkan komponen-komponen visual dalam sistem dan bertanggung
jawab atas antarmuka pengguna [10]. Menurut [11] skill fundamental yang harus di kuasai oleh front-
end developer yaitu HTML, CSS, dan Javascript.
3.2.3 Flowchart
Flowchart adalah representasi grafis dari alur atau urutan langkah-langkah dalam suatu proses
atau program. Flowchart digunakan untuk menggambarkan secara visual bagaimana informasi atau
data mengalir melalui berbagai tahap atau keputusan dalam suatu sistem atau aktivitas [12].
Dalam flowchart, setiap langkah atau tindakan direpresentasikan dengan simbol-simbol
tertentu yang menggambarkan jenis aktivitas yang dilakukan. berikut adalah representasi Flowchart
untuk proses absensi menggunakan QR Code berbasis website :

Gambar 2 Flowchart Absensi QR Code


3.3 Perancangan Sistem Absensi QR Code Berbasis Website
3.3.1 React JS
React JS adalah sebuah Pustaka (library) JavaScript open-source yang popular untuk
membangun antarmuka pengguna pada aplikasi web. Dikembangkan oleh Facebook, ReactJS
memungkinkan pengembang untuk membuat komponen-komponen tampilan yang dinamis dan dapat
di atur ulang (reusable). React JS menggunakan pendekatan komponen, di mana antarmuka pengguna
dibangun dari berbagai komponen kecil yang dapat berinteraksi satu sama lain[13].
3.3.2 MongoDB
MongoDB adalah sebuah sistem manajemen basis data (DBMS) yang berbasis dokumen dan
non-relasional. Secara ilmiah, MongoDB adalah sebuah perangkat lunak yang digunakan untuk
menyimpan dan mengelola data dalam bentuk dokumen yang fleksibel [14].
Dalam MongoDB, data diatur dalam koleksi (collections) yang setara dengan tabel dalam
sistem basis data relasional. Namun, perbedaannya terletak pada struktur data yang disimpan dalam
masing-masing koleksi. Koleksi dalam MongoDB tidak memiliki skema yang tetap seperti tabel

This work is licensed under a Creative Commons Attribution 4.0 International License.
[Link]

54
Jurnal Manajemen Informatika Jayakarta P-ISSN: 2746-5985
Volume 4, Nomor 1, Februari 2024: halaman 51- 60 e-ISSN: 2797-0930

DOI: [Link]

dalam basis data relasional. Setiap dokumen dalam koleksi dapat memiliki struktur yang berbeda,
sehingga MongoDB cocok untuk menyimpan data yang beragam dan dinamis[15].
Berdasarkan penjelasan MongoDB di atas, kita dapat merancang koleksi-koleksi yang sesuai
untuk mengelola data dalam system basis data MongoDB. Untuk kasus ini, kita dapat membuat tiga
koleksi: “Admins” untuk data administrator, “Students” untuk data mahasiswa, dan
“AttencanceRecords” untuk data absensi yang tersimpan.
a. Admins Collection
Koleksi ini akan berisi data mengenai administrator sistem. Setiap dokumen dalam koleksi ini
mungkin mencakup informasi seperti nama, alamat email, dan kata sandi. Contoh dokumen dalam
koleksi ini dapat tampak seperti ini:

Gambar 3 Admins Collection


b. Students Collection
Koleksi ini akan menyimpan data terkait dengan mahasiswa. Setiap dokumen dalam koleksi ini
mungkin berisi informasi seperti nama, NIM, dan kelas. Contoh dokumen dalam koleksi ini dapat
terlihat seperti ini:

Gambar 4 Students Collection


c. AttendanceRecords Collection
Koleksi ini akan digunakan untuk menyimpan data absensi. Setiap dokumen dalam koleksi ini akan
mencatat informasi seperti tanggal absensi, ID mahasiswa, dan status kehadiran. Contoh dokumen
dalam koleksi ini bisa terlihat seperti ini:

Gambar 5 AttendanceRecords Collection


3.3.3 QR Code
QR code diciptakan oleh perusahaan Jepang bernama Denso Wave pada tahun 1994 sebagai
solusi untuk melacak mobil di jalur produksi. Sejak itu, QR code telah menjadi populer dan banyak
digunakan di berbagai bidang, termasuk pemasaran, logistik, periklanan, teknologi, dan banyak lagi
[16].
Keunggulan QR Code Meliputi :
a. Kapasitas Penyimpanan Tinggi

This work is licensed under a Creative Commons Attribution 4.0 International License.
[Link]

55
Jurnal Manajemen Informatika Jayakarta P-ISSN: 2746-5985
Volume 4, Nomor 1, Februari 2024: halaman 51- 60 e-ISSN: 2797-0930

DOI: [Link]

Qr Code Dapat menyimpan lebih banyak informasi dibandingkan dengan kode batang
tradisional. Karena informasi disimpan dalam dua dimensi, yaitu horizontal dan vertical.
b. Kecepatan Pembacaan Yang Tinggi
QR code dapat dengan cepat dibaca dan diuraikan oleh perangkat lunak pemindai,
membuatnya efisien untuk mendapatkan informasi.

3.3.4 Penggunaan Library React QR Code Scanner dan Generator


Library React QR Code Scanner adalah seperangkat komponen dan utilitas yang dirancang
untuk memudahkan integrasi pemindaian QR code ke dalam aplikasi web yang dibangun dengan
React. Library ini menyediakan komponen React yang dapat dengan mudah diintegrasikan ke dalam
komponen kita, sehingga pengguna dapat menggunakan kamera perangkat untuk memindai QR code.
Dalam Penggunaan nya kita harus melakukan Langkah-langkah berikut :
a. Instalasi
Kita perlu menginstall library React QR Code Scanner menggunakan manajer paket seperti
NPM atau Yarn.
b. Integrasi Komponen
Kita dapat mengimport dan menggunakan komponen QR Code Scanner yang di sediakan oleh
library dalam komponen React kita. Komponen ini akan menampilkan antarmuka kamera dan
mendeteksi QR Code yang di arahkan ke kamera.
c. Pemindaian QR Code
Ketika pengguna mengarahkan kamera ke QR Code, komponen akan mendeteksi kode
tersebut dan memberikan hasilnya kepada kita melalui prop atau callback.

Library React QR Code Generator adalah seperangkat komponen dan fungsi yang digunakan
untuk menghasilkan QR Code secara dinamis dalam aplikasi React. Dengan menggunakan library ini,
anda dapat dengan mudah membuat QR Code dengan berbagai jenis data, seperti teks, URL, nomor
telepon, dan lainnya
Langkah-langkah untuk menggunakan library React QR Code Generator adalah :
a. Instalasi
Kita perlu menginstall library React QR Code Generator menggunakan manajer paket seperti
NPM atau Yarn.
b. Integrasi Komponen
Kita dapat mengimpor komponen QR Code Generator atau fungsi-fungsi yang disediakan
oleh library ke dalam komponen Kita. Kita akan memberikan data yang ingin di ubah menjadi
QR code.
c. Membuat QR Code
Komponen atau fungsi akan menghasilkan tampilan QR code berdasarkan data yang kita berikan.
Kita dapat menampilkan QR code ini dalam komponen yang kita inginkan.

4 Hasil dan Pembahasan


Berdasarkan penjelasan mengenai alur dan penggunaan teknologi sebelumnya, kita dapat
mengamati hasil implementasinya seperti yang tertera di bawah ini:
a. Tampilan Landing Page
Tampilan landing page adalah halaman pertama yang dilihat oleh pengunjung ketika mereka
mengakses sebuah website. Halaman ini bertuliskan “Selamat Datang Di Absensi STIKOM. Absensi
berbasis website yang memanfaatkan fitur kamera pada perangkat untuk membaca QR Code”, dan
sebuah CTA (Call To Action) button yang bertuliskan “Scan Sekarang!” seperti pada gambar 6
berikut :

This work is licensed under a Creative Commons Attribution 4.0 International License.
[Link]

56
Jurnal Manajemen Informatika Jayakarta P-ISSN: 2746-5985
Volume 4, Nomor 1, Februari 2024: halaman 51- 60 e-ISSN: 2797-0930

DOI: [Link]

Gambar 6 Halaman Landing Page


b. Tampilan Halaman Register
Halaman registrasi (atau halaman pendaftaran) adalah halaman dalam sebuah website yang
dirancang khusus untuk memungkinkan pengguna untuk membuat akun. Untuk registrasi dapat di
lakukan dengan cukup mudah, hanya dengan mengisi nama, email, dan password admin. Untuk
halaman registrasi dapat di lihat pada gambar 7 berikut :

Gambar 7 Halaman Registrasi


c. Tampilan Halaman Login
Halaman login adalah halaman yang digunakan untuk masuk ke dalam website ini dan agar
dapat mengakses fitur fitur di dalam website ini. Untuk melakukan login, pengguna hanya cukup
memasukkan email dan password yang sudah terdaftar. Untuk halaman Login dapat di lihat pada
gambar 8 berikut :

Gambar 8 Halaman Login


d. Tampilan Halaman Daftar Mahasiswa
Halaman daftar mahasiswa dapat di akses dengan mudah melalui navbar. Pada halaman ini,
admin dapat melihat siapa saja mahasiswa yang sudah terdaftar. Untuk tampilan halaman daftar
Mahasiswa, dapat di lihat pada gambar 9 berikut :

Gambar 9 Tampilan halaman daftar mahasiswa yang sudah di tambahkan


Untuk menambah mahasiswa, pengguna dapat pindah ke halaman tambah mahasiswa dengan
melakukan klik pada tombol “Tambah Mahasiswa”. Pada halaman Tambah Mahasiswa, pengguna

This work is licensed under a Creative Commons Attribution 4.0 International License.
[Link]

57
Jurnal Manajemen Informatika Jayakarta P-ISSN: 2746-5985
Volume 4, Nomor 1, Februari 2024: halaman 51- 60 e-ISSN: 2797-0930

DOI: [Link]

hanya perlu mengisi data nama, NIM, dan Kelas untuk mahasiswa yang ingin di tambahkan. Untuk
tampilan halaman Tambah Mahasiswa, dapat di lihat pada gambar 10 berikut :

Gambar 10 Tampilan halaman tambah mahasiswa


e. Tampilan Cetak QR Code
Halaman cetak QR Code adalah sebuah halaman yang berfungsi untuk mencetak atau membuat
QR Code untuk absensi. Halaman ini dapat di akses dengan mudah melalui halaman Daftar
Mahasiswa, lalu klik pada tombol “Cetak QR” untuk mahasiswa yang di inginkan. Satu QR Code
hanya untuk satu mahasiswa. Untuk Tampilan halaman cetak QR Code dapat di lihat pada gambar 11
berikut ini :

Gambar 11 Tampilan halaman pembuatan QR Code


f. Tampilan Halaman Scan
Untuk dapat melakukan absensi scan QR Code, pengguna/admin harus melakukan login
terlebih dahulu. Jika user sudah melakukan login, maka user akan di tunjukkan halaman Room.
Room ini berfungsi untuk mengelompokkan setiap pertemuan dan mata kuliah untuk setiap kelas.
Tampilan room dapat di lihat pada gambar 12.

Gambar 12 Halaman room untuk scan absensi setiap matakuliah yang sudah di buat
Pengguna juga dapat menambah Room mata kuliah baru dengan klik tombol “Buat Ruangan”.
User dapat membuat room baru dengan mengisi nama ruangan, kelas, dan jam masuk untuk mata
kuliah yang di inginkan. Untuk tampilan halaman buat ruangan, dapat di lihat pada gambar 13 berikut
ini :

Gambar 13 Halaman buat ruangan

This work is licensed under a Creative Commons Attribution 4.0 International License.
[Link]

58
Jurnal Manajemen Informatika Jayakarta P-ISSN: 2746-5985
Volume 4, Nomor 1, Februari 2024: halaman 51- 60 e-ISSN: 2797-0930

DOI: [Link]

Jika sudah mempunyai room yang di inginkan, kita masuk ke room tersebut dengan cara klik
room tersebut, maka akan di alihkan ke halaman scan room tersebut. Untuk melakukan scan absensi,
mahasiswa hanya perlu menunjukkan QR Code miliknya ke arah kamera, maka sistem absensi ini
akan membaca QR Code tersebut secara otomatis, dan akan menampilkan datanya pada sebelah kanan
kamera, dan mencatat kehadiran pada daftar hadir di bawah. Untuk tampilan setelah berhasil scan
kehadiran bisa di lihat pada gambar 14 berikut ini :

Gambar 14 Halaman room scan saat berhasil scan QR Code mahasiswa

Apabila mahasiswa berhalangan untuk hadir, pengguna dapat memasukkan NIM nahasiswa
secara manual melalui form input yang di sediakan, lalu pengguna dapat melakukan klik pada tombol
“Sakit” atau “Izin” yang berada di sebelah form input NIM tersebut. Untuk tampilan jika mahasiswa
Sakit, dapat di lihat pada gambar 15 di bawah ini :

Gambar 15 Halaman room scan saat input NIM mahasiswa yang sakit
Pengguna juga dapat melakukan rekap data absensi dari tiap tiap Room yang di inginkan
dengan melakukan klik pada tombol “Download Data” yang ada pada tiap tiap Room.
.
5 Kesimpulan (or Conclusion)
Dalam periode Praktek Kerja Lapangan ini, kami berhasil mengimplementasikan solusi absensi
berbasis QR Code dengan menggunakan pendekatan metode Agile. Melalui penerapan Agile, kami
mampu mengatasi tantangan kompleks dalam pengembangan sistem, sambil tetap responsif terhadap
perubahan kebutuhan dan umpan balik pengguna.
Dalam penerapan teknologi, kami memilih menggunakan React JS sebagai framework front-
end dan MongoDB sebagai basis data. Kombinasi ini memberikan tampilan antarmuka yang responsif
dan fungsionalitas penyimpanan data yang efisien. Kami juga memanfaatkan library QR scanner dan
generator untuk mendukung fitur pencatatan kehadiran berbasis QR Code.
Dalam keseluruhan, penggunaan metode Agile telah membantu kami merancang dan
mengembangkan sistem absensi berbasis QR Code dengan lebih efektif dan responsif. Proses ini
mengajarkan kami pentingnya kolaborasi tim, adaptabilitas terhadap perubahan, dan pengiriman
iteratif untuk mencapai solusi yang berkualitas tinggi. Kami berharap bahwa kontribusi kami dapat
memberikan manfaat nyata bagi pengguna dan memberikan inspirasi untuk pengembangan teknologi
yang lebih baik di masa depan.
Pada penulisan laporan ini, tentu saja masih banyak kekurangan. Oleh karena itu ada beberapa
hal yang perlu di perhatikan dalam pengembangan sistem ini kedepannya, antara lain :
a. Peningkatan keamanan

This work is licensed under a Creative Commons Attribution 4.0 International License.
[Link]

59
Jurnal Manajemen Informatika Jayakarta P-ISSN: 2746-5985
Volume 4, Nomor 1, Februari 2024: halaman 51- 60 e-ISSN: 2797-0930

DOI: [Link]

Meneliti dan menerapkan metode keamanan tambahin pada sistem, seperti otentikasi ganda
atau enkripsi data, untuk memastikan integritas dan privasi informasi..
b. Pengembangan aplikasi mobile
Mengembangkan aplikasi mobile yang terintegrasi dengan sistem absensi berbasis QR Code,
sehingga pengguna dapat dengan mudah mengaksesnya melalui ponsel mereka.

Referensi (Reference)
[1] D. Sugiana and D. Muhtadi, “Augmented Reality Type QR Code :,” 2019.
[2] F. Lanvino, A. Y. Sukhoco, W. Aliman, and Suryanto, “PERANCANGAN SISTEM
INFORMASI PENCATATAN KEHADIRAN MAHASISWA DENGAN TEKNOLOGI QR
CODE,” Antivirus J. Ilm. Tek. Inform., vol. 14, no. 2, pp. 135–151, Nov. 2020, doi:
10.35457/antivirus.v14i2.1170.
[3] W. P. Rahayu, “IMPLEMENTASI SISTEM ABSENSI QR BARCODE DALAM
PENEGAKAN DISIPLIN PEGAWAI PEMERINTAH KOTA SEMARANG PADA MASA
PANDEMI”.
[4] I. Larasati, A. N. Yusril, and P. A. Zukri, “Systematic Literature Review Analisis Metode Agile
Dalam Pengembangan Aplikasi Mobile,” SISTEMASI, vol. 10, no. 2, p. 369, May 2021, doi:
10.32520/stmsi.v10i2.1237.
[5] S. H. Nova, A. P. Widodo, and B. Warsito, “Analisis Metode Agile pada Pengembangan Sistem
Informasi Berbasis Website: Systematic Literature Review,” [Link], vol. 21, no. 1, pp.
139–148, Feb. 2022, doi: 10.33633/tc.v21i1.5659.
[6] M. A. Dewi and R. Irham, “Penerapan Agile Scrum Pada Pengembangan Aplikasi Bimbingan
Daring Skripsi Mahasiswa,” 2021.
[7] K. P. Ergy Rahmatan Ramadhan, “Penerapan Metode Agile Pada Development Aplikasi
Pengelolaan Data Magang Berbasis Web Menggunakan Framework Laravel,” Apr. 2023, doi:
10.5281/ZENODO.7812416.
[8] M. H. Romadhon and Y. Yudhistira, “Sistem Informasi Rental Mobil Berbsasis Android Dan
Website Menggunakan Framework Codeigniter 3 Studi Kasus : CV Kopja Mandiri,” vol. 2, no.
1, 2021.
[9] S. J. Kuryanti and M. Kom, “Pembuatan Website Sebagai Sarana Promosi Pariwisata,” vol. 2,
2018.
[10] “Pengembangan Front End Sistem Informasi Akuntansi Menggunakan Kerangka Kerja
[Link].”
[11] B. Sisephaputra, A. Febrianti, and F. Septiawan, “Pengembangan Aplikasi Penyedia Layanan
Pembelajaran Keahlian Digital Berbasis Website,” vol. 04, no. 02, 2023.
[12] S. Syamsiah, “Perancangan Flowchart dan Pseudocode Pembelajaran Mengenal Angka dengan
Animasi untuk Anak PAUD Rambutan,” STRING Satuan Tulisan Ris. Dan Inov. Teknol., vol. 4,
no. 1, p. 86, Aug. 2019, doi: 10.30998/string.v4i1.3623.
[13] P. D. Arnesia, N. A. Pratama, and F. Sjafrina, “APLIKASI ARTIFICIAL INTELLIGENCE
UNTUK MENDETEKSI OBJEK BERBASIS WEB MENGGUNAKAN LIBRARY
TENSORFLOW JS, REACT JS DAN COCO DATASET,” JSiI J. Sist. Inf., vol. 9, no. 1, pp.
62–69, Mar. 2022, doi: 10.30656/jsii.v9i1.4243.
[14] A. Makris, K. Tserpes, G. Spiliopoulos, D. Zissis, and D. Anagnostopoulos, “MongoDB Vs
PostgreSQL: A comparative study on performance aspects,” GeoInformatica, vol. 25, no. 2, pp.
243–268, Apr. 2021, doi: 10.1007/s10707-020-00407-w.
[15] A. Chauhan, “A Review on Various Aspects of MongoDb Databases,” Int. J. Eng. Res., vol. 8,
no. 05.
[16] I. Muhammad, M. Masnur, and A. G. Syam, “APLIKASI QR CODE SEBAGAI SARANA
PENYAMPAIAN INFORMASI POHON DIKEBUN RAYA JOMPIE,” J. Sintaks Log., vol. 1,
no. 1, pp. 33–41, Jan. 2021, doi: 10.31850/jsilog.v1i1.694.

This work is licensed under a Creative Commons Attribution 4.0 International License.
[Link]

60

Anda mungkin juga menyukai