MrJazsohanisharma

Web App แบบหน้าเดียว (Single Page Application)

bysemicon -
0

 


ถ้าคุณต้องการ สร้างลิงก์เพื่อเปิดเพจแต่ละหน้าใน Google Apps Script Web App (เช่น หน้า home, about, contact) ผมจะช่วยคุณสร้าง หน้าเริ่มต้น (home.html) พร้อมระบบ เมนูนำทางด้วย Bootstrap 5 และปรับ URL ให้เรียบง่ายโดยใช้ JavaScript เปลี่ยนหน้าโดยไม่ต้องเปลี่ยนพารามิเตอร์ ?page=... ช่วยให้ลิงก์ดูสะอาดและประสบการณ์ผู้ใช้ดีขึ้นด้วย

📁 ตัวอย่างโครงสร้างไฟล์


📁 Google Apps Script Project
├── index.html      // หน้าแรก (โหลด UI หลัก)
├── home.html       // เนื้อหาหน้า home
├── about.html      // เนื้อหาหน้า about
├── contact.html    // เนื้อหาหน้า contact
├── Code.gs         // Script หลัก

โครงสร้าง Web App แบบหน้าเดียว (Single Page Application)

1. 📄 Code.gs


function doGet() {
  return HtmlService.createHtmlOutputFromFile("index")
    .setTitle("My Web App");
}

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

2. 📄 index.html (หน้าเริ่มต้น + เมนู Bootstrap + โหลดหน้า)

แล้ว:


<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title>My Web App</title>
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
      html, body {
        height: 100%;
        margin: 0;
      }

      body {
        display: flex;
        flex-direction: column;
      }

      main {
        flex: 1 0 auto;
      }

      footer {
        flex-shrink: 0;
      }

      .content-area {
        padding: 20px;
      }

      /* 🔄 Loader CSS */
      #loader {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: none;
        z-index: 9999;
      }
    </style>
  </head>
  <body>
    <!-- ✅ Responsive Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#" onclick="loadPage('home')">My WebApp</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
          aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <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('about')">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#" onclick="loadPage('contact')">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- 🔄 Loading Spinner -->
    <div id="loader">
      <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div>

    <!-- ✅ Main Content -->
    <main class="container content-area" id="content"></main>

    <!-- ✅ Footer -->
    <footer class="bg-light text-center py-3 border-top">
      <small>&copy; 2025 My Web App. All rights reserved.</small>
    </footer>

    <!-- ✅ Bootstrap + Loader Script -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      function showLoader(show) {
        document.getElementById("loader").style.display = show ? "block" : "none";
      }

      function loadPage(page) {
        event.preventDefault();
        showLoader(true); // ⏳ Show loader

        google.script.run.withSuccessHandler(function (html) {
          document.getElementById("content").innerHTML = html;
          showLoader(false); // ✅ Hide loader

          // Collapse navbar if open
          const navbar = document.querySelector(".navbar-collapse");
          if (navbar.classList.contains("show")) {
            new bootstrap.Collapse(navbar).hide();
          }
        }).include(page);
      }

      window.onload = function () {
        loadPage('home');
      };
    </script>
  </body>
</html>

3. 📄 home.html


<h2>หน้าแรก</h2>
<p>ยินดีต้อนรับเข้าสู่หน้าแรกของเว็บไซต์นี้!</p>

4. 📄 about.html


<h2>เกี่ยวกับเรา</h2>
<p>นี่คือข้อมูลเกี่ยวกับเว็บไซต์ของเรา</p>

5. 📄 contact.html


<h2>ติดต่อเรา</h2>
<p>สามารถติดต่อเราได้ทางอีเมลหรือโทรศัพท์ตามข้อมูลด้านล่าง</p>

✅ วิธีใช้งาน

  • Deploy Web App ใหม่ → Deploy as web app → เลือก Anyone เพื่อให้เข้าถึงได้
  • URL จะเป็น:

https://script.google.com/macros/s/your-script-id/exec

Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า