📖 Dokumentasi Resmi  |  Bahasa Indonesia

Sistem Absensi Sekolah
Berbasis QR Code

Dokumentasi lengkap cara penggunaan, instalasi, dan konfigurasi aplikasi Absensis — sistem absensi modern untuk siswa dan guru.

🚀 Mulai Instalasi 📋 Lihat Fitur
10+
Fitur Utama
CI4
Framework
2
Tipe Pengguna
WA
Notifikasi

🛠️ Tech Stack

Framework dan library yang digunakan dalam membangun aplikasi Absensis

🔥
CodeIgniter 4
PHP Framework

Framework MVC berbasis PHP yang ringan dan cepat. Menangani routing, controller, model, view, dan semua logika backend aplikasi.

🎨
Material Dashboard Bootstrap 4
UI Framework

Template dashboard berbasis Bootstrap 4 dari Creative Tim. Memberikan tampilan admin yang modern, responsif, dan profesional dengan komponen Material Design.

🔐
Myth Auth Library
Authentication

Library autentikasi untuk CodeIgniter 4 yang mengelola login, session, role/permission petugas dan superadmin secara aman dan mudah dikonfigurasi.

📷
Endroid QR Code Generator
QR Library

Library PHP untuk generate QR code dalam format PNG atau SVG. Mendukung logo sekolah di tengah QR, label nama, dan kustomisasi warna foreground/background.

📱
ZXing JS QR Scanner
Scanner Library

Library JavaScript open-source untuk membaca QR code menggunakan kamera perangkat secara real-time langsung di browser tanpa perlu aplikasi tambahan.

💬
Fonnte WhatsApp API
Notification Service

Layanan pihak ketiga untuk mengirim notifikasi WhatsApp otomatis ke orang tua/wali setiap kali siswa atau guru berhasil melakukan absensi.

🗄️
MySQL / MariaDB
Database

Database relasional untuk menyimpan seluruh data: siswa, guru, kelas, jurusan, petugas, dan riwayat presensi harian dengan foreign key constraints.

🐘
PHP 8.1+
Server Language

Bahasa pemrograman server-side. Membutuhkan PHP 8.1 ke atas dengan extension intl (internasionalisasi) dan gd (manipulasi gambar QR) diaktifkan.

✨ Fitur Lengkap

Semua fitur yang tersedia dalam aplikasi Absensis beserta cara penggunaannya

📷

QR Code Scanner — Absen Masuk & Pulang

PublikReal-time

Fitur utama aplikasi. Siswa dan guru menunjukkan QR code unik mereka ke kamera perangkat. Sistem akan otomatis memvalidasi dan mencatat kehadiran ke database.

  • Buka halaman utama aplikasi di browser (tanpa perlu login)
  • Pilih mode Absen Masuk atau Absen Pulang sesuai waktu
  • Izinkan browser mengakses kamera ketika diminta
  • Arahkan QR code siswa/guru ke depan kamera
  • Sistem otomatis membaca dan memvalidasi QR code
  • Halaman hasil akan muncul: nama, kelas, jam, dan status kehadiran
  • Jika sudah absen hari itu, sistem menampilkan peringatan duplikat
Buka Scanner→ Pilih Masuk/Pulang→ Scan QR→ Validasi→ Tersimpan ✓
ℹ️ Pastikan perangkat memiliki kamera/webcam. Gunakan DroidCam jika ingin pakai kamera HP sebagai webcam.
💬

Notifikasi Presensi via WhatsApp

OtomatisOpsional

Setelah QR berhasil di-scan dan presensi tercatat, sistem mengirim pesan WhatsApp otomatis ke nomor HP yang terdaftar (orang tua/wali untuk siswa, atau guru itu sendiri).

  • Daftar akun di fonnte.com dan daftarkan nomor WhatsApp perangkat
  • Dapatkan token API dari dashboard Fonnte
  • Buka file .env di root folder proyek
  • Ubah WA_NOTIFICATION=false menjadi WA_NOTIFICATION=true
  • Isi WHATSAPP_TOKEN=TOKEN_ANDA dengan token dari Fonnte
  • Pastikan nomor HP siswa/guru sudah diisi dengan benar (format: 628xxxxxxxxx)
# .env
WA_NOTIFICATION=true
WHATSAPP_PROVIDER=Fonnte
WHATSAPP_TOKEN=XXXXXXXXXXXXXXXX
🔐

Login Petugas

AdminSuperadmin

Sistem autentikasi berbasis Myth Auth untuk petugas sekolah. Terdapat dua role: Petugas (akses terbatas) dan Superadmin (akses penuh).

  • Buka URL /admin atau /admin/login
  • Masukkan username dan password petugas
  • Default superadmin: username superadmin, password superadmin
  • Setelah login berhasil, diarahkan ke halaman Dashboard
  • Ganti password default segera demi keamanan sistem
Role Hak Akses
Petugas Kelola absen, siswa, guru, kelas, laporan, QR
Superadmin Semua akses petugas + kelola petugas lain + pengaturan umum
📊

Dashboard Petugas

Admin

Halaman utama setelah login. Menampilkan statistik kehadiran hari ini, grafik kehadiran 7 hari terakhir, dan ringkasan data siswa, guru, dan kelas.

  • Login sebagai petugas atau superadmin
  • Dashboard otomatis menampilkan data hari ini
  • Lihat jumlah siswa Hadir / Sakit / Izin / Alpa (hari ini)
  • Lihat grafik kehadiran siswa dan guru 7 hari terakhir
  • Lihat total siswa, guru, dan jumlah kelas
✅ Grafik menggunakan Chart.js yang sudah terintegrasi di template Material Dashboard.
👨‍🎓

CRUD Data Siswa

AdminCRUD

Kelola data siswa secara lengkap: tambah, lihat, edit, dan hapus. Mendukung filter berdasarkan kelas dan jurusan.

  • Buka menu Siswa di sidebar admin
  • Tambah: Klik tombol "Tambah Siswa", isi NIS, nama, kelas, jenis kelamin, no HP
  • Filter: Gunakan dropdown kelas/jurusan untuk menyaring data
  • Edit: Klik ikon edit pada baris siswa yang ingin diubah
  • Hapus: Klik ikon hapus, konfirmasi penghapusan data
  • NIS harus unik dan minimal 4 karakter
  • No HP harus berupa angka (digunakan untuk notifikasi WA)
👩‍🏫

CRUD Data Guru

AdminCRUD

Kelola data guru dengan field: NUPTK, nama, jenis kelamin, dan nomor HP. Struktur mirip dengan manajemen data siswa.

  • Buka menu Guru di sidebar admin
  • Tambah: Klik "Tambah Guru", isi NUPTK, nama, jenis kelamin, no HP
  • Edit: Klik ikon edit pada baris guru yang diinginkan
  • Hapus: Klik ikon hapus untuk menghapus data guru
  • NUPTK adalah nomor unik identitas guru sebagai data QR code
🏫

CRUD Kelas & Jurusan

AdminCRUD

Kelola data kelas dan jurusan yang menjadi referensi saat menambah/mengedit data siswa.

  • Buka menu Kelas & Jurusan di sidebar
  • Tambah Jurusan: Isi nama jurusan (contoh: IPA, IPS, Teknik)
  • Tambah Kelas: Isi tingkat kelas dan pilih jurusan yang sesuai
  • Edit/Hapus: Gunakan tombol pada setiap baris data
  • Kelas tidak bisa dihapus jika masih memiliki siswa aktif
⚠️ Hapus atau pindahkan siswa dari kelas terlebih dahulu sebelum menghapus kelas.
📝

Kelola Data Absensi

AdminEdit Status

Petugas dapat melihat dan mengubah status kehadiran siswa/guru. Misalnya mengubah status "Alpa" menjadi "Sakit" atau "Izin" jika ada keterangan.

  • Buka menu Absen Siswa atau Absen Guru
  • Pilih kelas (untuk siswa) dan pilih tanggal yang ingin dilihat
  • Daftar siswa/guru dengan status kehadiran masing-masing akan tampil
  • Klik ikon edit pada siswa/guru untuk mengubah status kehadiran
  • Pilih status: Hadir / Sakit / Izin / Alpa
  • Isi jam masuk, jam keluar, dan keterangan jika perlu
  • Klik Simpan untuk menyimpan perubahan
Pilih Kelas→ Pilih Tanggal→ Lihat Data→ Edit Status→ Simpan ✓
🔳

Generate & Download QR Code

AdminGenerator

Generate QR code unik untuk setiap siswa dan guru. Setiap QR code berisi kode unik yang diikat ke identitas orang tersebut di database.

  • Buka menu Generate QR di sidebar
  • Pilih tab Siswa atau Guru
  • Untuk siswa: pilih kelas terlebih dahulu untuk filter
  • Klik tombol Generate Semua untuk generate QR seluruh daftar
  • Atau klik ikon QR pada baris tertentu untuk generate individual
  • Klik tombol Download untuk mengunduh QR code satu per satu (format PNG)
  • Klik Download Semua (ZIP) untuk mengunduh semua QR dalam satu file ZIP
ℹ️ QR code berisi unique_code yang ter-generate otomatis saat siswa/guru ditambahkan. Logo sekolah bisa ditampilkan di tengah QR dengan mengaktifkan QR_LOGO=true di .env
📄

Generate Laporan

AdminPDF & DOC

Generate laporan rekap absensi bulanan dalam format PDF atau Microsoft Word (.doc) untuk siswa per-kelas maupun seluruh guru.

  • Buka menu Laporan di sidebar
  • Pilih tab Laporan Siswa atau Laporan Guru
  • Untuk siswa: pilih kelas dan bulan laporan
  • Untuk guru: pilih bulan laporan
  • Pilih format: PDF (tampil di browser) atau DOC (download Word)
  • Klik tombol Generate
  • Laporan otomatis mengecualikan hari Sabtu dan Minggu
✅ Laporan PDF menggunakan fitur print browser (window.print). Format laporan menampilkan rekap per-hari, status kehadiran setiap siswa, dan jumlah laki-laki/perempuan.
📥

Import Banyak Siswa via CSV

AdminBulk Import

Import data siswa dalam jumlah besar sekaligus menggunakan file CSV, tanpa harus menginput satu per satu melalui form.

  • Buka menu Siswa → Import Siswa
  • Download template CSV yang tersedia sebagai referensi format
  • Isi file CSV dengan data siswa (delimiter: koma)
  • Kolom yang dibutuhkan: NIS, Nama, ID Kelas, Jenis Kelamin, No HP
  • Upload file CSV melalui form yang tersedia
  • Sistem akan memvalidasi dan menampilkan preview data
  • Konfirmasi untuk mulai proses import
# Format CSV (header row):
nis,nama,id_kelas,jenis_kelamin,no_hp
12345,Budi Santoso,1,Laki-laki,6281234567890
12346,Siti Aminah,1,Perempuan,6289876543210
👤

Manajemen Petugas (Superadmin Only)

SuperadminCRUD

Fitur khusus superadmin untuk mengelola akun petugas sekolah yang dapat mengakses panel admin.

  • Login sebagai superadmin
  • Buka menu Petugas di sidebar (hanya muncul untuk superadmin)
  • Tambah Petugas: Klik "Register Petugas", isi email, username, password, dan role
  • Edit: Ubah data petugas termasuk reset password
  • Hapus: Hapus akun petugas yang tidak aktif
  • Role tersedia: petugas (standar) atau superadmin
⚙️

Pengaturan Umum (General Settings)

Superadmin

Konfigurasi informasi sekolah yang tertampil di seluruh aplikasi, seperti nama sekolah, tahun ajaran, logo, dan teks copyright.

  • Login sebagai superadmin
  • Buka menu Pengaturan di sidebar
  • Ubah Nama Sekolah (wajib, maks 200 karakter)
  • Ubah Tahun Ajaran (contoh: 2024/2025)
  • Upload Logo Sekolah (rekomendasi 100x100px, format PNG/JPG)
  • Ubah teks Copyright footer
  • Klik Simpan untuk menyimpan perubahan

🚀 Panduan Instalasi

Langkah-langkah instalasi dari awal hingga aplikasi siap digunakan

1

Persyaratan Sistem

Pastikan server/komputer memiliki: PHP 8.1+, MySQL/MariaDB, Composer, dan Apache/Nginx. Aktifkan extension intl dan gd di php.ini. Disarankan menggunakan XAMPP 8.1+ atau Laragon.

2

Install Dependencies

Buka terminal di folder proyek, jalankan Composer untuk menginstall semua library yang dibutuhkan.

composer install
3

Konfigurasi File .env

Rename file .env.example menjadi .env. Isi konfigurasi database dan base URL sesuai environment Anda.

app.baseURL='http://localhost/absensis/'
database.default.hostname=localhost
database.default.database=db_absensi
database.default.username=root
database.default.password=
database.default.DBDriver=MySQLi
4

Buat Database

Buat database baru bernama db_absensi di phpMyAdmin atau MySQL CLI.

CREATE DATABASE db_absensi;
5

Jalankan Migrasi Database

Jalankan perintah berikut untuk membuat semua tabel yang diperlukan beserta data awal (superadmin).

php spark migrate --all
6

Jalankan Aplikasi

Jalankan web server (Apache melalui XAMPP/Laragon) dan buka browser. Atau gunakan built-in server CodeIgniter.

php spark serve
7

Login Pertama Kali

Buka http://localhost/absensis/admin (atau sesuai baseURL). Login dengan kredensial default superadmin.

Username: superadmin
Password: superadmin

⚙️ Konfigurasi Lanjutan

Pengaturan file .env dan opsi-opsi konfigurasi yang tersedia

WhatsApp Notification

Aktifkan notifikasi otomatis ke WA. Daftar token di fonnte.com.

WA_NOTIFICATION=true
WHATSAPP_PROVIDER=Fonnte
WHATSAPP_TOKEN=xxx
Logo di QR Code

Tampilkan logo sekolah di tengah QR code yang digenerate.

QR_LOGO=true
# Upload logo via Pengaturan
Ubah Kredensial Superadmin

Edit file migrasi sebelum menjalankan php spark migrate pertama kali.

# File: app/Database/Migrations/
# 2023-08-18-000004_AddSuperadmin.php
$email = 'admin@sekolah.sch.id';
$username = 'superadmin';
$password = 'passwordkuat';
Mode Environment

Ubah mode development/production di file .env.

CI_ENVIRONMENT=production
# atau: development

❓ FAQ

Pertanyaan yang sering diajukan seputar penggunaan aplikasi

Kamera tidak bisa diakses oleh QR Scanner? ▼
Pastikan browser mendapat izin kamera. Di Chrome, klik ikon gembok di address bar dan aktifkan izin kamera. Jika menggunakan HTTP (bukan HTTPS), beberapa browser memblokir akses kamera. Gunakan localhost atau aktifkan HTTPS.
QR Code tidak terbaca saat di-scan? ▼
Pastikan QR code dicetak dengan jelas dan tidak buram. Pastikan pencahayaan cukup saat scanning. Jika QR code rusak/sobek, generate ulang dan cetak yang baru dari menu Generate QR.
Notifikasi WhatsApp tidak terkirim? ▼
Periksa: (1) WA_NOTIFICATION=true di .env, (2) Token Fonnte sudah diisi dengan benar, (3) Device WhatsApp di Fonnte masih terhubung/aktif, (4) Nomor HP siswa/guru sudah diisi format internasional (628xxx), (5) Cek log di writable/logs/ untuk error detail.
Bagaimana cara reset password petugas? ▼
Login sebagai superadmin → Buka menu Petugas → Klik edit pada petugas yang bersangkutan → Isi field password baru → Simpan. Password akan di-hash otomatis menggunakan Myth Auth.
Apakah bisa diakses dari HP? ▼
Ya. Tampilan menggunakan Bootstrap 4 yang responsif. Untuk halaman scanner, pastikan HP memiliki kamera dan browser mendapat izin akses kamera. Halaman admin juga bisa diakses dari HP meskipun lebih nyaman di desktop.
Error "Class not found" setelah instalasi? ▼
Jalankan composer dump-autoload di terminal. Pastikan semua dependencies sudah terinstall dengan benar melalui composer install. Periksa juga versi PHP (minimal 8.1).
Bagaimana cara hosting ke server online? ▼
Upload semua file ke server. Set app.baseURL di .env sesuai domain. Pastikan server mendukung PHP 8.1+, aktifkan extension intl dan gd. Import database via phpMyAdmin. Pastikan folder writable/ memiliki permission write (755 atau 777).
↑