Zafapedia

Untuk menghasilkan analisis data yang baik maka hal penting yang harus dilakukan adalah dengan memastikan bahwa proses entri data dapat berjalan dengan benar sesuai dengan format yang telah ditentukan. Agar kualitas entri data benar dan akurat maka perlu dibuat halaman form input yang mudah dan efisien. Oleh karena itu maka dibuatlah formulir entri yang berfungsi agar pekerjaan dapat dilakukan lebih cepat serta mengurangi kesalahan pengguna dalam memasukkan data yang tidak konsisten dan akurat sehingga dapat meningkatkan produktifitas.

Pada Microsoft Excel, formulir entri data dapat dibuat menggunakan fungsi macro dan VBA, namun formulir tersebut hanya dapat digunakan ketika komputer dalam keadaan offline, sementara formulir input yang dapat dilakukan secara online, Anda dapat menggunakan formulir input berbasis website. Dengan entri data pada formulir online maka pekerjaan tidak harus selalu dikerjakan di kantor namun dapat dilakukan di rumah atau di tempat lainnya. Sehingga pekerjaan entri data akan lebih mudah, lebih cepat dan lebih efisien.

Salah satu formulir online yang paling banyak digunakan saat ini adalah layanan Google Form yang dapat Anda buat tanpa harus mengeluarkan biaya sedikitpun. Namun proses entri data akan mengalami kendala jika data yang dimasukan dalam jumlah banyak, Google Form tidak cukup baik untuk melakukannya. Oleh karena itu mengatasinya maka Anda dapat menggunakan layanan input formulir Google berbasis web HTML atau lebih kita kenal dengan layanan Google HTML. Formulir input dengan layanan Google HTML maka Anda dapat mendesain halaman formulir sama seperti aplikasi pada umumnya yaitu melakukan input data, menampilkan grafik, membuat dashboard hingga melakukan validasi, menyimpan data pada Google Sheet serta dapat disertakan pada halaman website anda dengan bantuan Web App.

Adapun langkah-langkah untuk membuat formulir input berbasis Web App akan saya jelaskan berikut ini.

1. Buat data entri baru Google Sheet pada halaman Google Drive.

Buatlah Google Sheet baru lengkap dengan nama kolom, seperti pada contoh di bawah ini:

Halaman pada Google sheet

2. Buat halaman HTML untuk membuat formulir input dengan nama file index.html

<html>

<head>

<title>Halaman Pada Browser</title>

<style>

table, th, td

{

margin:10px 0;

border:solid 1px #333;

padding:2px 4px;

font:15px Verdana;

}

th {

font-weight:bold;

}

</style>

var script_url = "https://script.google.com/macros/s/AKfycbzTeYEnYBCPf-wsr85bdeZxWP3I-nzTxaFxmnaokU-EXGKTcB0/exec";

// Panggil Google Script

function insert_value() {

var id= $("#id").val();

var name= $("#name").val();

var tempat= $("#tempat").val();

var url = script_url+"?callback=ctrlq &name="+name+"&id="+id+"&tempat="+tempat+"&action=insert";

var request = jQuery.ajax({

crossDomain: true,

url: url ,

method: "GET",

dataType: "jsonp"

});

}

function update_value(){

var id1= $("#id").val();

var name= $("#name").val();

var tempat= $("#tempat").val();

var url = script_url+"?callback=ctrlq &name="+name+"&id="+id1+" &tempat="+tempat+" &action=update";

var request = jQuery.ajax({

crossDomain: true,

url: url ,

method: "GET",

dataType: "jsonp"

});

}

function delete_value(){

var id1= $("#id").val();

var name= $("#name").val();

var url = script_url+"?callback=ctrlq&name="+name+"&id="+id1+"&action=delete";

var request = jQuery.ajax({

crossDomain: true,

url: url ,

method: "GET",

dataType: "jsonp"

});

}

function ctrlq(e) {

read_value();

}

function read_value() {

var url = script_url+"?action=read";

$.getJSON(url, function (json) {

var table = document.createElement("table");

var header = table.createTHead();

var row = header.insertRow(0);

var cell1 = row.insertCell(1);

var cell2 = row.insertCell(2);

var cell3 = row.insertCell(3);

cell1.innerHTML = "<b>ID</b>";

cell2.innerHTML = "<b>name</b>";

cell3.innerHTML = "<b>tempat</b>";

for (var i = 0; i < json.records.length; i++) {

tr = table.insertRow(-1);

var tabCell = tr.insertCell(-1);

tabCell.innerHTML = json.records[i].ID;

tabCell = tr.insertCell(-1);

tabCell.innerHTML = json.records[i].NAME;

tabCell = tr.insertCell(-1);

tabCell.innerHTML = json.records[i].TEMPAT;

}

var divContainer = document.getElementById("showData");

divContainer.innerHTML = "";

divContainer.appendChild(table);

document.getElementById("loader").style.visibility = "hidden";

$("#re").css("visibility","visible");

});

}

</script>

</head>

<body>

<h1>CRUD Pada Google Sheet</h1>

<h4>Menggunakan Bahasa Pemrograman Java Script</h4>

</div>

<ul>

</ul>

</div>

</header>

<form >

</tr>

<tr>

<td >Nomor ID</td> <td><input type="text" size="10" name ="id" id="id"></td>

</tr>

<tr>

</tr>

<tr>

<td>Tempat Lahir</td><td><input type="text" size="25" name ="tempat" id="tempat"></td>

</tr>

</table>

</td>

</tr>

</table>

</form>

</body>

</div>

</main>

</body>

</html>

Berikut hasil dari script index.html:

Halaman index.html

3. Kirim data dari halaman HTML ke Google Sheet, dengan langkah-langkah sebagai berikut:

Buka halaman Google Script : https://www.google.com/script/start/

Klik tombol Start Scripting

Pilih Project baru

Ketikkan script program di bawah ini dengan nama file code.gs :

function doGet(e){

var op = e.parameter.action;

var ss=SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/12Fkk_hpuOOfZoInxZkKBJNXS9C2u390gJ8BuyF4fpPk/edit#gid=0");

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

if(op=="insert")

return insert_value(e,sheet);

if(op=="read")

return read_value(e,ss);

if(op=="update")

return update_value(e,sheet);

if(op=="delete")

return delete_value(e,sheet);

}

function insert_value(request,sheet){

var id = request.parameter.id;

var country = request.parameter.name;

var tempat = request.parameter.tempat;

var flag=1;

var lr= sheet.getLastRow();

for(var i=1;i<=lr;i++){

var id1 = sheet.getRange(i, 2).getValue();

if(id1==id){

flag=0;

var result="Id already exist..";

} }

if(flag==1){

var d = new Date();

var currentTime = d.toLocaleString();

var rowData = sheet.appendRow([currentTime,id,country,tempat]);

var result="Insertion successful";

}

result = JSON.stringify({

"result": result

});

return ContentService

.createTextOutput(request.parameter.callback + "(" + result + ")")

.setMimeType(ContentService.MimeType.JAVASCRIPT);

}

function read_value(request,ss){

var output = ContentService.createTextOutput(),

data = {};

//Note : here sheet is sheet name , don't get confuse with other operation

var sheet="sheet1";

data.records = readData_(ss, sheet);

var callback = request.parameters.callback;

if (callback === undefined) {

output.setContent(JSON.stringify(data));

} else {

output.setContent(callback + "(" + JSON.stringify(data) + ")");

}

output.setMimeType(ContentService.MimeType.JAVASCRIPT);

return output;

}

function readData_(ss, sheetname, properties) {

if (typeof properties == "undefined") {

properties = getHeaderRow_(ss, sheetname);

properties = properties.map(function(p) { return p.replace(/\s+/g, '_'); });

}

var rows = getDataRows_(ss, sheetname),

data = [];

for (var r = 0, l = rows.length; r < l; r++) {

var row = rows[r],

record = {};

for (var p in properties) {

record[properties[p]] = row[p];

}

data.push(record);

}

return data;

}

function getDataRows_(ss, sheetname) {

var sh = ss.getSheetByName(sheetname);

return sh.getRange(2, 1, sh.getLastRow() - 1, sh.getLastColumn()).getValues();

}

function getHeaderRow_(ss, sheetname) {

var sh = ss.getSheetByName(sheetname);

return sh.getRange(1, 1, 1, sh.getLastColumn()).getValues()[0];

}

function update_value(request,sheet){

var output = ContentService.createTextOutput();

var id = request.parameter.id;

var flag=0;

var country = request.parameter.name;

var lr= sheet.getLastRow();

for(var i=1;i<=lr;i++){

var rid = sheet.getRange(i, 2).getValue();

if(rid==id){

sheet.getRange(i,3).setValue(country);

var result="value updated successfully";

flag=1;

}

if(flag==0)

var result="id not found";

result = JSON.stringify({

"result": result

});

return ContentService

.createTextOutput(request.parameter.callback + "(" + result + ")")

.setMimeType(ContentService.MimeType.JAVASCRIPT);

}

function delete_value(request,sheet){

var output = ContentService.createTextOutput();

var id = request.parameter.id1;

var country = request.parameter.name;

var flag=0;

var lr= sheet.getLastRow();

for(var i=1;i<=lr;i++){

var rid = sheet.getRange(i, 2).getValue();

if(rid==id){

sheet.deleteRow(i);

var result="value deleted successfully";

flag=1;

}

if(flag==0)

var result="id not found";

result = JSON.stringify({

"result": result

});

return ContentService

.createTextOutput(request.parameter.callback + "(" + result + ")")

.setMimeType(ContentService.MimeType.JAVASCRIPT);

}

4. Publish script sebagai Web App

Pada halaman Google script, pilih menu Publikasikan ==> Terapkan sebagai aplikasi web, sampai muncul gambar di bawah ini:

Deployment as web App

5. Jalankan file index.html dan lihat hasilnya pada halaman Google sheet.

Selamat mencoba.

www.zafapedia.blogspot.com

Thank you for visiting this page. Don't forget to comment below, We appreciate It and enjoy the fun... :-)

Cara Membuat Formulir Input Berbasis Web App ke Google Sheet

1. Buat data entri baru Google Sheet pada halaman Google Drive.

2. Buat halaman HTML untuk membuat formulir input dengan nama file index.html

3. Kirim data dari halaman HTML ke Google Sheet, dengan langkah-langkah sebagai berikut:

4. Publish script sebagai Web App

5. Jalankan file index.html dan lihat hasilnya pada halaman Google sheet.

2 Responses to " Cara Membuat Formulir Input Berbasis Web App ke Google Sheet"