Kang Alim: Membangun web sekolah berbasis Google Apps Script (GAS) dengan Google Sheets sebagai basis datanya.

Berikut adalah modul panduan langkah demi langkah untuk membangun web sekolah berbasis Google Apps Script (GAS) dengan Google Sheets sebagai basis datanya.

Modul: Pembangunan Web Sekolah Berbasis Google Apps Script & Google Sheets

Deskripsi Modul:

Modul ini dirancang untuk pemula yang ingin membangun sistem informasi web sekolah secara gratis menggunakan ekosistem Google.

Tahap 1: Persiapan Database (Google Sheets)

Langkah pertama adalah menyiapkan struktur data sekolah.

1.Buat Google Sheets Baru:

Buka Google Sheets.
Buat dokumen baru dan beri nama Database Web Sekolah.

2.Buat Sheet 'Pengumuman':

Ubah nama Sheet1 menjadi Pengumuman. Buat header pada baris pertama:

Kolom A (A1): ID
Kolom B (B1): Judul
Kolom C (C1): Tanggal
Kolom D (D1): Isi

Contoh Data (Baris 2): 1 | Penerimaan Siswa Baru | 2026-08-01 | Pendaftaran siswa baru telah dibuka.

3.Buat Sheet 'Guru':

Buat sheet baru dengan menekan tombol + di pojok kiri bawah, beri nama Guru. Buat header:

Kolom A (A1): NIP
Kolom B (B1): Nama
Kolom C (C1): Mata Pelajaran

Contoh Data (Baris 2): 19850101 | Budi Santoso, S.Pd. | Matematika

Tahap 2: Menulis Kode Apps Script (Backend & Frontend)

1.Buka Apps Script Editor:

Di Google Sheets yang telah dibuat, klik menu Ekstensi > Apps Script.
Ubah nama proyek menjadi Web Sekolah App.

2.Tulis Kode Backend (Code.gs):

Hapus semua kode yang ada di file Code.gs, lalu masukkan kode berikut:

// Menampilkan halaman web utama (HTML)

function doGet() {

return HtmlService.createTemplateFromFile('Index')

.evaluate()

.setTitle('Web Resmi Sekolah')

.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

}

// Mengambil data dari Sheet tertentu

function getDataSheet(namaSheet) {

var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(namaSheet);

var data = sheet.getDataRange().getValues();

var header = data[0];

var result = [];

// Mengubah baris array menjadi array of objects

for (var i = 1; i < data.length; i++) {

var row = data[i];

var obj = {};

for (var j = 0; j < header.length; j++) {

obj[header[j]] = row[j];

}

result.push(obj);

}

return result;

}

3.Buat File Tampilan Frontend (Index.html):

Klik tanda + di sebelah kiri Apps Script > pilih HTML.
Beri nama file Index (tanpa ekstensi .html).
Isi dengan kode HTML + CSS Framework (Bootstrap) berikut:

<!DOCTYPE html>

<html>

<head>

<base target="_top">

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Web Sekolah</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.min.css" rel="stylesheet">

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<div class="container">

<a class="navbar-brand fw-bold" href="#">SMA NEGERI 1</a>

</div>

</nav>

<div class="container my-5">

<h2 class="mb-3">Pengumuman Terbaru</h2>

<div id="loading-pengumuman" class="spinner-border text-primary" role="status"></div>

<div class="row" id="container-pengumuman"></div>

<hr class="my-5">

<h2 class="mb-3">Daftar Guru</h2>

<div id="loading-guru" class="spinner-border text-primary" role="status"></div>

<table class="table table-striped d-none" id="tabel-guru">

<thead>

<tr>

<th>NIP</th>

<th>Nama</th>

<th>Mata Pelajaran</th>

</tr>

</thead>

<tbody id="body-guru"></tbody>

</table>

</div>

<script>

// Ambil Data Pengumuman saat halaman dimuat

google.script.run.withSuccessHandler(renderPengumuman).getDataSheet('Pengumuman');

// Ambil Data Guru saat halaman dimuat

google.script.run.withSuccessHandler(renderGuru).getDataSheet('Guru');

function renderPengumuman(data) {

document.getElementById('loading-pengumuman').classList.add('d-none');

let html = '';

data.forEach(item => {

html += `

<div class="col-md-6 mb-3">

<div class="card h-100">

<div class="card-body">

<h5 class="card-title">${item.Judul}</h5>

<h6 class="card-subtitle mb-2 text-muted">${item.Tanggal}</h6>

<p class="card-text">${item.Isi}</p>

</div>

</div>`;

});

document.getElementById('container-pengumuman').innerHTML = html;

}

function renderGuru(data) {

document.getElementById('loading-guru').classList.add('d-none');

let html = '';

data.forEach(item => {

html += `

<tr>

<td>${item.NIP}</td>

<td>${item.Nama}</td>

<td>${item['Mata Pelajaran']}</td>

</tr>`;

});

document.getElementById('body-guru').innerHTML = html;

document.getElementById('tabel-guru').classList.remove('d-none');

}

</script>

</body>

</html>

Tahap 3: Peluncuran / Deployment Web

1.Lakukan Deployment Proyek:

Di pojok kanan atas Apps Script Editor, klik Terapkan (Deploy) > Deploy Baru (New Deployment).
Klik ikon roda gigi (Select type) > pilih Aplikasi Web (Web app).

2.Atur Akses Pengguna:

Deskripsi: Versi 1 - Web Sekolah
Jalankan sebagai (Execute as): Saya (Me)
Yang memiliki akses (Who has access): Siapa saja (Anyone) (Agar web dapat diakses umum tanpa harus login).

3.Dapatkan URL Web:

Klik Terapkan (Deploy).
Berikan izin akses (Authorize Access) jika diminta oleh sistem Google.
Salin URL Aplikasi Web yang diberikan. Buka URL tersebut di browser untuk melihat hasilnya.

Pembahasan & Penjelasan Konsep Teknis

1. Arsitektur Aplikasi (Client-Server Model)

Backend (Code.gs): Bertindak sebagai server. Fungsi doGet() otomatis dipanggil saat seseorang membuka URL web. Fungsi getDataSheet() bertugas membaca data dari spreadsheet lalu mengubah data mentah berbentuk baris/kolom menjadi format objek JSON agar mudah diproses di browser.
Database (Google Sheets): Menyimpan data secara persisten. Saat Anda menambah baris data baru di Sheet Pengumuman atau Guru, tampilan halaman web akan langsung terbarui secara otomatis saat dimuat ulang.
Frontend (Index.html): Berisi struktur tampilan web. Bootstrap digunakan melalui CDN untuk menyajikan antarmuka yang responsif (rapi di HP maupun komputer).

2. Jembatan Komunikasi (google.script.run) Di dalam file HTML, perintah google.script.run.withSuccessHandler(callback).namaFungsiBackend() adalah kunci utama. Perintah ini mengeksekusi fungsi getDataSheet() di server Google secara asinkron (tanpa reload halaman), lalu mengirimkan hasilnya ke fungsi JavaScript renderPengumuman atau renderGuru di browser untuk ditampilkan.

Kang Alim

Thursday, 27 August 2026

Membangun web sekolah berbasis Google Apps Script (GAS) dengan Google Sheets sebagai basis datanya.

Modul: Pembangunan Web Sekolah Berbasis Google Apps Script & Google Sheets

Tahap 1: Persiapan Database (Google Sheets)

Tahap 2: Menulis Kode Apps Script (Backend & Frontend)

Tahap 3: Peluncuran / Deployment Web

Pembahasan & Penjelasan Konsep Teknis

No comments:

Post a Comment

Membangun web sekolah berbasis Google Apps Script (GAS) dengan Google Sheets sebagai basis datanya.

Search This Blog