Code Studio: Gemini - Multi Page Architecture

PROMPT

Pengembangan Arsitektur MPA Google Apps Script

"Buatkan struktur aplikasi MPA (Multi-Page Application) berbasis Google Apps Script dengan spesifikasi berikut:

Backend (Code.gs):
- Gunakan fungsi doGet(e) sebagai router yang mengambil parameter ?page=.
- Sertakan variabel rootUrl (dari ScriptApp.getService().getUrl()) ke dalam objek template agar navigasi antar halaman sinkron.
- Buat fungsi include(filename, rootUrl) yang menggunakan createTemplateFromFile dan evaluate() agar file HTML yang dipanggil (seperti Navbar) dapat memproses scriptlet server-side.
Frontend (HTML Files):
- Navbar.html: Buat komponen navigasi yang menggunakan variabel rootUrl untuk link (Contoh: href="<?= rootUrl ?>?page=Home"). Wajib menggunakan atribut target="_top" pada semua link navigasi.
- Index.html & About.html: Halaman konten yang memanggil Navbar menggunakan <?!= include('Navbar', rootUrl); ?>.
- Gunakan Bootstrap 5 via CDN untuk styling modern dan pastikan setiap halaman memiliki tag <base target="_top">.
Tujuan:

Menghindari error 'Maaf saat ini tidak bisa membuka file' akibat link yang tidak terevaluasi.
Memastikan navigasi antar halaman memicu reload penuh (MPA) melalui URL parameters."

"Implementasikan desain UI yang minimalis dengan dark mode menggunakan Tailwind CSS dan integrasikan dengan Google Sheets sebagai database utamanya."

Code.gs

/**
 * Router Utama
 */
function doGet(e) {
  var page = e.parameter.page || 'Index';
  var template = HtmlService.createTemplateFromFile(page);
  
  // Kirim URL Web App ke template utama
  template.rootUrl = ScriptApp.getService().getUrl();
  
  try {
    return template.evaluate()
        .setTitle('Sistem MPA Apps Script')
        .addMetaTag('viewport', 'width=device-width, initial-scale=1')
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  } catch (err) {
    return HtmlService.createHtmlOutput("<h3>Halaman " + page + " tidak ditemukan.</h3>");
  }
}

/**
 * Fungsi Include yang Ditingkatkan
 * Agar file yang di-include bisa membaca variabel 'rootUrl'
 */
function include(filename, rootUrl) {
  var template = HtmlService.createTemplateFromFile(filename);
  template.rootUrl = rootUrl; // Oper variabel rootUrl ke dalam file include (Navbar)
  return template.evaluate().getContent();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  </head>
  <body class="container mt-4">
    
    <?!= include('Navbar', rootUrl); ?>

    <div class="card p-4">
      <h1>Halaman Utama</h1>
      <p>Ini adalah arsitektur MPA yang sudah diperbaiki.</p>
    </div>

  </body>
</html>

Navbar.html

<nav style="background: #333; padding: 15px; color: white; margin-bottom: 20px;">
  <a href="<?= rootUrl ?>?page=Index" target="_top" style="color: white; margin-right: 15px; text-decoration: none;">Beranda</a>
  <a href="<?= rootUrl ?>?page=About" target="_top" style="color: white; text-decoration: none;">Tentang Kami</a>
</nav>

About.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  </head>
  <body class="container mt-4">
    
    <?!= include('Navbar', rootUrl); ?>

    <div class="card p-4 shadow-sm">
      <h1>Tentang Kami</h1>
      <p>Halaman ini berhasil dimuat dengan URL Parameters.</p>
    </div>

  </body>
</html>

Kesimpulan Aktivitas Pengembangan MPA

1. Arsitektur Routing (Backend)

Kita menggunakan satu fungsi doGet(e) sebagai router tunggal yang menangkap parameter URL ?page=.
Sistem secara otomatis merender file HTML yang sesuai berdasarkan nama yang diberikan pada parameter tersebut (default ke Index).

2. Solusi Masalah "Maaf, tidak bisa membuka file"

Penyebab: Kode <?= ScriptApp.getService().getUrl(); ?> tidak dieksekusi di sisi server karena file HTML dipanggil sebagai teks mentah (getContent), sehingga link navigasi menjadi rusak/teks mentah.
Solusi: Memperbarui fungsi include() agar menggunakan HtmlService.createTemplateFromFile(filename).evaluate().getContent(). Hal ini memastikan kode server-side (<? ?>) di dalam komponen (seperti Navbar) diproses terlebih dahulu sebelum digabungkan ke halaman utama.

3. Komponen Navigasi & Link

Variabel rootUrl: Kita menerapkan metode variable passing di mana URL Web App dikirim dari Code.gs ke template utama, lalu diteruskan ke fungsi include.
Atribut target="_top": Wajib digunakan pada setiap tag <a> untuk memaksa browser keluar dari sandbox iframe Google Apps Script dan memuat ulang halaman dengan parameter baru.

4. Struktur File yang Terorganisir

Memisahkan logika backend (Code.gs), komponen yang dapat digunakan kembali (Navbar.html), dan halaman konten (Index.html, About.html).

Ringkasan Komponen Kode Akhir

Komponen	Peran Utama
Code.gs	Mengelola routing, fungsi `include` dinamis, dan akses ke Spreadsheet.
include(file, rootUrl)	Memproses scriptlet di dalam file komponen agar link tidak error.
Navbar.html	Berisi link navigasi menggunakan `<?= rootUrl ?>?page=NamaHalaman`.
target="_top"	Memastikan navigasi berfungsi tanpa terblokir oleh kebijakan keamanan Google.

Code Studio

Jumat, 10 April 2026

Gemini - Multi Page Architecture

PROMPT

Pengembangan Arsitektur MPA Google Apps Script

Code.gs

Index.html

Navbar.html

About.html

Kesimpulan Aktivitas Pengembangan MPA

Ringkasan Komponen Kode Akhir

Tidak ada komentar:

Posting Komentar

MPA - E-Commerce MPA (Multi-Page Application)

Laporkan Penyalahgunaan