🔗 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>
`;
}
Tidak ada komentar:
Posting Komentar