VIDEO
Buatkan aplikasi web menggunakan Google Apps Script dan HTML, yang memiliki form pemesanan produk dengan field berikut:
Nama Pemesan
Email
Produk (drop-down list dengan pilihan: "Produk A", "Produk B", "Produk C")
Jumlah Pesanan
Catatan Tambahan (opsional)
Data yang diisi akan dikirim menggunakan google.script.run dan disimpan di Google Spreadsheet.
🔧 Langkah 1: Siapkan Google Spreadsheet
Buat spreadsheet baru.
Ubah nama sheet menjadi Pemesanan.
Nama Pemesan | Email | Produk | Jumlah Pesanan | Catatan Tambahan | Timestamp
🧩 Langkah 2: Google Apps Script
Buka Google Spreadsheet → Extensions → Apps Script.
Ganti nama file jadi FormPemesanan.
Ganti isi Code.gs dengan kode berikut:
function doGet() {
return HtmlService.createHtmlOutputFromFile('form');
}
function simpanData(formData) {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Pemesanan');
sheet.appendRow([
formData.nama,
formData.email,
formData.produk,
formData.jumlah,
formData.catatan || '',
new Date()
]);
}
🖼️ Langkah 3: Buat File HTML
Klik kanan di bagian kiri → + File → HTML, beri nama: form
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
input, select, textarea {
width: 100%;
padding: 8px;
margin: 6px 0 12px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.success {
color: green;
}
</style>
</head>
<body>
<h2>Form Pemesanan Produk</h2>
<form id="orderForm">
<label>Nama Pemesan</label>
<input type="text" name="nama" required>
<label>Email</label>
<input type="email" name="email" required>
<label>Produk</label>
<select name="produk" required>
<option value="Produk A">Produk A</option>
<option value="Produk B">Produk B</option>
<option value="Produk C">Produk C</option>
</select>
<label>Jumlah Pesanan</label>
<input type="number" name="jumlah" required min="1">
<label>Catatan Tambahan (opsional)</label>
<textarea name="catatan" rows="3"></textarea>
<button type="submit">Kirim Pesanan</button>
</form>
<p id="response" class="success"></p>
<script>
document.getElementById('orderForm').addEventListener('submit', function(e) {
e.preventDefault();
const form = e.target;
const data = {
nama: form.nama.value,
email: form.email.value,
produk: form.produk.value,
jumlah: form.jumlah.value,
catatan: form.catatan.value
};
google.script.run.withSuccessHandler(function() {
document.getElementById('response').textContent = "Pesanan berhasil dikirim!";
form.reset();
}).simpanData(data);
});
</script>
</body>
</html>
🚀 Langkah 4: Jalankan & Deploy
Klik menu Deploy → Test deployments → klik URL yang muncul untuk melihat form.
Jika ingin dibagikan ke publik:
Deploy → Manage deployments → New deployment.
Pilih Web app , beri nama.
Di bagian "Who has access", pilih "Anyone" jika ingin publik dapat mengisi.
Klik Deploy dan salin URL-nya.
PROMPT
Buatkan aplikasi web menggunakan Google Apps Script dan HTML, yang memiliki form upload produk dengan field berikut:
Nama Pengeupload
Email
Nama Produk Diupload
Jumlah
Upload file gambar
Catatan Tambahan (opsional)
Data yang diisi akan dikirim menggunakan google.script.run dan disimpan di Google Spreadsheet.
Tabel Nama Pengeupload | Email | Nama Produk | Jumlah | URL Gambar | Catatan Tambahan | Timestamp
Code.gs function doGet() {
return HtmlService.createHtmlOutputFromFile('form');
}
function uploadData(formObject) {
const folderName = "Upload_Gambar_Produk";
const folder = getOrCreateFolder(folderName);
// Decode and simpan file
const contentType = formObject.mimeType;
const bytes = Utilities.base64Decode(formObject.fileData.split(",")[1]);
const blob = Utilities.newBlob(bytes, contentType, formObject.fileName);
const file = folder.createFile(blob);
// Simpan data ke spreadsheet
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('UploadProduk');
sheet.appendRow([
formObject.nama,
formObject.email,
formObject.namaProduk,
formObject.jumlah,
file.getUrl(),
formObject.catatan || '',
new Date()
]);
return "Upload berhasil disimpan!";
}
function getOrCreateFolder(name) {
const folders = DriveApp.getFoldersByName(name);
return folders.hasNext() ? folders.next() : DriveApp.createFolder(name);
}
form.html <!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
input, textarea, select {
width: 100%;
padding: 8px;
margin-top: 6px;
margin-bottom: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.success {
color: green;
}
</style>
</head>
<body>
<h2>Form Upload Produk</h2>
<form id="uploadForm">
<label>Nama Pengeupload</label>
<input type="text" name="nama" required>
<label>Email</label>
<input type="email" name="email" required>
<label>Nama Produk Diupload</label>
<input type="text" name="namaProduk" required>
<label>Jumlah</label>
<input type="number" name="jumlah" min="1" required>
<label>Upload File Gambar</label>
<input type="file" name="file" accept="image/*" required>
<label>Catatan Tambahan (opsional)</label>
<textarea name="catatan" rows="3"></textarea>
<button type="submit">Upload Produk</button>
</form>
<p id="response" class="success"></p>
<script>
document.getElementById('uploadForm').addEventListener('submit', function(e) {
e.preventDefault();
const form = e.target;
const file = form.file.files[0];
const reader = new FileReader();
reader.onload = function(evt) {
const data = {
nama: form.nama.value,
email: form.email.value,
namaProduk: form.namaProduk.value,
jumlah: form.jumlah.value,
catatan: form.catatan.value,
fileName: file.name,
mimeType: file.type,
fileData: evt.target.result
};
google.script.run.withSuccessHandler(function(msg) {
document.getElementById('response').textContent = msg;
form.reset();
}).uploadData(data);
};
reader.readAsDataURL(file);
});
</script>
</body>
</html>
No comments:
Post a Comment