Main Logo
  • Home
  • About
  • Kursus
    • Paket Kursus
    • Roadmap Profesi
  • Elearning
  • Blog
Daftar
Main Logo
  • Home
  • About
  • Kursus
    • Paket Kursus
    • Roadmap Profesi
  • Elearning
  • Blog

Membangun Sistem Absensi Online Berbasis Google Apps Script dengan Fitur Kamera dan GPS

  • February 12, 2026
  • oleh Edusoft Center
Daftar Isi
  • Mengapa Sistem Absensi Perlu Digitalisasi?
  • Konsep Sistem yang Dibangun
  • Struktur Data di Google Sheets
    • 1. Sheet Login
    • 2. Sheet Absensi (Masuk, Ishoma, SelesaiIshoma, Pulang)
  • Fitur Utama Sistem
    • 1. Login Sederhana
    • 2. Empat Tombol Absensi
    • 3. Timestamp Otomatis
    • 4. Deteksi Lokasi Otomatis (GPS)
    • 5. Upload Foto Langsung dari Kamera
  • Alur Kerja Sistem
  • Proses Deployment
  • Proses Deployment
  • Kelebihan Menggunakan Google Apps Script
  • Potensi Pengembangan Lebih Lanjut
  • Penutup

Digitalisasi sistem kerja kini menjadi kebutuhan utama bagi banyak organisasi. Salah satu proses yang paling umum dan sering masih dilakukan secara manual adalah absensi karyawan. Padahal, dengan teknologi yang tersedia saat ini, sistem absensi modern dapat dibangun tanpa server khusus dan tanpa biaya infrastruktur tambahan.

Artikel ini membahas bagaimana membangun sistem absensi online menggunakan Google Apps Script dan Google Sheets, lengkap dengan fitur login, pengambilan foto langsung dari kamera, serta deteksi lokasi otomatis menggunakan GPS.


Mengapa Sistem Absensi Perlu Digitalisasi?

Absensi manual memiliki banyak kelemahan. Mulai dari potensi manipulasi data, tidak adanya bukti kehadiran yang valid, hingga kesulitan dalam proses rekap bulanan.

Beberapa permasalahan yang umum terjadi:

  • Titip absen antar karyawan
  • Waktu kehadiran yang bisa diubah
  • Tidak ada bukti visual
  • Rekap data yang memakan waktu

Sistem absensi berbasis web dapat mengatasi permasalahan tersebut dengan pendekatan yang lebih terkontrol dan terdokumentasi.


Konsep Sistem yang Dibangun

Sistem ini dirancang sederhana namun fungsional. Komponen utamanya terdiri dari:

  • Google Sheets sebagai database
  • Google Apps Script sebagai backend
  • HTML dan JavaScript sebagai antarmuka pengguna
  • Google Drive sebagai penyimpanan foto

Struktur absensi dibagi menjadi empat kategori utama:

  1. Absen Masuk
  2. Absen Ishoma
  3. Absen Selesai Ishoma
  4. Absen Pulang

Setiap kategori memiliki sheet tersendiri agar memudahkan proses analisis dan rekap data.


Struktur Data di Google Sheets

Spreadsheet berisi lima sheet utama:

1. Sheet Login

Digunakan untuk menyimpan kredensial pengguna.

Kolom yang digunakan:

  • Username
  • Password

2. Sheet Absensi (Masuk, Ishoma, SelesaiIshoma, Pulang)

Masing-masing sheet memiliki struktur kolom yang sama:

  • Timestamp
  • Nama
  • Lokasi (Latitude, Longitude)
  • URL Foto

Timestamp dihasilkan otomatis oleh sistem saat pengguna menekan tombol submit.


Fitur Utama Sistem

1. Login Sederhana

Sistem diawali dengan halaman login untuk membatasi akses. Username dan password diverifikasi langsung ke sheet Login. Jika sesuai, pengguna diarahkan ke dashboard absensi.

Pendekatan ini cukup untuk kebutuhan internal skala kecil hingga menengah.


2. Empat Tombol Absensi

Dashboard utama menampilkan empat tombol utama sesuai kategori absensi. Ketika salah satu tombol dipilih, sistem akan:

  • Membuka form input
  • Meminta nama pengguna
  • Mengakses kamera
  • Mengambil lokasi GPS

Pendekatan ini membuat proses absensi menjadi cepat dan terstruktur.


3. Timestamp Otomatis

Waktu absensi dicatat menggunakan fungsi server-side di Apps Script. Karena dicatat dari sisi server, waktu tidak dapat dimanipulasi oleh pengguna.

Hal ini meningkatkan keakuratan dan kepercayaan terhadap data absensi.


4. Deteksi Lokasi Otomatis (GPS)

Sistem menggunakan Geolocation API dari browser untuk mendapatkan koordinat pengguna secara real-time. Ketika tombol submit ditekan, browser akan meminta izin akses lokasi.

Jika disetujui, sistem akan menyimpan data latitude dan longitude ke spreadsheet.

Dengan data ini, sistem dapat dikembangkan lebih lanjut untuk:

  • Validasi radius kantor
  • Menampilkan titik lokasi di Google Maps
  • Monitoring kehadiran berbasis area

5. Upload Foto Langsung dari Kamera

Salah satu fitur penting adalah bukti visual kehadiran. Sistem menggunakan elemen HTML khusus yang memungkinkan perangkat mobile membuka kamera secara langsung saat proses upload.

Foto yang diambil kemudian:

  • Dikonversi ke format Base64
  • Dikirim ke Apps Script
  • Disimpan sebagai file di Google Drive
  • URL file dicatat di spreadsheet

Dengan cara ini, setiap absensi memiliki bukti dokumentasi yang tersimpan aman di cloud.


Alur Kerja Sistem

Berikut alur lengkap penggunaan sistem:

  1. Pengguna membuka web app absensi
  2. Login menggunakan username dan password
  3. Memilih jenis absensi
  4. Mengisi nama
  5. Mengambil foto melalui kamera
  6. Memberikan izin lokasi
  7. Sistem menyimpan data ke sheet yang sesuai

Seluruh proses berlangsung dalam satu halaman web tanpa perlu berpindah platform.


Proses Deployment

Setelah sistem selesai dibuat di Apps Script, langkah selanjutnya adalah melakukan deployment sebagai Web App.

Pengaturan yang digunakan:

  • Execute as: Me
  • Who has access: Anyone with the link

    Hasil:

Kelebihan Menggunakan Google Apps Script

Pendekatan ini memiliki beberapa keunggulan signifikan:

  • Tidak memerlukan hosting
  • Tidak perlu database eksternal
  • Terintegrasi langsung dengan Google Drive
  • Data real-time
  • Mudah dikembangkan
  • Biaya operasional nol

Untuk organisasi kecil hingga menengah, solusi ini sangat efisien dan praktis.


Potensi Pengembangan Lebih Lanjut

Sistem ini masih dapat dikembangkan menjadi lebih kompleks dan profesional, seperti:

  • Validasi jarak maksimal dari kantor (misalnya 100 meter)
  • Dashboard rekap otomatis per hari atau bulan
  • Export laporan ke PDF
  • Sistem multi-role (Admin & Karyawan)
  • Integrasi notifikasi Telegram atau Email
  • QR Code untuk akses cepat

Dengan struktur yang sudah ada, penambahan fitur hanya memerlukan pengembangan logika tambahan di Apps Script.


Penutup

Membangun sistem absensi online tidak selalu membutuhkan infrastruktur mahal atau server khusus. Dengan memanfaatkan Google Apps Script dan Google Sheets, kita dapat menciptakan sistem absensi modern yang dilengkapi fitur login, GPS, dan kamera hanya dalam satu ekosistem.

Solusi ini sangat cocok untuk UMKM, sekolah, startup, maupun organisasi yang ingin melakukan digitalisasi proses kehadiran secara efisien.

Teknologi yang sederhana, jika dimanfaatkan dengan tepat, dapat menghasilkan sistem yang profesional dan andal.

Tags: apache web serverdns serverkursus dns dan web serverkursus dns serverkursus ethical hackingkursus jaringan linuxkursus komputer di solokursus komputer di surakartapelatihan komputer di solo
Previous Post
Next Post

Post comment

Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • Panduan Lengkap Clean Code dalam Rekayasa Perangkat Lunak: Prinsip, Teknik, dan Contoh Praktis
  • Website Toko Digital Siap Pakai: Solusi Otomatis untuk Bisnis Digital Anda
  • 🔐 Cara Membuat Show/Hide Password dengan JavaScript (Simple & Langsung Bisa!)
  • Tampilan Aplikasi SIPPO Berbasis Google Apps Script Web App
  • SIPADU RT: Solusi Modern Pengelolaan Pengaduan Warga RT/RW Berbasis Google Apps Script

Arsip

  • April 2026
  • March 2026
  • February 2026
  • January 2026
  • September 2025
  • August 2025
  • July 2025
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • December 2011
  • November 2011

Tags

#EdusoftCenter apache web server dns server kursus android kursus database kursus dns dan web server kursus dns server kursus ethical hacking kursus hacking kursus jaringan kursus jaringan linux Kursus Komputer kursus komputer di solo kursus komputer di solo / surakarta kursus komputer di surakarta kursus linux Kursus Linux Forensics kursus linux networking kursus linux security kursus linux server kursus mikrotik kursus networking kursus network security kursus php Kursus PHP dan MySQL kursus php mysql kursus proxy kursus security kursus ubuntu kursus ubuntu server kursus web kursus web security kursus web server kursus wordpress kursus wordpress theme linux MySQL pelatihan komputer di solo PHP security training komputer training komputer di solo tutorial php ubuntu wordpress

© Edusoft Center - Kursus Komputer di Solo | 2010 - 2025 | Privacy Policy | Site Map

All Right Reserved

WhatsApp us