mrfdn.com – Pada tutorial sebelumnya telah dijelaskan cara menampilkan data dari Google Sheet ke Localhost dalam file HTML.
Kali ini saya ingin berbagi cara mengirim data dari localhost ke google sheet menggunakan form html sederhana.
Google Sheets# untuk mengirimkan skrip HTML ke sheet
Pertama buat file form HTML, 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>
Dalam skrip ini kita akan menggunakan metode tersebut pos Untuk mengirim data ke Google Spreadsheet melalui Terima API.
Setelah itu edit filenya Kode.gs Itu telah dibuat sebelumnya, menambahkan baris ini di 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 install ulang AppScript ke versi terbaru, Penerapan » Kelola penerapan.
Salin URL aplikasi web yang berakhir …/ eksekutifKemudian pastekan script html diatas pada bagian tersebut Anna.
Sekarang kita bisa menggunakan formulir ini untuk mengirim data ke database Google Sheet.
Localhost yang dibuat mencoba mengirimkan data melalui form HTML
Data telah berhasil diterima oleh Google Sheets dan ditampilkan kembali pada tabel GridJS
Periksa data di Google Spreadsheet
Perhatikan bahwa setelah mengedit file Kode.gs Kita perlu mengatur ulang. klik Penerapan » Kelola penerapan Lalu pilih Versi baru.
Skrip HTML untuk mengirim data dari berbagai bentuk ke lembar tertentu yang berbeda #
Wah menarik, karena scriptnya lebih advanced.
Fiturnya di sini adalah kita dapat membuat beberapa halaman formulir input dan kemudian mengirimkan datanya ke lembar mana pun di buku kerja.
Misalnya, saya memiliki 2 formulir input untuk CLASS1 dan CLASS2 dan saya ingin data dikirim ke lembar CLASS1 dan CLASS2 masing-masing.
Untuk itulah konsep ini akan kami buat Parameter URL Untuk memanggil fungsi di setiap skrip yang akan mengambil formulir tertentu dan kemudian menyimpannya ke lembar yang ditentukan.
Langsung saja kita hanya perlu memodifikasi script diatas saja.
<!-- 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>
Lalu masukkan kode seperti ini pada bagian AppScript.
let SCRIPT_PROP = PropertiesService.getScriptProperties(); // new property service
const 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 function
function 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
// CREATE
function ck1(e) {
let kelas1 = e.parameter;
ssppat.appendRow([kelas1.nomor,
kelas1.nama,
kelas1.alamat]);
return ContentService.createTextOutput("Success");
}
// KELAS2
// CREATE
function ck2(e) {
let kelas2 = e.parameter;
ssppat.appendRow([kelas2.nomor,
kelas2.nama,
kelas2.alamat]);
return ContentService.createTextOutput("Success");
}
Cara menjalankan skrip ini adalah dengan menambahkan parameter URL dengan titik akhir yang disebut tindakan ke nama tindakan yang ditetapkan dalam file. Kode.gs.
Tampilan URL default terlihat seperti ini:
Setelah menambahkan parameter url di atas maka akan terlihat seperti ini:
// untuk kelas1
?action=CK1
// untuk kelas2
?action=CK2
Jika skrip Anda tidak berfungsi, periksa bagian ini.
Saya sempat kebingungan selama 2 hari karena ternyata saya lupa mengatur parameter endpoint URL.
Demikianlah tutorial singkat cara mengirim data menggunakan form HTML sederhana di Google Sheets.
Semoga bermanfaat.
Selain itu:
- Perbarui data Google Spreadsheet
- Hapus data Google Spreadsheet
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.