Kang Ruli Blog

Download Aplikasi Absensi Online Berbasis Web Gratis (Full Source Code & Fitur Lengkap)

Di era digitalisasi pendidikan dan perkantoran, sistem absensi manual menggunakan kertas sudah mulai ditinggalkan. Selain boros, cara lama ini rawan manipulasi. Solusinya adalah Aplikasi Absensi Online Berbasis Web yang terintegrasi dengan Google Sheets, Kamera Selfie, dan Lokasi GPS.

Download Aplikasi Absensi Online Berbasis Web Gratis

Pada artikel ini, kami membagikan Source Code Lengkap aplikasi absensi (studi kasus SMKN Bojonggambir) yang bisa Anda gunakan dan modifikasi. Aplikasi ini ringan, tidak perlu sewa hosting (menggunakan Google Apps Script), dan memiliki fitur keamanan canggih.

👉 Download Source Code Aplikasi Absen di sini:
https://bit.ly/4qnOw8I

Mengapa Aplikasi Ini Istimewa? (Bedah Fitur)

Berdasarkan kode program (Index.html dan GS Code) yang membangun aplikasi ini, berikut adalah fitur-fitur unggulan yang menjadikannya solusi absensi yang powerful:

1. Antarmuka Modern & Responsif (Mobile-First)

Aplikasi ini dirancang menggunakan desain card-based yang bersih dengan font Inter.

• Teknologi: Menggunakan CSS Variables (:root) untuk manajemen warna tema (Biru/Putih) dan @media query untuk memastikan tampilan sempurna di HP maupun Laptop.
• UX: Navigasi menggunakan sistem Tab yang mulus antara "Form Absen" dan "Cetak Laporan" tanpa perlu reload halaman.

2. Fitur Anti-Titip Absen (Validasi Kamera Selfie)

Salah satu fitur terkuat di Index.html adalah integrasi kamera langsung di browser.

• Cara Kerja: Saat siswa memilih status "Hadir" atau "Pulang", formulir otomatis membuka akses kamera (navigator.mediaDevices.getUserMedia).
• Keamanan: Siswa wajib mengambil foto selfie saat itu juga. Foto dikonversi menjadi data Base64 dan dikirim ke server. Tombol kirim tidak akan berfungsi jika foto belum diambil.
• Fitur Tambahan: Tersedia tombol Retake (Foto Ulang) jika hasil foto kurang jelas.

3. Validasi Lokasi (GPS Geolocation)

Mencegah siswa absen dari rumah atau warnet.

• Teknologi: Menggunakan API navigator.geolocation.getCurrentPosition.
• Fungsi: Saat tombol kirim ditekan, sistem mengambil koordinat Latitude dan Longitude perangkat. Jika GPS mati atau browser tidak mengizinkan lokasi, absensi akan ditolak.

4. Database Real-time dengan Google Sheets

Bagian backend (GS Code) menggunakan Google Spreadsheet sebagai database. Ini membuat aplikasi 100% Gratis tanpa biaya sewa server/hosting bulanan.

• Script: SpreadsheetApp.openById(SS_ID) menghubungkan web app dengan file Excel online Anda.
• Otomatisasi: Data yang masuk otomatis mencatat Tanggal, Jam, Kelas, Nama, Status, dan Koordinat Lokasi.

5. Sistem Laporan & Cetak PDF Otomatis

Tidak perlu merekap manual di akhir bulan. Aplikasi ini memiliki fitur admin bawaan.

• Keamanan: Menu laporan dilindungi password (default: 123456) sehingga siswa tidak bisa mengintip data.
• Filter Canggih: Admin bisa melihat data berdasarkan Kelas tertentu atau Rentang Tanggal (Harian/Mingguan/Bulanan).
• Mode Cetak: Menggunakan CSS @media print, tampilan web otomatis berubah menjadi format dokumen resmi saat dicetak (Header surat muncul, tombol navigasi hilang), siap untuk di-print ke PDF/Kertas.

---

Penjelasan Teknis Source Code

Bagi Anda yang ingin memodifikasi, berikut adalah penjelasan alur logika dari kode yang disediakan:

A. Bedah Index.html (Frontend)

Struktur HTML & CSS:
Halaman dibagi menjadi container utama dengan lebar maksimal 480px (tampilan seperti aplikasi native di HP). Menggunakan elemen <video> (tersembunyi) untuk stream kamera dan <canvas> untuk menangkap gambar diam (snapshot).

Logika Javascript (Client-Side):

• loadDataAwal(): Fungsi ini berjalan saat web dibuka. Ia melakukan fetch() ke Google Script untuk mengambil daftar Kelas secara dinamis.
• bukaKamera() & ambilFoto(): Mengatur akses hardware kamera depan (facingMode: 'user'). Foto dikompresi (kualitas 0.6) agar pengiriman data cepat.
• cekLokasiDanKirim(): Fungsi vital yang membungkus semua data (NIS, Nama, Foto, Koordinat) menjadi format JSON, lalu dikirim via POST request ke Google Script.
• loadLaporan(): Mengambil data absensi yang sudah tersimpan untuk ditampilkan dalam tabel HTML.

B. Bedah Code.gs (Backend Google Apps Script)

• doGet(): Fungsi standar Google Apps Script untuk merender file HTML menjadi halaman web yang bisa diakses publik.
• getSiswaData(): Membaca sheet bernama "DATA_SISWA". Script ini memetakan kolom Kelas dan Nama Siswa, lalu mengirimkannya ke frontend agar dropdown nama siswa otomatis terisi sesuai kelas yang dipilih.
• prosesAbsensi(data): Menerima paket data dari frontend.
  • Validasi Duplikat: Script melakukan looping cek data lama. Jika siswa dengan nama yang sama sudah absen pada tanggal yang sama, sistem akan menolak (Mencegah double input).
  • Penyimpanan: Jika valid, data ditambahkan (appendRow) ke sheet "ABSENSI" mencakup: Timestamp, Kelas, Nama, Status, dan Jarak (jika ada).

Cara Instalasi & Penggunaan

Ingin segera menggunakan aplikasi ini untuk sekolah atau kantor Anda? Ikuti langkah mudah ini:

1. Download Script: Klik link ini: https://bit.ly/4qnOw8I
2. Siapkan Google Sheet: Buat Google Sheet baru, buat dua tab (sheet):
   • DATA_SISWA: Isi kolom A dengan Kelas, Kolom B dengan Nama Siswa.
   • ABSENSI: Biarkan kosong untuk menampung data masuk.
3. Pasang Script:
   • Di Google Sheet, klik Ekstensi > Apps Script.
   • Copy-paste kode GS Code ke file Code.gs.
   • Buat file HTML baru bernama Index.html dan paste kode HTML di atas.
   • Ganti SS_ID di dalam kode GS dengan ID Spreadsheet Anda.
4. Deploy: Klik Terapkan (Deploy) > Aplikasi Web Baru > Set akses ke "Siapa saja (Anyone)".
5. Selesai! Anda akan mendapatkan URL Web App yang bisa disebar ke siswa/karyawan.

Kesimpulan

Aplikasi absensi dengan source code di atas adalah solusi cerdas untuk manajemen kehadiran yang hemat biaya, transparan, dan akurat. Dengan fitur validasi foto dan lokasi, celah kecurangan bisa diminimalisir. Ditambah lagi, fitur laporan PDF memudahkan administrasi sekolah.

Jangan ragu untuk mengunduh dan mengembangkannya sesuai kebutuhan instansi Anda.

📥 Download Sekarang