Code Studio

Minggu, 08 Februari 2026

Jumat, 06 Februari 2026

Landing page publik → buildHtml
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>

<head>

<?!= include('css'); ?>

</head>

<body>

Digital Skills Academy

</a>

<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>

Daftar

</a>

</li>

</ul>

</div>

</nav>

</div>

<?!= include('js'); ?>

</body>

</html>

css.html

<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

function loadPage(page) {

document.getElementById('app').innerHTML = `

</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

<h1 class="fw-bold">Upgrade Skill Digitalmu untuk Masa Depan</h1>

Kursus digital skills berbasis industri & portofolio

</p>

Lihat Program

</button>

Daftar Sekarang

</button>

</section>

page_program.html

<h2 class="fw-bold text-center mb-5">Program Kursus</h2>

<h5>Web Development</h5>

<p>Membangun website & aplikasi modern</p>

</div>

<h5>Digital Marketing</h5>

<p>Strategi pemasaran berbasis data</p>

</div>

<h5>UI / UX Design</h5>

<p>Desain produk digital profesional</p>

</div>

</section>

page_about.html

<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

<h2 class="fw-bold mb-4">Form Pendaftaran</h2>

<form>

<button class="btn btn-success">Kirim Pendaftaran</button>

</form>

</section>

Build Html 1

https://script.google.com/macros/s/AKfycbz5zTjf_4RRMxai1bWUQixpEFbY8JZ5xbVGDKmb9Pj2Spmtv01XE4sH8CE4FhpFnWgr/exec

https://script.google.com/home/projects/1qf48xdxzUQrq2TCyNehP73M9OU_kwfnPMK9RQGDB-mJicg06x-EMcdX4/edit

https://drive.google.com/drive/folders/1rzGnJRKDSG4HQ_KFvLLvW968Rmdjuov5

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:

Daftar
Belajar
Praktik & Project
Sertifikat
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

https://script.google.com/macros/s/AKfycbyN-33tzK7UyJU-c7e6ZYwwYqdwmjT5XqzJy-5tN8TZ1bQOjEUspY4QB5zHTbDlzl01/exec?page=home

https://script.google.com/home/projects/1S_a3tau3mGadGKxXDUDjYMEqfiy2N81ukRNwHo5zgKHuiM3zzDNc-uzh/edit

https://drive.google.com/drive/folders/1rzGnJRKDSG4HQ_KFvLLvW968Rmdjuov5

🔗 Contoh Akses URL

Halaman	URL
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>
  `;
}

Code Studio

Minggu, 08 Februari 2026

Canva dan Google Sheet

Phyton Learning

Jumat, 06 Februari 2026

Google Apps Script Beginner

School Management System

Build Html konversi ke SPA

code.gs

index.html

css.html

js.html

page_home.html

page_program.html

page_about.html

page_register.html

Build Html 1

PROMPT: LANDING PAGE LEMBAGA KURSUS DIGITAL SKILLS

🧩 TUJUAN

🛠️ TEKNOLOGI

🧱 STRUKTUR LANDING PAGE (WAJIB)

1️⃣ Hero Section

2️⃣ Tentang Lembaga

3️⃣ Program Kursus (Cards)

4️⃣ Keunggulan Lembaga

5️⃣ Testimoni

6️⃣ Alur Belajar

7️⃣ Call To Action (CTA) Akhir

8️⃣ Footer

🎨 GAYA DESAIN

📱 RESPONSIVE & UX

📦 OUTPUT YANG DIHARAPKAN

Code.gs

Build HTML

🔗 Contoh Akses URL

Code.gs

Canva dan Google Sheet

Laporkan Penyalahgunaan