Coding

Membangun Sistem Absensi Siswa

22/01/2026 Oleh admin

Membangun sistem absensi dan penanganan siswa di WordPress adalah langkah cerdas untuk digitalisasi sekolah. Menggunakan Child Theme GeneratePress adalah pilihan tepat karena temanya ringan, stabil, dan sangat ramah bagi pengembang.

Berikut adalah panduan teknis dasar untuk membangun sistem tersebut menggunakan pendekatan koding (custom code).

Membangun Sistem Absensi Siswa di WordPress

Dengan menggunakan Child Theme, perubahan kode yang kita lakukan tidak akan hilang saat tema utama diperbarui.

1. Persiapan Child Theme

Pastikan Anda sudah mengaktifkan Child Theme GeneratePress. Struktur folder Anda minimal akan memiliki file style.css dan functions.php.

2. Membuat Database Siswa (Custom Post Type)

Kita tidak menggunakan “Post” biasa, melainkan membuat tipe konten khusus bernama “Siswa”. Masukkan kode ini di functions.php:

PHP

function buat_post_type_siswa() {
    register_post_type('siswa',
        array(
            'labels'      => array('name' => 'Siswa', 'singular_name' => 'Siswa'),
            'public'      => true,
            'has_archive' => true,
            'menu_icon'   => 'dashicons-businessman',
            'supports'    => array('title', 'editor', 'thumbnail', 'custom-fields'),
        )
    );
}
add_action('init', 'buat_post_type_siswa');

3. Logika Absensi (PHP & AJAX)

Untuk mencatat kehadiran tanpa refresh halaman, kita gunakan AJAX. Buat fungsi di functions.php untuk menangkap input dari form absensi:

  • PHP: Gunakan update_post_meta() untuk menyimpan status kehadiran (Hadir, Izin, Alpa) berdasarkan ID siswa dan tanggal hari ini.
  • Keamanan: Gunakan check_admin_referer() untuk memastikan data yang masuk aman dari serangan CSRF.

4. Interface Form Absensi (HTML & CSS)

Buat halaman khusus (Page Template) untuk guru mengabsen. Gunakan CSS di style.css agar tampilan tabel absen rapi di HP:

CSS

/* Custom CSS untuk Tabel Absen */
.tabel-absen {
    width: 100%;
    border-collapse: collapse;
}
.tabel-absen th, .tabel-absen td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
}
.btn-hadir { background-color: #27ae60; color: white; border: none; padding: 5px 10px; cursor: pointer; }

5. Fitur Penanganan Siswa (Catatan Konseling)

Gunakan Custom Fields untuk mencatat poin pelanggaran atau prestasi. Anda bisa menggunakan plugin ACF (Advanced Custom Fields) agar proses input lebih mudah, lalu panggil datanya di front-end menggunakan PHP:

PHP

$poin_siswa = get_field('poin_pelanggaran', $post_id);
echo "Total Poin: " . $poin_poin_siswa;

6. Interaktivitas dengan JavaScript

Gunakan sedikit Vanilla JS atau jQuery (yang sudah ada di WordPress) untuk memberikan notifikasi sukses saat tombol absen diklik.

JavaScript

// Contoh sederhana feedback absen
document.querySelectorAll('.btn-hadir').forEach(button => {
    button.addEventListener('click', function() {
        this.innerHTML = "Tercatat!";
        this.style.backgroundColor = "#95a5a6";
    });
});

Mengapa Pendekatan Ini Efektif?

  • Ringan: Tidak banyak memakan memori karena minim plugin pihak ketiga.
  • Kustom: Anda bisa menentukan sendiri apakah siswa yang terlambat 3 kali otomatis mendapat poin pelanggaran melalui logika PHP.
  • Privasi: Data tersimpan di server sendiri, bukan di pihak ketiga.

Catatan Penting: Karena ini melibatkan data siswa, pastikan Anda membatasi akses halaman absensi ini hanya untuk pengguna dengan role “Editor” atau “Teacher” menggunakan fungsi current_user_can().

Tinggalkan komentar