Memanfaatkan google spreadsheet untuk database website
Hari ini saya tidak sengaja menemukan Vidio di tiktok tentang membuat website database nya dari google spreadsheet. Sangat menarik sekali, saya langsung berfikir bisa dimanfaatkan untuk menyimpan data statik pada blogger hehe. Tapi untuk saat ini saya belum terlalu paham untuk pembuatan nya. Saya sudah mencoba tambah data dan melihat data melalui API dan berhasil.
Berikut langkah - langkahnya:
1. Buka google spreadsheet, lalu buat data seperti biasa, misal membuat data buah, beri nama file sesuka hati, lalu pada nama sheet isikan sesuai keinginan, misal " buah " lalu pada kolom bisa buat sesuai yang diinginkan misal data stok buah, berarti nama dan jumlah.
2. masuk ke menu ekstensi> apps script lalu masukan program seperti berikut:
const wbook = SpreadsheetApp.getActive();
const sheet = wbook.getSheetByName("buah");
function doGet(){
let data = [];
const rlen = sheet.getLastRow();
const clen = sheet.getLastColumn();
const rows = sheet.getRange(1,1, rlen, clen).getValues();
for (let i = 0; i < rows.length; i++){
const dataRow = rows[i];
let record = {};
for (let j = 0; j < clen; j++){
record[rows[0][j]] = dataRow[j];
}
if (i > 0){
data.push(record);
}
}
const response = {
"data" : data
};
console.log(response);
return ContentService.createTextOutput(JSON.stringify(response)).setMimeType(ContentService.MimeType.JSON)
}
function doPost(request){
const action = request.parameter.action;
const data = JSNON.parse(request.postData.contents);
sheet.appendRow([
data.nama,
data.jumlah
]);
let response = {
"success" : true,
"message" : "sukses menambah data",
"data" : request
}
return ContentService.createTextOutput(JSON.stringify(response)).setMimeType(ContentService.MimeType.JSON);
}Program/script diatas yaitu digunakan untuk menampilkan dan tambah data ke worksheet. Kemudian klik jalanan jika tidak ada error, klik deploy, lalu pilih web app, copy link nya.
3. . masuk ke website postman.com(Pastikan sudah buat akun postman)>workspace>new collection> tambah tab, pilih request get masukan url tadi, jika berhasil akan muncul Json data pada tabel worksheet.
4. Kemudian tambahkan tab baru, paste link tadi, pilih metode post, pada akhiran url Tambahkan ?action=insert
5. Masuk ke menu body, lalu pilih raw dan pilih JSON. Coba insert data dengan perintah berikut:
{
"Nama" : "apel",
"Jumlah" : 10
}
Jika sudah tekan tombol send
Untuk menampilkan data dengan html, bisa menggunakan program berikut :
<!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" />
<link
rel="stylesheet"
type="text/css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.datatables.net/fixedheader/3.2.0/css/fixedHeader.bootstrap.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css"
/>
<title>Daftar Mahasiswa</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3 class="text-center mb-4">Daftar Mahasiswa</h3>
<h4 class="text-center mb-4" id="packageName"></h4>
<br>
<br>
<a href="input.html" type="button" class="btn btn-primary mt-3 mb-3">+ Tambah Mahasiswa</a>
<br>
<br>
<table
id="example"
class="table table-striped table-bordered mt-2 mb-2"
style="width: 100%"
></table>
<br />
<br />
<p id="passingGrade"></p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.2.0/js/dataTables.fixedHeader.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<!-- <script type="text/javascript" src="data.json"></script> -->
<script type="text/javascript">
$(document).ready(function () {
$("#example").DataTable({
ajax: "https://script.google.com/macros/s/AKfycbxZVJrF2TXjj_UQirNR5wkv2_kNK_vlXLvBVdf7XTMiOOz6JdtQlRf1ib1Pwq6zZfCP/exec",
columns: [
{
title: "NAMA",
data: "Nama",
},
{
title: "JUMLAH",
data: "Jumlah",
}
],
rowId: "Nama",
liveAjax: true,
});
});
</script>
</body>
</html>
Untuk tutorial lebih jelasnya bisa tonton video berikut:
Part 1 :
Part 2 :