PBKK - Membuat Aplikasi Dengan Memanfaatkan Framework Google
Pada postingan kali ini saya akan menerapkan google spreadsheet untuk database sebuah web.
Berikut merupakan tutorial-tutorial yang diperlukan untuk melakukannya:
1. Buat file spreadsheet pada google drive:
2. Isi File dengan tabel berikut:
Berikut merupakan tutorial-tutorial yang diperlukan untuk melakukannya:
1. Buat file spreadsheet pada google drive:
2. Isi File dengan tabel berikut:
Dan Setelah itu buka script editor
3. Pada Script Editor buat file html dan Code.gs seperti berikut:
Code.gs:
function doGet(request) {
return HtmlService.createTemplateFromFile('Index')
.evaluate();
}
/* @Include JavaScript and CSS Files */
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
/* @Process Form */
function processForm(formObject) {
var url = "https://docs.google.com/spreadsheets/d/1OhsOlOk0Rhw0BdVbu_5TFgEo9PlBA9uNMzDAjaBedgw/edit#gid=0";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Data");
ws.appendRow([formObject.first_name,
formObject.last_name,
formObject.gender,
formObject.dateOfBirth,
formObject.email,
formObject.phone]);
}
Note: pada bagian var url masukkan url spreedsheet yang telah dibuat
Index.html:
<!DOCTYPE html> <html> <head> <base target="_top"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <?!= include('JavaScript'); ?> </head> <body> <div class="container"> <div class="row"> <div class="col-6"> <form id="myForm" onsubmit="handleFormSubmit(this)"> <p class="h4 mb-4 text-center">Contact Details</p> <div class="form-row"> <div class="form-group col-md-6"> <label for="first_name">First Name</label> <input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name"> </div> <div class="form-group col-md-6"> <label for="last_name">Last Name</label> <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name"> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <p>Gender</p> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="gender" id="male" value="male"> <label class="form-check-label" for="male">Male</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="gender" id="female" value="female"> <label class="form-check-label" for="female">Female</label> </div> </div> <div class="form-group col-md-6"> <label for="dateOfBirth">Date of Birth</label> <input type="date" class="form-control" id="dateOfBirth" name="dateOfBirth"> </div> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control" id="email" name="email" placeholder="Email"> </div> <div class="form-group"> <label for="phone">Phone Number</label> <input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone Number"> </div> <button type="submit" class="btn btn-primary btn-block">Submit</button> </form> <div id="output"></div> </div> </div> </div> </body> </html>
JavaScript.html:
<script> // Prevent forms from submitting. function preventFormSubmit() { var forms = document.querySelectorAll('form'); for (var i = 0; i < forms.length; i++) { forms[i].addEventListener('submit', function(event) { event.preventDefault(); }); } } window.addEventListener('load', preventFormSubmit); function handleFormSubmit(formObject) { google.script.run.processForm(formObject); document.getElementById("myForm").reset(); } </script>
4. Publish dan deploy as web app:
5. Hasil Web:
Berikut link hasil web saya:
Link
Komentar
Posting Komentar