Presensi Siswa dengan Google Apps Script
Membuat Google Sheets
Buatlah Google Sheets dengan kolom No, NIS, dan Nama seperti berikut. Pastikan header tabel berada di baris pertama.
| No | NIS | Nama |
|---|---|---|
| 1 | 12001 | Andi |
| 2 | 12002 | Budi |
| 3 | 12003 | Cika |
| 4 | 12004 | Deni |
| 5 | 12005 | Edi |
| 6 | 12006 | Fajar |
| 7 | 12007 | Galih |
| 8 | 12008 | Hani |
| 9 | 12009 | Indah |
| 10 | 12010 | Jesica |
Membuka Google Apps Script
Pilih menu Extensions > Apps Script.Membuat File di Apps Script
Buatlah file dengan nama Code.gs.
const SHEET_NAME = "Sheet1";
function doGet() {
return HtmlService.createHtmlOutputFromFile("index")
.setTitle("Presensi Siswa");
}
function getSheet() {
return SpreadsheetApp
.getActiveSpreadsheet()
.getSheetByName(SHEET_NAME);
}
/* Ambil data siswa */
function getSiswa() {
const sheet = getSheet();
const lastRow = sheet.getLastRow();
if (lastRow < 2) return [];
const data = sheet.getRange(2, 1, lastRow - 1, 3).getValues();
return data.map(r => ({
no: r[0],
nis: r[1],
nama: r[2]
}));
}
/* Simpan absensi */
function simpanAbsensi(tanggal, absensi) {
const sheet = getSheet();
const header = sheet
.getRange(1, 1, 1, sheet.getLastColumn())
.getValues()[0];
let colIndex = header.indexOf(tanggal);
// Jika kolom tanggal belum ada, tambahkan
if (colIndex === -1) {
sheet.getRange(1, header.length + 1).setValue(tanggal);
colIndex = header.length;
}
absensi.forEach(item => {
const row = sheet
.createTextFinder(item.nis)
.findNext()
.getRow();
sheet.getRange(row, colIndex + 1).setValue(item.status);
});
return "Absensi berhasil disimpan";
}
Buatlah file dengan nama index.html.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h3>Presensi Siswa</h3>
<table>
<tr>
<td>Kelas</td>
<td>:</td>
<td>XI</td>
</tr>
<tr>
<td>Tanggal</td>
<td>:</td>
<td>
<input type="date" id="tanggal">
</td>
</tr>
</table>
<br>
<table border="1" cellpadding="5" cellspacing="0">
<thead>
<tr>
<th>No</th>
<th>NIS</th>
<th>Nama</th>
<th>Hadir</th>
<th>Sakit</th>
<th>Izin</th>
<th>Alpa</th>
</tr>
</thead>
<tbody id="dataSiswa"></tbody>
</table>
<br>
<button onclick="simpan()">Simpan Absensi</button>
<script>
function loadSiswa() {
google.script.run.withSuccessHandler(data => {
const tbody = document.getElementById("dataSiswa");
tbody.innerHTML = "";
data.forEach((s, i) => {
tbody.innerHTML += `
<tr>
<td>${s.no}</td>
<td>${s.nis}</td>
<td>${s.nama}</td>
<td><input type="radio" name="absen_${i}" value="H" data-nis="${s.nis}" checked></td>
<td><input type="radio" name="absen_${i}" value="S" data-nis="${s.nis}"></td>
<td><input type="radio" name="absen_${i}" value="I" data-nis="${s.nis}"></td>
<td><input type="radio" name="absen_${i}" value="A" data-nis="${s.nis}"></td>
</tr>
`;
});
}).getSiswa();
}
function simpan() {
const tanggal = document.getElementById("tanggal").value;
if (!tanggal) {
alert("Tanggal harus diisi");
return;
}
const absensi = [];
document.querySelectorAll("input[type='radio']:checked").forEach(r => {
absensi.push({
nis: r.dataset.nis,
status: r.value
});
});
google.script.run.withSuccessHandler(msg => {
alert(msg);
}).simpanAbsensi(tanggal, absensi);
}
loadSiswa();
</script>
</body>
</html>
Posting Komentar untuk "Presensi Siswa dengan Google Apps Script"