mrfdn.com – Sekarang saya ingin berbagi tutorial cara menampilkan data tabel dari google sheet dalam bentuk html di localhost.
Disini saya menggunakan GridJS untuk menampilkan data dalam bentuk tabel.
Mengapa Gridz?
Karena inilah fitur-fitur yang saya inginkan, seperti:
- mencari
- Jumlah halaman
- mengatur
- Buka API
- dan lainnya
Pertama, buat tabel sederhana di Google Sheets.
Misalnya seperti ini:
Kemudian agar bisa diakses, tekan Bagikan di pojok kanan atas, lalu atur siapa pun.
Selanjutnya buat script menggunakan App Script, tekan Ekstensi » Skrip Aplikasi
dalam berkas Kode.gsUbah semua kode ke kode ini.
let wbook = SpreadsheetApp.openByUrl('GANTI-SPREADSHET-URL-DISINI');
let sheet = wbook.getSheetByName('Sheet1'); //Sesuaikan nama Sheet yang digunakan. Default nya adalah Sheet1
// READ
function doGet(e){
let action = e.parameter.action;
if(action == "getUsers")
{
return getUsers(e);
}
}
function getUsers(e)
{
let rows = sheet.getRange(2,1,sheet.getLastRow()-1,sheet.getLastColumn()).getValues();
let data = [];
for (let i=0;i<rows.length;i++)
{
let row = rows[i];
let record ={};
record['nomor'] = row[0];
record['nama'] = row[1];
record['alamat'] = row[2];
data.push(record);
}
let result = JSON.stringify(data);
return ContentService.createTextOutput(result).setMimeType(ContentService.MimeType.JSON);
}
Kode diatas merupakan kode yang akan kita gunakan untuk mendapatkan API khusus Sheet1 dari Google Sheet ini.
Selanjutnya, sebarkan skrip aplikasi ini ke aplikasi web sehingga Anda mendapatkan tautan ke akhiran eksekutif.
Tugas kita sekarang adalah membuat form HTML di localhost.
Disini saya menggunakan AstroJS karena nantinya aplikasi ini akan menjadi web yang sepenuhnya statis dan mudah dikelola.
Namun jika Anda ingin melakukannya dalam file .html biasa, silakan saja.
file html kira-kira seperti ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="
/>
</head>
<body>
<p>Halo, this is GridJS table with data from Google Sheet</p>
<script is:inline src="
></script>
<div id="table"></div>
<script is:inline>
new gridjs.Grid({
columns: [
"nomor",
"nama",
"alamat",
],
search: true,
pagination: true,
sort: true,
server: {
url: "PASTE-URL-APPSCRIPT-EXEC-DISINI",
then: (data) =>
data.map((user) => [
user.nomor,
user.nama,
user.alamat,
]),
},
}).render(document.getElementById("table"));
</script>
</body>
</html>
Sehingga kita berhasil menangkap setiap objek Json ke dalam tabel yang bagus saat kita menjalankannya.
Demikianlah tutorial singkat cara menampilkan data dari Google Sheet pada tabel HTML di localhost menggunakan fitur Fetch dari GridJS.
Selanjutnya saya akan membagikan cara memposting data dari localhost ke Google Sheet yang kita buat.
Semoga bermanfaat.
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.