Demo interaktif — bisa dicoba tanpa daftar

Kelola TPQ lebih tenang, dari ngaji sampai rapor.

SantriApp menyatukan sesi ngaji, absensi, infaq, hafalan per ayat, sholat harian, kegiatan, laporan, dan rapor dalam satu aplikasi yang rapi. Dibuat mengikuti alur kerja nyata sebuah TPQ.

Buka demo interaktif Jelajahi fitur
Data tersimpan sebagai JSON Siap HP & desktop Tanpa backend
10modul terhubung
3peran pengguna
100%data JSON lokal
0server dibutuhkan
santriapp / demo JSON tersimpan
Assalamu'alaikumDashboard Admin
Cari santri, kelas…
AF
Ringkasan hari ini4 sesi berjalan • 86% kehadiran
Buka Ngaji
Santri aktif24+2 bulan ini
Infaq bulan iniRp 1,24 jt82% lunas
Setoran hafalan52bulan berjalan
Sholat 5 waktu74%+6% pekan ini
Tren Infaq6 bulan
JunJulAguSepOktNov
Sesi Hari Ini4 sesi
Iqro AUstadz Ahmad • 16:00Selesai
Tahfidz Juz 30Ustadz Hasan • 15:30Draft
Al-Qur'an LanjutUstadzah Salma • 15:30Selesai
Daftar Hadir • Iqro A12 santri
AFAhmad FauzanNIS 2026001HadirInfaq lunas
SMSiti MaryamNIS 2026002TerlambatInfaq
Infaq terkumpulRp 1.240.00082% lunas bulan ini
Hafalan lancar128 ayatAn-Naba • Juz 30
Rapor siap cetakA4 • PDFLengkap & formal
Dirancang untuk alur nyata TPQ
Absensi & infaq satu layar Penilaian hafalan per ayat Monitoring sholat harian Rapor formal siap cetak Export / import JSON
Fitur lengkap

Semua kebutuhan TPQ,
tanpa tab yang berantakan.

Satu alur dari guru membuka sesi sampai wali menerima rapor. Setiap modul saling terhubung, sehingga data tidak perlu dicatat dua kali.

Ngaji & absensi

Satu layar untuk absen, infaq, hafalan, dan sholat.

Guru membuka sesi kelas, lalu menandai kehadiran, mencatat infaq, menilai setoran hafalan per ayat, dan mencentang sholat tanpa berpindah halaman.

  • Hadir, terlambat, izin, sakit, alfa
  • Infaq cash / transfer per pertemuan
  • Tutup sesi mengunci absensi & bisaroh
Daftar Hadir • Iqro A12 santri
AFAhmad FauzanNIS 2026001Hadir
SMSiti MaryamNIS 2026002Telat
MRMuhammad RizkiNIS 2026003Hadir
✓ Hadir semua Infaq lunas Nilai hafalan
Kehadiran11/12
InfaqRp 220.000
Setoran8 santri
Kas & infaq

Uang masuk dan keluar terlihat jelas.

Rekap infaq cash, transfer, bisaroh guru, dan pengeluaran operasional dalam satu saldo bersih.

Saldo bersih Rp 892.500
Infaq − bisaroh − operasional
Hafalan per ayat

Progres yang bisa dibaca, bukan hanya dicatat.

Pohon materi Juz 30, doa, dan tajwid. Setiap ayat punya status lancar, diulang, atau belum.

An-Naba32/40
An-Nazi'at18/46
Al-Ikhlas4/4 ✓
Sholat harian

Pantau kebiasaan sholat 5 waktu.

Heatmap bulanan dan catatan per hari membantu pembimbing melihat pola, bukan sekadar angka.

Sebagian 3–4 waktu 5 waktu
Kegiatan

Tahlilan, yasinan, tadarus, haflah.

Buat agenda, tentukan audiens, lalu isi checklist kehadiran seperti sesi kelas.

12NOV
Istighosah Bulanan19:30 • Masjid Al-Hikmah
Semua santri86% hadir
Rapor & laporan

Dari data harian menjadi rapor formal.

Rapor A4 berisi kehadiran, hafalan, sholat, infaq, kegiatan, dan catatan pembimbing. Siap cetak atau simpan PDF.

TPQ AL-HIKMAHSurat Keterangan Perkembangan Belajar
Kehadiran92%Hafalan128 ayat
Sholat 5 waktu74%InfaqLunas
Laporan & portal

Keputusan lebih mudah, komunikasi lebih dekat.

Laporan per kelas, per santri, per bulan. Portal santri menampilkan progres hafalan, sholat, infaq, dan rapor — tanpa perlu bertanya lewat pesan singkat.

RingkasanHafalanSholatKehadiranKegiatanExport CSV
Aktivitas Harian24 hari
Kehadiran 86% Izin 9% Alfa 5%
Portal SantriAF
Assalamu'alaikumAhmad FauzanIqro A • Level 1
Hadir92%
Hafalan34
Sholat74%
Infaq NovemberLunas
Rapor terakhirLihat →
Alur kerja

Empat langkah, satu sesi selesai.

Alur yang sama dipakai setiap hari, sehingga guru baru pun cepat terbiasa.

01

Buka sesi

Pilih tanggal dan kelas. Sistem menyiapkan daftar santri, jadwal, dan tarif infaq otomatis.

Ngaji
02

Absen & catat

Tandai kehadiran, infaq, setoran hafalan per ayat, dan sholat dari satu daftar hadir.

Daftar hadir
03

Tutup sesi

Absensi terkunci, bisaroh guru disetujui, kas dan laporan langsung diperbarui.

Kas & bisaroh
04

Rapor & pantau

Lihat tren kehadiran, hafalan, dan sholat. Cetak rapor formal untuk wali santri.

Laporan
Tiga peran

Satu data, tampilan yang tepat untuk setiap orang.

Admin mengatur, guru mengajar dan menilai, santri memantau. Hak akses guru dapat diatur sesuai kebutuhan lembaga.

Akses penuh

Admin / Pengelola

Mengatur seluruh master data, keuangan, periode, akun, dan konfigurasi lembaga.

  • Dashboard KPI & audit trail
  • Data santri, guru, kelas & level
  • Kas, tarif, bisaroh & pengeluaran
  • Backup / restore JSON
Masuk sebagai admin
Sesuai ACL

Guru / Ustadz

Fokus pada kelas yang diampu. Semua pencatatan harian selesai dalam satu layar.

  • Buka & tutup sesi ngaji
  • Absensi, infaq & bisaroh
  • Nilai hafalan & sholat
  • Kegiatan & laporan kelas
Masuk sebagai guru
Portal pribadi

Santri / Wali

Melihat perkembangan anak secara transparan, kapan saja, dari HP.

  • Progres hafalan per surah
  • Riwayat sholat & kehadiran
  • Status infaq bulan ini
  • Rapor siap cetak
Masuk sebagai santri
Demo yang benar-benar menyimpan

Semua perubahan menjadi JSON yang bisa Anda bawa.

Tidak ada data palsu yang hilang saat halaman dimuat ulang. Setiap create, edit, dan delete disimpan ke localStorage sebagai satu objek JSON. Unduh untuk backup, impor untuk memulihkan, atau reset untuk kembali ke data awal.

Coba panel Data JSON Lihat seed JSON
Export / import Reset ke seed Audit trail
santriapp-data.jsonlocalStorage
"meta": {
  "app": "SantriApp",
  "version": 1,
  "demo": true
},
"tpq": {
  "nama": "TPQ Al-Hikmah",
  "tahun_ajaran": "2026/2027"
},
"santri": [
  {
    "nis": "2026001",
    "nama": "Ahmad Fauzan",
    "kelas_id": 1
  }
],
"sesi": [ … ],
"absensi": [ … ],
"infaq": [ … ],
"setoran": [ … ]
// 20+ koleksi terhubung
Tersimpan otomatis setiap perubahan
Pertanyaan umum

Sebelum Anda mencoba.

Jawaban singkat tentang demo, data, dan tampilan yang akan Anda lihat.

Buka demo sekarang
Apakah demo ini membutuhkan server atau internet?

Tidak. Landing page dan aplikasi demo adalah file statis. Anda bisa membukanya lewat HTTP server lokal atau langsung dari file app.html. Tidak ada backend, API, atau database eksternal.

Di mana data demo disimpan?

Seluruh data disimpan sebagai satu objek JSON di localStorage browser dengan kunci santriapp_demo_db_v1. Data tetap ada saat halaman dimuat ulang, dan dapat diunduh, disalin, diimpor, atau direset dari panel Data JSON.

Bagaimana cara login sebagai santri?

Gunakan NIS santri sebagai username dan PIN dengan format tanggal lahir DDMMYYYY. Pada layar login tersedia tombol login cepat untuk Admin, Guru, dan Santri agar Anda bisa langsung menjelajah.

Apakah rapor bisa dicetak atau disimpan sebagai PDF?

Bisa. Halaman rapor memakai format A4 formal dengan kop lembaga, identitas santri, capaian akademik, rekap kehadiran, administrasi, catatan pembimbing, dan area tanda tangan. Gunakan tombol Cetak / PDF lalu pilih “Save as PDF” pada dialog cetak browser.

Apakah tampilannya nyaman di HP?

Ya. Aplikasi memakai navigasi bawah, kartu responsif, dan target sentuh yang nyaman di layar kecil. Di desktop, sidebar dan area kerja yang lebih lebar akan muncul otomatis.

Apakah data demo bisa dipakai untuk aplikasi sungguhan?

Data JSON demo mengikuti struktur koleksi aplikasi: santri, kelas, sesi, absensi, infaq, setoran, sholat, event, dan lainnya. Cocok untuk eksplorasi alur dan evaluasi UI. Untuk produksi, tetap diperlukan backend, autentikasi, dan kebijakan keamanan data.

Mulai dari sesi hari ini

Rasakan alur TPQ yang lebih rapi.

Buka demo, pilih peran, dan coba sendiri: buka sesi, catat infaq, nilai hafalan, lalu cetak rapor. Semua perubahan tersimpan sebagai JSON.

Buka demo interaktif Lihat fitur lagi
Tanpa daftar • tanpa server • data di browser Anda