PROMPT
Buatkan APLIKASI CRUD dengan FRONT END menggunakan DataTables.net dengan BACKEND Google Apps Script dan DATABASE Google Spreadsheet, disusun lengkap, rapi, dan siap dipakai untuk travel
https://docs.google.com/spreadsheets/d/1THX1QY7ZGRy9nH27bxcgAeyYl4njtvT-GKJtgNpPXQM/edit?gid=0#gid=0
<!-- TABLE -->
<table id="travelTable" class="display table table-striped">
<thead>
<tr>
<th>Nama</th>
<th>Tujuan</th>
<th>Tanggal</th>
<th>Jam</th>
<th>Harga</th>
<th>Aksi</th>
</tr>
</thead>
</table>
</div>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script>
const API_URL = 'https://script.google.com/macros/s/AKfycbwFWha5TNQyiyeDlY-RdM-_csd_nxKzZOl5iWuR07nUBMtozdhD9pMl1cbpJtwRAO08Ag/exec';
let table;
$(document).ready(() => {
table = $('#travelTable').DataTable({
ajax: {
url: API_URL,
dataSrc: 'data'
},
Code.gs
const SHEET_NAME = 'travel';
function doGet(e) {
const action = e.parameter.action || 'read';
if (action === 'read') return readData();
return output({ status: 'error', message: 'Invalid GET action' });
}
function doPost(e) {
const data = JSON.parse(e.postData.contents);
const action = data.action;
if (action === 'create') return createData(data);
if (action === 'update') return updateData(data);
if (action === 'delete') return deleteData(data);
return output({ status: 'error', message: 'Invalid POST action' });
}
/* ================= CRUD ================= */
function readData() {
const sheet = getSheet();
const rows = sheet.getDataRange().getValues();
rows.shift();
const data = rows.map(r => ({
id: r[0],
nama_travel: r[1],
tujuan: r[2],
tanggal: r[3],
jam: r[4],
harga: r[5],
created_at: r[6]
}));
return output({ status: 'success', data });
}
function createData(d) {
const sheet = getSheet();
sheet.appendRow([
Utilities.getUuid(),
d.nama_travel,
d.tujuan,
d.tanggal,
d.jam,
d.harga,
new Date()
]);
return output({ status: 'success', message: 'Data berhasil ditambahkan' });
}
function updateData(d) {
const sheet = getSheet();
const rows = sheet.getDataRange().getValues();
for (let i = 1; i < rows.length; i++) {
if (rows[i][0] === d.id) {
sheet.getRange(i + 1, 2, 1, 5).setValues([[
d.nama_travel,
d.tujuan,
d.tanggal,
d.jam,
d.harga
]]);
return output({ status: 'success', message: 'Data berhasil diupdate' });
}
}
}
function deleteData(d) {
const sheet = getSheet();
const rows = sheet.getDataRange().getValues();
for (let i = 1; i < rows.length; i++) {
if (rows[i][0] === d.id) {
sheet.deleteRow(i + 1);
return output({ status: 'success', message: 'Data berhasil dihapus' });
}
}
}
function getSheet() {
return SpreadsheetApp.getActiveSpreadsheet().getSheetByName(SHEET_NAME);
}
function output(obj) {
return ContentService
.createTextOutput(JSON.stringify(obj))
.setMimeType(ContentService.MimeType.JSON);
}
Index.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>CRUD Travel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- DataTables -->
<link href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<div class="container mt-4">
<h3 class="mb-3">🚍 Manajemen Travel</h3>
<!-- FORM -->
<form id="travelForm" class="row g-2 mb-4">
<input type="hidden" id="id">
<div class="col-md-3">
<input type="text" id="nama_travel" class="form-control" placeholder="Nama Travel" required>
</div>
<div class="col-md-3">
<input type="text" id="tujuan" class="form-control" placeholder="Tujuan" required>
</div>
<div class="col-md-2">
<input type="date" id="tanggal" class="form-control" required>
</div>
<div class="col-md-2">
<input type="time" id="jam" class="form-control" required>
</div>
<div class="col-md-2">
<input type="number" id="harga" class="form-control" placeholder="Harga" required>
</div>
<div class="col-md-12">
<button class="btn btn-primary mt-2">Simpan</button>
<button type="reset" class="btn btn-secondary mt-2" onclick="resetForm()">Reset</button>
</div>
</form>
<!-- TABLE -->
<table id="travelTable" class="display table table-striped">
<thead>
<tr>
<th>Nama</th>
<th>Tujuan</th>
<th>Tanggal</th>
<th>Jam</th>
<th>Harga</th>
<th>Aksi</th>
</tr>
</thead>
</table>
</div>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script>
const API_URL = 'https://script.google.com/macros/s/AKfycbwFWha5TNQyiyeDlY-RdM-_csd_nxKzZOl5iWuR07nUBMtozdhD9pMl1cbpJtwRAO08Ag/exec';
let table;
$(document).ready(() => {
table = $('#travelTable').DataTable({
ajax: {
url: API_URL,
dataSrc: 'data'
},
columns: [
{ data: 'nama_travel' },
{ data: 'tujuan' },
{ data: 'tanggal' },
{ data: 'jam' },
{ data: 'harga' },
{
data: null,
render: d => `
<button class="btn btn-sm btn-warning" onclick='edit(${JSON.stringify(d)})'>Edit</button>
<button class="btn btn-sm btn-danger" onclick='hapus("${d.id}")'>Hapus</button>
`
}
]
});
});
/* FORM SUBMIT */
$('#travelForm').on('submit', e => {
e.preventDefault();
const payload = {
action: $('#id').val() ? 'update' : 'create',
id: $('#id').val(),
nama_travel: nama_travel.value,
tujuan: tujuan.value,
tanggal: tanggal.value,
jam: jam.value,
harga: harga.value
};
fetch(API_URL, {
method: 'POST',
body: JSON.stringify(payload)
})
.then(r => r.json())
.then(() => {
table.ajax.reload();
resetForm();
});
});
function edit(d) {
id.value = d.id;
nama_travel.value = d.nama_travel;
tujuan.value = d.tujuan;
tanggal.value = d.tanggal;
jam.value = d.jam;
harga.value = d.harga;
}
function hapus(id) {
if (!confirm('Hapus data ini?')) return;
fetch(API_URL, {
method: 'POST',
body: JSON.stringify({ action: 'delete', id })
})
.then(() => table.ajax.reload());
}
function resetForm() {
document.getElementById('travelForm').reset();
id.value = '';
}
</script>
</body>
</html>
Tidak ada komentar:
Posting Komentar