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),buildHtmldigantikan oleh shellindex.html+ loader konten viagoogle.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>
Tidak ada komentar:
Posting Komentar