function doGet(e) {
return HtmlService.createHtmlOutputFromFile('index');
}
function submitBarcode(barcode) {
const sheetId = '1OOMF8zotYHGltz-HZJvPTxyqBM2f4t0FznsS6WY3fVE'; // ID Spreadsheet
const sheetName = 'Form Responses 1'; // Ganti dengan nama sheet Anda
const sheet = SpreadsheetApp.openById(sheetId).getSheetByName(sheetName);
if (!sheet) {
return 'Sheet not found!';
}
sheet.appendRow([new Date(), barcode]); // Menyimpan waktu saat ini dan barcode
return 'Data berhasil disimpan!';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barcode Scanner</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body class="bg-info">
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header text-center">
<h4>Presensi Digital</h4>
</div>
<div class="card-body"> <center>
<img src="https://lh3.googleusercontent.com/d/1IGZ_o_NIV8NH8wWYmyNtHmeOgSPlYU5M=w1000?authuser=1/view">
</center>
<form id="barcodeForm" onsubmit="handleSubmit(event)">
<div class="mb-3">
<label for="barcode" class="form-label">Barcode</label>
<input type="text" class="form-control text-secondary" id="barcode" name="barcode" placeholder="Silahkan Scan Barcode" autofocus required>
</div>
<button type="submit" class="btn btn-primary w-100">Submit</button>
</form>
<div id="alert-container" class="mt-3"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script>
function handleSubmit(event) {
event.preventDefault();
const barcode = document.getElementById('barcode').value;
if (barcode) {
// Show an alert indicating submission is in progress
showAlert('Proses Kirim Data...', 'warning');
// Simulate a delay of 2 seconds before submitting
setTimeout(function() {
google.script.run.withSuccessHandler(function(response) {
showAlert('Data berhasil disimpan!', 'success');
document.getElementById('barcode').value = ''; // Reset input after submit
}).submitBarcode(barcode);
}, 100); // 500 milliseconds = 0,5 seconds
}
}
function showAlert(message, type) {
const alertContainer = document.getElementById('alert-container');
alertContainer.innerHTML = `
<div class="alert alert-${type} alert-dismissible fade show" role="alert">
${message}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
`;
}
</script>
</body>
</html>
: