RANCANG BANGUN SISTEM PENCATATAN

KEHADIRAN MENGGUNAKAN QR CODE

BERBASIS ANDROID
Reinaldo Putra1, Soebandi2, Antonius.3
123
Teknik Informatika, STMIK Widya Dharma, Pontianak
e-mail: 1reinaldoputra288@gmail.com, 2soebandi@gmail.com, 3antoniusok@yahoo.com

Abstract

The activity of recording the presence of was something that must be done in the world education both at
the level of elementary school to college. Especially in college, there is still a college who use the card attend
college as an instrument for record the presence. This still lacks because the presence card could potentially
damage and loss. Therefore, this research was done to deal with the problem on a card. The authors use descriptive
research design. While the data collection method used were literature study which includes scientific books,
scientific paper, and scientific journals. The system analysis technique used is object oriented technique with
modeling Unified Modeling Language (UML). Application design technique used mobile programming framework
with React Native and Firebase Real Time Database for database system. The result of this research is produced
a system of recording presence whose can be solve the lacks on the present card use QR code. Based on the
research that has been done, the system that has been built in the study makes it easier to record presence while
overcoming deficiencies in college attending cards.

Keywords: Presence Record, QR Code, Android, React Native, Firebase

Abstrak

Kegiatan pencatatan kehadiran merupakan hal yang wajib dilakukan dalam dunia pendidikan baik pada
jenjang sekolah dasar hingga perguruan tinggi. Khususnya di perguruan tinggi, masih ada perguruan tinggi yang
menggunakan kartu hadir kuliah sebagai alat untuk melakukan pencatatan kehadiran. Hal ini masih memiliki
kekurangan karena kartu hadir kuliah dapat berpotensi mengalami kerusakan serta kehilangan. Oleh sebab itu,
penelitian ini dilakukan untuk mengatasi masalah yang ada pada kartu hadir kuliah. Penulis menggunakan desain
penelitian deskriptif sebagai rancangan penelitian. Metode pengumpulan data yang digunakan adalah metode studi
literatur yang meliputi buku-buku ilmiah, laporan penelitian, dan jurnal ilmiah. Teknik analisis sistem yang
digunakan adalah teknik berorientasi objek dengan pemodelan Unified Modeling Language (UML). Teknik
perancangan aplikasi menggunakan pemrograman mobile dengan framework React Native dan Firebase Real Time
Database untuk mengelola database sistem. Hasil yang dicapai dalam penelitian ini menghasilkan sistem
pencatatan kehadiran yang dapat mengatasi kekurangan yang ada pada kartu hadir kuliah menggunakan QR code.
Berdasarkan penelitian yang telah dilakukan, sistem yang telah dibangun dalam penelitian ini mempermudah
kegiatan pencatatan kehadiran sekaligus mengatasi kekurangan pada kartu hadir kuliah.

Kata Kunci: Pencatatan Kehadiran, QR Code, Android, React Native, Firebase Real Time Database

1. PENDAHULUAN

Perkembangan teknologi yang pesat dalam era digital telah mengubah berbagai aspek kegiatan di seluruh
dunia, termasuk di Indonesia. Saat ini kebutuhan teknologi di dunia pendidikan Indonesia cukup tinggi baik bagi
para siswa, guru maupun orang tua, demikian hasil survei dari National Education Technology Assessment
Readliness (NETr) yang dikembangkan oleh Hewlett-Packard (HP) pada tahun 2014.
Sebagai salah satu kegiatan pendidikan yang wajib dilakukan, pencatatan kehadiran dapat menjadi salah
satu kegiatan pendidikan yang dapat berkolaborasi dengan teknologi. Dari kegiatan ini dapat dinilai tingkat
kerajinan dan kedisiplinan para peserta didik. Khususnya pada perguruan tinggi kegiatan pencatatan kehadiran
biasanya menggunakan Kartu Hadir Kuliah (KHK).
Penggunaan KHK dilakukan pada setiap pertemuan seluruh mata kuliah, awalnya mahasiswa akan
memberi tanggal dan menandatangani KHK untuk dikumpulkan kepada dosen sebagai bukti bahwa mahasiswa
tersebut hadir pada pertemuan tersebut. Setelah itu dosen juga mengedarkan absen kolektif untuk ditandatangani
oleh mahasiswa. Diakhir pertemuan dosen akan merekapitulasi nilai kehadiran mahasiswa dengan cara mahasiswa
mengumpulkan KHK kepada dosen sehingga mahasiswa dengan persentase kehadiran di bawah 75% dapat terlihat
dan akan dilarang untuk mengikuti Ujian Akhir Semester (UAS).

1
 2

Terdapat kelemahan dalam penggunaan kartu hadir kuliah dan absen kolektif sebagai alat untuk mencatat
kehadiran karena kartu hadir kuliah dan absen kolektif dapat berpotensi mengalami kerusakan dan hilang. Maka
untuk mengatasi atau meminimalkan resiko tersebut diperlukan sebuah sistem pencatatan kehadiran yang dapat
merekam seluruh kegiatan pencatatan kehadiran setiap perkuliahan.
Melihat kelemahan yang ada pada kartu hadir kuliah penulis merancang sebuah sistem pencatatan
kehadiran menggunakan Qr code agar dapat mengatasi potensi kerusakan dan kehilangan yang ada pada Kartu
Hadir Kuliah. Sehingga dalam melakukan kegiatan pencatatan kehadiran mahasiswa dan dosen tidak perlu
mengkhawatirkan data kehadiran yang dapat berpotensi hilang atau rusak serta jika ketua program studi ingin
mendapatkan laporan kehadiran mahasiswa untuk melakukan cek terhadap mahasiswa dengan persentase
kehadiran di bawah 75% dapat lebih mudah karena sub bagian akademik dapat mencetak laporan tersebut untuk
semua mata kuliah. Sistem ini diterapkan dalam ruang lingkup STMIK Widya Dharma Pontianak.

2. METODE PENELITIAN

2.1 Metode Penelitian

Metode penelitian yang digunakan penulis dalam menyusun penelitian ini antara lain: Rancangan
Penelitian, Metode Pengumpulan Data, Teknik Analisis Sistem, dan Teknik Perancangan Sistem.
2.1.1 Rancangan Penelitian
Rancangan penelitian yang digunakan penulis dalam penulisan penelitian ini adalah penelitian deskriptif,
yaitu membuat deskripsi secara sistematis, faktual, dan akurat mengenai fakta-fakta yang terjadi pada objek
penelitian.
2.1.2 Metode Pengumpulan Data
Metode pengumpulan data yang dilakukan adalah dengan cara menelusuri pustaka-pustaka maupun
literatur-literatur yang tersedia dalam objek penelitian. Data ini dapat berupa bahan-bahan pendukung seperti buku
ilmiah, laporan penelitian, dan jurnal penelitian.
2.1.3 Teknik Analisis Aplikasi
Teknik analisis sistem yang digunakan penulis dalam penelitian ini adalah teknik berorientasi objek
dengan alat permodelan, yaitu Unified Modeling Language (UML) yang bertujuan untuk memberikan gambaran
mengenai prosedur-prosedur yang terdapat pada perancangan aplikasi.
2.1.4 Teknik Perancangan Sistem
Teknik Perancangan Sistem yang digunakan dalam membangun sistem ini adalah menggunakan bahasa
pemrograman Javascript untuk platform Android dan React JS untuk platform web. Dan penerapan Firebase
Realtime Database sebagai database.
2.2 Landasan Teori
2.2.1 QR Code
Kode QR (berasal dari “Quick Response”) adalah barcode dua dimensi yang banyak digunakan dengan
cara menempelkan pada produk-produk tertentu. [1]. QR Code adalah jenis kode matriks yang dikembangkan
sebagai kode yang memungkinkan konten yang ada diterjemahkan dengan kecepatan tinggi. [2].
2.2.2 Absensi
Absensi berarti “tidak hadir”, namun bisa dikatakan pula absensi merupakan ketidakhadiran atau
kehadiran suatu objek dalam hal ini adalah orang, dimana orang tersebut terlibat dalam suatu organisasi yang
mengharuskan adanya pemberitahuan tentang keadaan atau kehadiran atau ketidakhadirannya dalam ruang lingkup
organisasi tersebut. [3]. Absensi dapat dikatakan suatu pendataan kehadiran yang merupakan bagian dari aktifitas
pelaporan yang ada dalam sebuah institusi. [4].
2.2.3 Android
Android is the most popular mobile operating system. Based on Linux Kernel, primarily designed for
touchscreen mobile devices at the time this book was written. [5]. Android adalah sistem operasi berbasis Linux
yang dimodifikasi untuk perangkat bergerak (mobile devices) yang terdiri dari sistem operasi, middleware, dan
aplikasi-aplikasi utama. [6].
2.2.4 React Native
React Native is a framework developed by Facebook for building Native mobile apps in JavaScript. It’s
based on ReactJS, a Facebook library for building user interfaces. [7]. React Native is an extension of React, also
written as ReactJS or React.js, which was released in 2015 and designed for native mobile software development.
React Native is written with JavaScript, a well-known programming language, and aims to allow for use of native
mobile functionalities and integration. [8].
2.2.5 Javascript
JavaScript is a programming language that adds interactivity and custom behaviors to our sites. It is a
client-side scripting language, which means it runs on the user’s machine and not on the server, as other web
programming languages such as PHP and Ruby do. [9]. JavaScript is a high-level scripting language that is
interpreted and compiled at run time. This means it requires an engine that’s responsible for interpreting a
program and running it. [10].
2.2.6 Firebase Real Time Database
Real-time Database: Database in Firebase is a cloud-based database and does not need SQL-base
queries to store and fetch data. Database is highly reliable and superfast means that data is maintained even user
 3

lose internet connection. [11]. Firebase Realtime Database merupakan cloud database. Data disimpan dalam
format JSON dan disinkronkan secara realtime ke setiap klien yang terhubung. [12].
2.2.7 ReactJS
ReactJS is a popular library used to create user interfaces. It was built at Facebook to address some of
the challenges associated with large-scale, data-driven websites. [13]. React is a library for building UI. It helps
you define the UI once and for all. Then, when the state of the app changes, the UI is rebuilt to react to the change
and you don’t need to do anything extra. [14].

3. HASIL DAN PEMBAHASAN

3.1 Perancangan Unified Modelling Language (UML)
3.1.1 Use Case Diagram

Gambar 1. Use Case Diagram Sistem Pencatatan Kehadiran

Gambar 1 menggambarkan Use Case diagram dari sistem pencatatan kehadiran mahasiswa yang
dibangun. Pengguna dalam sistem ini terbagi menjadi 3 aktor yaitu sub bagian akademik, dosen, dan
mahasiswa. Ketika membuka sistem pengguna wajib untuk melakukan login terlebih dahulu dengan
memasukkan username dan password agar sistem dapat mengetahui siapa pengguna yang akan menggunakan
sistem tersebut. Jika pengguna adalah sub bagian akademik maka sub bagian akademik dapat membuat jadwal
pengganti mata kuliah dan dapat melihat dan mencetak laporan kehadiran untuk seluruh mata kuliah. Jika
pengguna adalah dosen maka dosen akan mendapat laporan kehadiran mahasiswa untuk setiap mata kuliah
yang diampu oleh dosen tersebut serta dapat mencetaknya juga apabila dosen mempunyai keperluan setelah
itu dosen juga dapat membuka scanner Qr code yang berguna untuk mahasiswa dalam kegiatan pencatatan
kehadiran. Jika pengguna adalah mahasiswa maka mahasiswa dapat melihat jadwal mata kuliah dan dapat
melakukan pencatatan kehadiran sesuai dengan jadwal yang telah ditentukan dengan menggunakan Qr code
yang telah disediakan, setiap pengguna dapat menggunakan fitur logout dari sistem jika diperlukan.
3.1.2 Gambaran Umum Sistem Dengan Sequence Diagram
a. Sequence Diagram Pencatatan Kehadiran
Gambar 2 menggambarkan Sequence diagram dari aktivitas pencatatan kehadiran. Pada diagram ini,
setelah mahasiswa telah melakukan kegiatan login pada sistem maka halaman utama dari menu mahasiswa
akan menarik data jadwal mata kuliah sesuai dengan mata kuliah yang telah diregis oleh mahasiswa tersebut.
Jika mahasiswa ingin melakukan kegiatan pencatatan kehadiran maka mahasiswa harus memilih salah satu
mata kuliah pada hari itu, setelah dipilih sistem akan menampilkan QR Code yang siap digunakan untuk
melakukan pencatatan kehadiran. Setelah kegiatan pencatatan kehadiran telah selesai dilakukan sistem akan
memberikan notifikasi bahwa mahasiswa tersebut telah dinyatakan hadir oleh sistem pada pertemuan tersebut.
 4

Untuk dosen, dosen harus membuka kamera pada platform web agar dapat melakukan scan dan mencatat
kehadiran mahasiswa tersebut, setiap mahasiswa yang telah melakukan kegiatan pencatatan kehadiran maka
nama dari mahasiswa tersebut akan ditampilkan dan otomatis tersimpan kehadirannya oleh sistem.

Gambar 2. Sequence Diagram Pencatatan Kehadiran

b. Sequence Diagram Laporan Kehadiran

Gambar 3 menggambarkan Sequence diagram dari aktivitas laporan kehadiran. Pada diagram ini,
dosen juga dapat melakukan akses terhadap web untuk melakukan cetak laporan untuk mata kuliah yang hanya
diampu oleh dosen tersebut. Sedangkan untuk sub bagian akademik hanya dapat melakukan login melalui
platform web. Setelah dosen atau sub bagian akademik melakukan kegiatan login dan memilih salah satu mata
kuliah yang diinginkan untuk dicetak laporan kehadiran mahasiswa maka sistem akan menampilkan data
kehadiran mahasiswa sesuai dengan persentasenya yaitu persentase kehadiran di bawah 75% dan persentase
kehadiran di atas 75% serta setiap persentase akan ditampilkan nama mahasiswa. Jika dosen yang menjadi
user maka sistem hanya menampilkan mata kuliah yang diampu oleh dosen tersebut untuk ditampilkan
laporan kehadirannya. Jika sub bagian akademik yang menjadi user maka sistem dapat menampilkan laporan
kehadiran mahasiswa seluruh mata kuliah.
 5

Gambar 3. Sequence Diagram Laporan Kehadiran

c. Sequence Diagram Jadwal Pengganti

Gambar 4 menggambarkan Sequence diagram dari aktivitas membuat jadwal pengganti. Pada
diagram ini, yang berhak membuat jadwal pengganti hanya sub bagian akademik, setelah sub bagian akademik
memilih menu membuat jadwal pengganti maka sistem akan menampilkan form untuk mengisi data dari
jadwal pengganti tersebut, setelah semua sudah diisi maka sistem akan membuat jadwal yang baru dan akan
mengirim Qr Code kepada mahasiswa.

Gambar 4. Sequence Diagram Jadwal Pengganti

3.2 Tampilan Aplikasi

3.2.1 Tampilan Jadwal Mata Kuliah dan Jadwal Ajar
Gambar 5 menggambarkan tampilan jadwal mata kuliah untuk mahasiswa dan tampilan jadwal ajar untuk
dosen. Halaman ini akan ditampilkan ke pengguna setelah pengguna berhasil melakukan proses login pada
aplikasi. Halaman ini akan menampilkan seluruh mata kuliah yang telah diregistrasi oleh mahasiswa dan untuk
dosen akan ditampilkan seluruh mata kuliah yang diajar oleh dosen tersebut. Setiap mata kuliah akan disesuaikan
dengan hari mata kuliah tersebut dimulai.

Gambar 5. Tampilan Jadwal Mata Kuliah dan Jadwal Ajar

3.2.2 Tampilan QR Code Mahasiswa

 6

Gambar 6. Tampilan QR Code Mahasiswa

Gambar 6 menggambarkan tampilan QR code yang digunakan mahasiswa untuk melakukan kegiatan
pencatatan kehadiran. QR code akan berisi nomor pokok mahasiswa. Jika waktu pencatatan kehadiran telah tiba
maka mahasiswa dapat membuka QR code tersebut. jika tidak sistem akan mengunci sampai waktu yang telah
ditentukan.
3.2.3 Tampilan Laporan Kehadiran Mahasiswa Pengguna Dosen dan Sub Bagian Akademik
Gambar 7 menggambarkan tampilan laporan kehadiran untuk pengguna dosen dan sub bagian akademik
pada platform web. Sebelum pengguna sampai pada halaman ini pengguna harus memilih salah satu mata kuliah
agar dapat melihat dan mencetak laporan kehadiran mahasiswa.

Gambar 7. Tampilan Laporan Kehadiran Mahasiswa Pengguna Dosen dan Sub Bagian Akademik
 7

3.2.4 Tampilan Buat Jadwal Pengganti

Gambar 8 menggambarkan tampilan form untuk membuat jadwal pengganti pada pengguna dosen.
Apabila terjadi halangan dalam jadwal mengajar dosen dapat membuat jadwal pengganti untuk pertemuan tersebut
yang setelah menekan tombol buat maka sebuah pesan konfirmasi akan terkirim kepada bagian sub bagian
akademik. Jika diterima maka jadwal akan terbentuk dan mahasiswa akan mendapatkan notifikasi bila ada
pergantian jadwal.

Gambar 8. Tampilan Buat Jadwal Pengganti

3.2.5 Tampilan Konfirmasi Jadwal Pengganti

Gambar 9 menggambarkan tampilan halaman konfirmasi jadwal pengganti pada pengguna sub bagian
akademik. Setiap permintaan pergantian jadwal dari dosen akan dikirimkan pada halaman ini untuk mendapat
persetujuan dari pihak sub bagian akademik.

Gambar 9. Tampilan Konfirmasi Jadwal Pengganti

3.2.6 Tampilan Buka Kamera
Gambar 10 menggambarkan tampilan menu buka kamera pada pengguna dosen. Setelah dosen
memilih sidebar buka kamera maka sistem akan membuka kamera laptop dosen dan siap untuk
melakukan scan QR code dari mahasiswa.

Gambar 10. Tampilan Buka Kamera

3.2.7 Tampilan Laporan Kehadiran Yang Dihasilkan

 8

Gambar 11 menggambarkan tampilan laporan kehadiran yang dihasilkan. Ketika dosen atau sub bagian
akademik menekan tombol cetak laporan maka sistem akan membuat sebuah file laporan Portable Document
Format (PDF) agar laporan dapat dicetak.

Gambar 11. Tampilan Laporan Kehadiran Yang Dihasilkan

4. KESIMPULAN

Berdasarkan rancang bangun sistem pencatatan kehadiran mahasiswa menggunakan QR Code berbasis Android
yang telah dilakukan, maka penulis dapat menarik beberapa kesimpulan sebagai berikut:
a. Sistem yang dirancang dapat memberikan laporan kehadiran mahasiswa kepada kepala program studi dengan
cara meminta laporan kehadiran mahasiswa kepada bagian sub akademik.
b. Sistem yang dirancang dapat mengatasi potensi kerusakan dan kehilangan pada Kartu Hadir Kuliah
menggunakan QR Code dan data yang diperoleh bersifat digital.

5. SARAN

Setelah merancang sistem pencatatan mahasiswa menggunakan QR Code, penulis menyadari bahwa
aplikasi yang dihasilkan mempunyai kekurangan. Berdasarkan kekurangan tersebut, terdapat beberapa saran agar
aplikasi ini dapat dikembangkan dan digunakan sebagai acuan untuk melakukan penelitian yang akan datang
adalah sebagai berikut:
a. Melakukan integrasi data dengan sistem informasi akademik STMIK Widya Dharma Pontianak.
b. Sistem dapat digunakan oleh seluruh program studi yang berada di kampus Widya Dharma.
c. Menambahkan fitur akun mahasiswa tidak dapat dibuka di dua device berbeda secara bersamaan.
d. QR Code mahasiswa tidak dapat di screen shoot.
e. Penutupan waktu kegiatan pencatatan kehadiran ditutup dengan cara dosen melakukan scan QR Code.
Berguna untuk memantau tingkat kedisiplinan dosen.

UCAPAN TERIMA KASIH

Dalam penulisan ini, penulis telah banyak mendapatkan bantuan berupa bimbingan, petunjuk, data, saran,
maupun dorongan moral dari berbagai pihak, maka pada kesempatan ini penulis mengucapkan terima kasih kepada
civitas akademika STMIK Widya Dharma Pontianak, serta kepada keluarga tercinta yang telah banyak
memberikan kasih sayang, bantuan, dan dukungan serta doa kepada penulis selama menjalani studi dari awal
perkuliahan hingga selesainya penelitian ini.

DAFTAR PUSTAKA
[1] Kadir, Abdul dan Terra Ch.Triwahyuni. (2013). Pengantar Teknologi Informasi Edisi Revisi. Andi.
Yogyakarta.
[2] Rochman, Fatich Fazlur, Indra Kharisma Raharjana, dan Taufik. (Mei 2017). “Implementation of QR
Code and Digital Signature to Determine the Validity of KRS and KHS Documents”. Scientific Journal
of Informatics. Vol. 4, No. 1, 8-19.
[3] Husain, Al, Abdul Haqy Aji Prastian, dan Andre Ramadhan. (Agustus 2017). “Perancangan Sistem
Absensi Online Menggunakan Android Guna Mempercepat Proses Kehadiran Karyawan Pada PT.
Sintech Berkah Abadi”. Technomedia Journal. Vol. 2, No. 1, 105-116.
 9

[4] Setiawan, Eko Budi, dan Bobi Kurniawan. (Desember 2015). “Perancangan Sistem Absensi Kehadiran
Perkuliahan dengan Menggunakan Radio Frequency Identification (RFId)”. Jurnal CoreIT. Vol.1, No.
2, 44-49.
[5] Dunham, Ken, Shane Hartman, Manu Quintans, Jose Andre Morales, and Tim Strazzere. (2015). Android
Malware and Analysis. CRC Press. Florida.
[6] Juhara, Zamrony P. (2016). Panduan Lengkap Pemrograman Android. Yogyakarta: Andi Yogyakarta.
[7] Novick, Vladimir. (2017). React Native - Building Mobile Apps with JavaScript. Packt. Birmingham.
[8] Gill, Olivier. (2018). Using React Native for Mobile Software Development. Metropolia University of
Applied Sciences. Helsinki.
[9] Robbins, Jennifer Niederst. (2018). Learning Web Design. O’Reilly Media. Canada.
[10] Jones, Darren. (2017). JavaScript: Novice to Ninja. Sitepoint. Melbourne.
[11] Singh, Navdeep. (September 2016). “Study of Google Firebase API for Android”. International Journal
of Innovative Research in Computer and Communication Engineering. Vol.4, 16738-16743.
[12] Ilhami, Mirza. (Juni 2017). “Pengenalan Google Firebase Untuk Hybrid Mobile Apps Berbasis
Cordova”. Jurnal IT CIDA. Vol. 3, No. 1, 16-29.
[13] Banks, Alex dan Eve Porcello. (2018). Learning React. O’Reilly Media. Sebastopol.
[14] Stefanov, Stoyan. (2016). React: Up & Running. O’Reilly Media. Sebastopol.