Tugas 6 PBKK (B)

on

Membuat Aplikasi Web Menggunakan Google Framework


Untuk tugas PBKK kali ini, saya akan memberi contoh cara membuat aplikasi berbasis web menggunakan framework-nya Google. Syaratnya tentu saja harus punya akun Google.

Aplikasi web berbasis framework Google ini sifatnya bisa langsung dideploy dan bisa dihubungkan dengan Google Sheets. Untuk contoh kali ini saya akan membuat sebuah sistem registrasi sederhana, di mana data yang diberikan oleh pengguna akan disimpan di Sheets.

1. Siapkan spreadsheetnya

Pertama buat spreadsheet di Google Docs. Untuk contoh kali ini akan saya namakan "DB_PBKK". Untuk nama Worksheet saya beri nama "Data"

Contoh spreadsheet yang akan kita jadikan database

Nama tersebut penting untuk menghubungkan aplikasi web kita dengan database, alias spreadsheet ini. Kemudian klik Tools ➔ Script Editor. Akan terbuka sebuah tab baru, di mana kita akan menempatkan aplikasi web kita.

2. Koding scriptnya

Seperti aplikasi web umumnya, akan ada user-side script dan server-side script. Dalam Google Framework, server-side script diakhiri dengan ekstensi ".gs", dan untuk user-script tentu saja JavaScript. Hal yang penting untuk server-side script, adalah fungsi doGet(). Fungsi doGet() akan dipanggil pertama kali saat user mengunjungi web kita. Jadi mari kita definisikan dulu.

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}

Fungsi ini ditaruh di file default, biasanya "Code.gs". Fungsi doGet() diatas akan membuka sebuah file HTML yang akan ditampilkan ke user. Maka dari itu kita buat file HTMLnya. Sesuai fungsi diatas, file HTMLnya akan kita namai "index.html"

3. Buat file HTMLnya

Berdasarkan gambar spreadsheet diatas, kita akan menyimpan 5 field, yaitu nama, email, jenis_kelamin, alamat, dan timestamp. Selain timestamp, kita perlu memintanya dari user karena untuk timestamp kita hanya perlu memanggil fungsi Date() untuk mendapatkan waktu sekarang. Maka dari itu kita siapkan field-fieldnya di HTML.

<table>
  <tr>
    <td><label for="nama">Nama</label></td>
    <td><input type="text" id="nama"></td>
  </tr>
  <tr>
    <td><label for="email">Email</label></td>
    <td><input type="email" id="email"></td>
  </tr>
  <tr>
    <td>Jenis kelamin</td>
    <td>
      <input type="radio" id="pria" name="jenis_kelamin" value="pria"><label for="pria">Pria</label>
      <input type="radio" id="wanita" name="jenis_kelamin" value="wanita"><label for="wanita">Wanita</label>
    </td>
  </tr>
  <tr>
    <td><label for="alamat">Alamat</label></td>
    <td><input type="text" id="alamat"></td>
  </tr>
  <tr>
    <td></td>
    <td><button id="selesai">Selesai</button></td>
  </tr>
</table>

Silakan masukkan kode diatas didalam tag body. Sesuaikan dengan selera. Setelah membuat fieldnya untuk diisi oleh user, kita buat sebuah handler jika user sudah selesai mengisi. Asumsikan user selesai mengisi ketika sudah menekan tombol "Selesai". Tentu saja handler ini menggunakan JavaScript.

<script>
document.getElementById("selesai").addEventListener("click", submit);
function submit() {
  //Dapatkan hasil dari field-fieldnya
  var nama = document.getElementById("nama").value;
  var email = document.getElementById("email").value;
  var jenis_kelamin = document.getElementsByName("jenis_kelamin");
  var jk;
  if (jenis_kelamin[0].checked)
    jk = "Pria";
  else
    jk = "Wanita";
  var alamat = document.getElementById("alamat").value;

  //Jalankan server-side script untuk memasukkan ke database
  google.script.run.doPost(nama, email, jk, alamat);

  //Bersihkan isi
  document.getElementById("nama").value = "";
  document.getElementById("email").value = "";
  for (let i = 0; i < jenis_kelamin.length; i++) {
   jenis_kelamin[i].checked = false;
  }
  document.getElementById("alamat").value = "";
}
</script>

Selesai sudah bagian yang menghadap user, sesuaikan dengan selera. Hasilnya seperti berikut

index.html
Full source codenya

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>
</head>

<body>
  <div class="container py-4">
    <h1>Registrasi</h1>
    <br>
    <table class="table table-borderless">
      <tr>
        <td><label for="nama">Nama</label></td>
        <td>
          <div class="form-group">
            <input type="text" class="form-control" id="nama">
          </div>
        </td>
      </tr>
      <tr>
        <td><label for="email">Email</label></td>
        <td>
          <div class="form-group">
            <input type="email" class="form-control" id="email">
          </div>
        </td>
      </tr>
      <tr>
        <td>Jenis kelamin</td>
        <td>
          <div class="form-group">
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" id="pria" name="jenis_kelamin" value="pria"><label
                class="form-check-label" for="pria">Pria</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" id="wanita" name="jenis_kelamin" value="wanita"><label
                class="form-check-label" for="wanita">Wanita</label>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td><label for="alamat">Alamat</label></td>
        <td>
          <div class="form-group">
            <input type="text" class="form-control" id="alamat">
          </div>
        </td>
      </tr>
      <tr>
        <td></td>
        <td><button class="btn btn-primary" id="selesai">Selesai</button></td>
      </tr>
    </table>
  </div>

  <script>
    document.getElementById("selesai").addEventListener("click", submit);
    function submit() {
      var nama = document.getElementById("nama").value;
      var email = document.getElementById("email").value;
      var jenis_kelamin = document.getElementsByName("jenis_kelamin");
      var jk;
      if (jenis_kelamin[0].checked)
        jk = "Pria";
      else
        jk = "Wanita";
      var alamat = document.getElementById("alamat").value;
      google.script.run.doPost(nama, email, jk, alamat);
      document.getElementById("nama").value = "";
      document.getElementById("email").value = "";
      for (let i = 0; i < jenis_kelamin.length; i++) {
        jenis_kelamin[i].checked = false;
      }
      document.getElementById("alamat").value = "";
    }
  </script>

</body>

</html>

4. Lanjutkan server-side script

Bisa dilihat di JavaScript diatas, kita akan memanggil fungsi doPost() di server-side script. Script tersebut akan menerima field-field yang sudah diberikan oleh user. Fungsi doPost() yang bertanggung jawab untuk memasukkan data ke dalam database.

function doPost(nama, email, jk, alamat) {
  var datamhs = SpreadsheetApp.openById("116ROgO08-8glMVMdfVsVxJYxPWAAKA962UIq55jpbLo");
  var datamhs_sheet = datamhs.getSheetByName("Data");
  var timestamp = Utilities.formatDate(new Date(), "GMT+7", "yyyy/MM/dd HH:mm:ss");

  datamhs.appendRow([nama, email, jk, alamat, timestamp]);

  var json_object = {
    status: "Berhasil"
  }

  var JSONString = JSON.stringify(json_object);
  var JSONOutput = ContentService.createTextOutput(JSONString);
  JSONOutput.setMimeType(ContentService.MimeType.JSON);
  return JSONOutput;
}

Perlu diperhatikan di baris pertama, ganti id dengan id spreadsheet masing-masing. Id spreadsheet ada di URL seperti ini "https://docs.google.com/spreadsheets/d/<ID>/edit#gid=0". Dan di baris kedua sesuaikan dengan nama worksheet. Selesai sudah aplikasi web ini, kita sudah bisa menyimpan data ke dalam Google Sheet, dan aplikasi ini bisa langsung dideploy dan diakses banyak orang.

Full source codenya

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}

function doPost(nama, email, jk, alamat) {
  var datamhs = SpreadsheetApp.openById("116ROgO08-8glMVMdfVsVxJYxPWAAKA962UIq55jpbLo");
  var datamhs_sheet = datamhs.getSheetByName("Data");
  var timestamp = Utilities.formatDate(new Date(), "GMT+7", "yyyy/MM/dd HH:mm:ss");

  datamhs.appendRow([nama, email, jk, alamat, timestamp]);

  var json_object = {
    status: "Berhasil"
  }

  var JSONString = JSON.stringify(json_object);
  var JSONOutput = ContentService.createTextOutput(JSONString);
  JSONOutput.setMimeType(ContentService.MimeType.JSON);
  return JSONOutput;
}

5. Contoh

Isikan data dan klik selesai

Data akan masuk di database

Sekian untuk tugas kali ini, aplikasi web ini bisa diakses di sini

Comments

Post a Comment