Setiap template sudah lengkap dengan Code.gs dan index.html. Klik tombol Salin Kode pada setiap blok, lalu paste ke Apps Script. Sheet Google Sheets akan otomatis terbuat.
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setTitle('Inventory Tracker')
.addMetaTag('viewport', 'width=device-width, initial-scale=1');
}
function simpanBarang(data) {
try {
if (!data.namaBarang || !data.jumlah) return { success: false, message: 'Nama dan jumlah wajib' };
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('inventory');
if (!sheet) {
sheet = SpreadsheetApp.getActiveSpreadsheet().insertSheet('inventory');
sheet.appendRow(['Timestamp','Nama Barang','Jumlah','Satuan','Harga Satuan','Total Harga','Kategori','Catatan']);
}
var total = (data.hargaSatuan || 0) * data.jumlah;
sheet.appendRow([new Date(), data.namaBarang, data.jumlah, data.satuan || '', data.hargaSatuan || '', total, data.kategori || '', data.catatan || '']);
return { success: true, message: 'Barang tersimpan' };
} catch(e) { return { success: false, message: e.toString() }; }
}
function ambilSemuaBarang() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('inventory');
if (!sheet) return [];
var data = sheet.getDataRange().getValues();
if (data.length <= 1) return [];
var result = [];
for (var i = 1; i < data.length; i++) {
result.push({
timestamp: data[i][0], namaBarang: data[i][1], jumlah: data[i][2],
satuan: data[i][3], hargaSatuan: data[i][4], totalHarga: data[i][5],
kategori: data[i][6], catatan: data[i][7]
});
}
return result.reverse();
}
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Inventory Tracker</title><style>*{font-family:system-ui;}.card{background:#fff;border-radius:20px;padding:20px;margin-bottom:20px;box-shadow:0 4px 12px #0001}.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}button{background:#3b82f6;padding:12px;border:none;border-radius:40px;color:white;cursor:pointer}table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}th,td{border:1px solid #ddd;padding:8px}</style></head><body><div style="max-width:1100px;margin:auto"><div class="card"><h2>📦 Tambah Stok</h2><div id="msg"></div><div class="form-grid"><input id="nama" placeholder="Nama Barang *"><input id="jumlah" type="number" placeholder="Jumlah *"><input id="satuan" placeholder="Satuan"><input id="harga" type="number" placeholder="Harga Satuan"><input id="kategori" placeholder="Kategori"><textarea id="catatan" placeholder="Catatan"></textarea></div><button onclick="simpan()">Simpan Barang</button></div><div class="card"><h2>📋 Daftar Stok</h2><div style="overflow-x:auto"><table id="tabel"><thead><tr><th>Waktu</th><th>Nama</th><th>Jumlah</th><th>Satuan</th><th>Harga</th><th>Total</th><th>Kategori</th><th>Catatan</th></tr></thead><tbody></tbody></table></div></div></div><script>
function msg(p,t){var d=document.getElementById('msg');d.innerHTML='<div style="background:'+(t=='success'?'#dcfce7':'#fee2e2')+';border-radius:16px;padding:8px">'+p+'</div>';setTimeout(()=>d.innerHTML='',3000);}
function simpan(){var d={namaBarang:document.getElementById('nama').value.trim(),jumlah:parseInt(document.getElementById('jumlah').value)||0,satuan:document.getElementById('satuan').value,hargaSatuan:parseInt(document.getElementById('harga').value)||0,kategori:document.getElementById('kategori').value,catatan:document.getElementById('catatan').value};if(!d.namaBarang||d.jumlah<=0){msg('Isi nama & jumlah','error');return;}
google.script.run.withSuccessHandler(function(r){if(r.success){msg(r.message,'success');document.getElementById('nama').value='';document.getElementById('jumlah').value='';document.getElementById('satuan').value='';document.getElementById('harga').value='';document.getElementById('kategori').value='';document.getElementById('catatan').value='';ambil();}else msg(r.message,'error');}).simpanBarang(d);}
function ambil(){google.script.run.withSuccessHandler(function(d){var tb=document.querySelector('#tabel tbody');tb.innerHTML='';for(var i=0;i<d.length;i++){var r=tb.insertRow();r.insertCell(0).innerText=new Date(d[i].timestamp).toLocaleString();r.insertCell(1).innerText=d[i].namaBarang;r.insertCell(2).innerText=d[i].jumlah;r.insertCell(3).innerText=d[i].satuan;r.insertCell(4).innerText=d[i].hargaSatuan;r.insertCell(5).innerText=d[i].totalHarga;r.insertCell(6).innerText=d[i].kategori;r.insertCell(7).innerText=d[i].catatan;}}).ambilSemuaBarang();}
window.onload=ambil;
</script></body></html>
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setTitle('Client Database')
.addMetaTag('viewport', 'width=device-width, initial-scale=1');
}
function simpanKlien(data) {
if (!data.nama || !data.kontak) return { success: false, message: 'Nama & kontak wajib' };
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('clients');
if (!sheet) {
sheet = SpreadsheetApp.getActiveSpreadsheet().insertSheet('clients');
sheet.appendRow(['Timestamp','Nama','Kontak','Email','Perusahaan','Status','Catatan','FollowUp']);
}
sheet.appendRow([new Date(), data.nama, data.kontak, data.email || '', data.perusahaan || '', data.status || 'Prospek', data.catatan || '', data.followUp || '']);
return { success: true, message: 'Klien tersimpan' };
}
function ambilSemuaKlien() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('clients');
if (!sheet) return [];
var d = sheet.getDataRange().getValues();
if (d.length <= 1) return [];
var r = [];
for (var i = 1; i < d.length; i++) {
r.push({ timestamp: d[i][0], nama: d[i][1], kontak: d[i][2], email: d[i][3], perusahaan: d[i][4], status: d[i][5], catatan: d[i][6], followUp: d[i][7] });
}
return r.reverse();
}
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Client Database</title><style>*{font-family:system-ui;}.card{background:#fff;border-radius:20px;padding:20px;margin-bottom:20px;box-shadow:0 4px 12px #0001}.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}button{background:#22c55e;padding:12px;border:none;border-radius:40px;color:white;cursor:pointer}table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}th,td{border:1px solid #ddd;padding:8px}</style></head><body><div style="max-width:1100px;margin:auto"><div class="card"><h2>📇 Tambah Klien</h2><div id="msg"></div><div class="form-grid"><input id="nama" placeholder="Nama *"><input id="kontak" placeholder="Kontak (HP/WA) *"><input id="email" placeholder="Email"><input id="perusahaan" placeholder="Perusahaan"><select id="status"><option>Prospek</option><option>Hot Lead</option><option>Klien Aktif</option><option>Lost</option></select><input id="followUp" type="date"><textarea id="catatan" placeholder="Catatan"></textarea></div><button onclick="simpan()">Simpan Klien</button></div><div class="card"><h2>📋 Daftar Klien</h2><div style="overflow-x:auto"><table id="tabel"><thead><tr><th>Waktu</th><th>Nama</th><th>Kontak</th><th>Email</th><th>Perusahaan</th><th>Status</th><th>Follow Up</th><th>Catatan</th></tr></thead><tbody></tbody></table></div></div></div><script>
function msg(p,t){var d=document.getElementById('msg');d.innerHTML='<div style="background:'+(t=='success'?'#dcfce7':'#fee2e2')+';border-radius:16px;padding:8px">'+p+'</div>';setTimeout(()=>d.innerHTML='',3000);}
function simpan(){var d={nama:document.getElementById('nama').value.trim(),kontak:document.getElementById('kontak').value.trim(),email:document.getElementById('email').value,perusahaan:document.getElementById('perusahaan').value,status:document.getElementById('status').value,catatan:document.getElementById('catatan').value,followUp:document.getElementById('followUp').value};if(!d.nama||!d.kontak){msg('Isi nama & kontak','error');return;}
google.script.run.withSuccessHandler(function(r){if(r.success){msg(r.message,'success');document.getElementById('nama').value='';document.getElementById('kontak').value='';document.getElementById('email').value='';document.getElementById('perusahaan').value='';document.getElementById('catatan').value='';document.getElementById('followUp').value='';ambil();}else msg(r.message,'error');}).simpanKlien(d);}
function ambil(){google.script.run.withSuccessHandler(function(d){var tb=document.querySelector('#tabel tbody');tb.innerHTML='';for(var i=0;i<d.length;i++){var r=tb.insertRow();r.insertCell(0).innerText=new Date(d[i].timestamp).toLocaleString();r.insertCell(1).innerText=d[i].nama;r.insertCell(2).innerText=d[i].kontak;r.insertCell(3).innerText=d[i].email;r.insertCell(4).innerText=d[i].perusahaan;r.insertCell(5).innerText=d[i].status;r.insertCell(6).innerText=d[i].followUp;r.insertCell(7).innerText=d[i].catatan;}}).ambilSemuaKlien();}
window.onload=ambil;
</script></body></html>
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setTitle('Task Manager')
.addMetaTag('viewport', 'width=device-width, initial-scale=1');
}
function simpanTugas(data) {
if (!data.tugas) return { success: false, message: 'Tugas wajib' };
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('tasks');
if (!sheet) {
sheet = SpreadsheetApp.getActiveSpreadsheet().insertSheet('tasks');
sheet.appendRow(['Timestamp','Tugas','Deadline','Prioritas','Status','Catatan']);
}
sheet.appendRow([new Date(), data.tugas, data.deadline || '', data.prioritas || 'Medium', data.status || 'To Do', data.catatan || '']);
return { success: true, message: 'Tugas tersimpan' };
}
function ambilTugas() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('tasks');
if (!sheet) return [];
var d = sheet.getDataRange().getValues();
if (d.length <= 1) return [];
var r = [];
for (var i = 1; i < d.length; i++) {
r.push({ timestamp: d[i][0], tugas: d[i][1], deadline: d[i][2], prioritas: d[i][3], status: d[i][4], catatan: d[i][5] });
}
return r.reverse();
}
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Task Manager</title><style>*{font-family:system-ui;}.card{background:#fff;border-radius:20px;padding:20px;margin-bottom:20px;box-shadow:0 4px 12px #0001}.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}button{background:#eab308;padding:12px;border:none;border-radius:40px;color:white;cursor:pointer}table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}th,td{border:1px solid #ddd;padding:8px}</style></head><body><div style="max-width:1100px;margin:auto"><div class="card"><h2>✅ Tambah Tugas</h2><div id="msg"></div><div class="form-grid"><input id="tugas" placeholder="Nama Tugas *"><input id="deadline" type="date"><select id="prioritas"><option>Rendah</option><option selected>Medium</option><option>Tinggi</option></select><select id="status"><option>To Do</option><option>Doing</option><option>Done</option></select><textarea id="catatan" placeholder="Catatan"></textarea></div><button onclick="simpan()">Simpan Tugas</button></div><div class="card"><h2>📋 Daftar Tugas</h2><div style="overflow-x:auto"><table id="tabel"><thead><tr><th>Waktu</th><th>Tugas</th><th>Deadline</th><th>Prioritas</th><th>Status</th><th>Catatan</th></tr></thead><tbody></tbody></table></div></div></div><script>
function msg(p,t){var d=document.getElementById('msg');d.innerHTML='<div style="background:'+(t=='success'?'#dcfce7':'#fee2e2')+';border-radius:16px;padding:8px">'+p+'</div>';setTimeout(()=>d.innerHTML='',3000);}
function simpan(){var d={tugas:document.getElementById('tugas').value.trim(),deadline:document.getElementById('deadline').value,prioritas:document.getElementById('prioritas').value,status:document.getElementById('status').value,catatan:document.getElementById('catatan').value};if(!d.tugas){msg('Tugas wajib diisi','error');return;}
google.script.run.withSuccessHandler(function(r){if(r.success){msg(r.message,'success');document.getElementById('tugas').value='';document.getElementById('catatan').value='';ambil();}else msg(r.message,'error');}).simpanTugas(d);}
function ambil(){google.script.run.withSuccessHandler(function(d){var tb=document.querySelector('#tabel tbody');tb.innerHTML='';for(var i=0;i<d.length;i++){var r=tb.insertRow();r.insertCell(0).innerText=new Date(d[i].timestamp).toLocaleString();r.insertCell(1).innerText=d[i].tugas;r.insertCell(2).innerText=d[i].deadline;r.insertCell(3).innerText=d[i].prioritas;r.insertCell(4).innerText=d[i].status;r.insertCell(5).innerText=d[i].catatan;}}).ambilTugas();}
window.onload=ambil;
</script></body></html>
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setTitle('Expense Tracker')
.addMetaTag('viewport', 'width=device-width, initial-scale=1');
}
function simpanPengeluaran(data) {
if (!data.deskripsi || !data.jumlah) return { success: false, message: 'Deskripsi & jumlah wajib' };
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('expenses');
if (!sheet) {
sheet = SpreadsheetApp.getActiveSpreadsheet().insertSheet('expenses');
sheet.appendRow(['Timestamp','Deskripsi','Jumlah','Kategori','Metode','Catatan']);
}
sheet.appendRow([new Date(), data.deskripsi, data.jumlah, data.kategori || 'Lainnya', data.metode || 'Tunai', data.catatan || '']);
return { success: true, message: 'Pengeluaran tercatat' };
}
function ambilPengeluaran() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('expenses');
if (!sheet) return [];
var d = sheet.getDataRange().getValues();
if (d.length <= 1) return [];
var r = [];
for (var i = 1; i < d.length; i++) {
r.push({ timestamp: d[i][0], deskripsi: d[i][1], jumlah: d[i][2], kategori: d[i][3], metode: d[i][4], catatan: d[i][5] });
}
return r.reverse();
}
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Expense Tracker</title><style>*{font-family:system-ui;}.card{background:#fff;border-radius:20px;padding:20px;margin-bottom:20px;box-shadow:0 4px 12px #0001}.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}button{background:#10b981;padding:12px;border:none;border-radius:40px;color:white;cursor:pointer}table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}th,td{border:1px solid #ddd;padding:8px}</style></head><body><div style="max-width:1100px;margin:auto"><div class="card"><h2>💰 Catat Pengeluaran</h2><div id="msg"></div><div class="form-grid"><input id="deskripsi" placeholder="Deskripsi *"><input id="jumlah" type="number" placeholder="Jumlah (Rp) *"><select id="kategori"><option>Makanan</option><option>Transport</option><option>Belanja</option><option>Tagihan</option><option>Lainnya</option></select><select id="metode"><option>Tunai</option><option>Debit</option><option>Kredit</option><option>QRIS</option></select><textarea id="catatan" placeholder="Catatan"></textarea></div><button onclick="simpan()">Simpan</button></div><div class="card"><h2>📊 Riwayat</h2><div style="overflow-x:auto"><table id="tabel"><thead><tr><th>Waktu</th><th>Deskripsi</th><th>Jumlah</th><th>Kategori</th><th>Metode</th><th>Catatan</th></tr></thead><tbody></tbody></table></div><div id="total" style="margin-top:10px;font-weight:bold"></div></div></div><script>
function msg(p,t){var d=document.getElementById('msg');d.innerHTML='<div style="background:'+(t=='success'?'#dcfce7':'#fee2e2')+';border-radius:16px;padding:8px">'+p+'</div>';setTimeout(()=>d.innerHTML='',3000);}
function simpan(){var d={deskripsi:document.getElementById('deskripsi').value.trim(),jumlah:parseInt(document.getElementById('jumlah').value)||0,kategori:document.getElementById('kategori').value,metode:document.getElementById('metode').value,catatan:document.getElementById('catatan').value};if(!d.deskripsi||d.jumlah<=0){msg('Isi deskripsi & jumlah','error');return;}
google.script.run.withSuccessHandler(function(r){if(r.success){msg(r.message,'success');document.getElementById('deskripsi').value='';document.getElementById('jumlah').value='';document.getElementById('catatan').value='';ambil();}else msg(r.message,'error');}).simpanPengeluaran(d);}
function ambil(){google.script.run.withSuccessHandler(function(d){var tb=document.querySelector('#tabel tbody');tb.innerHTML='';var total=0;for(var i=0;i<d.length;i++){var r=tb.insertRow();r.insertCell(0).innerText=new Date(d[i].timestamp).toLocaleString();r.insertCell(1).innerText=d[i].deskripsi;r.insertCell(2).innerText='Rp '+d[i].jumlah.toLocaleString();r.insertCell(3).innerText=d[i].kategori;r.insertCell(4).innerText=d[i].metode;r.insertCell(5).innerText=d[i].catatan;total+=d[i].jumlah;}document.getElementById('total').innerText='Total Pengeluaran: Rp '+total.toLocaleString();}).ambilPengeluaran();}
window.onload=ambil;
</script></body></html>
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setTitle('Feedback Collector')
.addMetaTag('viewport', 'width=device-width, initial-scale=1');
}
function simpanFeedback(data) {
if (!data.nama || !data.rating) return { success: false, message: 'Nama & rating wajib' };
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('feedback');
if (!sheet) {
sheet = SpreadsheetApp.getActiveSpreadsheet().insertSheet('feedback');
sheet.appendRow(['Timestamp','Nama','Rating','Komentar']);
}
sheet.appendRow([new Date(), data.nama, data.rating, data.komentar || '']);
return { success: true, message: 'Terima kasih atas feedbacknya!' };
}
function ambilFeedback() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('feedback');
if (!sheet) return [];
var d = sheet.getDataRange().getValues();
if (d.length <= 1) return [];
var r = [];
for (var i = 1; i < d.length; i++) {
r.push({ timestamp: d[i][0], nama: d[i][1], rating: d[i][2], komentar: d[i][3] });
}
return r.reverse();
}
function hitungRataRating() {
var f = ambilFeedback();
if (f.length === 0) return 0;
var total = 0;
for (var i = 0; i < f.length; i++) total += parseInt(f[i].rating);
return (total / f.length).toFixed(1);
}
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Feedback Collector</title><style>*{font-family:system-ui;}.card{background:#fff;border-radius:20px;padding:20px;margin-bottom:20px;box-shadow:0 4px 12px #0001}.form-group{margin-bottom:15px}input,textarea,select{width:100%;padding:12px;border-radius:16px;border:1px solid #ddd}button{background:#8b5cf6;padding:12px 30px;border:none;border-radius:40px;color:white;cursor:pointer}.rating-star{font-size:30px;cursor:pointer;color:#ccc}.rating-star.selected{color:gold}table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}th,td{border:1px solid #ddd;padding:8px}</style></head><body><div style="max-width:800px;margin:auto"><div class="card"><h2>⭐ Kirim Feedback</h2><div id="msg"></div><div class="form-group"><input id="nama" placeholder="Nama Anda *"></div><div class="form-group"><div id="ratingContainer"><span class="rating-star" data-rating="1">☆</span><span class="rating-star" data-rating="2">☆</span><span class="rating-star" data-rating="3">☆</span><span class="rating-star" data-rating="4">☆</span><span class="rating-star" data-rating="5">☆</span></div><input type="hidden" id="ratingValue" value="0"></div><div class="form-group"><textarea id="komentar" rows="3" placeholder="Komentar/saran..."></textarea></div><button onclick="kirim()">Kirim Feedback</button></div><div class="card"><h2>📋 Semua Feedback</h2><div id="rataRata" style="background:#f3e8ff;padding:10px;border-radius:20px;margin-bottom:10px"></div><div style="overflow-x:auto"><table id="tabel"><thead><tr><th>Waktu</th><th>Nama</th><th>Rating</th><th>Komentar</th></tr></thead><tbody></tbody></table></div></div></div><script>
document.querySelectorAll('.rating-star').forEach(s=>{s.onclick=function(){let val=this.getAttribute('data-rating');document.getElementById('ratingValue').value=val;document.querySelectorAll('.rating-star').forEach(star=>{star.innerText='☆';star.classList.remove('selected');});for(let i=1;i<=val;i++){let star=document.querySelector('.rating-star[data-rating="'+i+'"]');star.innerText='★';star.classList.add('selected');}}});
function msg(p,t){var d=document.getElementById('msg');d.innerHTML='<div style="background:'+(t=='success'?'#dcfce7':'#fee2e2')+';border-radius:16px;padding:8px">'+p+'</div>';setTimeout(()=>d.innerHTML='',3000);}
function kirim(){var nama=document.getElementById('nama').value.trim();var rating=document.getElementById('ratingValue').value;if(!nama||rating==0){msg('Nama dan rating wajib','error');return;}var data={nama:nama,rating:rating,komentar:document.getElementById('komentar').value};google.script.run.withSuccessHandler(function(r){if(r.success){msg(r.message,'success');document.getElementById('nama').value='';document.getElementById('ratingValue').value='0';document.querySelectorAll('.rating-star').forEach(s=>{s.innerText='☆';s.classList.remove('selected');});document.getElementById('komentar').value='';ambil();}else msg(r.message,'error');}).simpanFeedback(data);}
function ambil(){google.script.run.withSuccessHandler(function(d){var tb=document.querySelector('#tabel tbody');tb.innerHTML='';for(var i=0;i<d.length;i++){var r=tb.insertRow();r.insertCell(0).innerText=new Date(d[i].timestamp).toLocaleString();r.insertCell(1).innerText=d[i].nama;r.insertCell(2).innerText='★'.repeat(parseInt(d[i].rating))+'☆'.repeat(5-parseInt(d[i].rating));r.insertCell(3).innerText=d[i].komentar;}}).ambilFeedback();google.script.run.withSuccessHandler(function(avg){document.getElementById('rataRata').innerHTML='⭐ Rata-rata rating: '+avg+' / 5 dari '+ (document.querySelector('#tabel tbody').rows.length)+' feedback';}).hitungRataRating();}
window.onload=ambil;
</script></body></html>