Sistem BK

Terlambat Hari Ini

0

–

⏰

Alpha Minggu Ini

0

minggu ini

📌

Total Konseling

0

semua waktu

💬

Siswa Bermasalah

0

perlu perhatian

⚠️

Tren 7 Hari Terakhir

Terlambat · Alpha · Konseling

Per Kelas

Total poin pelanggaran

Riwayat Hari Ini

–

Semua Terlambat Alpha

Siswa	Kelas	Status	Jam	Poin

🚨 Perlu Tindakan

🔴 Merah (≥50 poin)

0

Panggil orang tua

🟡 Kuning (25–49)

0

Perlu konseling

🟢 Hijau (<25)

0

Kondisi normal

Daftar Siswa Bermasalah

Semua 🔴 Merah 🟡 Kuning

Siswa	Kelas	Total Poin	Terlambat	Alpha	Konseling	Status	Aksi

Cari Siswa *

Jam Masuk *

Tanggal

Kategori Keterlambatan

Alasan

Keterangan Tambahan

Cari Siswa *

Tanggal *

Status *

Keterangan

Cari Siswa *

Tanggal *

Jenis Konseling

Permasalahan *

Tindakan yang Diambil *

Hasil

Tindak Lanjut

🔍

Cari Siswa

Ketik nama atau NIS di atas

📊

Rekap Pelanggaran

Semua siswa + total poin

📋

Rekap Absensi

Terlambat, sakit, izin, alpha

💬

Rekap Konseling

Semua sesi konseling

Filter Laporan Kustom

Kelas

Dari Tanggal

Sampai

Semua Riwayat Absensi

Tanggal	Siswa	Kelas	Status	Keterangan	Poin

NIS	Nama Siswa	Kelas	Ortu/Wali	HP Ortu	Total Poin	Status	Aksi

🏫 Identitas Sekolah

Logo Sekolah

🏫

Klik untuk upload logo

PNG, JPG, SVG — maks 2MB

Nama Sekolah

Nama Aplikasi

Tahun Ajaran

Kepala Sekolah

🎨 Tampilan

Mode Gelap / Terang

Sesuaikan tema tampilan aplikasi

☀️

🌙

Sidebar Kompak

Tampilkan ikon saja di sidebar

Warna Aksen

Pilih warna utama aplikasi

Ukuran Font

Sesuaikan ukuran teks aplikasi

📊 Konfigurasi Poin & Threshold

Poin Terlambat Ringan

Di bawah 15 menit

Poin Terlambat Sedang

15 – 30 menit

Poin Terlambat Berat

Lebih dari 30 menit

Poin Alpha

Tanpa keterangan

Threshold Kuning

Batas awal peringatan

Threshold Merah

Batas panggil ortu

💾 Backup & Data

Export Backup Data

Download semua data ke file JSON

Import Backup Data

Pulihkan data dari file JSON

Reset Data Absensi

Hapus semua data absensi & konseling

⚠️ Reset tidak bisa dibatalkan. Pastikan sudah backup terlebih dahulu.

🔒 Akun & Keamanan

Password Lama

Password Baru

Konfirmasi Password

💡 Password default: 1234. Segera ganti setelah pertama kali login.

ℹ️ Informasi Aplikasi

Versi Aplikasi

v2.0.0

Total Siswa Terdaftar

240

Total Record Absensi

0

Total Konseling

0

Storage Digunakan

0 KB

💡 Aplikasi ini adalah file HTML single-page yang bisa langsung dibuka di browser tanpa server. Untuk deploy ke Cloudflare Pages, ikuti langkah berikut.

1

Persiapan: Install Node.js & Wrangler CLI

~10 menit ▼

Wrangler adalah CLI resmi Cloudflare untuk deploy. Pastikan Node.js sudah terinstall.

Download dan install Node.js LTS dari nodejs.org
Buka Terminal (Windows: PowerShell, Mac/Linux: Terminal)
Install Wrangler secara global:

npm install -g wrangler

Verifikasi instalasi berhasil:

wrangler --version
# Output: ⛅️ wrangler x.x.x

✅ Jika muncul versi wrangler, instalasi berhasil.

2

Buat Akun Cloudflare (Gratis)

Gratis ▼

Buka dash.cloudflare.com/sign-up
Isi email dan password → klik Create Account
Verifikasi email yang dikirim ke inbox Anda
Login ke dashboard Cloudflare

💡 Akun Cloudflare gratis selamanya untuk Cloudflare Pages dengan bandwidth tidak terbatas.

3

Siapkan File HTML untuk Deploy

Penting ▼

Download file aplikasi BK ini (simpan sebagai index.html)
Buat folder baru di komputer, contoh: sistem-bk/
Pindahkan index.html ke dalam folder tersebut
Struktur folder yang diperlukan:

sistem-bk/
└── index.html        # ← file aplikasi BK ini

⚠️ Pastikan nama file adalah index.html (huruf kecil semua), bukan Index.html atau INDEX.html

4

Login Wrangler & Deploy ke Cloudflare Pages

Deploy ▼

Buka terminal, masuk ke folder proyek:

cd sistem-bk

Login ke Cloudflare via Wrangler (akan buka browser):

wrangler login

Deploy ke Cloudflare Pages untuk pertama kali:

wrangler pages deploy . \
  --project-name=sistem-bk-smkypm14

Pilih Create a new project jika ditanya
Tunggu proses upload selesai (biasanya 10–30 detik)
Salin URL yang muncul, contoh: https://sistem-bk-smkypm14.pages.dev

✅ Aplikasi Anda sudah online! URL tersebut bisa langsung dibuka di HP maupun komputer.

5

Update Aplikasi (Deploy Ulang)

Opsional ▼

Setiap kali ada perubahan pada index.html, jalankan perintah ini:

wrangler pages deploy . \
  --project-name=sistem-bk-smkypm14

💡 Perubahan akan langsung aktif dalam 1–2 menit setelah deploy.

6

Alternatif: Deploy via Dashboard Web (Tanpa CLI)

Lebih Mudah ▼

Login ke dash.cloudflare.com
Klik menu Workers & Pages di sidebar kiri
Klik tombol Create application
Pilih tab Pages → klik Upload assets
Beri nama proyek: sistem-bk-smkypm14
Klik Create project
Drag & drop file index.html ke area upload, atau klik Select from computer
Klik Deploy site
Tunggu hingga status Success — klik URL yang muncul

✅ Cara ini tidak perlu install apapun — langsung dari browser!

7

Pasang Domain Kustom (Opsional)

Opsional ▼

Di dashboard Cloudflare, buka proyek Pages Anda
Klik tab Custom domains
Klik Set up a custom domain
Masukkan domain Anda, misal: bk.smkypm14.sch.id
Ikuti instruksi untuk set DNS di domain registrar Anda

💡 Jika sekolah sudah punya domain (.sch.id), Anda bisa buat subdomain bk.namasekolah.sch.id secara gratis.

8

Catatan Penting: Tentang Data & Keamanan

Penting! ▼

Data disimpan di localStorage browser — artinya data tersimpan di perangkat masing-masing pengguna, bukan di server
Untuk penggunaan multi-perangkat (guru BK dan guru piket bisa input dari HP berbeda), diperlukan backend (Cloudflare D1 + Worker) — hubungi developer
Gunakan fitur Export Backup di Pengaturan secara rutin untuk menyimpan data
Ganti password default (1234) segera setelah pertama login
Aplikasi ini optimal digunakan dari 1 perangkat yang sama (misal laptop guru BK)

⚠️ Data TIDAK tersinkronisasi antar perangkat pada versi ini. Backup rutin sangat dianjurkan!

🔜 Untuk upgrade ke versi dengan database server (multi-user, multi-device), diperlukan Cloudflare D1 + Worker. Hubungi tim pengembang.

✅ Ringkasan Deploy Cepat

1. Simpan file ini sebagai index.html
2. Buka dash.cloudflare.com → Workers & Pages → Create → Pages → Upload assets
3. Upload index.html → Deploy
4. Aplikasi online di URL nama-proyek.pages.dev ✓