##### Versi Demo Interaktif

Semua peran dapat diuji langsung

DEMO

# PRESENSI

Presensi Digital WebApp

Masukkan Username atau NISN / NIP
Masukkan Password akun Anda
Izinkan akses lokasi GPS di perangkat
Izinkan akses kamera untuk presensi QR

Username atau password tidak sesuai.

Uji Coba Cepat (1-Klik): Pilih Role

#### Presensi Digital

Sistem Presensi Digital dengan QR Code, Barcode Scanner, dan GPS Geofencing.

## Dashboard

Hari ini

Senin, 1 Jan 2026

#### Akun Demo Aktif • Sistem Absensi Digital SMANSA

Seluruh fitur presensi QR & GPS dapat diuji coba. Data inti dan password akun utama dilindungi.

## Dashboard Administrator

Pusat kontrol dan monitoring absensi sekolah realtime.

...

Total Siswa Terdaftar

### 0

Hadir

Rincian

### 0

Siswa hadir

Sakit

Rincian

### 0

Siswa sakit

Izin

Rincian

### 0

Siswa izin

Alpa

Rincian

### 0

Tanpa keterangan

Total Guru Terdaftar

### 0

Hadir

Rincian

### 0

Guru hadir

Izin / Sakit

Rincian

### 0

Guru izin/sakit

Total Tendik Terdaftar

### 0

Hadir

Rincian

### 0

Tendik hadir

Izin / Sakit

Rincian

### 0

Tendik izin/sakit

### Grafik Statistik Kehadiran Hari Ini

Realtime

### Akses Cepat

### Monitoring Presensi Realtime 0 Data

Pantau dan kelola kehadiran Siswa, Guru, dan Tendik hari ini secara langsung.

No | Nama & Identitas | Kategori & Kelas / Jabatan | Jam Datang | Jam Pulang | Keterangan | Status Kehadiran
--- | --- | --- | --- | --- | --- | ---
Memuat data monitoring presensi...

Menampilkan 0 data
1

### Daftar Pengguna Login & Perangkat Terdeteksi 0 Aktif

Monitoring realtime sesi pengguna beserta tipe perangkat (HP/Laptop), OS, dan browser.

Sesi Aktif

#### 0

Smartphone (HP)

#### 0

Komputer / PC

#### 0

Total Riwayat

#### 0

No | Pengguna | Peran & Jabatan | Merk & Tipe Perangkat | Waktu Login | Status Sesi | Aksi
--- | --- | --- | --- | --- | --- | ---
Memuat data sesi login...

## Dashboard Operator Absensi

Pusat pencatatan kehadiran mandiri & pemindaian barcode Siswa, Guru, dan Tendik.

...
Operator Absensi

### Operator Absensi Sekolah

Operator Sistem Presensi

ID/Username: -

Otoritas: OPERATOR_ABSENSI

#### Status Kehadiran Mandiri Hari Ini

Belum Absen

Absen Masuk (Datang)

#### -

Absen Pulang

#### -

-

Info Keamanan Sistem & Gateway Absensi:

Operator terautentikasi melalui sesi RS256 JWT terverifikasi. Seluruh mutasi presensi diproses melalui Trusted Backend Gateway.

### Scan Absensi

Scanner Kamera & Barcode HID

Pindai kartu QR Code/Barcode milik Siswa, Guru, dan Tendik secara langsung untuk mencatat kehadiran harian.

### Kelola Absensi

Jadwal & Hari Libur

Lihat konfigurasi jam operasional absensi otomatis serta daftar kalender hari libur sekolah yang berlaku.

### Profil & Akun

Keamanan & Sandi

Kelola informasi akun Anda, perbarui foto profil pengguna, atau ganti kata sandi login sistem.

#### Matriks Otorisasi Kehadiran Operator

Scan Siswa

DIIZINKAN (ALLOW)

Scan Guru

DIIZINKAN (ALLOW)

Scan Tendik

DIIZINKAN (ALLOW)

Self-Attendance

DIIZINKAN (ALLOW)

## Dashboard Guru

Ringkasan aktivitas dan kehadiran siswa hari ini.

...
Guru / Tenaga Pendidik

### ...

...

NIP: ...

No. HP: ...

#### Status Presensi Guru Hari Ini

Belum Absen

Absen Masuk (Datang)

#### -

Absen Pulang

#### -

-

Informasi Presensi Guru (Anti-Fraud GPS):

Presensi mandiri guru wajib mengaktifkan GPS lokasi dan berada dalam radius maksimal 200 meter dari titik koordinat lokasi instansi yang ditentukan.

Total Siswa Kelas

### 0

Hadir

Rincian

### 0

Siswa hadir

Sakit

Rincian

### 0

Siswa sakit

Izin

Rincian

### 0

Siswa izin

Alpa

Rincian

### 0

Tanpa keterangan

### Statistik Kehadiran Hari Ini Realtime

### Mulai Scan Absensi

Buka scanner kamera untuk mendata kehadiran siswa kelas Anda.

...

## Hai, Siswa

Semoga kegiatan belajarmu hari ini menyenangkan!

Memuat...
Jam Datang
--:--
Jam Pulang
--:--

#### Peringatan Absensi

Anda belum melakukan scan absensi datang hari ini. Harap tunjukkan kartu QR kepada guru / petugas absensi.

Total Hadir

#### 0

Terlambat

#### 0

Izin

#### 0

Sakit

#### 0

### Laporan & Riwayat Kehadiran

Catatan waktu scan datang, jam pulang, dan status presensi Anda.

0 Catatan

No | Tanggal | Jam Datang | Jam Pulang | Status | Keterangan
--- | --- | --- | --- | --- | ---
Memuat riwayat kehadiran...

### Nama Siswa

1234567890

Kelas

-

Status

Aktif

## Dashboard Tenaga Kependidikan

Presensi Digital & Profil Staf Pegawai.

...
Staf Kependidikan

### ...

...

NIP/NIK: ...

No. HP: ...

#### Status Kehadiran Hari Ini

Belum Absen

Absen Masuk (Datang)

#### -

Absen Pulang

#### -

-

Info Presensi Staf (Anti-Fraud GPS):

Presensi mandiri staf tendik wajib mengaktifkan GPS lokasi dan berada dalam radius maksimal 200 meter dari titik koordinat lokasi instansi yang ditentukan.

### Direktori Siswa

Show
0 siswa dipilih |

| No | Nama | NISN | Kelas | Kata Sandi | Aksi
--- | --- | --- | --- | --- | --- | ---

### Manajemen Akun Guru

Show
0 guru dipilih |

| No | NIP | Nama Lengkap | Username | Jabatan | Wali Kelas | No HP | Kata Sandi | Aksi
--- | --- | --- | --- | --- | --- | --- | --- | --- | ---

### Manajemen Data Tendik (Staf Kependidikan)

Kelola akun staf TU, Perpustakaan, Laboratorium, dan Keamanan SMANSA

Show
0 tendik dipilih |

| No | NIP / NIK | Nama Lengkap & Gelar | Jabatan | No. HP | Username | Kata Sandi | Aksi
--- | --- | --- | --- | --- | --- | --- | --- | ---

### Pengaturan Waktu

Konfigurasi jam operasional absensi otomatis.

Absen Datang

Mulai Buka
Batas Terlambat

Lewat batas ini status: Terlambat

Absen Pulang

Mulai Buka
Tutup Absen

Pulang sebelum dibuka: Pulang Cepat

Titik GPS & Radius Sekolah

5°03'02.0"N 97°20'09.1"E
Latitude
Longitude
Radius Maksimal (Meter)

Presensi mandiri guru & tendik ditolak jika > 200 meter.

### Daftar Hari Libur

Siswa tidak bisa absen pada tanggal libur ini.

Tanggal
Keterangan

No | Tanggal | Keterangan | Aksi
--- | --- | --- | ---

### Live View Monitoring Realtime LIVE

Pantau data kehadiran Siswa secara langsung. Tanggal: ...

Show

No | Siswa | Kelas | Jam Datang | Jam Pulang | Keterangan | Status Kehadiran
--- | --- | --- | --- | --- | --- | ---

### Laporan & Rekap Presensi

Rekap data kehadiran Siswa, Guru / Pendidik, dan Tenaga Kependidikan (Tendik).

Dari Tanggal
Sampai Tanggal
Kategori / Peran
Filter Kelas
Tampilkan

No | Tanggal | Nama | Peran | Kelas / Jabatan | Jam Datang | Jam Pulang | Keterangan | Status
--- | --- | --- | --- | --- | --- | --- | --- | ---

#### Menunggu Filter Periode

Silakan pilih rentang tanggal mulai dan tanggal akhir, lalu klik Cari Data.

#### Sedang Memproses Data...

### Scanner Presensi Siswa & Guru

Mendukung Kamera QR & External USB/Bluetooth Barcode Scanner

Status Scanner: Kamera & USB/HID Ready
Jadwal Presensi
Memuat jadwal...
Memeriksa...

Menyalakan Kamera...

Developer Only Full Master Control

## Manajemen User Sistem

Pusat kontrol hak akses dan otentikasi seluruh pengguna lintas-role.

### Developer Master: License Key Generator

1 Domain 1 Kunci

Generate kunci lisensi resmi Full Version untuk domain sekolah klien (Signature SHA-256).

Domain Target Sekolah Klien
Kunci Lisensi Dihasilkan

Total User

### 0

Semua entitas

Developer

### 0

Super Super Admin

Admin

### 0

Administrator

Guru

### 0

Guru & Wali

Tendik

### 0

Staf Sekolah

Siswa

### 0

Pelajar

No | Role | Identitas & Nama | Username Login | Jabatan / Kelas | Status Password | Aksi Cepat
--- | --- | --- | --- | --- | --- | ---
Memuat data user sistem...

Menampilkan 0 dari 0 data
System Customization Admin & Developer Control

## Pengaturan & Branding WebApp

Kustomisasi nama sekolah, upload logo, favicon kustom, titel webapp, jam absensi, dan titik koordinat GPS.

### Lisensi Domain & Status WebApp

Sistem Lisensi 1 Domain 1 Kunci Berbasis Enkripsi RSA-2048

Domain Aktif Terdeteksi Otomatis:
--
Auto Domain-Bound
Aktivasi Kunci Lisensi Baru

Kunci lisensi resmi Full Version dapat diperoleh dari Developer untuk domain aktif sekolah Anda.

### Konfigurasi Firebase Database

Realtime Cloud DB

Sinkronisasi Cloud Realtime & Penyimpanan Multi-Device

Standby
Developer & Super Admin Control: Konfigurasi Firebase Web SDK di bawah digunakan oleh WebApp untuk sinkronisasi Realtime Database. Akses data tetap dikontrol secara ketat oleh Firebase Security Rules.
Active Database Environment DEMO DATABASE
Mode / Endpoint Database Lokal / Standalone
Firebase Project ID *
Firebase Database URL *
Firebase API Key
Firebase Auth Domain
Firebase Storage Bucket
Firebase Messaging Sender ID
Firebase App ID

#### Firebase Security Rules

Salin atau unduh aturan keamanan granular untuk diterapkan di Firebase Console

    {
      "rules": {
        "config": {
          ".read": true,
          ".write": "auth != null",
          ".validate": "newData.hasChildren(['nama_sekolah', 'lokasi_lat', 'lokasi_lng'])"
        },
        "license": {
          ".read": true,
          ".write": "auth != null",
          ".validate": "newData.hasChildren(['domain', 'key', 'status']) && (newData.child('status').val() == 'FULL_VERSION' || newData.child('status').val() == 'active' || newData.child('status').val() == false)"
        },
        "licenses": {
          ".read": "auth != null",
          ".write": "auth != null"
        },
        "license_audit_logs": {
          ".read": "auth != null",
          ".write": true,
          "$log_id": {
            ".validate": "newData.hasChildren(['timestamp', 'action', 'domain'])"
          }
        },
        "developers": {
          ".read": "auth != null",
          ".write": "auth != null"
        },
        "guru": {
          ".read": true,
          ".write": "auth != null",
          "$item_id": {
            ".validate": "newData.hasChildren(['nama', 'role', 'username'])"
          }
        },
        "tendik": {
          ".read": true,
          ".write": "auth != null",
          "$item_id": {
            ".validate": "newData.hasChildren(['nama', 'role', 'username'])"
          }
        },
        "siswa": {
          ".read": true,
          ".write": "auth != null",
          "$item_id": {
            ".validate": "newData.hasChildren(['nama', 'nisn', 'kelas'])"
          }
        },
        "absensi": {
          ".read": true,
          ".write": true,
          "$item_id": {
            ".validate": "newData.hasChildren(['tanggal', 'status', 'role'])"
          }
        },
        "libur": {
          ".read": true,
          ".write": "auth != null"
        },
        "login_logs": {
          ".read": "auth != null",
          ".write": true,
          "$log_id": {
            ".validate": "newData.hasChildren(['timestamp', 'username', 'status'])"
          }
        }
      }
    }

Buka Firebase Console $\rightarrow$ Build $\rightarrow$ Realtime Database $\rightarrow$ Rules, lalu tempel aturan di atas dan klik Publish.

### Identitas Sekolah & Judul WebApp

Pengaturan nama instansi dan judul halaman web

Live Updating
Nama Lengkap Sekolah / Instansi

Ditampilkan di panel login, kartu digital siswa/guru, dan header laporan.

Singkatan / Nama Header Sidebar
Titel WebApp (Browser Tab Title)
Slogan / Deskripsi WebApp
Alamat Sekolah / Instansi

### Logo, Favicon & Pengesahan Kartu

Kustomisasi logo aplikasi, favicon tab, tanda tangan digital, dan cap stempel instansi

Auto Compress & Live Preview
Logo Utama Sekolah / Instansi PNG/JPG/SVG/WebP

Ukuran ideal: 512x512 px dengan latar belakang transparan.

Ubah
Ubah
Preview Logo Tampilan Gelap & Terang
Favicon Browser WebApp ICO/PNG/SVG

Ikon tab browser di smartphone dan komputer desktop.

Ubah
Ikon Tab Web
Presensi...
Tanda Tangan Kepala Instansi PNG/JPG Transparan

Ditampilkan pada pengesahan kartu pelajar siswa, guru, & tendik.

Ubah
Preview TTD Pengesahan Kartu Digital
Cap / Stempel Instansi Resmi PNG Transparan

Stempel resmi instansi untuk pelengkap tanda tangan kartu identitas.

Belum ada
Ubah
Preview Cap Stempel Cap Lembaga / Sekolah

### Jam Operasional & Geofencing GPS

Jadwal absensi dan batas radius lokasi sekolah

Absen Datang

Mulai Buka
Batas Terlambat

Absen Pulang

Mulai Buka
Tutup Absen
Latitude Lokasi
Longitude Lokasi
Radius Max (Meter)
Live Preview Panel Login

#### PRESENSI

Presensi Digital WebApp

Form Login Pengguna
Live Preview Sidebar

##### PRESENSI DIGITAL

Presensi Digital WebApp

Live Preview Tab Browser
Presensi Digital - Sistem Presensi Online
Preview Pengesahan Kartu
Kepala Instansi / Sekolah,
Zulkifli, M.Pd
NIP. 197003121997021001
License Management Domain-Bound & Asymmetric Token Engine

## Pusat Manajemen Lisensi

Kelola, buat, pantau, dan atur distribusi lisensi resmi untuk seluruh domain sekolah pelanggan.

Total Lisensi

### 0

Seluruh Lisensi
Aktif

### 0

Full Version Resmi
Suspended

### 0

Ditangguhkan
Expired

### 0

Masa Habis
Revoked

### 0

Dicabut
< 30 Hari

### 0

Perlu Perpanjangan

Kunci Lisensi (License Key) | Pelanggan / Sekolah | Domain Terkunci | Status | Masa Berlaku | Aktivasi | Aksi
--- | --- | --- | --- | --- | --- | ---
Memuat daftar lisensi...

Menampilkan 0 dari 0 lisensi terdaftar

Memproses Permintaan...

Harap tunggu sebentar