🎓 ระบบบันทึกทุนการศึกษา Scholarship Record System

🎓 ระบบบันทึกทุนการศึกษา Scholarship Management System

วันนี้ขอแบ่งปันอีกหนึ่ง Web Application สำหรับงานในสถานศึกษา คือ “ระบบบันทึกทุนการศึกษา” (Scholarship Management System) พัฒนาด้วย Google Apps Script + Google Sheets + HTML + CSS + JavaScript สามารถนำไปประยุกต์ใช้สำหรับงานทุนการศึกษาของโรงเรียนได้ทันที

ระบบออกแบบมาเพื่อช่วยลดการบันทึกข้อมูลแบบกระดาษ และรวบรวมข้อมูลทุนการศึกษาและรายชื่อนักเรียนผู้ได้รับทุนไว้ในระบบเดียว สามารถเพิ่ม แก้ไข ลบ ค้นหา สรุปข้อมูล และจัดพิมพ์รายงานได้

---

✨ ความสามารถของระบบ

ระบบประกอบด้วยฟังก์ชันหลัก เช่น

📊 Dashboard สรุปข้อมูลทุนการศึกษา

🎓 บันทึกข้อมูลทุนการศึกษา

👨‍🎓 บันทึกรายชื่อนักเรียนผู้รับทุน

✏️ แก้ไขข้อมูล

🗑️ ลบข้อมูล

🔍 ค้นหาและกรองข้อมูล

💰 สรุปจำนวนเงินทุน

📅 กรองตามปีการศึกษาและภาคเรียน

🏫 กรองตามระดับชั้น

📋 จัดการรายการตัวเลือกจาก Google Sheets

⚙️ ตั้งค่าระบบผ่านหน้า Settings

🔐 ระบบ Admin สำหรับจัดการข้อมูล

🔑 Password จำไว้ในหน่วยความจำระหว่างใช้งาน

📄 เมนูรายงาน

👁️ แสดงตัวอย่างรายงานบนหน้าจอก่อนพิมพ์

🖨️ พิมพ์รายงาน A4

📊 ปุ่ม Google Sheet แบบ Icon

📖 คู่มือการใช้งานแบบละเอียด

📱 Responsive รองรับคอมพิวเตอร์ แท็บเล็ต และโทรศัพท์มือถือ

---

🖥️ รูปแบบหน้าจอ

ระบบออกแบบด้วย Bootstrap 5 เน้นรูปแบบ Modern Dashboard

ประกอบด้วย

1. Sidebar Menu

ใช้สำหรับเข้าถึงส่วนต่าง ๆ ของโปรแกรม เช่น

Dashboard

ทุนการศึกษา

ผู้รับทุน

รายงาน

จัดการตัวเลือก

ตั้งค่าระบบ

Google Sheet

คู่มือ

บนโทรศัพท์มือถือ Sidebar สามารถเปิด–ปิดได้ ทำให้ใช้งานบนหน้าจอขนาดเล็กได้สะดวก

---

📊 Dashboard

หน้า Dashboard ใช้สำหรับดูภาพรวมของข้อมูล เช่น

จำนวนทุนทั้งหมด    แสดงจำนวนรายการทุนการศึกษาที่มีอยู่ในระบบ

จำนวนนักเรียนที่ได้รับทุน    แสดงจำนวนผู้รับทุนทั้งหมด

งบประมาณทุน    คำนวณยอดเงินทุนจากข้อมูลที่บันทึกไว้

สถานะทุน    สามารถนำข้อมูลมาแสดงเป็น Card หรือกราฟเพื่อช่วยให้ผู้ดูแลระบบเห็นภาพรวมได้ง่ายขึ้น

---

🎓 ระบบจัดการทุนการศึกษา

สามารถบันทึกรายละเอียดของทุน เช่น

ปีการศึกษา

ภาคเรียน

ชื่อทุนการศึกษา

ประเภททุน

หน่วยงาน/ผู้ให้ทุน

จำนวนเงินต่อคน

งบประมาณรวม

วันที่เริ่มต้น

วันที่สิ้นสุด

เงื่อนไข

รายละเอียด

สถานะ

ข้อมูลสามารถ เพิ่ม / แก้ไข / ลบ / ค้นหา ได้ในหน้าเดียว

---

👨‍🎓 ระบบบันทึกผู้รับทุน

สำหรับบันทึกรายชื่อนักเรียนที่ได้รับทุน โดยสามารถเก็บข้อมูล เช่น

1. เลขประจำตัวนักเรียน
2. คำนำหน้า
3. ชื่อ
4. นามสกุล
5. ระดับชั้น
6. ห้อง
7. ทุนการศึกษาที่ได้รับ
8. จำนวนเงิน
9. วันที่อนุมัติ
10. สถานะ
11. หมายเหตุ

ระบบสามารถเชื่อมโยงข้อมูลผู้รับทุนกับข้อมูลทุนการศึกษาได้

---

📄 เมนูรายงาน

จุดเด่นอีกส่วนหนึ่งคือ ระบบรายงานแบบ Preview ก่อนพิมพ์

ผู้ใช้สามารถกำหนดเงื่อนไข เช่น

• ประเภทรายงาน
• ปีการศึกษา
• ภาคเรียน
• ระดับชั้น
• ทุนการศึกษา
• สถานะ
• คำค้นหา

จากนั้นกด 👁️ แสดงรายงาน

ระบบจะยังไม่พิมพ์ทันที แต่จะแสดงรายงานจำลองในรูปแบบกระดาษ A4 บนหน้าจอก่อน

ผู้ใช้สามารถตรวจสอบความถูกต้องก่อนกด 🖨️ พิมพ์รายงาน

ช่วยลดปัญหาพิมพ์ข้อมูลผิดหรือเสียกระดาษโดยไม่จำเป็น

---

📑 รูปแบบรายงาน

ระบบรองรับตัวอย่างรายงาน 2 ประเภท

1. รายงานข้อมูลทุนการศึกษา

ประกอบด้วย

ลำดับ	ปี/ภาคเรียน	ชื่อทุน	ประเภท	ผู้ให้ทุน	ต่อคน	งบประมาณ	สถานะ

ท้ายรายงานมีการคำนวณ จำนวนทุนทั้งหมด และ งบประมาณรวม โดยอัตโนมัติ

---

2. รายงานรายชื่อผู้รับทุน

ประกอบด้วย

ลำดับ	เลขประจำตัว	ชื่อ-นามสกุล	ชั้น/ห้อง	ทุนการศึกษา	จำนวนเงิน	วันที่	สถานะ

ท้ายรายงานสรุป

• จำนวนนักเรียน
• จำนวนผู้ได้รับทุน
• จำนวนเงินรวม

พร้อมพื้นที่ลงชื่อผู้จัดทำและผู้ตรวจสอบ

---

🔐 ระบบ Login สำหรับผู้ดูแล

ส่วนที่เกี่ยวข้องกับการแก้ไขข้อมูลสามารถกำหนดให้ผู้ดูแลระบบ Login ก่อนใช้งาน

ตัวอย่างแนวคิดการตรวจสอบรหัสผ่าน

function adminLogin(password) {

  const settings = getSettingsObject_();

  const correctPassword =
    String(settings.AdminPassword || '1234');

  if (String(password) !== correctPassword) {
    return {
      success: false,
      message: 'รหัสผ่านไม่ถูกต้อง'
    };
  }

  const token = Utilities.getUuid();

  CacheService
    .getScriptCache()
    .put(
      'ADMIN_' + token,
      '1',
      21600
    );

  return {
    success: true,
    token: token
  };
}

แนวทางนี้ช่วยให้ผู้ใช้ไม่จำเป็นต้องกรอกรหัสผ่านใหม่ทุกครั้งที่กดจัดการข้อมูลระหว่าง Session เดียวกัน

---

📊 Google Sheets เป็นฐานข้อมูล

ข้อดีของระบบนี้คือไม่จำเป็นต้องมี Server Database แยกต่างหาก

ใช้ Google Sheets เป็นฐานข้อมูลโดยตรง

ตัวอย่างโครงสร้าง Sheet ที่สามารถใช้ได้ เช่น

Scholarships
Recipients
Options
Settings

ระบบสามารถตรวจสอบ Sheet ตอนเริ่มต้นได้

ตัวอย่าง

function setupSystem() {

  const ss = SpreadsheetApp.getActiveSpreadsheet();

  createSheetIfNotExists_(
    ss,
    'Scholarships',
    [
      'ID',
      'AcademicYear',
      'Term',
      'ScholarshipName',
      'ScholarshipType',
      'Provider',
      'AmountPerStudent',
      'TotalBudget',
      'StartDate',
      'EndDate',
      'Condition',
      'Status',
      'Detail',
      'CreatedAt',
      'UpdatedAt'
    ]
  );

  createSheetIfNotExists_(
    ss,
    'Recipients',
    [
      'ID',
      'ScholarshipID',
      'StudentID',
      'Prefix',
      'FirstName',
      'LastName',
      'Level',
      'Room',
      'Amount',
      'ApprovedDate',
      'Status',
      'Remark',
      'CreatedAt',
      'UpdatedAt'
    ]
  );

  createSheetIfNotExists_(
    ss,
    'Options',
    [
      'Type',
      'Value',
      'SortOrder',
      'Active'
    ]
  );

  createSheetIfNotExists_(
    ss,
    'Settings',
    [
      'Key',
      'Value',
      'Description'
    ]
  );

  return 'Setup completed';
}

---

⚙️ Sheet : Settings

ระบบใช้ Sheet Settings สำหรับกำหนดค่าต่าง ๆ โดยไม่จำเป็นต้องเข้าไปแก้ Source Code

ตัวอย่าง

Key                 Value
------------------------------------------
AppName             ระบบบันทึกทุนการศึกษา
SchoolName          โรงเรียนตัวอย่างวิทยาคม
AdminPassword       1234
LogoURL             URL รูปโลโก้
GoogleSheetURL      URL Google Sheet
Developer           ชื่อผู้พัฒนา
DeveloperURL        URL ผู้พัฒนา

เมื่อต้องการเปลี่ยนชื่อโรงเรียน ชื่อระบบ โลโก้ หรือลิงก์ Google Sheet สามารถแก้จากหน้า Settings ได้

---

🔗 ปุ่มเปิด Google Sheet

ตัวอย่าง HTML

<button
  type="button"
  class="btn btn-success"
  onclick="openGoogleSheet()">

  <i class="bi bi-file-earmark-spreadsheet-fill"></i>

</button>

JavaScript

function openGoogleSheet() {

  const url =
    appState.settings.GoogleSheetURL;

  if (!url) {

    Swal.fire({
      icon: 'warning',
      title: 'ไม่พบ URL',
      text: 'กรุณากำหนด GoogleSheetURL ใน Settings'
    });

    return;
  }

  window.open(
    url,
    '_blank'
  );
}

จึงสามารถเปลี่ยน URL ได้จาก Settings โดยไม่ต้องแก้ JavaScript ทุกครั้ง

---

⏳ Loading Animation

ระบบมี Loading Overlay เพื่อแจ้งผู้ใช้ว่าระบบกำลังประมวลผล

ตัวอย่าง

function showLoading(message) {

  const loading =
    document.getElementById('loadingOverlay');

  const text =
    document.getElementById('loadingText');

  if (text) {
    text.textContent =
      message || 'กำลังประมวลผล...';
  }

  if (loading) {
    loading.classList.add('show');
  }
}

function hideLoading() {

  const loading =
    document.getElementById('loadingOverlay');

  if (loading) {
    loading.classList.remove('show');
  }
}

ในการเรียกข้อมูลใช้รูปแบบ

showLoading('กำลังโหลดข้อมูล...');

try {

  const data =
    await gas(
      'getScholarships',
      [{}]
    );

  appState.scholarships = data;

  renderScholarships();

} catch (error) {

  showError(
    error.message
  );

} finally {

  hideLoading();
}

การใช้ finally มีความสำคัญ เพราะช่วยให้ Loading ถูกปิดแม้การเรียกข้อมูลเกิด Error ลดปัญหา Loading ค้างบนหน้าจอ

---

⚡ การปรับความเร็วของระบบ

ระบบออกแบบให้เรียกข้อมูล เฉพาะส่วนที่จำเป็น

ตัวอย่างเช่น

เมื่อเข้า Dashboard จึงโหลดข้อมูล Dashboard

เมื่อเข้าเมนูรายงาน จึงเตรียมข้อมูลสำหรับรายงาน

เมื่อกดแสดงรายงาน จึงเรียก

google.script.run
  .withSuccessHandler(function(data) {

    renderReportPreview(data);

  })
  .withFailureHandler(function(error) {

    Swal.fire({
      icon: 'error',
      title: 'เกิดข้อผิดพลาด',
      text: error.message
    });

  })
  .getReportData(filters);

ไม่จำเป็นต้องโหลดข้อมูลทั้งหมดใหม่ทุกครั้งที่เปลี่ยนหน้า

---

🖨️ ตัวอย่างโค้ดพิมพ์รายงาน

เมื่อสร้าง Preview แล้ว สามารถนำ HTML ที่แสดงอยู่บนหน้าจอไปสร้างหน้าพิมพ์ใหม่

function printReport() {

  const preview =
    document.getElementById('reportPreview');

  if (!preview) {
    return;
  }

  const printWindow =
    window.open(
      '',
      '_blank',
      'width=1200,height=800'
    );

  printWindow.document.write(`
    <!DOCTYPE html>
    <html lang="th">

    <head>

      <meta charset="UTF-8">

      <title>
        รายงานทุนการศึกษา
      </title>

      <style>

        @page {
          size: A4 portrait;
          margin: 10mm;
        }

        body {
          font-family: 'Sarabun', sans-serif;
          font-size: 11px;
        }

        table {
          width: 100%;
          border-collapse: collapse;
        }

        th,
        td {
          border: 1px solid #444;
          padding: 5px;
        }

        thead {
          display: table-header-group;
        }

        tr {
          page-break-inside: avoid;
        }

      </style>

    </head>

    <body>

      ${preview.innerHTML}

      <script>

        window.onload = function() {

          setTimeout(function() {
            window.print();
          }, 400);

        };

      <\/script>

    </body>

    </html>
  `);

  printWindow.document.close();
}

---

🗂️ โครงสร้างไฟล์โปรแกรม

โปรเจ็กต์แบ่งออกเป็น 4 ไฟล์หลัก

Scholarship Management System
│
├── code.gs
│
├── index.html
│
├── javascript.html
│
└── style.html

code.gs

ทำหน้าที่เป็น Backend เช่น

• ติดต่อ Google Sheets
• CRUD
• ตรวจสอบและสร้าง Sheet
• Login
• Settings
• Options
• Dashboard
• Report

index.html

เป็นโครงสร้างหน้าจอ เช่น

• Sidebar
• Dashboard
• Form
• Table
• Report Preview
• Modal
• Loading

javascript.html

ควรมีแท็ก

<script>

  // JavaScript ของระบบ

</script>

ทำหน้าที่ควบคุม

• การเปลี่ยนหน้า
• Form
• CRUD
• Loading
• SweetAlert2
• Report
• Print
• Settings

style.html

ใช้สำหรับ CSS ของระบบ เช่น

• Dashboard
• Sidebar
• Card
• Responsive
• Loading Animation
• Report A4
• Print Preview

---

🚀 วิธีสร้างโปรแกรม

ขั้นตอนที่ 1

สร้าง Google Sheets ใหม่สำหรับใช้เป็นฐานข้อมูล

จากนั้นเลือก

ส่วนขยาย → Apps Script

---

ขั้นตอนที่ 2

สร้างไฟล์จำนวน 4 ไฟล์

code.gs
index.html
javascript.html
style.html

แล้วนำ Source Code ของแต่ละไฟล์ไปวางให้ตรงกัน

---

ขั้นตอนที่ 3

รันฟังก์ชัน

setupSystem();

ครั้งแรกเพียงครั้งเดียว

Google จะขอสิทธิ์การเข้าถึง Spreadsheet ให้ดำเนินการอนุญาต

หลังจากนั้นระบบจะสร้าง Sheet ที่จำเป็นให้อัตโนมัติ

---

ขั้นตอนที่ 4

Deploy โปรแกรม

เลือก

Deploy → New deployment

จากนั้นเลือก

Type:
Web app

Execute as:
Me

Who has access:
Anyone

กด Deploy

จากนั้นนำ URL Web App ไปเปิดใช้งาน

---

📱 รองรับการใช้งานบนมือถือ

หน้าเว็บใช้ Responsive Layout ทำให้สามารถใช้งานผ่าน

• Desktop
• Notebook
• Tablet
• Smartphone

ได้จาก URL เดียวกัน

เหมาะกับระบบโรงเรียนที่ครูหรือเจ้าหน้าที่อาจต้องบันทึกข้อมูลผ่านโทรศัพท์มือถือ

---

📚 จุดเด่นของการใช้ Google Apps Script

การพัฒนาระบบในลักษณะนี้เหมาะกับสถานศึกษา เพราะสามารถใช้บริการใน Google Workspace ที่มีอยู่แล้วมาประยุกต์ได้

• ไม่ต้องติดตั้ง Web Server เพิ่ม
• ไม่ต้องสร้าง MySQL Server
• และสามารถใช้
• Google Sheets เป็นฐานข้อมูล
• พร้อมพัฒนา Web Application ด้วย
• Google Apps Script

ทำให้สามารถสร้างระบบงานขนาดเล็กถึงขนาดกลางสำหรับโรงเรียนได้ค่อนข้างรวดเร็ว

---

💡 สามารถพัฒนาต่อยอดอะไรได้อีก?

ระบบบันทึกทุนการศึกษาสามารถเพิ่มความสามารถต่อไปได้อีก เช่น

• 📷 รูปนักเรียน
• 📎 แนบเอกสารประกอบการขอทุน
• ☁️ อัปโหลดไฟล์เข้า Google Drive
• ✍️ ลายเซ็นรับเงินทุน
• 📄 สร้าง PDF อัตโนมัติ
• 📊 กราฟสรุปทุนแยกตามปี
• 🏫 สรุปทุนแยกระดับชั้น
• 👨‍🎓 ประวัติการได้รับทุนรายบุคคล
• 🔔 ระบบแจ้งเตือน
• 📱 LINE Chatbot
• 📧 Email Notification
• 🔐 แยกสิทธิ์ ครู / เจ้าหน้าที่ / ผู้บริหาร / Admin
• 📑 Export Excel / PDF
• 🔎 ค้นหานักเรียนจากฐานข้อมูลนักเรียนของโรงเรียน

---

❤️ สรุป

Scholarship Management System – ระบบบันทึกทุนการศึกษา

เป็นอีกหนึ่งตัวอย่างของการนำ Google Apps Script มาประยุกต์ใช้กับงานบริหารจัดการภายในสถานศึกษา โดยรวบรวมตั้งแต่การบันทึกทุน บันทึกผู้รับทุน ตรวจสอบข้อมูล สรุปยอด ไปจนถึงการจัดทำรายงานและพิมพ์เอกสาร

แนวคิดสำคัญคือ

“บันทึกครั้งเดียว ค้นหาได้ สรุปได้ และพิมพ์รายงานได้จากระบบเดียว”

เหมาะสำหรับนำไปศึกษา พัฒนาต่อ และปรับให้ตรงกับรูปแบบการบริหารทุนการศึกษาของแต่ละโรงเรียน

---

💻 เทคโนโลยีที่ใช้

Google Apps Script
Google Sheets
HTML5
CSS3
JavaScript
Bootstrap 5
SweetAlert2
Bootstrap Icons

---

📌 หมายเหตุ

Source Code ตัวเต็มของระบบประกอบด้วย

1. code.gs — Backend / Google Sheets / CRUD / Settings / Report
2. index.html — หน้า Web Application
3. javascript.html — JavaScript ฝั่ง Client
4. style.html — CSS / Responsive / Dashboard / Print

สามารถนำโครงสร้างไปปรับใช้กับระบบงานอื่นในโรงเรียนได้ เช่น ระบบทุนปัจจัยพื้นฐาน ระบบช่วยเหลือนักเรียน ระบบสวัสดิการ หรือระบบติดตามการรับเงินสนับสนุน

#GoogleAppsScript #GoogleSheets #WebApp #ระบบทุนการศึกษา #ScholarshipManagementSystem #ระบบโรงเรียน #ครูยุคดิจิทัล #CodingForTeacher #ระบบสารสนเทศโรงเรียน #Bootstrap5 #JavaScript