เดิมแอดมินเองก็เคยศึกษาการเขียน Code ในการบันทึกข้อมูล เข้าสู่ตารางข้อมูลในรูปแบบของ ASP และ HTML โดยอาศัย Script การทำงาน ต้นแบบจากเว็บไซต์ต่างๆ เป็นแนวทางและ ปรับปรุงใช้งาน ตามต้องการ
สำหรับยุค 2020 ตอนนี้ ตอนที่ระบบฐานข้อมูลแบบเปิด Cloud มีบทบาทและความสำคัญมากขึ้น และผู้ใช้งานอินเตอร์เน็ต ก็เข้าถึงได้มากขึ้น รวดเร็วขึ้น สะดวกขึ้น ข้อมูลภาพ ข้อความ วีดีโอ สามารถเข้าถึงประมวลผลได้รวดเร็ว บนอุปกรณ์พกพา โทรศัพท์มือถือ แท็บเล็บ โน้ตบุ้ค เป็นต้น
สำหรับความรู้ที่อยากนำมาแชร์ ในวันนี้ คือ การ ใช้พื้นที่ cloud ส่วนตัวของทุกคน Google Drive ในการสร้างตารางสำหรับจัดเก็บข้อมูล จาก User หรือผู้ใช้งาน ผ่านการเขียน Code หรือ Script ง่ายๆ สำหรับ นักเรียน นักศึกษา หรือผู้ใช้งานคอมพิวเตอร์ทั่วไป ที่สนใจเริ่มต้นการเขียน Code เพื่อจัดการข้อมูล โดยไม่มีค่าใช้จ่าย
ขั้นแรกไปที่ Google drive : GD สร้าง scipt ขึ้นมาตั้งชื่อว่า MY FOM
เพื่อใช้ลิงค์ไปที่ตาราง Google sheet และรับข้อมูลจากหน้าแบบฟอร์ม HTML
เริ่มต้นด้วย
Function doget() {
การส่งกลับค่า เป็นตัวเลข หรืออักษร
retun HtmlSevice.createHtmlOutputFromFile("ชื่อไฟล์")
โดยไปสร้างไฟล์ที่เมนู File ตั้งชื่อไฟล์เป็น Form HTML
แล้วเขียน code เพื่อแสดงข้อมูลพื้นฐาน
แสดงส่วนหัว
<h1>Heading</h1>
เพิ่มส่วน input
<label>Name:</label><input type="text" id="username">
<button id="btn">ส่งข้อมูล</button>
บันทึกแล้วลองทดสอบ Script
จะแสดงข้อมูล Heading
เพิ่มการติดต่อกับผู้ใช้งาน โดยพื้นฐานคือการส่งผ่านค่าข้อมูล passing parameter
เพิ่มปุ่มกด
และระบุรหัส ID ให้ปุ่มกด เพื่อโยงกับภาษา JAVA SCIPT อีกที เริ่มด้วย
เมื่อมีคนกดปุ่ม จะให้ script ทำงานอะไร
<script>
document.getElementById("btn").addEventListener("click",doStuff);
function doStuff(){
var uname=document.getElementById("username").value; ค่าที่ผู้ใช้งานป้อนชื่อเข้ามา
google.script.run.userClicked(uname);
document.getElementById("username").value="";
}
</script>
กลับไปเขียนโค้ดรองรับการทำงานของ script นี้ ในส่วนของ code ใน MY FORM
Function doget(e) {
Logger.log(e.parameter);
retun HtmlSevice.createHtmlOutputFromFile("Form HTML")
}
function userClicked(name){
คัดลอก url ของตาราง google sheet มาใส่
var url ="ใส่ค่า url ไฟล์ตาราง google sheet ของเรา";
var ss = SpreadsheetApp.openByUrl(url);
var ws =ss.getSheetByName("ชื่อชีทไฟล์ของเรา");
ws.appenRow([name]);
ws.appenRow([name,new Date]);
Logger.log(name+"Someone Clicked the Button");
}
กลับไปเพิ่ม script ที่หน้าฟอร์ม HTML
ทดสอบรัน script จะพบว่า ดูใน Log ไฟล์ จะมีข้อมูลเก็บ Log ไว้
เราจะใช้พื้นฐานการเก็บค่า Log ในการเพิ่มช่องนำเข้าข้อมูล input ในส่วนของฟอร์มผู้ใช้งาน
ขั้นตอนสุดท้าย คือการส่งค่าที่ได้รับจากการเปิดดูใน Log ไฟล์ ไปบันทึกลงในตาราง Google sheet
VIDEO
