Implementation of a Progressive Web App for Teacher Attendance and Payroll System at PAUD Mckids West Bekasi
DOI:
https://doi.org/10.35870/ijsecs.v6i3.8244Keywords:
Codeigniter, Early Childhood Education, Payroll System, Progressive Web App, Teacher AttendanceAbstract
PAUD McKids West Bekasi is an early childhood education institution that previously managed teacher attendance using manual paper logbooks and calculated payroll via basic spreadsheets. Consequently, the monthly recapitulation process required 2–3 working days and remained susceptible to human calculation errors. This study aims to design and implement a Progressive Web App (PWA) for the teacher attendance and payroll system, named SIPAG McKids, providing a computerized, integrated, and multi-device accessible administrative platform. The research employed the Research and Development (R&D) method using the Waterfall software engineering model, encompassing requirements analysis, system design, implementation, testing, and maintenance. The system was developed using the CodeIgniter 3 framework under the Model-View-Controller (MVC) architecture, a MySQL relational database, a Bootstrap 5 interface, DOMPDF for automated pay slip generation, and a Progressive Web App layer driven by a Web App Manifest and Service Workers to facilitate installation and offline caching. System evaluation comprised Black Box Testing for functional validation, PWA component verification, security assessments referencing the OWASP Top 10 guidelines, and performance audits using Google Lighthouse. The implementation results demonstrated that all Black Box testing scenarios functioned as designed. Security mechanisms—including Bcrypt password hashing, CSRF protection, Query Builder parameterization against SQL Injection, and Role-Based Access Control (RBAC)—operated correctly. Furthermore, self-service attendance based on selfie photography and GPS coordinates, alongside a tiered payroll approval workflow (Draft–Approved–Paid), operated successfully with transactional records verified in the production database. Google Lighthouse audit scores achieved 85 for desktop performance, 99 for mobile performance, 100 for Best Practices, 91 for SEO, and 78 for Accessibility. The system effectively enhances administrative recapitulation efficiency, improves calculation accuracy for tardiness deductions, ensures payroll transparency for teachers, and provides seamless mobile access for the institution.
Downloads
References
Abdillah, L. A. (2006). Perancangan basisdata sistem informasi penggajian (studi kasus pada Universitas 'XYZ'). Jurnal Ilmiah Matrik, 8(2), 135–152.
Bachtiar, Y. D., Habib, A., & Koesdijarto, R. (2025). Rancang bangun sistem informasi absensi berbasis lokasi dan face recognition dengan Progressive Web Apps (PWA) untuk menentukan siswa unggul menggunakan metode SAW di SMKN 2 Ngawi. JATI (Jurnal Mahasiswa Teknik Informatika), 9(2), 3535–3541. https://doi.org/10.36040/jati.v9i2.13044
Bootstrap Team. (2023). Bootstrap: The most popular HTML, CSS, and JS library in the world [Computer software]. https://getbootstrap.com/
DOMPDF Project. (2023). Dompdf: PHP library for converting HTML to PDF (Version 2.0.3) [Computer software]. GitHub. https://github.com/dompdf/dompdf
Ghufron, M., Meimaharani, R., & Murti, A. C. (2024). Sistem informasi absensi dan penggajian karyawan berbasis website menggunakan metode geolocation pada Toko Ayuri Homedress. Jurnal Pendidikan dan Teknologi Indonesia, 4(11), 439–452. https://doi.org/10.52436/1.jpti.463
Google Developers. (2023). What are Progressive Web Apps? https://web.dev/explore/progressive-web-apps
Hasibuan, M. S. P. (2017). Manajemen sumber daya manusia. Bumi Aksara.
Oracle. (2023). MySQL 8.0 reference manual [Technical documentation]. Oracle Corporation. https://dev.mysql.com/doc/
Osmani, A. (2015). Progressive web apps. Google Developers.
OWASP. (2021). OWASP Top 10:2021 - The ten most critical web application security risks. Open Web Application Security Project. https://owasp.org/Top10/
Pressman, R. S. (2014). Software engineering: A practitioner's approach. McGraw-Hill Education.
Puji Ikawati, A., & Arinal, V. (2021). Penerapan metode RAD dalam sistem persediaan barang berbasis web pada PT. Agree Progress International di Jakarta Barat. Jurnal Sosial dan Teknologi, 1(8), 875–886. https://doi.org/10.36418/jurnalsostech.v1i8.175
Ramadhan, A. D., & Widyawan, T. I. (2025). Rancang bangun sistem absensi siswa sekolah dasar berbasis PWA (Studi kasus: SDN Uwung Jaya Tangerang). IKRAITH-Informatika, 9(3), 1–10. https://doi.org/10.37817/ikraith-informatika.v9i3
Sugiyono. (2019). Metode penelitian kuantitatif, kualitatif, dan R&D. Alfabeta.
Upton, D. (2020). CodeIgniter 3 user guide (Version 3.1.13) [Technical documentation]. CodeIgniter Foundation. https://codeigniter.com/userguide3/
Wardani, D. C., & Hendrawan, J. (2025). Penerapan sistem informasi penggajian terintegrasi dengan absensi real-time berbasis web pada CV. The Three Points menggunakan metode SDLC. Juktisi: Jurnal Komputer Teknologi Informasi Sistem Komputer, 4(2), 442–450. https://doi.org/10.62712/juktisi.v4i2.440
Zain, A. R., Priyaditama, F. J., & Hermawan, I. (2021). Perancangan sistem presensi guru berbasis web menggunakan metodologi waterfall. Jurnal Multinetics, 7(2), 145–153. https://doi.org/10.32722/multinetics.v7i2.4277
Downloads
Published
Issue
Section
License
Copyright (c) 2026 Devara Isbani Yusuf, Veri Arinal, Mesra Betty Yel
This work is licensed under a Creative Commons Attribution 4.0 International License.
Authors who publish with this journal agree to the following terms:
1. Copyright Retention and Open Access License
Authors retain copyright of their work and grant the journal non-exclusive right of first publication under the Creative Commons Attribution 4.0 International License (CC BY 4.0).
This license allows unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.
2. Rights Granted Under CC BY 4.0
Under this license, readers are free to:
- Share — copy and redistribute the material in any medium or format
- Adapt — remix, transform, and build upon the material for any purpose, including commercial use
- No additional restrictions — the licensor cannot revoke these freedoms as long as license terms are followed
3. Attribution Requirements
All uses must include:
- Proper citation of the original work
- Link to the Creative Commons license
- Indication if changes were made to the original work
- No suggestion that the licensor endorses the user or their use
4. Additional Distribution Rights
Authors may:
- Deposit the published version in institutional repositories
- Share through academic social networks
- Include in books, monographs, or other publications
- Post on personal or institutional websites
Requirement: All additional distributions must maintain the CC BY 4.0 license and proper attribution.
5. Self-Archiving and Pre-Print Sharing
Authors are encouraged to:
- Share pre-prints and post-prints online
- Deposit in subject-specific repositories (e.g., arXiv, bioRxiv)
- Engage in scholarly communication throughout the publication process
6. Open Access Commitment
This journal provides immediate open access to all content, supporting the global exchange of knowledge without financial, legal, or technical barriers.
