Rangkuman dan Tutorial Framework Google
Google Spreadsheet
Google Sheets is a spreadsheet program included as part of a free, web-based software office suite offered by Google within its Google Drive service. It is a modern version of MS Excel. The service also includes Google Docs and Google Slides, a word processor and presentation program respectively.
Google Apps Script
Apps Script is a scripting platform developed by Google for light-weight application development in the G Suite platform. Google Apps Script was initially developed by Mike Harm as a side project whilst working as a developer on Google Sheets.
Function
1. Add custom menus, dialogs, and sidebars to Google Docs, Sheets, and Forms.
2. Write custom functions and macros for Google Sheets.
3. Publish web apps — either standalone or embedded in Google Sites.
4. Interact with other Google services, including AdSense, Analytics, Calendar, Drive, Gmail, and Maps.
5. Build add-ons to extend Google Docs, Sheets, Slides, and Forms, and publish them to the Add-on store
6. Convert an Android app into an Android add-on so that it can exchange data with a user's Google Doc or Sheet on a mobile device.
7. Streamline Hangouts Chat workflows by building a chat bot.
Make Website with spreadsheet as database
1. open https://script.google.com/home/start2. create 2 new file (code.gs and hello.html)
3. copy paste this code
code.gs
function doGet(e) {
return HtmlService.createHtmlOutputFromFile("hello");
}
function userClicked(uname,uemail, ujenisKelamin, ualamat){
var url = "https://docs.google.com/spreadsheets/d/1L4CFcpaIFK5GaWmZPbhihTK01u8PfN-fmSXz9J-Quqg/edit#gid=0"
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Data");
ws.appendRow([new Date, uname,uemail,ujenisKelamin,ualamat]);
// Logger.log(uname +"Someone clicked");
}
return HtmlService.createHtmlOutputFromFile("hello");
}
function userClicked(uname,uemail, ujenisKelamin, ualamat){
var url = "https://docs.google.com/spreadsheets/d/1L4CFcpaIFK5GaWmZPbhihTK01u8PfN-fmSXz9J-Quqg/edit#gid=0"
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Data");
ws.appendRow([new Date, uname,uemail,ujenisKelamin,ualamat]);
// Logger.log(uname +"Someone clicked");
}
hello.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style>
body#LoginForm{ background-image:url("https://hdwallsource.com/img/2014/9/blur-26347-27038-hd-wallpapers.jpg"); background-repeat:no-repeat; background-position:center; background-size:cover; padding:10px;}
.form-heading { color:#fff; font-size:23px;}
.panel h2{ color:#444444; font-size:18px; margin:0 0 8px 0;}
.panel p { color:#777777; font-size:14px; margin-bottom:30px; line-height:24px;}
.login-form .form-control {
background: #f7f7f7 none repeat scroll 0 0;
border: 1px solid #d4d4d4;
border-radius: 4px;
font-size: 14px;
height: 50px;
line-height: 50px;
}
.main-div {
background: #ffffff none repeat scroll 0 0;
border-radius: 2px;
margin: 10px auto 30px;
max-width: 38%;
padding: 50px 70px 70px 71px;
}
.login-form .form-group {
margin-bottom:10px;
}
.login-form{ text-align:center;}
.forgot a {
color: #777777;
font-size: 14px;
text-decoration: underline;
}
.login-form .btn.btn-primary {
background: #f0ad4e none repeat scroll 0 0;
border-color: #f0ad4e;
color: #ffffff;
font-size: 14px;
width: 100%;
height: 50px;
line-height: 50px;
padding: 0;
}
.forgot {
text-align: left; margin-bottom:30px;
}
.botto-text {
color: #ffffff;
font-size: 14px;
margin: auto;
}
.login-form .btn.btn-primary.reset {
background: #ff9900 none repeat scroll 0 0;
}
.back { text-align: left; margin-top:10px;}
.back a {color: #444444; font-size: 13px;text-decoration: none;}
</style>
</head>
<body id="LoginForm">
<div class="container">
<h1 class="form-heading">Form User</h1>
<div class="login-form">
<div class="main-div">
<div class="panel">
<h2>Registrasi</h2>
</div>
<div class="form-group">
<input type="text" class="form-control" id="username" placeholder="Nama Lengkap">
</div>
<div class="form-group">
<input type="text" class="form-control" id="email" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control" id="jenisKelamin" placeholder="Gender">
</div>
<div class="form-group">
<input type="text" class="form-control" id="alamat" placeholder="Alamat">
</div>
<button id ="btn" class="btn btn-primary">Simpan</button>
</div>
</div></div></div>
</body>
<script>
document.getElementById("btn").addEventListener("click",doStuff);
function doStuff(){
var uname = document.getElementById("username").value;
var uemail = document.getElementById("email").value;
var ujenisKelamin = document.getElementById("jenisKelamin").value;
var ualamat = document.getElementById("alamat").value;
google.script.run.userClicked(uname,uemail,ujenisKelamin, ualamat);
document.getElementById("username").value= "";
document.getElementById("email").value= "";
document.getElementById("jenisKelamin").value= "";
document.getElementById("alamat").value= "";
}
</script>
</body>
</html>
<html>
<head>
<base target="_top">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style>
body#LoginForm{ background-image:url("https://hdwallsource.com/img/2014/9/blur-26347-27038-hd-wallpapers.jpg"); background-repeat:no-repeat; background-position:center; background-size:cover; padding:10px;}
.form-heading { color:#fff; font-size:23px;}
.panel h2{ color:#444444; font-size:18px; margin:0 0 8px 0;}
.panel p { color:#777777; font-size:14px; margin-bottom:30px; line-height:24px;}
.login-form .form-control {
background: #f7f7f7 none repeat scroll 0 0;
border: 1px solid #d4d4d4;
border-radius: 4px;
font-size: 14px;
height: 50px;
line-height: 50px;
}
.main-div {
background: #ffffff none repeat scroll 0 0;
border-radius: 2px;
margin: 10px auto 30px;
max-width: 38%;
padding: 50px 70px 70px 71px;
}
.login-form .form-group {
margin-bottom:10px;
}
.login-form{ text-align:center;}
.forgot a {
color: #777777;
font-size: 14px;
text-decoration: underline;
}
.login-form .btn.btn-primary {
background: #f0ad4e none repeat scroll 0 0;
border-color: #f0ad4e;
color: #ffffff;
font-size: 14px;
width: 100%;
height: 50px;
line-height: 50px;
padding: 0;
}
.forgot {
text-align: left; margin-bottom:30px;
}
.botto-text {
color: #ffffff;
font-size: 14px;
margin: auto;
}
.login-form .btn.btn-primary.reset {
background: #ff9900 none repeat scroll 0 0;
}
.back { text-align: left; margin-top:10px;}
.back a {color: #444444; font-size: 13px;text-decoration: none;}
</style>
</head>
<body id="LoginForm">
<div class="container">
<h1 class="form-heading">Form User</h1>
<div class="login-form">
<div class="main-div">
<div class="panel">
<h2>Registrasi</h2>
</div>
<div class="form-group">
<input type="text" class="form-control" id="username" placeholder="Nama Lengkap">
</div>
<div class="form-group">
<input type="text" class="form-control" id="email" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control" id="jenisKelamin" placeholder="Gender">
</div>
<div class="form-group">
<input type="text" class="form-control" id="alamat" placeholder="Alamat">
</div>
<button id ="btn" class="btn btn-primary">Simpan</button>
</div>
</div></div></div>
</body>
<script>
document.getElementById("btn").addEventListener("click",doStuff);
function doStuff(){
var uname = document.getElementById("username").value;
var uemail = document.getElementById("email").value;
var ujenisKelamin = document.getElementById("jenisKelamin").value;
var ualamat = document.getElementById("alamat").value;
google.script.run.userClicked(uname,uemail,ujenisKelamin, ualamat);
document.getElementById("username").value= "";
document.getElementById("email").value= "";
document.getElementById("jenisKelamin").value= "";
document.getElementById("alamat").value= "";
}
</script>
</body>
</html>
4. Your data will automatically updated
0 komentar:
Posting Komentar