Ciaws: April 2020

Google adalah sebuah perusahaan multinasional Amerika Serikat yang berkekhususan pada jasa dan produk Internet. Produk-produk tersebut meliputi teknologi pencarian, komputasi web, perangkat lunak, dan periklanan daring. Produk-produk Google sudah terkenal sejak dahulu dalam membantu mempermudah pekerjaan manusia, diantaranya yaitu Google Maps, Google Chrome, Google Earth, Google Desktop, dan yang paling familiar bagi kita semua yaitu Google Document.

Google Document (Google Docs.) adalah layanan pengolah kata, lembar sebar, presentasi, formulir, dan penyimpanan data berbasis web gratis dari Google. Google Docs ini terdiri dari beberapa macam yaitu Google Docs seperti Ms Word, Google Sheet seperti Ms. Excel, Google Slides seperti Ms. PowerPoint, dan Google Form seperti formulir pengambilan data.

Pada postingan ini, kita akan membahas lebih dalam mengenai Google Sheet atau biasa disebut dengan Google Spreadsheet.
Google Spreadsheet memiliki fungsi yang sama seperti Ms. Excel, namun dengan Google Spreadsheet ini kita dapat mengerjakan suatu dokumen secara bersamaan dengan rekan-rekan lainnya secara real time karena berbasis web dan dikerjakan secara online.
Google Spreadhsheet biasa digunakan untuk menyimpan data seperti tabel, grafik, dll dengan menginputkan data secara manual. Ternyata selain itu, Google Spreadsheet juga dapat digunakan sebagai Database dalam pembuatan suatu Aplikasi Entry Data. Google menyediakan layanan berupa Script Editor atau biasa disebut sebagai Google Apps Script, dimana Google Apps Script adalah sebuah bahasa pemrograman yang dieksekusi secara remote di dalam google cloud. Dengan Google Apps Script kita dapat membuat sebuah aplikasi Entry Data, berbasis web, dan data tersebut otomatis akan tersimpan pada Google Spreadsheet sebagai databasenya. Selain itu, dengan Google Apps Script kita juga dapat melakukan beberapa hal lainnya, seperti :
- Menulis UDF (user-defined function) untuk google sheet
- Membuat aplikasi macro
- Mengembangkan spreadsheet-based application
- Integrasi dengan Products & Service Google lainnya
- Mengembangkan Graphical User Interface (GUI) yang berjalan sebagai Web Application
- Interaksi dengan cloud-based relational database melalui Google JDBC Service

Berikut adalah tutorial membuat aplikasi Contact Detail dengan Google Apps Script :
1. Membuat akun google, login ke halaman Google Drive
2. Membuat file spreadsheet kosong

3. Mengisikan field-field seperti gambar di bawah ini, nama field tidak akan digunakan dalam program, field ini hanya membantu kita dalam mengidentifikasi data

4. Membuka Menu Tools > Script Editor

Akan tampil halaman seperti di bawah ini :

5. Isikan kode di bawah ini pada file Code.gs, Index.html, dan JavaScript.html

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/1OO8NqPgE8K8NjNanm9HXdELED59_MQghGEagQD7LMOE/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]);
}

Perlu diperhatikan untuk mengubah isi variable url dengan mengisikan link spreadsheet anda masing-masing.

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>