https://docs.google.com/spreadsheets/d/14tGZE1rvbZ8-CGkaUdRdzmrfITzLzScEDsOW3c2CR_o/edit?gid=0#gid=0
Code.gs
const SHEET_NAME = 'Peserta';
/**
* Entry point Web App
*/
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setTitle('Manajemen Peserta Pelatihan');
}
/**
* READ - Ambil semua peserta
*/
function getPeserta() {
const sheet = SpreadsheetApp.getActive().getSheetByName(SHEET_NAME);
const data = sheet.getDataRange().getValues();
data.shift(); // hapus header
return data.map(row => ({
id: row[0],
nama: row[1],
email: row[2],
kelas: row[3]
}));
}
/**
* CREATE - Tambah peserta
*/
function addPeserta(p) {
const sheet = SpreadsheetApp.getActive().getSheetByName(SHEET_NAME);
sheet.appendRow([
new Date().getTime(), // ID unik
p.nama,
p.email,
p.kelas
]);
return { status: 'created' };
}
/**
* UPDATE - Edit peserta
*/
function updatePeserta(p) {
const sheet = SpreadsheetApp.getActive().getSheetByName(SHEET_NAME);
const data = sheet.getDataRange().getValues();
for (let i = 1; i < data.length; i++) {
if (data[i][0] == p.id) {
sheet.getRange(i + 1, 2).setValue(p.nama);
sheet.getRange(i + 1, 3).setValue(p.email);
sheet.getRange(i + 1, 4).setValue(p.kelas);
return { status: 'updated' };
}
}
return { status: 'not found' };
}
/**
* DELETE - Hapus peserta
*/
function deletePeserta(id) {
const sheet = SpreadsheetApp.getActive().getSheetByName(SHEET_NAME);
const data = sheet.getDataRange().getValues();
for (let i = 1; i < data.length; i++) {
if (data[i][0] == id) {
sheet.deleteRow(i + 1);
return { status: 'deleted' };
}
}
return { status: 'not found' };
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
input, button {
padding: 8px;
margin: 5px 0;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
}
th {
background: #f2f2f2;
}
</style>
</head>
<body>
<h2>Manajemen Peserta Pelatihan</h2>
<!-- FORM -->
<input type="hidden" id="id">
<input id="nama" placeholder="Nama">
<input id="email" placeholder="Email">
<input id="kelas" placeholder="Kelas">
<br>
<button onclick="simpan()">Simpan</button>
<button onclick="resetForm()">Batal</button>
<!-- TABLE -->
<table>
<thead>
<tr>
<th>Nama</th>
<th>Email</th>
<th>Kelas</th>
<th>Aksi</th>
</tr>
</thead>
<tbody id="dataPeserta"></tbody>
</table>
<script>
// SPA State
let peserta = [];
let modeEdit = false;
document.addEventListener('DOMContentLoaded', loadPeserta);
function loadPeserta() {
google.script.run.withSuccessHandler(data => {
peserta = data;
render();
}).getPeserta();
}
function render() {
const tbody = document.getElementById('dataPeserta');
tbody.innerHTML = '';
peserta.forEach(p => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${p.nama}</td>
<td>${p.email}</td>
<td>${p.kelas}</td>
<td>
<button onclick="editPeserta(${p.id})">Edit</button>
<button onclick="hapusPeserta(${p.id})">Hapus</button>
</td>
`;
tbody.appendChild(tr);
});
}
function simpan() {
const data = {
id: document.getElementById('id').value,
nama: document.getElementById('nama').value,
email: document.getElementById('email').value,
kelas: document.getElementById('kelas').value
};
if (modeEdit) {
google.script.run.withSuccessHandler(() => {
loadPeserta();
resetForm();
}).updatePeserta(data);
} else {
google.script.run.withSuccessHandler(() => {
loadPeserta();
resetForm();
}).addPeserta(data);
}
}
function editPeserta(id) {
const p = peserta.find(x => x.id == id);
document.getElementById('id').value = p.id;
document.getElementById('nama').value = p.nama;
document.getElementById('email').value = p.email;
document.getElementById('kelas').value = p.kelas;
modeEdit = true;
}
function hapusPeserta(id) {
google.script.run.withSuccessHandler(() => {
peserta = peserta.filter(p => p.id !== id);
render();
}).deletePeserta(id);
}
function resetForm() {
document.getElementById('id').value = '';
document.getElementById('nama').value = '';
document.getElementById('email').value = '';
document.getElementById('kelas').value = '';
modeEdit = false;
}
</script>
</body>
</html>
Tidak ada komentar:
Posting Komentar