Jumat, 06 Februari 2026

Google Apps Script Beginner

 




School Management System

 





Build Html konversi ke SPA

 







  • Landing page publikbuildHtml

  • Aplikasi internal → SPA

  • Proyek serius → Hybrid

  • UI modern (React) → Client-heavy

  • Google Sheets tool → Embedded




Berikut VERSI SPA TANPA RELOAD untuk Landing Page Lembaga Kursus Digital Skills menggunakan Google Apps Script.
Arsitektur ini paling rapi & scalable, cocok untuk dikembangkan jadi form pendaftaran, dashboard, LMS, atau CRM.

⚠️ Catatan penting
SPA ≠ buildHtml tunggal.
Untuk SPA yang benar (tanpa reload), buildHtml digantikan oleh shell index.html + loader konten via google.script.run.
Ini adalah best practice GAS SPA (dipakai di production).

├── code.gs

├── index.html

├── css.html

├── js.html

├── page_home.html

├── page_program.html

├── page_about.html

├── page_register.html


code.gs

function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setTitle('Digital Skills Academy')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function include(file) {
  return HtmlService.createHtmlOutputFromFile(file).getContent();
}

// API SPA
function loadPage(page) {
  return HtmlService.createHtmlOutputFromFile('page_' + page).getContent();
}

 index.html

<!DOCTYPE html>
<html lang="id">
<head>
  <base target="_top">
  <?!= include('css'); ?>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand fw-bold" href="#" onclick="loadPage('home')">
      Digital Skills Academy
    </a>
    <ul class="navbar-nav ms-auto">
      <li class="nav-item"><a class="nav-link" href="#" onclick="loadPage('home')">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#" onclick="loadPage('program')">Program</a></li>
      <li class="nav-item"><a class="nav-link" href="#" onclick="loadPage('about')">Tentang</a></li>
      <li class="nav-item">
        <a class="btn btn-success btn-sm ms-2" href="#" onclick="loadPage('register')">
          Daftar
        </a>
      </li>
    </ul>
  </div>
</nav>

<div id="app" class="container-fluid p-0" style="margin-top:70px">
  <!-- SPA CONTENT -->
</div>

<?!= include('js'); ?>
</body>
</html>

css.html

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

<style>
  body { font-family: 'Segoe UI', system-ui, sans-serif; }
  .hero {
    background: linear-gradient(135deg,#0d6efd,#6f42c1);
    color: #fff;
    padding: 90px 20px;
    text-align: center;
  }
  .section { padding: 70px 20px; }
  .card:hover {
    transform: translateY(-6px);
    transition: .3s;
  }
</style>

 js.html

<script>
function loadPage(page) {
  document.getElementById('app').innerHTML = `
    <div class="text-center py-5">
      <div class="spinner-border text-primary"></div>
    </div>
  `;

  google.script.run
    .withSuccessHandler(function(html) {
      document.getElementById('app').innerHTML = html;
      history.pushState({page: page}, "", "#" + page);
    })
    .loadPage(page);
}

// BACK / FORWARD SUPPORT
window.onpopstate = function(e) {
  if (e.state && e.state.page) loadPage(e.state.page);
};

// LOAD DEFAULT
document.addEventListener("DOMContentLoaded", () => {
  const page = location.hash.replace('#','') || 'home';
  loadPage(page);
});
</script>

 page_home.html

<section class="hero">
  <h1 class="fw-bold">Upgrade Skill Digitalmu untuk Masa Depan</h1>
  <p class="lead">
    Kursus digital skills berbasis industri & portofolio
  </p>
  <button class="btn btn-light btn-lg me-2" onclick="loadPage('program')">
    Lihat Program
  </button>
  <button class="btn btn-outline-light btn-lg" onclick="loadPage('register')">
    Daftar Sekarang
  </button>
</section>

 page_program.html

<section class="section container">
  <h2 class="fw-bold text-center mb-5">Program Kursus</h2>
  <div class="row g-4">
    <div class="col-md-4">
      <div class="card p-3">
        <h5>Web Development</h5>
        <p>Membangun website & aplikasi modern</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card p-3">
        <h5>Digital Marketing</h5>
        <p>Strategi pemasaran berbasis data</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card p-3">
        <h5>UI / UX Design</h5>
        <p>Desain produk digital profesional</p>
      </div>
    </div>
  </div>
</section>

 page_about.html

<section class="section container text-center">
  <h2 class="fw-bold mb-4">Tentang Lembaga</h2>
  <p>
    Lembaga kursus yang fokus pada digital skills, kesiapan kerja,
    dan sertifikasi berbasis kebutuhan industri.
  </p>
</section>

 page_register.html

<section class="section container">
  <h2 class="fw-bold mb-4">Form Pendaftaran</h2>
  <form>
    <input class="form-control mb-2" placeholder="Nama Lengkap">
    <input class="form-control mb-2" placeholder="Email">
    <input class="form-control mb-2" placeholder="No WhatsApp">
    <button class="btn btn-success">Kirim Pendaftaran</button>
  </form>
</section>

 


Build Html 1

 





Buatkan kode code.gs FULL & SIAP PAKAI untuk Landing Page Lembaga Kursus Digital Skills menggunakan buildHtml() (single-file, tanpa HTML terpisah), modern, mobile-first, dan siap dipasang di Google Sites / Web App GAS.


PROMPT: LANDING PAGE LEMBAGA KURSUS DIGITAL SKILLS

Peran AI
Bertindaklah sebagai Web Designer & Front-End Developer profesional yang berpengalaman membuat landing page lembaga pendidikan dan kursus digital skills.


🧩 TUJUAN

Buat Landing Page Lembaga Kursus Digital Skills yang:

  • Modern, profesional, dan terpercaya

  • Menarik untuk pelajar, mahasiswa, guru, dan pencari kerja

  • Mendorong pendaftaran kursus (lead conversion)

  • Mobile-first dan cepat diakses


🛠️ TEKNOLOGI

Gunakan:

  • HTML5

  • CSS3 / Bootstrap 5

  • JavaScript (opsional)

  • Desain siap diintegrasikan ke:

    • Google Apps Script

    • Google Sites

    • CMS / hosting statis


🧱 STRUKTUR LANDING PAGE (WAJIB)

1️⃣ Hero Section

  • Headline kuat (contoh: Upgrade Skill Digitalmu untuk Masa Depan)

  • Subheadline yang menjelaskan manfaat

  • CTA utama:

    • Daftar Sekarang

    • Lihat Program


2️⃣ Tentang Lembaga

  • Profil singkat lembaga kursus

  • Fokus pada:

    • Digital Skills

    • Kesiapan kerja

    • Sertifikasi / pelatihan berbasis industri


3️⃣ Program Kursus (Cards)

Tampilkan beberapa program, contoh:

  • Web Development

  • Digital Marketing

  • UI/UX Design

  • Data Analysis

  • Content Creator

Setiap kartu berisi:

  • Nama program

  • Deskripsi singkat

  • Tombol Detail / Daftar


4️⃣ Keunggulan Lembaga

Gunakan ikon + teks singkat:

  • Mentor berpengalaman industri

  • Kurikulum berbasis kebutuhan kerja

  • Sertifikat kompetensi

  • Belajar online & offline

  • Portofolio & project nyata


5️⃣ Testimoni

  • Kutipan peserta

  • Nama & profesi/alumni

  • Efek sosial proof


6️⃣ Alur Belajar

Langkah-langkah:

  1. Daftar

  2. Belajar

  3. Praktik & Project

  4. Sertifikat

  5. Siap Kerja / Freelancer


7️⃣ Call To Action (CTA) Akhir

  • Headline persuasif

  • Tombol:

    • Daftar Sekarang

    • Hubungi Kami (WhatsApp)


8️⃣ Footer

  • Alamat lembaga

  • Kontak (WA, Email)

  • Sosial media

  • Copyright


🎨 GAYA DESAIN

  • Warna: biru / ungu / hijau (kesan teknologi & profesional)

  • Font modern & mudah dibaca

  • Spasi rapi

  • Animasi ringan (hover / transition)


📱 RESPONSIVE & UX

  • Tampilan optimal di HP, tablet, desktop

  • CTA selalu terlihat jelas

  • Loading cepat


📦 OUTPUT YANG DIHARAPKAN

  • Kode HTML + CSS lengkap

  • Struktur section jelas

  • Mudah dikembangkan ke SPA atau backend

  • Siap dipakai langsung

Code.gs

function doGet(e) {
  var html = buildHtml();
  return HtmlService.createHtmlOutput(html)
    .setTitle("Digital Skills Academy")
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function buildHtml() {
  return `
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Digital Skills Academy</title>

  <!-- Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <style>
    body {
      font-family: 'Segoe UI', system-ui, sans-serif;
      line-height: 1.6;
    }
    .hero {
      background: linear-gradient(135deg, #0d6efd, #6f42c1);
      color: #fff;
      padding: 90px 20px;
    }
    .hero h1 {
      font-weight: 700;
    }
    .section {
      padding: 70px 20px;
    }
    .badge-skill {
      background: #e7f1ff;
      color: #0d6efd;
    }
    .card:hover {
      transform: translateY(-6px);
      transition: .3s;
    }
    .icon {
      font-size: 36px;
      color: #0d6efd;
    }
    .cta {
      background: linear-gradient(135deg, #198754, #0d6efd);
      color: #fff;
      padding: 70px 20px;
    }
    footer {
      background: #f8f9fa;
      padding: 30px 20px;
      font-size: 14px;
    }
  </style>
</head>

<body>

<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand fw-bold" href="#">Digital Skills Academy</a>
  </div>
</nav>

<!-- HERO -->
<section class="hero text-center">
  <div class="container">
    <h1 class="display-5 mb-3">Upgrade Skill Digitalmu untuk Masa Depan</h1>
    <p class="lead mb-4">
      Belajar skill digital yang relevan industri, berbasis praktik & portofolio.
    </p>
    <a href="#program" class="btn btn-light btn-lg me-2">Lihat Program</a>
    <a href="#daftar" class="btn btn-outline-light btn-lg">Daftar Sekarang</a>
  </div>
</section>

<!-- TENTANG -->
<section class="section">
  <div class="container text-center">
    <h2 class="fw-bold mb-4">Tentang Lembaga</h2>
    <p class="col-md-10 mx-auto">
      Digital Skills Academy adalah lembaga kursus dan pelatihan yang fokus pada
      pengembangan <strong>digital skills</strong>, kesiapan kerja, dan sertifikasi
      berbasis kebutuhan industri modern.
    </p>
    <span class="badge badge-skill m-1">Digital Skills</span>
    <span class="badge badge-skill m-1">Siap Kerja</span>
    <span class="badge badge-skill m-1">Sertifikasi Industri</span>
  </div>
</section>

<!-- PROGRAM -->
<section id="program" class="section bg-light">
  <div class="container">
    <h2 class="fw-bold text-center mb-5">Program Kursus</h2>
    <div class="row g-4">

      ${programCard("Web Development", "Belajar membuat website modern & aplikatif.")}
      ${programCard("Digital Marketing", "Strategi pemasaran digital berbasis data.")}
      ${programCard("UI / UX Design", "Desain produk digital yang user-friendly.")}
      ${programCard("Data Analysis", "Olah & analisis data untuk kebutuhan bisnis.")}
      ${programCard("Content Creator", "Produksi konten kreatif & personal branding.")}

    </div>
  </div>
</section>

<!-- KEUNGGULAN -->
<section class="section">
  <div class="container">
    <h2 class="fw-bold text-center mb-5">Keunggulan Kami</h2>
    <div class="row text-center g-4">
      ${feature("👨‍🏫", "Mentor Berpengalaman Industri")}
      ${feature("📚", "Kurikulum Sesuai Dunia Kerja")}
      ${feature("📜", "Sertifikat Kompetensi")}
      ${feature("💻", "Belajar Online & Offline")}
      ${feature("🧩", "Project & Portofolio Nyata")}
    </div>
  </div>
</section>

<!-- TESTIMONI -->
<section class="section bg-light">
  <div class="container">
    <h2 class="fw-bold text-center mb-5">Apa Kata Alumni</h2>
    <div class="row g-4">
      ${testimoni("Materinya praktis dan langsung kepakai di dunia kerja.", "Andi", "Web Developer")}
      ${testimoni("Mentor ramah dan berbasis industri nyata.", "Siti", "Digital Marketer")}
      ${testimoni("Saya langsung dapat portofolio setelah lulus.", "Budi", "Freelancer")}
    </div>
  </div>
</section>

<!-- ALUR -->
<section class="section">
  <div class="container text-center">
    <h2 class="fw-bold mb-4">Alur Belajar</h2>
    <div class="row g-4">
      ${step("1", "Daftar")}
      ${step("2", "Belajar")}
      ${step("3", "Praktik & Project")}
      ${step("4", "Sertifikat")}
      ${step("5", "Siap Kerja / Freelancer")}
    </div>
  </div>
</section>

<!-- CTA -->
<section id="daftar" class="cta text-center">
  <div class="container">
    <h2 class="fw-bold mb-3">Siap Upgrade Skill Digitalmu?</h2>
    <p class="mb-4">Gabung sekarang dan siapkan masa depan kariermu</p>
    <a href="#" class="btn btn-light btn-lg me-2">Daftar Sekarang</a>
    <a href="https://wa.me/628xxxxxxxxx" class="btn btn-outline-light btn-lg">
      Hubungi Kami (WhatsApp)
    </a>
  </div>
</section>

<!-- FOOTER -->
<footer class="text-center">
  <div class="container">
    <p>
      Digital Skills Academy<br>
      Email: info@digitalskills.id | WhatsApp: 08xxxxxxxx
    </p>
    <p class="mb-0">
      © ${new Date().getFullYear()} Digital Skills Academy. All rights reserved.
    </p>
  </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
`;
}

/* ==== COMPONENT FUNCTIONS ==== */

function programCard(title, desc) {
  return `
  <div class="col-md-4">
    <div class="card h-100 shadow-sm">
      <div class="card-body">
        <h5 class="card-title fw-bold">${title}</h5>
        <p class="card-text">${desc}</p>
        <a href="#" class="btn btn-primary btn-sm">Detail / Daftar</a>
      </div>
    </div>
  </div>`;
}

function feature(icon, text) {
  return `
  <div class="col-md-4">
    <div class="icon mb-2">${icon}</div>
    <p class="fw-semibold">${text}</p>
  </div>`;
}

function testimoni(text, name, role) {
  return `
  <div class="col-md-4">
    <div class="card h-100">
      <div class="card-body">
        <p>“${text}”</p>
        <strong>${name}</strong><br>
        <small>${role}</small>
      </div>
    </div>
  </div>`;
}

function step(no, text) {
  return `
  <div class="col-md">
    <div class="card">
      <div class="card-body">
        <h4 class="fw-bold">${no}</h4>
        <p>${text}</p>
      </div>
    </div>
  </div>`;
}


Build HTML

 



🔗 Contoh Akses URL

HalamanURL
Landing...?page=home
Siswa...?page=student
Admin...?page=admin

Code.gs

function doGet(e) {
  var page = e.parameter.page || "home";
  var html = buildHtml(page);

  return HtmlService.createHtmlOutput(html)
    .setTitle("LevelUp Absensi")
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function buildHtml(page) {
  var content = "";

  switch (page) {
    case "student":
      content = studentPage();
      break;
    case "admin":
      content = adminPage();
      break;
    default:
      content = landingPage();
  }

  return `
  <!DOCTYPE html>
  <html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>LevelUp Absensi</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
      body {
        font-family: 'Segoe UI', sans-serif;
      }
      .hero {
        background: linear-gradient(135deg, #0d6efd, #6610f2);
        color: white;
        padding: 100px 20px;
        text-align: center;
      }
      .feature-icon {
        font-size: 40px;
        color: #0d6efd;
      }
      footer {
        background: #f8f9fa;
        padding: 20px;
        text-align: center;
        font-size: 14px;
      }
    </style>
  </head>
  <body>

    ${navbar()}
    ${content}
    ${footer()}

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
  </html>
  `;
}

function navbar() {
  return `
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand fw-bold" href="?page=home">LevelUp Absensi</a>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="?page=home">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="?page=student">Siswa</a></li>
          <li class="nav-item"><a class="nav-link" href="?page=admin">Admin</a></li>
        </ul>
      </div>
    </div>
  </nav>
  `;
}

function landingPage() {
  return `
  <section class="hero">
    <h1 class="display-5 fw-bold">Sistem Absensi Digital</h1>
    <p class="lead">Cepat • Aman • Terintegrasi Google Spreadsheet</p>
    <div class="mt-4">
      <a href="?page=student" class="btn btn-light btn-lg me-2">Absensi Siswa</a>
      <a href="?page=admin" class="btn btn-outline-light btn-lg">Login Admin</a>
    </div>
  </section>

  <section class="container my-5">
    <div class="row text-center">
      <div class="col-md-4">
        <div class="feature-icon">📱</div>
        <h5 class="mt-3">Mobile Friendly</h5>
        <p>Bisa diakses dari HP, tablet, dan laptop</p>
      </div>
      <div class="col-md-4">
        <div class="feature-icon">☁️</div>
        <h5 class="mt-3">Cloud Based</h5>
        <p>Data tersimpan otomatis di Google Spreadsheet</p>
      </div>
      <div class="col-md-4">
        <div class="feature-icon">🔐</div>
        <h5 class="mt-3">Aman</h5>
        <p>Tanpa instalasi aplikasi tambahan</p>
      </div>
    </div>
  </section>
  `;
}

function studentPage() {
  return `
  <div class="container my-5">
    <h3 class="mb-4">Absensi Siswa</h3>
    <form>
      <div class="mb-3">
        <label class="form-label">Nama</label>
        <input type="text" class="form-control" placeholder="Nama lengkap">
      </div>
      <div class="mb-3">
        <label class="form-label">Kelas</label>
        <input type="text" class="form-control" placeholder="Kelas">
      </div>
      <button class="btn btn-primary">Kirim Absensi</button>
    </form>
  </div>
  `;
}

function adminPage() {
  return `
  <div class="container my-5">
    <h3>Dashboard Admin</h3>
    <p>Kelola data absensi, laporan, dan monitoring kehadiran.</p>
    <div class="alert alert-info">
      Modul dashboard siap dikembangkan
    </div>
  </div>
  `;
}

function footer() {
  return `
  <footer>
    © ${new Date().getFullYear()} LevelUp Absensi • Google Apps Script
  </footer>
  `;
}


Canva dan Google Sheet

  https://www.youtube.com/watch?v=L9H0K7hF1cg&t=1048s https://www.youtube.com/watch?v=09cs8BrmSjU&list=PLQpKhgXcsCCZrKriL0nZcV4az-zW...