AppSheet - Tugas 11
Nama : Muhammad Naufal Fawwaz Ramadhan
NRP : 5025211223
Kelas : PBKK A
Tugas 11
Pada pertemuan mata kuliah PBKK A, tugas kami adalah membuat formulir menggunakan HTML dan CSS serta mengirimkan data yang diisi ke lembar Google Spreadsheet. Untuk mencapai hal tersebut, kita akan menggunakan framework tambahan yang disebut Google App Script. Berikut adalah langkah-langkah yang perlu diikuti dalam proses pembuatan aplikasi tersebut:
Link Github : Github
Link Github : Github
Pertama-tama, kita perlu membuat tampilan html nya terlebih dahulu:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="sheet.css">
</head>
<body>
<div class="container">
<form method="post" action="https://script.google.com/macros/s/AKfycbw8_dDkoXZ5
jaKIXAVLs3r_29FSJ1j-i2TS4pe6vFkVJ0rINgiPeX4KzF3kjas-w3V8/exec" name="contact-form">
<h4>Formulir Laporan</h4>
<input type="text" name="Nama" placeholder="Nama">
<input type="text" name="Nomor HP" placeholder=" Nomor HP">
<input type="email" name="Alamat Email" placeholder="Email">
<textarea name="Pesan" rows="7" placeholder="Pesan"></textarea>
<input type="submit" value="Kirim" id="submit">
</form>
</div>
<script src="sheet.js"></script>
</body>
</html>
Selanjutnya tambahkan file css :
*{
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'poppins', sans-serif;
font-size: 18px;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #bfbfbf;
}
.container{
width: 500px;
padding: 30px;
border: 1px solid #eeeeee;
border-radius: 10px;
background-color: #b6520e;
}
h4{
margin-bottom: 10px;
font-size: 24px;
color: white;
}
input{
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
textarea{
width: 100%;
padding: 10px;
}
#submit{
border: none;
background-color: orangered;
color: white;
width: 200px;
margin-top: 10px;
border-radius: 5px;
}
#submit:hover{
background-color: #333333;
}
Kemudian pada spreadsheet klik "Ekstensi" dan ubah code default menjadi seperti dibawah:
const sheetName = 'data'
const scriptProp = PropertiesService.getScriptProperties()
function intialSetup () {
const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
scriptProp.setProperty('key', activeSpreadsheet.getId())
}
function doPost (e) {
const lock = LockService.getScriptLock()
lock.tryLock(10000)
try {
const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
const sheet = doc.getSheetByName(sheetName)
const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
const nextRow = sheet.getLastRow() + 1
const newRow = headers.map(function(header) {
return header === 'Date' ? new Date() : e.parameter[header]
})
sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])
return ContentService
.createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
.setMimeType(ContentService.MimeType.JSON)
}
catch (e) {
return ContentService
.createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
.setMimeType(ContentService.MimeType.JSON)
}
finally {
lock.releaseLock()
}
}
Setelah itu lakukan Deploy sebagai aplikasi web dan ikuti perintahnya hingga mnedapatkan url. url tersebut perlu
kita copy menuju html dan js yang kita miliki untuk mendapatkan perubahan pada sheet.
Hasil Tampilan
Testing Pengisisan Data Pada Form
Comments
Post a Comment