https://smadt.net/tes1/Absen1.html
https://www.canva.com/ai/code/thread/0ae51130-52e1-44a0-b38b-798f349cc308
URL Data Murid : https://docs.google.com/spreadsheets/d/e/2PACX-1vSYDuI2iERadVoehPHnsLlcxb612aSTrGhWHQziUsZplm6PGH_ypzihbMRcvsiOL5Lf9p0GXgGqbAXW/pub?output=csv
URL Data Guru : https://docs.google.com/spreadsheets/d/e/2PACX-1vT-RTmCcIYrOlxFIsaLNLmOyEodVNK3HFzyxaur_n8JEM1Gn4BJgZOmVwBE64PpuAEtX4iGW5eqiPei/pub?output=csv
URL Logo : https://freeimghost.net/images/2025/08/19/Logo-pervekt1.png
Email : indieschool80@gmail.com
URL Background : https://freeimghost.net/images/2025/08/19/sekolah1.jpg
URL Script : https://script.google.com/macros/s/AKfycbyQ8NobWDeZcDOzpbJaUHj9Sn7QQUsrKzyUZzztKl1OLhsFyLLDxO1lSlGfhdI27JSj/exec
id Script : AKfycbyQ8NobWDeZcDOzpbJaUHj9Sn7QQUsrKzyUZzztKl1OLhsFyLLDxO1lSlGfhdI27JSj
Sebuah ilustrasi digital halaman sekolah menengah atas kejuruan SMK yang ramai. Terlihat siswa-siswi SMK mengenakan seragam putih-abu khas SMK Indonesia. Beberapa siswa sedang berbicara dengan guru perempuan di dekat gerbang, beberapa siswa lainnya berjalan menuju kelas, dan beberapa lagi sedang berada di halaman sekolah (seperti membaca pengumuman, berdiskusi dengan teman, menuntun sepeda). Gedung sekolah bertuliskan "SMK Negeri Percontohan Pervekt Jawa Timur" terlihat jelas di latar belajang. Suasana pagi yang cerah dan penuh semangat, dengan pepohonan rindang di sekeliling halaman.
Prompt Tambahan :
Pastikan ketika tombol "Kirim Absensi" diklik, maka Riwayat absensi akan terkirim secara otomatis ke google apps script
Revisi bagian di bawah ini :
Ubah tampilan absensinya ke dalam bentuk sidebar dimana sebelah kiri terdiri atas : absensi, data murid, dan data guru
Data Murid : https://docs.google.com/spreadsheets/d/e/2PACX-1vSYDuI2iERadVoehPHnsLlcxb612aSTrGhWHQziUsZplm6PGH_ypzihbMRcvsiOL5Lf9p0GXgGqbAXW/pub?output=csv
Data Guru : https://docs.google.com/spreadsheets/d/e/2PACX-1vT-RTmCcIYrOlxFIsaLNLmOyEodVNK3HFzyxaur_n8JEM1Gn4BJgZOmVwBE64PpuAEtX4iGW5eqiPei/pub?output=csv
Revisi bagian di bawah ini:
1. untuk menu data murid, diambil dari data murid (No - kolom A, Nis - kolom B, Nisn - kolom C, Nama Murid - Kolom D)
2. untuk menu data guru, diambil dari data guru (No - kolom A, Nama Guru - kolom B, Nip - kolom C, Jabatan - Kolom D, Nomor WA - kolom F)
HTML
=======================
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Absensi SMK Pervekt Jawa Timurn</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>SMK Percontohan Pervekt Jawa Timur</h3>
<div class="clock">
⏰ Waktu Indonesia Barat (WIB) : <span id="clock-wit">Memuat waktu...</span>
</div>
<form id="form-absensi" method="POST" action="https://script.google.com/macros/s/AKfycbyQ8NobWDeZcDOzpbJaUHj9Sn7QQUsrKzyUZzztKl1OLhsFyLLDxO1lSlGfhdI27JSj/exec">
<label>Kelas:</label>
<select name="kelas" required>
<option value="Kelas 10">Kelas 10</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>
SCRIPT
============
// Menerima data dari form
function doPost(e) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("TAbsensiOnline");
if (!sheet) {
sheet = ss.insertSheet("TAbsensiOnline");
sheet.appendRow(["Kelas", "Nis", "NamaMurid", "Tanggal", "Keterangan", "WaktuPengiriman"]);
}
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("TAbsensiOnline");
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 SMK Percontohan Pervekt Jawa Timur</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