https://docs.google.com/spreadsheets/d/1GC5Dx1nStJj-NgTsrS_eF7hig0pTzqQ-4D1QRGcJ7ug/edit?gid=0#gid=0
Saya ingin membuat website jurnal mengajar dengan data di simpan pada google spreadsheet. Link google spreadsheet https://docs.google.com/spreadsheets/d/1GC5Dx1nStJj-NgTsrS_eF7hig0pTzqQ-4D1QRGcJ7ug/edit?gid=0#gid=0
Kolom Spreadsheet :
- Hari
- Tanggal
- Jam Ke
- Kelas
- Tujuan Pembelajaran
- Teknik Pembelajaran
- Asesmen
- Keterangan
Buatkan kode html dan google apps scriptnya. Jelaskan caranya
Indexjurnal.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Jurnal Mengajar</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 40px;
background: #f8fafc;
}
h1 {
text-align: center;
color: #333;
}
form {
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
input, textarea, select {
width: 100%;
padding: 8px;
margin: 5px 0 15px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
background: #2563eb;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #1d4ed8;
}
table {
width: 100%;
border-collapse: collapse;
background: #fff;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
th {
background: #f1f5f9;
}
</style>
</head>
<body>
<h1>📘 Jurnal Mengajar</h1>
<form id="jurnalForm">
<label>Hari:</label>
<input type="text" name="Hari" required>
<label>Tanggal:</label>
<input type="date" name="Tanggal" required>
<label>Jam Ke:</label>
<input type="text" name="Jam Ke" required>
<label>Kelas:</label>
<input type="text" name="Kelas" required>
<label>Tujuan Pembelajaran:</label>
<textarea name="Tujuan Pembelajaran" required></textarea>
<label>Teknik Pembelajaran:</label>
<textarea name="Teknik Pembelajaran" required></textarea>
<label>Asesmen:</label>
<textarea name="Asesmen" required></textarea>
<label>Keterangan:</label>
<textarea name="Keterangan"></textarea>
<button type="submit">Simpan</button>
</form>
<h2>📋 Data Jurnal</h2>
<table id="dataTable">
<thead>
<tr>
<th>Hari</th>
<th>Tanggal</th>
<th>Jam Ke</th>
<th>Kelas</th>
<th>Tujuan Pembelajaran</th>
<th>Teknik Pembelajaran</th>
<th>Asesmen</th>
<th>Keterangan</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
const scriptURL = "https://script.google.com/macros/s/AKfycbxCMJ_LFzjCCFWjXGEOPVuzFzqD4vJV5ULrn_M7JOyRHW10iGQ_S0DQ18nFDWG56NHCPQ/exec"; // Ganti dengan URL Web App dari Apps Script
// Simpan Data
document.getElementById("jurnalForm").addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const data = Object.fromEntries(formData.entries());
const response = await fetch(scriptURL, {
method: "POST",
body: JSON.stringify(data)
});
const result = await response.json();
alert(result.message);
e.target.reset();
loadData();
});
// Ambil Data
async function loadData() {
const res = await fetch(scriptURL);
const data = await res.json();
const tbody = document.querySelector("#dataTable tbody");
tbody.innerHTML = "";
data.forEach(row => {
const tr = document.createElement("tr");
tr.innerHTML = `
<td>${row.Hari}</td>
<td>${row.Tanggal}</td>
<td>${row["Jam Ke"]}</td>
<td>${row.Kelas}</td>
<td>${row["Tujuan Pembelajaran"]}</td>
<td>${row["Teknik Pembelajaran"]}</td>
<td>${row.Asesmen}</td>
<td>${row.Keterangan}</td>
`;
tbody.appendChild(tr);
});
}
loadData();
</script>
</body>
</html>
Jurnal Apps Script
// === Google Apps Script ===
// Ganti dengan ID spreadsheet Anda
const SHEET_ID = '1GC5Dx1nStJj-NgTsrS_eF7hig0pTzqQ-4D1QRGcJ7ug';
const SHEET_NAME = 'Sheet1'; // ganti sesuai nama sheet
// Fungsi untuk menerima request (API)
function doGet(e) {
const sheet = SpreadsheetApp.openById(SHEET_ID).getSheetByName(SHEET_NAME);
const data = sheet.getDataRange().getValues();
const headers = data.shift();
const rows = data.map(r => {
let obj = {};
headers.forEach((h, i) => obj[h] = r[i]);
return obj;
});
return ContentService.createTextOutput(JSON.stringify(rows))
.setMimeType(ContentService.MimeType.JSON);
}
// Fungsi untuk menulis data baru (POST)
function doPost(e) {
const sheet = SpreadsheetApp.openById(SHEET_ID).getSheetByName(SHEET_NAME);
const body = JSON.parse(e.postData.contents);
// Urutan kolom sesuai header
sheet.appendRow([
body.Hari,
body.Tanggal,
body['Jam Ke'],
body.Kelas,
body['Tujuan Pembelajaran'],
body['Teknik Pembelajaran'],
body.Asesmen,
body.Keterangan
]);
return ContentService.createTextOutput(
JSON.stringify({ status: 'success', message: 'Data berhasil disimpan!' })
).setMimeType(ContentService.MimeType.JSON);
}
LINK Appscript
https://script.google.com/macros/s/AKfycbxCMJ_LFzjCCFWjXGEOPVuzFzqD4vJV5ULrn_M7JOyRHW10iGQ_S0DQ18nFDWG56NHCPQ/exec
Tidak ada komentar:
Posting Komentar