Sistem Presensi Siswa Berbasis Web

Dengan Scan Barcode Real-Time

📝 Deskripsi Proyek

Sistem Presensi Siswa Berbasis Web adalah aplikasi yang dikembangkan untuk membantu sekolah dan madrasah dalam mengelola kehadiran siswa secara digital, real-time, dan terstruktur. Sistem ini memanfaatkan teknologi scan barcode (QR Code / Code 128) untuk mempercepat proses absensi serta meminimalkan kesalahan dan manipulasi data.

Aplikasi dirancang dengan arsitektur multi-role (Admin, Guru, dan Orang Tua) serta antarmuka mobile-friendly, sehingga dapat digunakan secara optimal melalui perangkat desktop maupun smartphone.

🛠️ Teknologi yang Digunakan

• Backend: Laravel 11 (PHP 8+), arsitektur MVC
• Frontend: Blade Templates, Bootstrap 5 (mobile-first), JavaScript (AJAX / Fetch API)
• Database: MySQL (production), SQLite (development)
• Barcode System: QR Code & Code 128 Generator, HTML5 QR Code Scanner
• Visualisasi & Monitoring: Chart.js, DataTables
• Server: Apache / Nginx (XAMPP & Laragon compatible)
• Laporan: PDF generation menggunakan DomPDF

🌟 Fitur Utama

1. Dashboard Multi-Role

• Admin
  Mengelola data siswa, guru, dan orang tua, generate barcode, pengaturan jam masuk & pulang, serta monitoring presensi secara menyeluruh.
• Guru
  Melakukan scan barcode presensi masuk dan pulang, memverifikasi izin siswa, serta memantau siswa yang belum melakukan presensi pulang.
• Orang Tua
  Memantau kehadiran anak secara real-time, mengajukan izin dengan bukti foto, serta melakukan flag jika anak belum pulang sesuai jadwal.

2. Sistem Presensi Real-Time

• Scan barcode menggunakan kamera HP guru
• Validasi waktu berdasarkan server (anti manipulasi)
• Status kehadiran: Hadir Masuk, Hadir Pulang, Izin, Tidak Hadir
• Pembatasan maksimal 1x presensi masuk dan 1x presensi pulang per hari

3. Manajemen Data Terstruktur

• CRUD data siswa dengan barcode unik
• CRUD data guru dan orang tua
• Pengaturan jadwal masuk dan pulang per kelas
• Manajemen hari libur dan tanggal khusus

4. Fitur Tambahan

• Sistem Izin Siswa dengan upload foto bukti (wajib)
• Flagging Otomatis jika siswa belum pulang setelah jam tertentu
• Laporan PDF per kelas dan per bulan, lengkap dengan tanda tangan wali kelas
• Monitoring Real-Time melalui grafik dan tabel interaktif
• Mobile Optimized UI dengan scanner fullscreen dan tombol besar

5. Keamanan & Validasi

• Autentikasi berbasis role (Admin, Guru, Orang Tua)
• Validasi waktu server untuk seluruh transaksi
• Pencegahan presensi ganda (duplicate check)
• Validasi file upload untuk izin siswa

🚀 Tantangan & Solusi

Tantangan: Scanner barcode harus berjalan di berbagai perangkat
Solusi: Implementasi library html5-qrcode yang kompatibel dengan kamera smartphone modern, dengan fallback input manual

Tantangan: Data kehadiran harus bisa dipantau orang tua secara real-time
Solusi: AJAX polling untuk update status tanpa reload halaman

Tantangan: Laporan harus rapi dan mudah dicetak
Solusi: PDF generation dengan layout landscape dan optimisasi printer

📊 Hasil & Dampak

• Proses absensi lebih cepat (dari 10–15 menit menjadi 1–2 menit per kelas)
• Akurasi data meningkat dengan validasi waktu server
• Guru dan orang tua lebih mudah memantau kehadiran siswa
• Admin dapat memonitor seluruh aktivitas presensi dari satu dashboard
• Sistem mampu menangani ratusan siswa dengan performa stabil

🔗 Link Proyek

GitHub Repository:
https://sdn.aventra.my.id

• GitHub Repository:
  https://github.com/ChaisarAbi/adi_presensi
• Demo Akun:
  • Admin: admin@presensi.sch.id / password123
  • Guru: guru@presensi.sch.id / password123
  • Orang Tua: ortu@presensi.sch.id / password123

💼 Nilai Tambah Proyek

Proyek ini merepresentasikan kemampuan saya dalam:

• Full-stack web development menggunakan Laravel
• Perancangan sistem berbasis kebutuhan nyata di dunia pendidikan
• Pembuatan UI/UX mobile-first yang mudah digunakan
• Integrasi library pihak ketiga (barcode scanner, PDF, chart)
• Pengembangan sistem dari tahap perencanaan hingga siap produksi

Saya terbuka untuk pengembangan sistem serupa maupun custom solution sesuai kebutuhan institusi Anda.