2-7 查詢畫面

一、畫面

1. 主要畫面：程式剛開始，出現查詢表單，學號、認證碼
2. 查詢結果畫面：將結果呈現
3. 上面畫面只會同時出現一個

二、查詢form

      <div id="main">        
        <h1 class="text-center mb-3"><?= formData.webTitle;  ?></h1>
        
        <form action="" id="myForm" class="">
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label>學號<span class="text-danger">*</span></label>
                  <input type="text" class="form-control" name="v1" id="v1" value="">
                </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label>認證碼<span class="text-danger">*</span></label>
                  <input type="text" class="form-control" name="v2" id="v2" value="">
                </div>
            </div>
            
            <!--送出-->              
            <div class="col-sm-12">
              <button id="submit" type="submit" class="btn btn-primary btn-block">送出</button>
            </div>   
          </div>
        </form>  
      </div>

表單驗證

  
    <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: {
            'v1': { required: true },
            'v2': { required: true}
          },
          messages: {
           'v1': { required: '必填'},
           'v2': { required: '必填'}  
          }
        });
        
      });

      function insertDate(){
        var formData = {};
        formData.v1 = document.getElementById("v1").value;
        formData.v2 = document.getElementById("v2").value;
        
         
        /*=================================
        樣板執行 函式 apps script function
        1. 表單驗證成功，執行本函式
        2. 必須在 gs建立一個「indexDataInsert(formData)」函式
        3. indexDataInsert執行完畢後，會再把結果回傳至「onSuccess(html)」
        4. 主畫面會被關閉
        5. 結果畫面會被開啟
        =================================*/
        google.script.run.withSuccessHandler(onSuccess).indexDataInsert(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>    

搜尋畫面

	
        <div id="search" class="d-none">
          <span>資料搜尋中....<img src="https://i.imgur.com/pm9SKUg.gif"></span>
        </div>

三、program.gs

/*==============================================
從index.html 樣板而來  
回傳html 至 樣板

注意：這裡若發生錯誤，除錯將比較困難，所以建立先顯示一個簡單值，再開始處理內容
==============================================*/
function indexDataInsert(formData){  
 
  
  var html = "123";
  return html;
}

 

四、執行

1. 「發布/部署為網路應用程式」=> 取得網址
2.  若在測試階段，可執行「latest code.」，不過只有管理有權限執行，不要把網址給他人執行(沒權限)
3.  接下來可以畫面處理，再處理資料(讀出或寫入)

五、結果畫面
search.html

        <div class="row"> 
          <div class="col-sm-12">
            <h4 class="my-3 text-center">點二下資訊社 - 成績查詢</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>                 
                    <th class="text-center">學號</th> 
                    <th class="text-center">姓名</th>
                    <th class="text-center">國文</th> 
                    <th class="text-center">英文</th> 
                    <th class="text-center">數學</th>
                    <th class="text-center">公民</th>
                    <th class="text-center">歷史</th>
                  </tr>
                </thead>
                <tbody id="">
                  <tr>
                    <td class="text-center">109001</td>
                    <td class="text-center">王O一</td>
                    <td class="text-center">60</td>
                    <td class="text-center">70</td>
                    <td class="text-center">80</td>
                    <td class="text-center">90</td>
                    <td class="text-center">98</td>
                  </tr>                    
                </tbody>
              </table>
            </div>
            <a href="#" target="_blank" class="btn btn-primary btn-block">繼續查詢</a>
          </div>
        
        </div>

 

六、program.gs

indexDataInsert(formData)

/*==============================================
  從index.html 樣板而來
  
  回傳html 至 樣板
==============================================*/
function indexDataInsert(formData){  
  //取得檔案
  var ss = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("id")); 
  var ws = ss.getSheetByName("成績表");
  var mainTitle = ws.getRange(1, 1, 1, ws.getLastColumn()).getValues()[0];//取得成績表中文欄名 
  var mains = ws.getSheetValues(2,1,ws.getLastRow()-1,ws.getLastColumn()); //
    
  //搜尋資料
  var main = mains.filter(function(item,index){
    if(item[0] == formData.v1 && item[1] == formData.v2){   
      item[2] = formatName(item[2]);//姓名個資
      return true;
    }     
  }); 
  
  
  formData.webTitle = SCRIPT_PROP.getProperty("webTitle");//網站標題  
  formData.link = ScriptApp.getService().getUrl() ;   
      
  //顯示查詢結果
  var search = HtmlService.createTemplateFromFile("search");
  search.mainTitle = mainTitle;
  search.main = main;
  search.formData = formData;
  
  var html = search.evaluate().getContent();//組合樣板與變數
  return html;
}

 

search.html

<? if(main.length == 0){ ?>          
  <div class="row"> 
    <div class="col-sm-12">
      <h4 class="mt-3 mb-3 text-center">查無資料</h4>
      <a href="<?= formData.link ?>" target="_blank" class="btn btn-primary btn-block">繼續查詢</a>
    </div>
  </div> 
<? }else {?>
  <div class="row"> 
    <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 main){ ?>           
              <tr>
                <? for(j in mainTitle){ ?>
                  <?if(mainTitle[j] != "認證碼"){ ?>
                    <td class="text-center"><?= main[i][j] ?></td>
                  <? } ?>
                  
                <? } ?>
              </tr>                    
            <? } ?>
          </tbody>
        </table>
      </div>
      <a href="<?= formData.link ?>" target="_blank" class="btn btn-primary btn-block">繼續查詢</a>
    </div>

  </div>
<? } ?>