title: “92. Studi Kasus: Aplikasi Absensi Pegawai” date: 2024-06-12 author: “Andi Putra” tags: [absensi, software engineering, case study, employee management, react, nodejs, diagram]

Studi Kasus: Aplikasi Absensi Pegawai

Absensi pegawai merupakan salah satu aspek esensial dalam pengelolaan sumber daya manusia di sebuah perusahaan. Proses pencatatan kehadiran secara manual terbukti kurang efisien dan rentan terhadap human error. Karena itu, menciptakan sebuah aplikasi absensi pegawai yang modern menjadi tantangan menarik bagi seorang software engineer. Pada artikel ini, saya akan mengulas studi kasus pengembangan aplikasi absensi pegawai sederhana dengan teknologi web. Kita akan membahas arsitektur, contoh kode, simulasi flow user, hingga tips dalam implementasinya.

Problem Statement

Bayangkan lingkungan kantor dengan 50+ pegawai. Setiap hari, HRD harus merekap kehadiran, keterlambatan, dan izin/cuti pegawai untuk pelaporan bulanan. Kegiatan ini masih dilakukan manual menggunakan Excel, sehingga hadir kebutuhan aplikasi absensi online yang dapat:

• Mencatat kehadiran (check-in/check-out)
• Menyimpan data pegawai
• Mencatat waktu dan status absensi tiap pegawai
• Menyediakan laporan harian/bulanan ke HRD
• Memiliki antarmuka web sederhana

Pemilihan Stack Teknologi

Agar mudah dikembangkan, kita gunakan stack berikut:

• Frontend: React.js (SPA)
• Backend: Node.js dengan Express
• Database: SQLite (untuk simplicity, bisa di-upgrade ke PostgreSQL/MySQL)
• Authentication: JWT (JSON Web Token)

Perancangan Database

Struktur Tabel

Berikut adalah penjelasan tabel-tabel utama:

Diagram Alur Absensi

Untuk mempermudah pemahaman, berikut adalah diagram flow absensi sederhana:

flowchart TD
    Start[Mulai: Pegawai Login] --> Input[Input Data Absensi (Check-in)]
    Input --> Decision{Sudah Absen?}
    Decision -- "Belum" --> Save[Catat waktu 'check-in']
    Save --> Sukses[Sukses - Tampil dashboard]
    Decision -- "Sudah" --> Error[Tampilkan pesan: Sudah absen hari ini]
    Sukses --> ProsesKeluar{Check-out?}
    ProsesKeluar -- "Ya" --> SaveOut[Catat waktu 'check-out']
    SaveOut --> End[Dashboard updated]
    ProsesKeluar -- "Tidak" --> End

Simulasi Alur Pengguna

Mari kita breakdown proses utama — check-in dan check-out — dari sisi frontend dan backend.

1. Login Pegawai

Frontend (React):

// AuthService.js
async function login(email, password) {
    const res = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password })
    });
    return res.json();
}

Endpoint /api/login akan membalas JWT jika login sukses.

2. Check-in: Absensi Masuk

Frontend (React):

async function checkIn(token) {
    const res = await fetch('/api/attendance/check-in', {
        method: 'POST',
        headers: { 'Authorization': `Bearer ${token}` }
    });
    return res.json();
}

Backend (Node.js + Express):

// attendanceRoutes.js
const express = require('express');
const router = express.Router();
const { verifyToken } = require('./middleware/auth');
const db = require('./db');

router.post('/check-in', verifyToken, async (req, res) => {
    const employeeId = req.user.id; // didapat dari token
    const today = (new Date()).toISOString().slice(0,10);
    // Cek apakah sudah ada absensi hari ini
    const existing = await db('attendances')
        .where({ employee_id: employeeId, date: today }).first();
    if (existing) {
        return res.status(400).json({ error: 'Sudah absen hari ini' });
    }
    await db('attendances').insert({
        employee_id: employeeId,
        date: today,
        check_in: new Date().toISOString().slice(11,19),
        status: 'Present'
    });
    res.json({ message: 'Check-in sukses' });
});

3. Check-out: Absensi Pulang

Frontend:

async function checkOut(token) {
    const res = await fetch('/api/attendance/check-out', {
        method: 'POST',
        headers: { 'Authorization': `Bearer ${token}` }
    });
    return res.json();
}

Backend:

router.post('/check-out', verifyToken, async (req, res) => {
    const employeeId = req.user.id;
    const today = (new Date()).toISOString().slice(0,10);
    const attendance = await db('attendances')
        .where({ employee_id: employeeId, date: today }).first();
    if (!attendance) {
        return res.status(400).json({ error: 'Belum check-in' });
    }
    if (attendance.check_out) {
        return res.status(400).json({ error: 'Sudah check-out' });
    }
    await db('attendances')
        .where({ id: attendance.id })
        .update({ check_out: new Date().toISOString().slice(11,19) });
    res.json({ message: 'Check-out sukses' });
});

Fitur Laporan untuk HRD

Salah satu fitur krusial ialah laporan. Kita ingin menampilkan tabel rekap kehadiran dan persentase kehadiran tiap pegawai.

Query sederhana laporan absensi bulanan:

SELECT e.name, 
    COUNT(a.id) AS hadir, 
    SUM(CASE WHEN a.status = 'Late' THEN 1 ELSE 0 END) AS telat,
    SUM(CASE WHEN a.status = 'Absent' THEN 1 ELSE 0 END) AS absen
FROM employees e
LEFT JOIN attendances a ON e.id = a.employee_id AND MONTH(a.date) = 6
GROUP BY e.id, e.name
ORDER BY e.name;

Contoh hasil laporan:

Hasil tabel ini bisa muncul di dashboard HRD.

Simulasi UI Sederhana

(kode pseudo React, tampilan dashboard pegawai)

function AttendanceDashboard({ user, token }) {
    const [today, setToday] = useState(null);
    useEffect(() => {
        fetch('/api/attendance/today', {
            headers: { 'Authorization': `Bearer ${token}` }
        })
        .then(res => res.json())
        .then(setToday);
    }, [token]);

    return (
      <div>
        <h2>Hi {user.name}</h2>
        {today && (
          <>
            <p>Tanggal: {today.date}</p>
            <p>Check-in: {today.check_in || '-'}</p>
            <p>Check-out: {today.check_out || '-'}</p>
            {!today.check_in && (
              <button onClick={() => checkIn(token)}>Absensi Masuk</button>
            )}
            {today.check_in && !today.check_out && (
              <button onClick={() => checkOut(token)}>Absensi Pulang</button>
            )}
          </>
        )}
      </div>
    );
}

Best Practice & Challenge

Hal yang sering jadi tantangan:

• User Authentication: Selalu hash password, gunakan JWT atau session.
• Concurrency: Cegah double check-in/check-out di hari yang sama.
• Validasi Waktu: Tentukan batas waktu check-in (misal, >08:00:00 = Late).
• Audit Trail: Log perubahan absensi jika perlu edit.
• Sick/Leave/Cuti: Perlu ada penambahan status & validasi.
• Export Data: CSV/Excel untuk reporting bulanan.

Improvement

• Tambahkan face recognition (menggunakan webcam) untuk mengurangi kecurangan.
• Monitoring lokasi (GPS, untuk aplikasi mobile).
• Integrasi dengan payroll & sistem penggajian.

Kesimpulan

Melalui studi kasus ini, kita belajar bagaimana merancang sebuah aplikasi absensi pegawai yang robust secara sederhana. Kita menggunakan stack populer (React + Node.js) dan merancang tabel, endpoint, serta alur user mulai dari login hingga rekapan HRD. Studi kasus ini dapat dikembangkan lebih lanjut sesuai kompleksitas kebutuhan enterprise, serta menjadi fondasi penting dalam membangun culture work accountability di dunia kerja modern.

Punya pengalaman membangun absensi digital? Yuk diskusi di kolom komentar!

Referensi:

• Express.js documentation
• React docs
• JWT.io

Happy engineering! 🚀