Langsung ke konten utama

Membuat Web dengan Google Apps Script

Membuat Web dengan Google Apps Script

Apps Script adalah platform scripting yang dikembangkan oleh Google untuk pengembangan aplikasi ringan di platform G Suite. Google Apps Script pada awalnya dikembangkan oleh Mike Harm sebagai proyek sampingan sambil bekerja sebagai pengembang di Google Sheets.

Dalam App Script ini anda dapat membuat berbagai bentuk aplikasi web, api, script sheet dll  dengan bantuan database Google Sheets.

Dalam tutorial ini akan saya jelaskan cara membuat web pendataan YearBook dengan bantuan Apps Script ini.

Website : https://script.google.com/macros/s/AKfycbyWGScRVdAYqZIX7qriMz-GSqii7YhoQIJGuCs3/exec

1. Pertama-tama silahkan kunjungi Google Sheets anda. Silahkan login menggunkan akun google anda. Pilih menu Go to Google Sheets.


2. Isikan SpreadSheet anda dengan atribut-atribut data yang anda butuhkan. Seperti pada gambar dibawah


Atribut yang saya gunakan :
- nama
- alamat
- email
- nohp
- ig
- twitter
- kata

3. Untuk menambahkan script silahkan plih menu Alat > Editor Script


Maka anda akan dialihkan ke halaman editor script seperti gambar dibawah


4. Selanjutnya silahkan isi kode dibawah pada file Kode.gs




  • function doGet(e) > Untuk meload view web sebagai UI user memasukkan data. Fungsi ini akan meload file index.html
  • function userClicked > Fungsi akan menerima data inputan user dan akan menambahakan (append) data pada SpreadSheet.
note : id spreadsheet dapat anda lihat pada url spreadsheet anda
pada url dibawah yang ditandai dengan huruf tebal merupakan id dokumen spreedsheet
https://docs.google.com/spreadsheets/d/1A3cz77P6nsIV-v5tYOtHej8ifZlER0th-lH9mc9qxY0/edit#gid=0

5. Untuk membuat UI user maka kita akan membuat file index.html yang berisi form data-data yang kita butuhkan. Pilih menu File > baru > file html. Isikan kode dibawah pada index.html



Pada kode diatas saya menggabungkan js dan css dalam file html. Anda bisa memisahnya menjadi file .css dan .js dan melinkkan file ke html anda.

Yang perlu diperhatikan dalam kode diatas adalah id pada tiap form harus benar agar script dapat berjalan dan data dapat tersimpan pada SpreadSheet.

6. Untuk keperluan hostingnya silahkan pilih menu publikasikan > terapkan sebagai aplikasi web


kasih nama apps anda dan pilih deploy. Selanjutnya berikan akses ke google akun anda. Sehingga hasil ahir konfigurasi menjadi seperti dibawah.


Hasil Ahir

Hasil Tampilan website


Penginputan data


Data tersimpan pada SpreadSheet 








Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Tutorial membuat program Hello World profil diri dengan BlueJ

Program Hello World Profile in Java by : M yusuf mukharom Pada blog kali ini saya akan membagikan tutorial membuat program profil sederhana dengan menggunakan bahasa Java. Dalam tutorial ini saya menggunakan aplikasi BlueJ sebagai IDE Java saya. Anda bisa menggunakan IDE lain seperti : NetBeans Eclipse JCreator Borland JBuilder Yang pastinya tiap-tiap IDE memiliki fitur masing-masing dalam memproses program Java anda. Yak tanpa fa fi fu lagi langsung saja lanjut ke tutorial cara membuat profil dengan aplikasi BlueJ. Membuat Profil Java dengan BlueJ Buka aplikasi BlueJ kalian. Jika kalian belum menginstall anda bisa mendownload installernya lewat link  disini Pilih Project → New Project Silahkan isikan nama project baru anda dan atur folder sesuai keinginan. Selanjutnya pilih ok Pada awal projeck anda akan diberi project kosongan. Selanjutnya pilih new class dan isikan nama kelas yang ingin anda buat. BlueJ akan memberikan file class baru pada project
Posting Komentar
Baca selengkapnya

UTS PBKK

POS Kasir CodeIgniter Fitur-fitur yang tersedia : - Login - Kasir (penjualan) - Suplier - Kategori - Barang - Pengguna - Laporan - Pembelian barang (stok barang) - Retur barang (pengembalian barang grosir jika mengalami kerusakan) - Grafik Link demo  Website Link dokumentasi  Github 1. Login Terdapat dua akses pada halaman ini yaitu sebagai admin (owner) dan kasir. Admin dapat memiliki akses kesemua fitur. Sedangkan kasir hanya memiliki akses kedalam fitur penjualan. Code: Model   View Controller 2. Kasir Terdapat dua fitur penjualan yaitu penjualan eceran dan grosir. Perbedaan dari kedua fitur itu adalah harga groir lebih murah daripada eceran. Dalam menu ini kasir juga dapat mencetak struk transaksi Dalam menu kasir terdapat fitur: - Cari produk dan memasukkan item pembelian - Memasukkan item pembelian dengan kode barang - Menghapus item pembelian - Menambah jumlah item pembelian - Memberikan diskon terdahap item pembel
Posting Komentar
Baca selengkapnya

Java Time Practice

Java Time Practice Program untuk mengubah waktu universal menjadi waktu regional menggunakan BlueJ. Langsung saja lakukan langkah-langakah dibawah Langkah 1 : Buat Kelas time Kelas time ini berfungsi untuk memeriksa waktu yang inputkan yang akan dikirim ke output. Setelah itu dibuat fungsinya untuk Time.java ada beberapa fungsi, yang pertama adalah mengecek format input jam, jika salah maka akan keluar output error. Selanjutnya akan mengembalikan nilai waktu universal dengan hanya 2 digit. Setelah itu mengubah waktu universal ke waktu 12 jam (AM PM). Untuk kodenya seperti dibawah ini. Langkah 2 : Buat Kelas untuk outputnya Untuk program ini akan dibutuhkan 2 kelas (Class). Kelas ini nantinya akan berfungsi sebagai input dan outputnya maka kodenya cukup seperti dibawah ini. public class Time { private int hour,minute,second; public Time(){ hour = 12; minute = 30; second = 0; } public Time(int hour, int minute, int s
Posting Komentar
Baca selengkapnya