Membuat form input dengan Google Script ke Google Sheet

Setelah kita mempelajari Cara Insert Google Sheet dengan Google Script sepertiyang telah dijelaskan pada postingan sebelumnya selanjutnya kita akan memberikan Tutorial Google Script mengenai dari lanjutkan sebelum sebelumnya

Kali ini kita akan coba Membuat Form Input Dengan Google Script Google Sheet dengan studi kasus membuat form input user, yang datanya akan tersimpan di Google Sheet dan berikut adalah langkah-langkahnya

1. Buat File Spreadsheet baru berikan nama sesuai keinginan

2. Rename sheet di dalam file spreasheet dengan nama user atau sesuai keinginan kalian

3. Buat header kolom dengan nama, user, password, email

4. Klik menu Extensions kemudian pilih App Script

5. Masukan kode berikut di code.gs yang terdiri dari 3 bagian dimana function tersebut akan menjalankan perintah sesuai dari masing masing fungsi dan berikut adalah kode dari bagian-bagian tersebut

Bagian koneksi

Pada funcion ini bertugas untuk menghubungkan google script dengan google sheet yang nantinya sebagai database dari aplikasi webApp yang kita buat, seperti yang telah di jelaskan pada postingan sebelumnya Cara Koneksi Google Sheet dengan Google Script

function onSubmit(e) {

//referensi sheet

var sheet = SpreadsheetApp.getActiveSheet();

//Mencari baris terakhir dan menambahkan 1 baris baru untuk data yg akan dimasukkan

var row = sheet.getLastRow() + 1;

//menentukan lokasi row

sheet.getRange(row, 1).setValue(e.namedValues["Nama"][0]);

sheet.getRange(row, 2).setValue(e.namedValues["User"][0]);

sheet.getRange(row, 3).setValue(e.namedValues["Password"][0]);

sheet.getRange(row, 4).setValue(e.namedValues["Email"][0]);

}

Bagian menjalankan file html google script

Fungsi ini akan bertugas untuk menjalankan file html kita dengan namai index.html

function doGet(){

var temp = HtmlService.createTemplateFromFile("index");

return temp.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);

}

Bagian pemrosesan data

Pada fungsi ini akan menjalankan tugas untuk memproses data yang kita masukkan di form yang telah kita buat yang berada di index.html

function processForm(form) {

var sheet = SpreadsheetApp.getActiveSheet();

var row = sheet.getLastRow() + 1;

//menentukan lokasi row

sheet.getRange(row, 1).setValue(form.Nama);

sheet.getRange(row, 2).setValue(form.User);

sheet.getRange(row, 3).setValue(form.Password);

sheet.getRange(row, 4).setValue(form.Email);

}

6. Selnajutnya setelah selesai simpan file tersebut dengan klik ikon save

7. Buat file baru dengan tipe file html dan beri nama index. untuk nama ini optional kalian bisa menggantinya dengan nama yg sesuai kalian inginkan namun kalian perlu menggantinya di fuction doGet agar tidak salah panggil dan bisa di eksekusi

8. Isikan dengan kode berikut 

Bagian head

pada bagian ini tedapat link referensi untuk file css yang mana pada tutorial ini menggunakan boostrap, serta css untuk loading

<base target="_top">

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"

rel="stylesheet"

integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"

crossorigin="anonymous">

<title>INPUT DATA USER</title>

<!-- CCSS membuat loading -->

<style>

#loading {

display: none;

position: absolute;

top: 45%;

left: 30%;

transform: translate(-30%, -30%);

z-index: 999;

}

</style>

Bagian Body

Bagian body berisi form untuk input html serta script function untuk mengesekusi validasi form 

<!-- Form input data user -->

<div class="container">

<h2>INPUT DATA USER</h2>

<form id="myForm" onsubmit="handleSubmit(event)">

<div class="form-group">

<label for="nama">Nama:</label>

<input type="text" class="form-control" name="Nama" id="nama">

</div>

<div class="form-group">

<label for="user">User:</label>

<input type="text" class="form-control" name="User" id="user">

</div>

<div class="form-group">

<label for="password">Password:</label>

<input type="password" class="form-control" name="Password" id="password">

</div>

<div class="form-group">

<label for="email">Email:</label>

<input type="email" class="form-control" name="Email" id="email"><br>

</div>

<div class="form-group">

<button type="submit" value="Submit" class="btn btn-primary" >Simpan</button>

</div>

</form>

</div>

<div id="loading">

<p>Loading...</p>

</div>

<script>

function handleSubmit(event) {

event.preventDefault();

var form = document.forms.myForm;

        // validasi form jika kosong maka akan muncul notifikasi

if (form.nama.value == "" || form.user.value == ""

|| form.password.value == "" || form.email.value == "") {

alert("Semua form harus terisi");

return false;

} else {

           var loading = document.getElementById("loading");

loading.style.display = "block";

alert("Telah berhasil mengirim data");

google.script.run.withSuccessHandler(function() {

form.reset();

loading.style.display = "none";

}).processForm(form);

}

}

</script>

9. Setelah selesai semua klik ikon simpan kemdian klik deploy dan pilih webApp selanjutnya ikut seperti pada postingan sebelumnya mengenai Cara Insert Google Sheet dari Google Script

Demikian Tutorial Google Script kali ini mengenai Cara Membuat Form Input Google Script ke Google Sheet spreadsheet dan untuk berikutnya kita akan melanjutkan untuk Form Update Gooogle Script dan Form Delete Google Sheet Script dan Menampikan Data Google Sheet dengan Google Script