blog: PBKK Tugas 8

Membangun Aplikasi Menggunakan Framework Google

Nama: Darfi Sultoni
NRP: 05111740000063
Kelas: PBKK-A

Pada aplikasi ini, kita akan memanfaatkan beberapa tools yang disediakan oleh google, yakni Google Spreadsheet dan Google App Script. Google Spreadsheet disini akan dimanfaatkan sebagai database dan Google App Script akan menjadi backend dan frontend aplikasi.

Membuat Database

1. buat sebuah spreadsheet baru pada Google Drive
2. buat column header (first_name, last_name, dateOfBirth, email, phone, msg)

Membuat Backend dan Frontend

1. pada spreadsheet pilih tools>script editor
2. buat file code.gs dan index.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/1R7YvU4Q6VZIA5_yGNrSsKIpDkcKcd7NAMzKuCimzyWk/edit#gid=0";

  var ss = SpreadsheetApp.openByUrl(url);

  var ws = ss.getSheetByName("Sheet1");



  ws.appendRow([formObject.first_name,

                formObject.last_name,

                formObject.dateOfBirth,

                formObject.email,

                formObject.phone,

                formObject.msg,

               ]);

}

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">

    </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">Kotak Saran</p>

                        <div class="form-row">

                            <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-row">

                            <label for="last_name">Last Name</label>

                            <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name">

                        </div>



                        <div class="form-row">

                            <label for="dateOfBirth">Date of Birth</label>

                            <input type="date" class="form-control" id="dateOfBirth" name="dateOfBirth">

                        </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>

                        <div class="form-group">

                            <label for="msg">Saran</label>

                            <textarea class="form-control" id="msg" name="msg"> </textarea>

                        </div>

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

                    </form>

                    <div id="output"></div>

                </div>

            </div>

        </div>

        <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>

    </body>

</html>

Publish aplikasi

1. pada script editor pilih publish->web app
2. pilih publish for anyone
3. allow semua permission
4. buka aplikasi
5. test submit form

6. berhasil

aplikasi: kotak saran

blog

Monday, April 6, 2020

PBKK Tugas 8

Membangun Aplikasi Menggunakan Framework Google

Membuat Database

Membuat Backend dan Frontend

Publish aplikasi

No comments:

Post a Comment