https://docs.google.com/spreadsheets/d/14tGZE1rvbZ8-CGkaUdRdzmrfITzLzScEDsOW3c2CR_o/edit?gid=0#gid=0
Studi Kasus
Aplikasi Manajemen Data Peserta Pelatihan Digital Skills
Fungsi aplikasi:
-
Menampilkan daftar peserta (Read)
-
Menambah peserta baru (Create)
-
Menghapus peserta (Delete)
-
Semua berjalan tanpa reload halaman (SPA-style)
Teknologi:
-
Backend: Google Apps Script
-
Database: Google Sheet
-
Frontend: HTML + JS (SPA)
-
Komunikasi:
google.script.run
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
input, button {
margin: 5px 0;
padding: 8px;
}
table {
border-collapse: collapse;
width: 100%;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
background: #f4f4f4;
}
</style>
</head>
<body>
<h2>Manajemen Peserta Pelatihan</h2>
<!-- FORM INPUT -->
<input id="nama" placeholder="Nama">
<input id="email" placeholder="Email">
<input id="kelas" placeholder="Kelas">
<button onclick="tambahPeserta()">Tambah</button>
<!-- TABEL DATA -->
<table>
<thead>
<tr>
<th>Nama</th>
<th>Email</th>
<th>Kelas</th>
<th>Aksi</th>
</tr>
</thead>
<tbody id="dataPeserta"></tbody>
</table>
<script>
// State SPA
let peserta = [];
// Load data awal
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="hapusPeserta(${p.id})">Hapus</button>
</td>
`;
tbody.appendChild(tr);
});
}
function tambahPeserta() {
const data = {
nama: document.getElementById('nama').value,
email: document.getElementById('email').value,
kelas: document.getElementById('kelas').value
};
google.script.run.withSuccessHandler(() => {
loadPeserta(); // refresh state
document.getElementById('nama').value = '';
document.getElementById('email').value = '';
document.getElementById('kelas').value = '';
}).addPeserta(data);
}
function hapusPeserta(id) {
google.script.run.withSuccessHandler(() => {
peserta = peserta.filter(p => p.id !== id);
render();
}).deletePeserta(id);
}
</script>
</body>
</html>
Code GS
const SHEET_NAME = 'Peserta';
/**
* Entry point web app
*/
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setTitle('Manajemen Peserta Pelatihan');
}
/**
* Ambil semua data 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]
}));
}
/**
* Tambah peserta
*/
function addPeserta(peserta) {
const sheet = SpreadsheetApp.getActive()
.getSheetByName(SHEET_NAME);
sheet.appendRow([
new Date().getTime(), // ID unik
peserta.nama,
peserta.email,
peserta.kelas
]);
return { status: 'success' };
}
/**
* Hapus peserta berdasarkan ID
*/
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' };
}
Tidak ada komentar:
Posting Komentar