Di era digital, pencatatan kehadiran tidak harus lagi dilakukan menggunakan kertas atau tanda tangan manual. Sekolah, perusahaan, maupun organisasi kini dapat menggunakan sistem absensi berbasis web untuk mencatat kehadiran secara lebih terstruktur.

Namun, membuat sistem absensi bukan hanya soal membuat halaman login dan tombol Hadir. Kita juga perlu memikirkan bagaimana data pengguna disimpan, bagaimana proses absensi dilakukan, bagaimana sistem membedakan status kehadiran, hingga bagaimana admin melihat laporan.

Di sinilah System Design dibutuhkan.

Dengan System Design yang baik, developer dapat mengetahui bagaimana setiap bagian sistem saling terhubung sebelum mulai menulis kode. Hasilnya, proses pengembangan bisa menjadi lebih terarah dan sistem lebih mudah dikembangkan di kemudian hari.

Pada artikel ini, kita akan membahas System Design sistem absensi berbasis web mulai dari kebutuhan sistem, komponen, database, alur absensi, hingga contoh arsitekturnya.

Apa Itu Sistem Absensi Berbasis Web?

Sistem absensi berbasis web adalah aplikasi yang digunakan untuk mencatat dan mengelola data kehadiran melalui browser atau jaringan internet.

Pengguna dapat mengakses sistem melalui perangkat seperti:

• Laptop
• Komputer
• Tablet
• Smartphone

Contoh aktivitas yang dapat dilakukan dalam sistem:

• Login
• Melakukan absensi
• Melihat riwayat kehadiran
• Melihat status kehadiran
• Mengelola data pengguna
• Mengelola jadwal
• Melihat laporan absensi

Dengan sistem berbasis web, data absensi dapat disimpan secara terpusat di database sehingga lebih mudah dikelola.

Mengapa System Design Dibutuhkan?

Sistem absensi terlihat sederhana, tetapi sebenarnya memiliki beberapa proses yang saling berhubungan.

Misalnya ketika seorang siswa melakukan absensi:

Login
  ↓
Pilih / Buka Halaman Absensi
  ↓
Validasi Pengguna
  ↓
Cek Jadwal
  ↓
Catat Kehadiran
  ↓
Simpan ke Database
  ↓
Tampilkan Status

Jika alur tersebut tidak dirancang dengan jelas, bisa muncul berbagai masalah.

Contohnya:

• Pengguna bisa melakukan absensi berkali-kali.
• Absensi masuk tercatat dua kali.
• Pengguna dapat melakukan absensi di luar jadwal.
• Data kehadiran tidak sesuai tanggal.
• Admin kesulitan membuat laporan.

System Design membantu developer memikirkan masalah tersebut sebelum sistem dibuat.

Tujuan System Design Sistem Absensi

Beberapa tujuan utama dari rancangan sistem absensi berbasis web antara lain:

1. Mencatat Kehadiran

Sistem dapat menyimpan data kehadiran setiap pengguna.

2. Mengurangi Pencatatan Manual

Data langsung disimpan ke database sehingga tidak perlu mencatat menggunakan buku.

3. Mempermudah Pengelolaan Data

Admin dapat mengelola pengguna, jadwal, dan data kehadiran melalui satu sistem.

4. Mempermudah Pembuatan Laporan

Data absensi dapat difilter berdasarkan tanggal, pengguna, kelas, departemen, atau periode tertentu.

5. Menjaga Data Tetap Terstruktur

Setiap data memiliki hubungan yang jelas antara pengguna, jadwal, dan kehadiran.

Komponen Utama Sistem Absensi Berbasis Web

Sebelum membuat diagram System Design, kita perlu mengetahui komponen yang dibutuhkan.

1. User

User merupakan orang yang menggunakan sistem.

Contohnya:

• Siswa
• Guru
• Karyawan
• Admin

Setiap jenis user dapat memiliki hak akses yang berbeda.

2. Frontend

Frontend merupakan bagian sistem yang dilihat dan digunakan oleh pengguna.

Contohnya:

• Halaman login
• Dashboard
• Form absensi
• Riwayat absensi
• Tabel laporan

Teknologi yang dapat digunakan antara lain:

• HTML
• CSS
• JavaScript
• Bootstrap
• React
• Vue

Untuk project sederhana, HTML, CSS, JavaScript, dan Bootstrap sudah dapat digunakan.

3. Backend

Backend menangani proses yang terjadi di belakang layar.

Contohnya:

• Validasi login
• Validasi absensi
• Mengecek jadwal
• Menyimpan kehadiran
• Mengambil laporan
• Mengatur hak akses

Backend dapat dibuat menggunakan:

• PHP
• Laravel
• Node.js
• Python
• Java

Untuk aplikasi sederhana, PHP dan MySQL juga sudah cukup untuk membangun sistem absensi.

4. Database

Database digunakan untuk menyimpan seluruh data sistem.

Contohnya:

users
jadwal
absensi
kelas

Database yang dapat digunakan antara lain:

• MySQL
• PostgreSQL
• MariaDB

5. Authentication

Authentication digunakan untuk memastikan siapa yang sedang masuk ke sistem.

Contohnya:

Username
Password
   ↓
Validasi
   ↓
Login berhasil

Setelah login, sistem dapat menentukan halaman yang boleh diakses berdasarkan role pengguna.

Contoh Role pada Sistem Absensi

Sistem dapat memiliki beberapa role.

Admin

Admin dapat:

• Mengelola pengguna
• Mengelola kelas
• Mengelola jadwal
• Melihat absensi
• Mengubah data tertentu
• Membuat laporan

User

User dapat:

• Login
• Melakukan absensi
• Melihat riwayat absensi
• Melihat status kehadiran

Contohnya:

Admin
 ├── Kelola User
 ├── Kelola Jadwal
 ├── Kelola Absensi
 └── Laporan

User
 ├── Absensi
 └── Riwayat Absensi

Dengan pembagian ini, user biasa tidak dapat mengakses fitur administrasi.

Arsitektur Sistem Absensi Berbasis Web

Untuk sistem absensi sederhana, arsitektur dapat dibuat seperti berikut:

                 USER
                  |
                  v
              WEB BROWSER
                  |
                  v
               FRONTEND
                  |
                  v
                BACKEND
                  |
                  v
              DATABASE

Jika menggunakan PHP dan MySQL:

Browser
   ↓
HTML / CSS / JavaScript
   ↓
PHP
   ↓
MySQL

Arsitektur tersebut sudah cukup untuk banyak project absensi sederhana.

Alur Sistem Absensi

Sekarang kita lihat bagaimana proses absensi berlangsung.

User
 ↓
Login
 ↓
Dashboard
 ↓
Halaman Absensi
 ↓
Cek User
 ↓
Cek Jadwal
 ↓
Cek Apakah Sudah Absen
 ↓
Simpan Data
 ↓
Tampilkan Berhasil

Misalnya seorang siswa melakukan absensi pada pukul 07.30.

Sistem akan melakukan beberapa pemeriksaan:

1. Apakah user sudah login?
2. Apakah user memiliki jadwal pada hari tersebut?
3. Apakah user sudah melakukan absensi?
4. Apakah waktu masih berada dalam periode absensi?
5. Jika valid, simpan data ke database.

Status Kehadiran

Sistem absensi biasanya tidak hanya memiliki status Hadir.

Beberapa status yang dapat digunakan:

• Hadir
• Terlambat
• Izin
• Sakit
• Alpha

Contohnya:

Tanggal     Nama       Jam     Status
------------------------------------------------
22/09/2026  Andi       07:25   Hadir
22/09/2026  Budi       07:48   Terlambat
22/09/2026  Citra      -       Izin
22/09/2026  Deni       -       Sakit

Dengan status tersebut, admin dapat melihat kondisi kehadiran dengan lebih jelas.

Database untuk Sistem Absensi

Database merupakan salah satu bagian penting dalam System Design.

Untuk sistem sederhana, kita dapat menggunakan beberapa tabel.

Tabel Users

users
----------------------
id
nama
username
password
role
id_kelas

Tabel ini menyimpan data pengguna.

Tabel Kelas

kelas
----------------------
id_kelas
nama_kelas
jurusan

Tabel ini menyimpan data kelas.

Tabel Jadwal

jadwal
----------------------
id_jadwal
id_kelas
hari
jam_masuk
jam_pulang

Tabel ini menyimpan jadwal absensi.

Tabel Absensi

absensi
----------------------
id_absensi
id_user
tanggal
jam_masuk
jam_keluar
status
keterangan

Tabel ini menyimpan data kehadiran.

Relasi Database

Jika menggunakan ERD sederhana, hubungan tabel dapat digambarkan seperti ini:

KELAS
  |
  | 1
  |
  | N
USERS
  |
  | 1
  |
  | N
ABSENSI

KELAS
  |
  | 1
  |
  | N
JADWAL

Artinya satu kelas dapat memiliki banyak user.

Satu user dapat memiliki banyak data absensi.

Satu kelas juga dapat memiliki beberapa jadwal.

Struktur database seperti ini membantu data tetap terorganisir.

Contoh Alur Login

Ketika user login, alurnya dapat dibuat seperti berikut:

User
 ↓
Input Username & Password
 ↓
Backend
 ↓
Database
 ↓
Validasi
 ↓
Apakah Benar?
 ├── Tidak → Tampilkan Error
 |
 └── Ya
      ↓
   Buat Session
      ↓
   Dashboard

Session digunakan agar sistem mengetahui bahwa user sudah login.

Contoh Alur Absensi Masuk

Setelah login, user dapat melakukan absensi.

User
 ↓
Klik "Absen Masuk"
 ↓
Backend
 ↓
Cek Login
 ↓
Cek Jadwal
 ↓
Cek Absensi Hari Ini
 ↓
Sudah Absen?
 ├── Ya → Tolak
 |
 └── Tidak
      ↓
   Simpan Absensi
      ↓
   Tentukan Status
      ↓
   Tampilkan Berhasil

Sistem dapat menentukan status berdasarkan waktu.

Misalnya:

Jam Masuk: 07.30

Absen 07.20 → Hadir
Absen 07.30 → Hadir
Absen 07.45 → Terlambat

Aturan waktunya tentu dapat disesuaikan dengan kebutuhan sekolah atau perusahaan.

Bagaimana Jika User Sudah Absen?

Ini merupakan salah satu validasi penting.

Misalnya user sudah melakukan absensi pada tanggal 22 September 2026.

Ketika tombol absensi ditekan lagi, backend dapat memeriksa:

Apakah sudah ada data absensi
untuk user dan tanggal hari ini?

Jika ada:

Data ditemukan
      ↓
Absensi ditolak
      ↓
"Anda sudah melakukan absensi hari ini."

Dengan validasi ini, data absensi ganda dapat dicegah.

Fitur Absensi Pulang

Selain absensi masuk, sistem juga dapat menyediakan absensi pulang.

Alurnya:

User
 ↓
Klik Absen Pulang
 ↓
Cek Absensi Masuk
 ↓
Ada?
 ├── Tidak → Tolak
 |
 └── Ya
      ↓
   Simpan Jam Pulang
      ↓
   Berhasil

Data akhirnya dapat menjadi:

Nama       Tanggal      Masuk    Pulang    Status
----------------------------------------------------
Andi       22/09/2026   07:25    16:05     Hadir

Dashboard Admin

Admin membutuhkan dashboard untuk memantau data absensi.

Contohnya:

+--------------------------------------+
| Dashboard Absensi                   |
+--------------------------------------+
| Total User       | 120              |
| Hadir Hari Ini  | 95               |
| Terlambat       | 15               |
| Izin            | 5                |
| Alpha           | 5                |
+--------------------------------------+

Admin juga dapat melihat tabel:

No | Nama | Kelas | Jam | Status
---------------------------------
1  | Andi | XI RPL | 07:25 | Hadir
2  | Budi | XI RPL | 07:48 | Terlambat

Dengan dashboard, kondisi kehadiran dapat dipantau dengan lebih mudah.

Laporan Absensi

Data absensi yang tersimpan di database dapat digunakan untuk membuat laporan.

Admin dapat melakukan filter berdasarkan:

• Tanggal
• Bulan
• Nama
• Kelas
• Status
• Periode

Contohnya:

Filter:
Bulan : September 2026
Kelas : XI RPL
Status: Hadir

Kemudian sistem menampilkan data yang sesuai.

Laporan juga dapat dikembangkan menjadi fitur cetak atau export sesuai kebutuhan.

System Design yang Lebih Lengkap

Jika sistem absensi berkembang, arsitekturnya dapat menjadi:

                         USER
                           |
                           v
                      WEB BROWSER
                           |
                           v
                       FRONTEND
                           |
                           v
                       WEB SERVER
                           |
                           v
                         API
                           |
             +-------------+-------------+
             |             |             |
             v             v             v
        Auth Service   Absensi       Report
                       Service       Service
             |             |             |
             +-------------+-------------+
                           |
                           v
                       DATABASE

Untuk sistem yang lebih besar, dapat ditambahkan:

• Cache
• Load balancer
• Storage
• Monitoring
• Notification service

Tetapi untuk project sekolah atau sistem internal dengan pengguna terbatas, arsitektur sederhana biasanya sudah cukup.

Fitur Tambahan yang Bisa Dikembangkan

Setelah sistem dasar selesai, beberapa fitur tambahan dapat ditambahkan.

Absensi Berbasis QR Code

User melakukan scan QR Code untuk melakukan absensi.

QR Code
   ↓
Scan
   ↓
Validasi
   ↓
Simpan Absensi

Geolocation

Sistem dapat menggunakan lokasi perangkat untuk kebutuhan validasi lokasi, jika memang diperlukan.

Foto Selfie

User dapat mengirim foto sebagai bagian dari proses absensi jika kebutuhannya mengharuskan verifikasi visual.

Notifikasi

Sistem dapat memberikan notifikasi ketika:

• Absensi berhasil
• Terlambat
• Pengajuan izin diterima
• Periode absensi ditutup

Fitur tambahan tersebut sebaiknya dipilih berdasarkan kebutuhan, karena setiap fitur juga menambah kompleksitas sistem.

Keamanan Sistem Absensi

Karena sistem menyimpan data pengguna dan riwayat kehadiran, keamanan perlu diperhatikan.

Beberapa hal penting antara lain:

Password Hashing

Password jangan disimpan dalam bentuk teks biasa.

Authentication

Pastikan hanya user yang sudah login yang dapat mengakses fitur tertentu.

Authorization

Bedakan hak akses admin dan user.

Validasi Input

Semua input dari pengguna harus divalidasi sebelum diproses.

Session Security

Session perlu dikelola dengan baik agar akun tidak mudah disalahgunakan.

Database Security

Akses database harus dibatasi dan query sebaiknya menggunakan mekanisme yang aman untuk mencegah SQL Injection.

Contoh Teknologi yang Bisa Digunakan

Untuk membuat sistem absensi berbasis web, stack teknologi dapat disesuaikan dengan kebutuhan.

Contoh sederhana:

Frontend
HTML
CSS
JavaScript
Bootstrap

Backend
PHP

Database
MySQL

Server
Apache / XAMPP

Untuk project yang lebih besar, dapat menggunakan:

Frontend
React / Vue

Backend
Laravel / Node.js

Database
MySQL / PostgreSQL

Cache
Redis

Tidak perlu menggunakan teknologi yang kompleks jika sistem yang dibuat masih sederhana.

Tips Membuat System Design Sistem Absensi

Jika kamu ingin membuat project absensi sendiri, mulai dari kebutuhan dasar.

Urutannya dapat seperti ini:

1. Tentukan User
        ↓
2. Tentukan Role
        ↓
3. Tentukan Fitur
        ↓
4. Buat User Flow
        ↓
5. Buat Database
        ↓
6. Buat Arsitektur
        ↓
7. Tentukan API
        ↓
8. Tambahkan Security
        ↓
9. Implementasi
        ↓
10. Testing

Dengan alur tersebut, proses development akan menjadi lebih terarah.

Kesalahan yang Sering Terjadi

Ada beberapa kesalahan yang sebaiknya dihindari ketika membuat sistem absensi.

Tidak Membatasi Absensi Ganda

User bisa melakukan absensi berkali-kali pada hari yang sama.

Tidak Memvalidasi Waktu

User dapat melakukan absensi kapan saja tanpa mengikuti aturan jadwal.

Hak Akses Tidak Dipisahkan

User biasa dapat membuka halaman admin.

Database Tidak Terstruktur

Data user, jadwal, dan absensi dicampur dalam satu tabel sehingga sulit dikelola.

Langsung Membuat Fitur Kompleks

Sebaiknya buat fitur dasar terlebih dahulu sebelum menambahkan QR Code, lokasi, notifikasi, dan fitur lainnya.

Kesimpulan

System Design sistem absensi berbasis web membantu developer merancang bagaimana pengguna, frontend, backend, database, authentication, jadwal, dan data absensi saling terhubung.

Untuk sistem sederhana, arsitekturnya dapat dibuat seperti:

User
 ↓
Browser
 ↓
Frontend
 ↓
Backend
 ↓
MySQL

Kemudian sistem dapat dikembangkan dengan fitur seperti absensi masuk dan pulang, status kehadiran, jadwal, laporan, QR Code, notifikasi, dan validasi lokasi sesuai kebutuhan.

Hal yang paling penting adalah jangan langsung membuat sistem yang terlalu rumit. Mulailah dari kebutuhan utama, buat database dan alur yang jelas, lalu tambahkan fitur secara bertahap.

Dengan System Design yang terencana, sistem absensi bukan hanya dapat mencatat kehadiran, tetapi juga menjadi aplikasi yang lebih terstruktur, mudah dikelola, dan siap dikembangkan di masa depan.