mrfdn.com – Pada tutorial sebelumnya sudah dijelaskan tentang cara menampilkan data dari Google Sheet ke file HTML di Localhost.
Kali ini saya ingin share bagaimna cara mengirim data dari localhost ke Google Sheet menggunakan form HTML sederhana.
Script HTML untuk submit ke satu sheet Google Sheet#
Pertama, buat file form html nya, kira-kira seperti ini.
<h1 id="pesan"></h1><form id="submitform"> <input type="text" name="nomor" id="nomor" placeholder="nomor" /><br /><br /> <input type="text" name="nama" id="nama" placeholder="nama" /><br /><br /> <input type="text" name="alamat" id="alamat" placeholder="alamat" /><br /><br /> <input type="submit" id="sub" value="kirim" /></form><script is:inline> // submit let form = document.getElementById("submitform"); form.addEventListener("submit", (e) => { e.preventDefault(); document.querySelector("#sub").value = "Sedang mengirim.."; let user = new FormData(form); fetch( "GANTI-URL-EXEC-GOOGLE-APPSCRIPT-DISINI", { method: "POST", body: user, } ) .then((res) => res.text()) .then((user) => { document.querySelector("#pesan").innerHTML = user; document.querySelector("#sub").value = "Submit"; document.getElementById("submitform").reset(); }); });</script>Pada script ini kita akan menggunakan metode POST untuk mengirim data ke Google Sheet melalui API yang sudah didapatkan.
Setelah itu edit file Code.gs yang sudah dibuat sebelumnya, dengan menambahkan baris ini pada bagian atas.
let wbook = SpreadsheetApp.openByUrl('PASTE-URL-GOOGLE-SPREADSHEET-DISINI');let sheet = wbook.getSheetByName('Sheet1');// CREATE// ref:function doPost(e) { let user = e.parameter; sheet.appendRow([user.nomor,user.nama,user.alamat]); return ContentService.createTextOutput("Success");}Setelah itu pada AppScript lakukan deploy ulang ke versi terbaru, Deploy » Manage Deployment.
Copy url webapp yang diakhiri dengan …/exec, lalu paste ke script html di atas pada bagian fetch.
Sekarang kita bisa menggunakan form tersebut untuk mengirim data ke database Google Sheet.
mencoba mengirim data melalui form HTML localhost yang sudah dibuat
data berhasil diterima oleh Google Sheet dan ditampilkan kembali ke table GridJS
cek data di google sheet
Perlu diingat bahwa setelah mengedit file Code.gs kita harus melakukan deploy ulang. Klik Deploy » Manage Deployment kemudian pilih New version.
Script HTML untuk mengirim data dari beberapa form ke beberapa sheet tertentu#
Nah, ini yang menarik, karena script nya lebih advance.
Di sini fiturnya adalah kita bisa membuat beberapa halaman form inputan kemudian mengirim datanya ke Sheet mana kita inginkan pada sebuah workbook.
Misalnya, saya memiliki 2 form inputan untuk kelas 1 dan kelas 2, dan saya ingin agar datanya terkirim ke masing-masing sheet KELAS1 dan KELAS2.
Untuk itu konsepnya adalah kita akan membuat URL parameter untuk memanggil fungsi pada masing-masing script mana yang akan menangkap form tertentu kemudian menyimpannya ke sheet yang sudah ditentukan.
Langsung saja, kita hanya perlu modifikasi script di atas.
<!-- form submit untuk kelas 1--><h1 id="pesan"></h1><form id="submitformkelas1"> <input type="text" name="nomor" id="nomor" placeholder="nomor" /><br /><br /> <input type="text" name="nama" id="nama" placeholder="nama" /><br /><br /> <input type="text" name="alamat" id="alamat" placeholder="alamat" /><br /><br /> <input type="submit" id="sub" value="kirim" /></form><!-- end form submit untuk kelas 1--><script is:inline> // submit let form = document.getElementById("submitformkelas1"); form.addEventListener("submit", (e) => { e.preventDefault(); document.querySelector("#sub").value = "Sedang mengirim.."; let siswa = new FormData(form); fetch( "GANTI-URL-EXEC-GOOGLE-APPSCRIPT-DISINI-LALU-SET-URL-PARAMETERNYA-PADA-BAGIAN-AKHIR", { method: "POST", body: siswa, } ) .then((res) => res.text()) .then((siswa) => { document.querySelector("#pesan").innerHTML = siswa; document.querySelector("#sub").value = "Submit"; document.getElementById("submitform").reset(); }); });</script><!-- form submit untuk kelas 2--><h1 id="pesan2"></h1><form id="submitformkelas2"> <input type="text" name="nomor" id="nomor" placeholder="nomor" /><br /><br /> <input type="text" name="nama" id="nama" placeholder="nama" /><br /><br /> <input type="text" name="alamat" id="alamat" placeholder="alamat" /><br /><br /> <input type="submit" id="sub2" value="kirim2" /></form><!-- end form submit untuk kelas 1--><script is:inline> // submit let form = document.getElementById("submitformkelas2"); form.addEventListener("submit", (e) => { e.preventDefault(); document.querySelector("#sub2").value = "Sedang mengirim.."; let siswa = new FormData(form); fetch( "GANTI-URL-EXEC-GOOGLE-APPSCRIPT-DISINI-LALU-SET-URL-PARAMETERNYA-PADA-BAGIAN-AKHIR", { method: "POST", body: siswa, } ) .then((res) => res.text()) .then((siswa) => { document.querySelector("#pesan2").innerHTML = siswa; document.querySelector("#sub2").value = "Submit"; document.getElementById("submitformkelas2").reset(); }); });</script>Kemudian pada bagian AppScript, tulis kodenya seperti ini.
let SCRIPT_PROP = PropertiesService.getScriptProperties(); // new property serviceconst wbook = SpreadsheetApp.openByUrl('PASTE-URL-GOOGLE-SPREADSHEET-DISINI');const skelas1 = wbook.getSheetByName('KELAS1');const skelas2 = wbook.getSheetByName('KELAS2');// If you don't want to expose either GET or POST methods you can comment out the appropriate functionfunction doGet(e){ return handleResponse(e);}function doPost(e){ return handleResponse(e);}function handleResponse(e) { var lock = LockService.getPublicLock(); lock.waitLock(30000); // wait 30 seconds before conceding defeat. //Sheet KELAS1 try { var action = e.parameter.action; if (action == 'CK1') { return ck1(e); } else if (action == 'RK1') { return rk1(e); } } catch(e){ // if error return this return ContentService .createTextOutput(JSON.stringify({"result":"error", "error": e})) .setMimeType(ContentService.MimeType.JSON); } finally { //release lock lock.releaseLock(); } //Sheet KELAS2 try { var action = e.parameter.action; if (action == 'CK2') { return ck2(e); } else if (action == 'RK2') { return rk2(e); } } catch(e){ // if error return this return ContentService .createTextOutput(JSON.stringify({"result":"error", "error": e})) .setMimeType(ContentService.MimeType.JSON); } finally { //release lock lock.releaseLock(); }}/******************** */// KELAS1// CREATEfunction ck1(e) { let kelas1 = e.parameter; ssppat.appendRow([kelas1.nomor, kelas1.nama, kelas1.alamat]); return ContentService.createTextOutput("Success");}// KELAS2// CREATEfunction ck2(e) { let kelas2 = e.parameter; ssppat.appendRow([kelas2.nomor, kelas2.nama, kelas2.alamat]); return ContentService.createTextOutput("Success");}Cara menjalankan script ini adalah dengan menambahkan url parameter dengan end point bernama action beserta nama action yang sudah diset pada file Code.gs.
Tampilan url default kan seperti ini :
Setelah ditambahkan url parameter di atas akan menjadi kira-kira seperti ini :
// untuk kelas1
?action=CK1
// untuk kelas2
?action=CK2
Kalau script anda tidak jalan, coba cek bagian ini.
Saya dibuat pusing selama 2 hari karena ternyata lupa set end point URL paramter ini.
Demikian tutorial singkat tentang cara mengirim data menggunakan form HTML sederhana ke Google Sheet.
Semoga bermanfaat.
Selanjutnya :
- Melakukan update data Google Sheet
- Delete data Google Sheet
PakarPBN
A Private Blog Network (PBN) is a collection of websites that are controlled by a single individual or organization and used primarily to build backlinks to a “money site” in order to influence its ranking in search engines such as Google. The core idea behind a PBN is based on the importance of backlinks in Google’s ranking algorithm. Since Google views backlinks as signals of authority and trust, some website owners attempt to artificially create these signals through a controlled network of sites.
In a typical PBN setup, the owner acquires expired or aged domains that already have existing authority, backlinks, and history. These domains are rebuilt with new content and hosted separately, often using different IP addresses, hosting providers, themes, and ownership details to make them appear unrelated. Within the content published on these sites, links are strategically placed that point to the main website the owner wants to rank higher. By doing this, the owner attempts to pass link equity (also known as “link juice”) from the PBN sites to the target website.
The purpose of a PBN is to give the impression that the target website is naturally earning links from multiple independent sources. If done effectively, this can temporarily improve keyword rankings, increase organic visibility, and drive more traffic from search results.