Tugas 13 PBKK Google Framework
Nama : Danar Sodik Priyambodo
NRP : 5025211145
PBKK-A
Pada tugas kali ini kita diharuskan menggunakan Google Script atau Google Framework untuk latihan, google framework ini digunakan untuk melakukan post ke dalam google spreadsheet dari form custom yang telah kita buat pada local. Data yang diinputkan dari local form tersebut akan terkoneksi dengan link yang telah di generate oleh google script untuk dikoneksikan ke dalam spreadsheet dan data akan tertulis otomatis di dalam spreadsheet.
berikut berumapan beberapa kode yang digunakan :
- kode.gs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{ | |
| 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; | |
| } | |
| .container{ | |
| width: 500px; | |
| padding: 30px; | |
| border: 1px solid #eeeeee; | |
| border-radius: 10px; | |
| background-color: #13415a; | |
| } | |
| 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: rgb(255, 191, 73); | |
| color: white; | |
| width: 200px; | |
| margin-top: 10px; | |
| border-radius: 5px; | |
| } | |
| #submit:hover{ | |
| background-color: #333333; | |
| } |
- apps-script.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 tadi merupakan kode latihan yang saya gunakan, kemudian tampilan website akan terlihat seperti berikut :
kemudian website dapat di akses pada link berikut : https://danar.site/formquestion/
hasil input dapat di cek pada halaman berikut : Form
project dapat di akses pada link berikut : Github
TERIMAKASIH
Komentar
Posting Komentar