Title1
Title2
Title3
Login
Link
Search
教學頻道
中信金融管理學院
點二下資訊社
新化社區大學
GAS+購物車開發
GAS專案
GAS+購物車開發
Google表單實戰電商購物車
GAS+LineBot開發
外帶內用管理
購物車管理
線上打卡系統管理
萬用表單5
LineBot 線上書籍
PHP專案
網站程式設計-PHP(10502)
網站程式設計-PHP
PHP SMARTY 樣板引擎
SMARTY樣板
課程教材
雲端工具入門
行動應用企劃人員養成班
萬用表單5
GAS+LineBot開發
研習
萬用表單5
鐵人賽-Google Apps Script整合運用
GAS+LineBot開發
樂齡3C學習不斷電
臺東專科學校
GAS 開發 LineBot 自動接單系統
德鍵
112行動應用企劃人員養成班
111網頁前端設計工程師培訓班
110網頁前端設計工程師培訓班
網頁前端設計工程師培訓班
old
網頁前端設計與開發運用培訓班
Javascript & JQUERY
免費釋出專案
萬用表單
自動資料查詢
台南社大
113-01-雲端工具入門
112-02-AI自動管理
112-01-用QRCODE打造自動化環境
110-01-用雲端打造自動化環境
用雲端打造自動化環境
Google雲端智慧王
讓雲端工具提昇工作效率
Google 速學工作術
台南市總圖
教你如何使用LINE Bot機器人增加工作效率
Google雲端工具基礎應用
Google雲端工具進階應用
工作自動化與行銷(台南社大)
全部教材
台南市人力發展中心
Google工具應用實務班
企業課程
鐳達實業有限公司
GAS研習-20200726
中正大學-GAS研習
將軍圖書館
Google雲端工具基礎應用
Google雲端工具進階應用
南方創客
GitHub 衍伸應用
Google 應用工作術
永康社大
用雲端打造自動化環境(110-春季班)
用雲端打造自動化環境
南關社大
電腦、手機生活應用
遠端桌面
公司業務
傳送檔案
adwcleaner
W10 更新
客戶網站
最近完工
深雋設計有限公司
新化社大校務系統
靚品科技有限公司
5C Precision Co., Ltd.
BALANCE 1
RWD網站
東北關廟麵
曼馱有限公司
永宸昕有限公司
昌美實業社
形象網站
勇信機械有限公司
GAS專案
聯絡我們&案件委託
所有書籍
「實戰雲端自動化(GAS研習)」目錄
MarkDown
2-7 查詢畫面
1. Google Apps Script 介紹
1-1 Google試算表
1-2 基本操作
1-3 陣列
1-4 物件
1-5 用協作平台架設網站
2. 實做成績查詢
2-1 程式碼.gs
2-2 utilities.gs
2-3 program.gs
2-4 index.html
2-5 佈署為網路應用程式
2-6 在樣板渲染程式端送來之變數
2-7 查詢畫面
2-8 密碼查詢
3. 實做點餐管理
4. GAS函式
4-1 設定指令碼屬性
4-2 utilities.gs
5. javascript 函數
5-1 搜尋資料
5-2 重組陣列
6. 工具
6-1 bootstrap4 框架
6-2 PHP的編輯軟體 VSCODE
6-3 點餐管理_表單.html
6-4 line通知.js
6-5 QRCDOE API
7. index.html
7-1 program.gs
7-2 123
8. QRCDOE GAS 專案開發
3. 實做點餐管理
實戰雲端自動化(GAS研習) ============== 一、路由 doGet(e) ``` <pre class="brush:as3;"> Route.path("form", form); ``` 二、程式 program.gs ``` <pre class="brush:as3;"> function form(e) { var formData = {}; formData.webTitle = SCRIPT_PROP.getProperty("webTitle");//網站標題 formData.link = ScriptApp.getService().getUrl() ; formData.adminEmail = SCRIPT_PROP.getProperty("adminEmail");//管理員email formData.userEmail = Session.getActiveUser().getEmail();//訪客email，只能抓到擁有者 return render("form",{formData:formData}); } ``` 三、樣板 form.html ``` <pre class="brush:as3;"> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <title><? formData.webTitle ?></title> </head> <body> <div class="container mt-3"> <div id="search" class="d-none"> <span>資料搜尋中....<img src="https://i.imgur.com/pm9SKUg.gif"></span> </div> <div id="main"> <h1 class="text-center mb-3"><?= formData.webTitle; ?></h1> <form action="" id="myForm" class=""> <div class="row"> <div class="col-sm-12"> <div class="form-group"> <label>密碼<span class="text-danger">*</span></label> <input type="password" class="form-control" name="pass" id="pass" value=""> </div> </div> <!--送出--> <div class="col-sm-12"> <button id="submit" type="submit" class="btn btn-primary btn-block">送出</button> </div> </div> </form> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <style> .error{ color:red; } </style> <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script> <!-- 調用函式 --> <script> $(function(){ $("#myForm").validate({ submitHandler: function(form) { insertDate(); }, rules: { 'pass': { required: true } }, messages: { 'pass': { required: '必填'} } }); }); function insertDate(){ var formData = {}; formData.pass = document.getElementById("pass").value; //樣板執行 函式 apps script function google.script.run.withSuccessHandler(onSuccess).formDataInsert(formData); document.getElementById('search').setAttribute("class", ""); document.getElementById('main').setAttribute("class", "d-none"); } function onSuccess(html) { var div = document.getElementById('search'); div.innerHTML = html; } </script> </body> </html> ``` 四、程式 program.gs ``` <pre class="brush:as3;"> /*============================================== 從form.html 樣板而來 回傳html 至 樣板 ==============================================*/ function formDataInsert(formData){ //取得檔案 var ss = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("id")); var ws = ss.getSheetByName("成績表"); var mainTitle = ws.getRange(1, 1, 1, ws.getLastColumn()).getValues()[0];//取得成績表中文欄名 //判斷密碼是否正確 if(formData.pass != SCRIPT_PROP.getProperty("pass")){ var mains = []; // }else{ var mains = ws.getSheetValues(2,1,ws.getLastRow()-1,ws.getLastColumn()); // } formData.webTitle = SCRIPT_PROP.getProperty("webTitle");//網站標題 formData.link = ScriptApp.getService().getUrl() ; //顯示查詢結果 var all_search = HtmlService.createTemplateFromFile("all_search"); all_search.mainTitle = mainTitle; all_search.mains = mains; all_search.formData = formData; var html = all_search.evaluate().getContent();//組合樣板與變數 return html; } ``` 五、樣板 all\_search.html ``` <pre class="brush:as3;"> <? if(mains.length == 0){ ?> <div class="row"> <div class="col-sm-12"> <h4 class="mt-3 mb-3 text-center">密碼不符</h4> <a href="<?= formData.link + "?op=form" ?>" target="_blank" class="btn btn-primary btn-block">繼續查詢</a> </div> </div> <? }else {?> <div class="row mb-5"> <div class="col-sm-12"> <h4 class="mt-3 mb-3 text-center"><?= formData.webTitle; ?></h4> </div> <div class="col-sm-12"> <div id="" class="table-responsive mt-3"> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <? for(i in mainTitle){ ?> <?if(mainTitle[i] != "認證碼"){ ?> <th class="text-center"><?= mainTitle[i] ?></th> <? } ?> <? } ?> </tr> </thead> <tbody id=""> <? for(i in mains){ ?> <tr> <? for(j in mainTitle){ ?> <?if(mainTitle[j] != "認證碼"){ ?> <td class="text-center"><?= mains[i][j] ?></td> <? } ?> <? } ?> </tr> <? } ?> </tbody> </table> </div> <a href="<?= formData.link + "?op=form" ?>" target="_blank" class="btn btn-primary btn-block">繼續查詢</a> </div> </div> <? } ?> ``` </body></html>
2-7 查詢畫面