Index.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Absensi Online SD Negeri 11 Ambon</title>
<style>
body {
font-family: sans-serif;
max-width: 600px;
margin: 30px auto;
background: #f1f1f1;
padding: 20px;
border-radius: 10px;
}
input, select, textarea, button {
width: 100%;
padding: 10px;
margin-top: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
background-color: #0077cc;
color: white;
font-weight: bold;
margin-top: 20px;
}
.clock {
background: #fff;
padding: 10px;
border-radius: 5px;
margin-bottom: 20px;
text-align: center;
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>📘 Absensi Online</h2>
<h3>SD Negeri 11 Ambon</h3>
<div class="clock">
⏰ Waktu Indonesia Timur (WIT): <span id="clock-wit">Memuat waktu...</span>
</div>
<form id="form-absensi" method="POST" action="=== MASUKAN URL APPS SCRIPT DISINI ===">
<label>Kelas:</label>
<select name="kelas" required>
<option value="Kelas 5">Kelas 5</option>
</select>
<label>NIS:</label>
<textarea name="nis" placeholder="Masukkan NIS murid" required></textarea>
<label>Nama Murid:</label>
<input type="text" name="namamurid" placeholder="Masukkan nama murid" required>
<label>Tanggal:</label>
<input type="date" name="tanggal" required>
<label>Keterangan:</label>
<select name="keterangan" required>
<option value="Hadir">Hadir</option>
<option value="Sakit">Sakit</option>
<option value="Izin">Izin</option>
<option value="Alpa">Alpa</option>
</select>
<!-- Hidden input untuk waktu pengiriman -->
<input type="hidden" id="waktupengiriman" name="waktupengiriman">
<button type="submit">Kirim Absensi</button>
</form>
<script>
const form = document.getElementById("form-absensi");
const clockEl = document.getElementById("clock-wit");
function updateClockWIT() {
const now = new Date();
const formatter = new Intl.DateTimeFormat("id-ID", {
timeZone: "Asia/Jayapura",
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
hour12: false
});
clockEl.textContent = formatter.format(now);
}
setInterval(updateClockWIT, 1000);
updateClockWIT();
form.addEventListener("submit", function () {
const now = new Date();
const formattedTime = new Intl.DateTimeFormat("id-ID", {
timeZone: "Asia/Jayapura",
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
hour12: false
}).format(now);
document.getElementById("waktupengiriman").value = formattedTime;
});
</script>
</body>
</html>APPSCRIPT
// Menerima data dari form
function doPost(e) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("AbsensiOnline");
if (!sheet) {
sheet = ss.insertSheet("AbsensiOnline");
sheet.appendRow(["Kelas", "NIS", "Nama Murid", "Tanggal", "Keterangan", "Waktu Pengiriman (WIT)"]);
}
var data = [
e.parameter.kelas,
e.parameter.nis,
e.parameter.namamurid,
e.parameter.tanggal,
e.parameter.keterangan,
e.parameter.waktupengiriman
];
sheet.appendRow(data);
return ContentService.createTextOutput("✅ Data berhasil disimpan!");
}
// Menampilkan halaman rekap absensi + tombol cetak
function doGet() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("AbsensiOnline");
var data = sheet.getDataRange().getValues();
var html = '<html><head><title>Rekap Absensi</title><style>';
html += 'body { font-family: sans-serif; padding: 20px; }';
html += 'table { border-collapse: collapse; width: 100%; }';
html += 'th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }';
html += 'th { background-color: #0077cc; color: white; }';
html += 'button { margin-top: 20px; padding: 10px 20px; font-weight: bold; }';
html += '</style></head><body>';
html += '<h2>📝 Rekap Absensi SD Negeri 11 Ambon</h2>';
html += '<table><tr>';
// Header
data[0].forEach(function (col) {
html += '<th>' + col + '</th>';
});
html += '</tr>';
// Data
for (var i = 1; i < data.length; i++) {
html += '<tr>';
data[i].forEach(function (cell) {
html += '<td>' + (cell || '') + '</td>';
});
html += '</tr>';
}
html += '</table>';
html += '<button onclick="window.print()">🖨️ Cetak Rekap</button>';
html += '</body></html>';
return HtmlService.createHtmlOutput(html)
.setTitle("Rekap Absensi")
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
Tidak ada komentar:
Posting Komentar