Nama :Muhamad Faiz Fernanda
Kelas : PBKK-A
NRP : 5025211186
Link SourceCode : https://github.com/faizfernanda/App-Sheet
Dalam tugas ini, kita diminta menggunakan Google Script atau Google Framework untuk latihan. Google Framework digunakan untuk mengirimkan data ke Google Spreadsheet dari formulir kustom yang telah dibuat secara lokal. Data yang dimasukkan melalui formulir lokal tersebut akan terhubung dengan tautan yang dihasilkan oleh Google Script untuk dihubungkan ke dalam spreadsheet. Selanjutnya, data akan secara otomatis tercatat di dalam spreadsheet.
Berikut ini beberapa contoh kode yang dapat digunakan untuk mencapai hal tersebut:
- kode.gs
const sheetName = 'Sheet1'
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()
}
}
kode tersebut untuk google script yang terkoneksi ke google spreadsheet
- Index.HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form method="post" action="" name="contact-form">
<h4>Have Question?</h4>
<input type="text" name="your-name" placeholder="Name">
<input type="text" name="your-number" placeholder="Number">
<input type="email" name="your-email" placeholder="Email">
<textarea name="message" rows="7" placeholder="Your Message"></textarea>
<input type="submit" value="Submit" id="submit">
</form>
</div>
<script src="apps-script.js"></script>
</body>
</html>
- style.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: #f0f0f0;
}
.container {
width: 500px;
padding: 30px;
border: 1px solid #eeeeee;
border-radius: 10px;
background-color: #13415a;
color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h4 {
margin-bottom: 20px;
font-size: 28px;
color: #ffbf49;
input,
textarea {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border: 1px solid #dddddd;
border-radius: 5px;
}
textarea {
resize: vertical;
}
#submit {
border: none;
background-color: #ffbf49;
color: #13415a;
width: 100%;
padding: 12px;
margin-top: 15px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#submit:hover {
background-color: #333333;
}
- kode js :
const scriptURL = 'https://script.google.com/macros/s/AKfycbxN_vHnvUIVMSFSjxo0Myn-DY-caJa7JcTshsnw9BSN2fHWT6pzLfJ_Qia-emiRmCYy/exec'
const form = document.forms['contact-form']
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => alert("Thank you! your form is submitted successfully." ))
.then(() => { window.location.reload(); })
.catch(error => console.error('Error!', error.message))
})
Berikut ini untuk tampilan dari website:
ketika kita mengisi data diri :
untuk hasil pada sheet :
Komentar
Posting Komentar