คุณสมบัติของโปรเจ็ก
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. หากมีคำถามท่านสามารถฝากข้อความไว้ช่องความคิดเห็นได้
ขอให้โปรเจ็กต์ของคุณประสบความสำเร็จและเป็นที่ชื่นชอบของผู้ใช้!
หากท่านชอบบทความนี้ ท่านสามารถสนับสนุนผมได้จากลิงก์นี้
If you're interested in a project, click the Send Message button in the lower right corner.
OK นะครับ
ตอบลบ