หัวใจของแทบทุกระบบคือ CRUD — เพิ่ม อ่าน แก้ไข ลบ ข้อมูล บทความนี้จะสอนทำ CRUD ครบวงจรด้วย Google Apps Script โดยใช้ Google Sheet เป็นฐานข้อมูล พร้อมแสดงข้อมูลเป็นตารางบนหน้าเว็บ เหมาะสำหรับผู้เริ่มต้น ═══════════════════════════════════════ 📌 1. CRUD คืออะไร (ทบทวน) ═══════════════════════════════════════ CRUD = การจัดการข้อมูล 4 อย่างพื้นฐาน • C = Create → เพิ่มข้อมูล • R = Read → อ่าน/แสดงข้อมูล • U = Update → แก้ไขข้อมูล • D = Delete → ลบข้อมูล ถ้าทำ CRUD เป็น จะสร้างระบบได้แทบทุกชนิด (ลงทะเบียน, แจ้งซ่อม, สินค้า ฯลฯ) ═══════════════════════════════════════ 📊 2. เตรียม Google Sheet ═══════════════════════════════════════ สร้าง Sheet ใหม่ ตั้งชื่อชีตว่า "data" และใส่หัวคอลัมน์ที่แถวแรก: A1 = id B1 = name C1 = email โครงสร้างนี้: คอลัมน์ id ใช้ระบุแต่ละแถวไม่ให้ซ้ำ (สำคัญมากสำหรับ Update/Delete) ═══════════════════════════════════════ ➕ 3. CREATE — เพิ่มข้อมูล ═══════════════════════════════════════ ```javascript function createRow(name, email) { var sheet = SpreadsheetApp.openById("SHEET_ID").getSheetByName("data"); // สร้าง id ใหม่จากเวลาปัจจุบัน (ไม่ซ้ำ) var id = new Date().getTime(); sheet.appendRow([id, name, email]); return id; } ``` ═══════════════════════════════════════ 🔍 4. READ — อ่านข้อมูลทั้งหมด ═══════════════════════════════════════ ```javascript function readAll() { var sheet = SpreadsheetApp.openById("SHEET_ID").getSheetByName("data"); var values = sheet.getDataRange().getValues(); // แปลงเป็น array ของ object (ข้ามแถวหัวตาราง) var result = []; for (var i = 1; i < values.length; i++) { result.push({ id: values[i][0], name: values[i][1], email: values[i][2] }); } return result; } ``` ═══════════════════════════════════════ ✏️ 5. UPDATE — แก้ไขข้อมูล (ค้นหาแถวด้วย id) ═══════════════════════════════════════ ```javascript function updateRow(id, newName, newEmail) { var sheet = SpreadsheetApp.openById("SHEET_ID").getSheetByName("data"); var values = sheet.getDataRange().getValues(); for (var i = 1; i < values.length; i++) { if (values[i][0] == id) { // เจอแถวที่ id ตรงกัน // แถวจริงใน Sheet = i + 1 (เพราะเริ่มนับ 1 และมีหัวตาราง) sheet.getRange(i + 1, 2).setValue(newName); // คอลัมน์ B sheet.getRange(i + 1, 3).setValue(newEmail); // คอลัมน์ C return true; } } return false; // ไม่พบ id } ``` ═══════════════════════════════════════ 🗑️ 6. DELETE — ลบข้อมูล ═══════════════════════════════════════ ```javascript function deleteRow(id) { var sheet = SpreadsheetApp.openById("SHEET_ID").getSheetByName("data"); var values = sheet.getDataRange().getValues(); for (var i = 1; i < values.length; i++) { if (values[i][0] == id) { sheet.deleteRow(i + 1); // ลบแถวจริงใน Sheet return true; } } return false; } ``` ═══════════════════════════════════════ 🌐 7. แสดงข้อมูลเป็นตารางบนหน้าเว็บ ═══════════════════════════════════════ ฝั่งเซิร์ฟเวอร์ (Code.gs) มี doGet และ readAll อยู่แล้ว ฝั่งหน้าเว็บเรียก readAll() ผ่าน google.script.run แล้ววาดตาราง ```html <body> <h2>รายชื่อ</h2> <table id="myTable" border="1"></table> <script> // เมื่อโหลดหน้า ให้ดึงข้อมูลมาแสดง window.onload = function() { google.script.run.withSuccessHandler(showTable).readAll(); }; function showTable(rows) { var html = "<tr><th>ชื่อ</th><th>อีเมล</th></tr>"; rows.forEach(function(r) { html += "<tr><td>" + r.name + "</td><td>" + r.email + "</td></tr>"; }); document.getElementById("myTable").innerHTML = html; } </script> </body> ``` *** withSuccessHandler(ฟังก์ชัน) = สั่งให้ทำงานเมื่อได้ข้อมูลกลับมาจากเซิร์ฟเวอร์ *** ═══════════════════════════════════════ 🔗 8. รวมทุกอย่าง (Code.gs) ═══════════════════════════════════════ ```javascript function doGet() { return HtmlService.createHtmlOutputFromFile('index'); } // วาง 4 ฟังก์ชัน CRUD (createRow, readAll, updateRow, deleteRow) ไว้ในไฟล์นี้ // หน้าเว็บเรียกผ่าน google.script.run.<ชื่อฟังก์ชัน>(...) ``` ═══════════════════════════════════════ ✅ 9. สรุป ═══════════════════════════════════════ • ใช้คอลัมน์ id ระบุแต่ละแถว (จำเป็นสำหรับ Update/Delete) • Create = appendRow, Read = getValues, Update = setValue, Delete = deleteRow • แถวจริงใน Sheet = index ใน array + 1 (เพราะมีหัวตาราง) • หน้าเว็บคุยกับเซิร์ฟเวอร์ผ่าน google.script.run + withSuccessHandler จำไว้: ทำ CRUD ให้ได้ 1 ระบบ แล้วคุณจะประยุกต์สร้างระบบอื่นได้ทั้งหมด 🗂️