Last active
April 9, 2023 04:26
-
-
Save neno-tech/aef6201aac7a14b0da808b464b48d638 to your computer and use it in GitHub Desktop.
Google Form + Web App ค้นหารูป
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function doGet() { | |
| return HtmlService.createTemplateFromFile('index').evaluate() | |
| } | |
| function processForm(formObject){ | |
| var result = ""; | |
| if(formObject.searchtext){ | |
| result = search(formObject.searchtext); | |
| } | |
| return result; | |
| } | |
| function search(searchtext){ | |
| var spreadsheetId = 'xxx'; | |
| var dataRange = 'การตอบแบบฟอร์ม 1!A2:D'; | |
| var data = Sheets.Spreadsheets.Values.get(spreadsheetId, dataRange).values; | |
| var ar = []; | |
| data.forEach(function(f) { | |
| if (~f.indexOf(searchtext)) { | |
| ar.push(f); | |
| } | |
| }); | |
| return ar; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| แก้ไขไฟล์ โค้ด.gs | |
| ar = ar.map(row => { | |
| let img = DriveApp.getFileById(row[3]) | |
| if(!img) return row | |
| let bytes =Utilities.base64Encode(img.getBlob().getBytes()) | |
| let type = img.getMimeType() | |
| row[3] = [type,bytes] | |
| return row | |
| }) | |
| แก้ไขไฟล์ index.html | |
| result += "<td><img src ='data:"+dataArray[0][3][0]+";base64,"+dataArray[0][3][1]+" 'style ='width:200px; height:200px;'></td>"; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ={"id";ARRAYFORMULA(QUERY(SPLIT(C2:C,"="),"SELECT Col2"))} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <base target="_top"> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Mitr"> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> | |
| <!-- Font Awesome CSS --> | |
| <script src="https://kit.fontawesome.com/6a972cf3a7.js" crossorigin="anonymous"></script> | |
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> | |
| <style> | |
| body { | |
| font-family: "Mitr" | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <br> | |
| <div class="row"> | |
| <div class="col "> | |
| <div class="row"> | |
| <div class="col-md-4 mx-auto"> | |
| <div class="card text-center"> | |
| <div class="card-header"> | |
| ระบบค้นหาข้อมูล | |
| </div> | |
| <div class="card-body"> | |
| <!-- ## ฟอร์มค้นหา------------------------------------------------ --> | |
| <form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)"> | |
| <div class="form-group mb-2"> | |
| <label for="searchtext">กรุณากรอกข้อมูลที่ต้องการค้นหา</label> | |
| </div> | |
| <div class="form-group mx-sm-3 mb-2"> | |
| <input type="text" class="form-control" id="searchtext" name="searchtext" placeholder="พิมพ์ที่นี่"> | |
| </div> | |
| <button type="submit" class="btn btn-primary mb-2">ค้นหา</button> | |
| </form> | |
| <!-- ## ปิดฟอร์ม ------------------------------------------- --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col"> | |
| <!-- ## สร้างตาราง ------------------------------------------------ --> | |
| <div id="search-results" class="table-responsive"> | |
| <!-- แสดงข้อมูลที่นี่ --> | |
| </div> | |
| <!-- ## จบตาราง ------------------------------------------------ --> | |
| </div> | |
| </div> | |
| </div> | |
| <!--##JAVASCRIPT ---------------------------------------------------- --> | |
| <script> | |
| window.addEventListener("load", preventFormSubmit, true); | |
| function preventFormSubmit() { | |
| var forms = document.querySelectorAll('form'); | |
| for (var i = 0; i < forms.length; i++) { | |
| forms[i].addEventListener('submit', function(event) { | |
| event.preventDefault(); | |
| }); | |
| } | |
| } | |
| //ทำการส่งค่าจากฟอร์ม | |
| function handleFormSubmit(formObject) { | |
| google.script.run.withSuccessHandler(createTable).processForm(formObject); | |
| document.getElementById("search-form").reset(); | |
| } | |
| //สร้างตารางและข้อมูลในตาราง | |
| function createTable(dataArray) { | |
| if(dataArray && dataArray !== undefined && dataArray.length != 0){ | |
| var result = "<table class='table table-sm table-striped table-hover' id='dtable'>"+ | |
| "<thead style='white-space: nowrap'>"+ | |
| "<tr>"+ | |
| "<th scope='col'>ชื่อ สกุล</th>"+ | |
| "<th scope='col'>รูปภาพ</th>"+ | |
| "</tr>"+ | |
| "</thead>"; | |
| for(var i=0; i<dataArray.length; i++) { | |
| result += "<tr>"; | |
| result += "<td>"+dataArray[0][1]+"</td>"; | |
| result += "<td><img src ='http://drive.google.com/uc?id="+dataArray[0][3]+"'style ='width:200px; height:200px;'></td>"; | |
| result += "</tr>"; | |
| } | |
| result += "</table>"; | |
| var div = document.getElementById('search-results'); | |
| div.innerHTML = result; | |
| }else{ | |
| var div = document.getElementById('search-results'); | |
| //div.empty() | |
| div.innerHTML = "ไมพบข้อมูลที่ค้นหา!"; | |
| } | |
| } | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
thank you