Tutorial Lengkap: Membuat Aplikasi Presensi Online dengan Google Apps Script

Dalam tutorial ini, kita akan belajar cara membuat aplikasi presensi online lengkap dengan Google Apps Script. Aplikasi ini akan memiliki fitur: absensi siswa/karyawan, rekap data otomatis ke Google Sheets, notifikasi email, dan dashboard admin.

Persiapan Awal

Sebelum memulai, pastikan Anda memiliki:

Akun Google (Gmail)
Akses ke Google Sheets
Google Apps Script (gratis)

Langkah 1: Membuat Google Sheets untuk Database

Buka sheets.new
Buat sheet dengan nama "Data_Siswa" - Kolom: No, Nama, NIS/NIP, Kelas/Jabatan
Buat sheet kedua "Rekap_ABSEN" - Kolom: Tanggal, Nama, Status, Jam Datang, Jam Pulang
Buat sheet ketiga "Pengaturan" - Untuk konfigurasi sekolah/kantor

Langkah 2: Membuat Google Apps Script

Buka Extensions > Apps Script
Hapus kode default dan ganti dengan kode berikut:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index')
    .setTitle('Aplikasi Presensi Online')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function getDataSiswa() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data_Siswa');
  var data = sheet.getDataRange().getValues();
  return data;
}

function simpanAbsensi(nama, status) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Rekap_ABSEN');
  var today = new Date();
  var row = [today, nama, status, today.toLocaleTimeString(), ''];
  sheet.appendRow(row);
  return 'Absensi berhasil disimpan!';
}

Langkah 3: Membuat Interface HTML

Buat file baru HTML dengan nama "Index" dan tambahkan kode berikut:

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px;">
  <div class="container">
    <div class="card shadow-lg">
      <div class="card-header bg-primary text-white">
        <h2 class="text-center">Aplikasi Presensi Online</h2>
      </div>
      <div class="card-body">
        <form id="absenForm">
          <div class="mb-3">
            <label class="form-label">Nama Lengkap</label>
            <input type="text" class="form-control" id="nama" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Status Kehadiran</label>
            <select class="form-select" id="status" required>
              <option value="Hadir">Hadir</option>
              <option value="Sakit">Sakit</option>
              <option value="Izin">Izin</option>
              <option value="Alpha">Alpha</option>
            </select>
          </div>
          <button type="submit" class="btn btn-primary w-100">Kirim Absensi</button>
        </form>
        <div id="message" class="mt-3 alert alert-success d-none"></div>
      </div>
    </div>
  </div>
  <script>
    document.getElementById('absenForm').addEventListener('submit', function(e) {
      e.preventDefault();
      var nama = document.getElementById('nama').value;
      var status = document.getElementById('status').value;
      google.script.run.withSuccessHandler(function(msg) {
        document.getElementById('message').textContent = msg;
        document.getElementById('message').classList.remove('d-none');
        document.getElementById('absenForm').reset();
      }).simpanAbsensi(nama, status);
    });
  </script>
</body>
</html>

Langkah 4: Deploy Aplikasi

Klik tombol "Deploy" > "New deployment"
Pilih "Web app"
Execute as: "Me"
Who has access: "Anyone"
Klik "Deploy"
Salin URL aplikasi yang diberikan

Langkah 5: Menambahkan Fitur Lanjutan

5.1 Dashboard Admin

Tambahkan halaman admin untuk melihat rekap absensi:

function getRekapAbsensi() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Rekap_ABSEN');
  var data = sheet.getDataRange().getValues();
  return data;
}

5.2 Notifikasi Email Otomatis

function sendEmailNotification(nama, status) {
  MailApp.sendEmail({
    to: "admin@sekolah.com",
    subject: "Notifikasi Absensi",
    body: "Siswa " + nama + " telah absen dengan status: " + status
  });
}

5.3 QR Code Attendance

Gunakan library QR Code untuk generate QR code unik per siswa.

Fitur Aplikasi Presensi

âœ… Interface responsif mobile-friendly
âœ… Penyimpanan otomatis ke Google Sheets
âœ… Dashboard admin untuk rekap data
âœ… Notifikasi email otomatis
âœ… Laporan bulanan
âœ… Export ke Excel/PDF
âœ… Grafik kehadiran

Demo dan Source Code

Aplikasi ini dapat diakses secara online dan dikustomisasi sesuai kebutuhan sekolah atau kantor Anda.

Kesimpulan

Dengan Google Apps Script, Anda dapat membuat aplikasi presensi online yang powerful tanpa biaya hosting tambahan. Semuanya berjalan di infrastruktur Google yang sudah terpercaya dan aman.

Ingin tahu lebih banyak?
Kunjungi jeniusklik.blogspot.com untuk tutorial lainnya!