1. กรอกข้อมูลแบบฟอร์มลงในชีต ประกอบด้วย type, question, required, option
2. มี input type ให้ใช้ text, radio, checkbox, select, date, password, email, file
3. มี option(ตัวเลือก) ให้เพิ่มได้ถึง 15 ข้อ (หรือมากกว่า โดยแก้ตัวเลขในโค้ด)
4. สร้างหัวตารางของชีตบันทึกข้อมูลให้เองเมื่อกรอกฟอร์มครั้งแรก
5. อัพโหลดไฟล์ขึ้น Google Drive และบันทึก Link URL ลงชีต
6. บันทึกข้อมูลแบบอ้างอิงหัวตาราง
การสร้าง
1. สร้างชีตชื่อ questionnaire และเพิ่มหัวตารางดังนี้
A B C D E F ... S
| ID(Auto) | type | question | required | option0 | option1 | ... | option14 |
2. ที่ช่อง A1 เพิ่มสูตร ={"ID(Auto)";IFERROR( SEQUENCE(COUNTA(B2:B)))}
3. สร้างชีตชื่อ data
4. เปิด Apps Script
5. วางโค้ดนี้ลงใน ไฟล์ code.gs
const folderID = "xxxxxxx" // Change to your folder ID. ++++++++++
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
/** include file */
function include(file) {
return HtmlService.createHtmlOutputFromFile(file).getContent()
}
/** get URL */
function getURL() {
return url = ScriptApp.getService().getUrl();
}
/** Get data for generating a form */
function getData() {
return data = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('questionnaire').getDataRange().getDisplayValues().slice(1)
}
/** Record data on sheets **/
function saveData(obj){
const ssh = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('data')
const header = ssh.getDataRange().getDisplayValues().shift()
const headers = ['date',]
//Logger.log(header)
/** Upload file to Google Drive **/
const Folder = DriveApp.getFolderById(folderID)
let fileUrls = {}
Object.keys(obj).forEach(function (key) {
headers.push(key)
//Logger.log(headers)
if (key.startsWith('fileQ')) {
if (obj[key].length > 0){
const fileUrl = Folder.createFile(obj[key]).getUrl()
fileUrls[key] = fileUrl
}
}
})
/** Sort the table header data **/
headers.sort((a, b) => {
const extractNumbers = (str) => {
const match = str.match(/(\d+)(?:-(\d+))?$/);
return match ? [parseInt(match[1]), match[2] ? parseInt(match[2]) : 0] : [0, 0];
};
let [numA, subNumA] = extractNumbers(a);
let [numB, subNumB] = extractNumbers(b);
if (numA === numB) {
return subNumA - subNumB;
}
return numA - numB;
});
/** Fill in the data reference rows with headers */
const data = header.filter(val =>(val[0])).map(key => {
if(key === "date"){
return new Date()
}
if(!key.startsWith('fileQ')){
return obj[key]
}
if(key.startsWith('fileQ')){
return fileUrls[key]
}
})
const datarow = [...data]
//Does the table have a header?
if(header.length > 1){
ssh.appendRow(datarow)
}else{
ssh.getRange(1,1,1,headers.length).setValues([headers])
}
return 'Record completed';
}
6. สร้างโฟลเดอร์สำหรับเก็บไฟล์อัพโหลด และแชร์ให้ทุกคนอ่านได้
7. คัดลอก ID ของโฟลเดอร์ไปใส่แทน xxxxxxx ในเครื่องหมาย "" ของไฟล์ code.gs
8. สร้างไฟล์ index.html และวางโค้ดนี้ลงไป
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=K2D:wght@300;400&display=swap');
* {
font-family: 'K2D', sans-serif;
font-size: 1rem;
}
</style>
</head>
<body>
<div class="container">
<div class="p-4">
<form id="listQuiz" onsubmit="saveForm(this)" class="row g-3">
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.6.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" ></script>
<?!=include('script')?>
</body>
</html>
9. สร้างไฟล์ script.html และวางโค้ดนี้ลงไป
<script>
window.addEventListener("load", function() {
//Get data from sheets
google.script.run.withSuccessHandler(createForm).getData()
});
//Generate a form
function createForm(items){
if(items){
let html = "";
items.forEach(col => {
html +=`<div class="mb-3 col-md-6">
<label for="Q${col[0]}" class="form-label">${col[0]}. ${col[2]}</label>` // แสดงคำถาม
if(col[1] === "text" || col[1] === "date" || col[1] === "email" || col[1] === "password"){
html += `<input type="${col[1]}" class="form-control" id="Q${col[0]}" name="Q${col[0]}" ${col[3]}>`
}
if(col[1] === "file"){
html += `<input type="${col[1]}" class="form-control" id="fileQ${col[0]}" name="fileQ${col[0]}" ${col[3]}>`
}
if(col[1] === "radio"){
for(i = 0; i < 15; i++ ){
i === 0 ? col[4+i] ?
html +=`<div class="form-check">
<input type="radio" class="form-check-input" id="Q${col[0]}-${i}" name ="Q${col[0]}" value="${col[4+i]}" ${col[3]} checked>
<label class="form-check-label" for="Q${col[0]}-${i}"> ${col[4+i]} </label>
</div>` :
html +=""
: col[4+i] ?
html +=`<div class="form-check">
<input type="radio" class="form-check-input" id="Q${col[0]}-${i}" name ="Q${col[0]}" value="${col[4+i]}" >
<label class="form-check-label" for="Q${col[0]}-${i}"> ${col[4+i]} </label>
</div>` :
html +=""
}
}
if(col[1] === "checkbox"){
for(i = 0; i < 15; i++ ){
col[4+i] ?
html +=`<div class="form-check">
<input type="checkbox" class="form-check-input" id="Q${col[0]}-${i}" name ="Q${col[0]}-${i}" value="${col[4+i]}" >
<label class="form-check-label" for="Q${col[0]}-${i}"> ${col[4+i]} </label>
</div>` :
html +="";
}
}
if(col[1] === "select"){
html +=`<select id="Q${col[0]}" name="Q${col[0]}" class="form-select">
<option selected value="">Choose...</option>`
for(i = 0; i < 15; i++ ){
col[4+i] ?
html +=`<option value="${col[4+i]}">${col[4+i]}</option>` :
html +="";
}
html +=`</select>`
}
html +=`</div>`
})
html +='<div class="text-center"><button type="submit" class="btn btn-primary">บันทึกข้อมูล</button></div>';
$("#listQuiz").html(html)
}
}
//Save data
function saveForm(obj){
event.preventDefault()
google.script.run.withSuccessHandler((res)=>{
Swal.fire({
title: res,
text: "",
icon: "success"
});
$('#listQuiz').trigger("reset")
}).saveData(obj)
}
</script>
10. กดที่ปุ่ม "Deploy" > "Test deployments" > "Select type: Web app"
11. ทดสอบการทำงานของเว็บแอพ
12. ชีต questionnaire เพิ่มข้อมูลตามตัวอย่าง ช่อง A จะแสดงอัตโนมัติ เมื่อกรอกข้อมูลในช่อง B
13. เปิดหน้าทดสอบเว็บแอพ และกรอกข้อมูลให้ครบทุกช่อง ถ้าเป็น Checkbox ให้เลือกทุกตัวเลือก
14. เมื่อทำครบแล้วให้คลิกส่งข้อมูล ระบบจะสร้างหัวตารางในชีต data ให้โดยอัตโนมัติ (ถ้ามีการเพิ่มช่องข้อมูล ให้ลบแถวแรกของชีตดาต้าทิ้ง แล้วทำข้อ 12 ใหม่)
15. ตรวจสอบข้อมูลหัวตารางในชีต data ว่าถูกต้องครบถ้วนหรือไม่
16. ถ้าท่านทำตามทุกขั้นตอนจะไม่มีข้อผิดพลาดอะไร
17. หากมีคำถามท่านสามารถฝากข้อความไว้ช่องความคิดเห็นได้
ขอให้โปรเจ็กต์ของคุณประสบความสำเร็จและเป็นที่ชื่นชอบของผู้ใช้!
หากท่านชอบบทความนี้ ท่านสามารถสนับสนุนผมได้จากลิงก์นี้
>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT. I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
THANKS FOR VISITING thumariya.blogspot
Have a nice day!
-------------------------- -------------------------
>>>ลองตรวจสอบหากพบข้อผิดพลาด โปรดแจ้งให้เราทราบโดยแสดงความคิดเห็น ฉันจะพยายามระดับของฉันให้ดีที่สุดเพื่อแก้ไขปัญหา
ขอบคุณสำหรับการเยี่ยมชม thumariya.blogspot
ขอให้เป็นวันที่ดี!
-------------------------- -------------------------
{fullWidth}
