Gg / 在wordpress結合Google Apps Script建立查詢頁面

Gg / 在wordpress結合Google Apps Script建立查詢頁面

Post Views: 171

寫在前頭，wordpress的文章不能寫入程式碼

所以也就不能直接把Google Apps Script程式碼崁入網站之中

用傳統編輯器寫入，Javescript程式碼會被刪除

用區塊編輯器寫入，可能會無法執行

(只是曾經在預覽的狀態下測試是可行的，但是後來卻不行，不知道是不是我一直在兩種編輯器切換的關係，中間可能有經過怎麼樣的轉換)

因為我還是習慣用傳統編輯器，所以對我來說最方便的方式是使用外掛

之前使用的程式碼片段設定一些全域的JavaSctript的設定

也用過PHPWhere嵌入JavaSctript

這次使用的外掛是Code Embed

可以在文章編輯的自訂欄位設定短代碼，以及程式內容

因為是在文章編輯的情況下直接設定欄位，然後在文章適當位置加入短代碼

流程相對其他兩個外掛而言是方便許多

回到主題，在wordpress結合Google Apps Script建立查詢頁面

程式碼分為兩個部分

GAS後端程式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
function doGet(e) {
  Logger.log(e);
  var params = e.parameter;
  var mailID = params.mailID;//
  
  //var mailID = e;  //配合 function test()
  Logger.log(mailID);

  var Sheet = SpreadsheetApp.openById("**********************************");

  var LastRow = Sheet.getLastRow();
  var LastColumn = Sheet.getLastColumn();
  
  var data = [];//用來存資料

  // 取得全部資料
  var listAll = Sheet.getSheetValues(1, 1, LastRow, LastColumn);

  //存標題
  data.push({dataload: listAll[0]})  //第1列是標題,序號由0開始，設定JSON格式{dataload: listAll[0]}

  for(var i = 1; i < listAll.length; i++){ //第2列才是資料,序號由0開始
      if(listAll[i][1] == mailID){ //電子信箱在第2欄,序號由0開始
        data.push({dataload: listAll[i]}); //寫入資料
       }       
  }
        
  //顯示資料
    Logger.log(data);
  //將資料存成JSON格式並回傳  
  return ContentService.createTextOutput(JSON.stringify(data)).setMimeType(ContentService.MimeType.JSON); 
  
}

function test() {
  doGet('trico109748007@gmail.com.tw');
}

 

在wordpress呈現查詢頁面的Html 跟 Javascript程式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
<html>

<head>
  <meta charset="UTF-8"></meta>
  <script type="text/javascript">
    var dateReviver = function(key, value) { //將日期字串轉為日期資料型態
      //console.log(key);
      //console.log(value);
      var a;
      if (typeof value === 'string') {
        a = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
        //console.log(a);
        if (a) {
          return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4], +a[5], +a[6])); //a[0]是完整字串
        }
      }
      return value;
    };

    function searchMail(mailID) {
      var xmlhttp;
      if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
      } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          var result = xmlhttp.responseText;
          //console.log(result);
          var obj = JSON.parse(result, dateReviver); //解析json字串為json物件形式,dateReviver將日期字串轉為日期資料型態
          //console.log(obj);
          var html = '<table border=1 width=100%>'; //將資料寫出在Html表格，配合2次迴圈讀取每1筆資料內的所有資料
          for (var i = 0; i < obj.length; i++) { //所有筆數的資料跑迴圈
            html += '<tr>'; //
            for (var j = 0; j < obj[i].dataload.length; j++) //每1筆資料內的所有資料，dataload對應回傳的JSON格式
            {
              html += '<td>' + obj[i].dataload[j] + '</td>';
            }
            html += '</tr>';
          }
          html += "</table>";
          if (obj.length == 1) { //只有1筆(標題)代表查不到資料
            html = "<h3>查無資料<h3>";
            document.getElementById("search_status").innerHTML = html; //寫入Html
            //alert('查無資料');
            document.getElementById("mailID").value = "";
          } else {
            document.getElementById("search_status").innerHTML = html; //寫入Html
          }
        }
      }
      var url = "https://script.google.com/macros/s/**************************************************************************/exec";
      xmlhttp.open("get", url + "?mailID=" + mailID, true);
      xmlhttp.send();
    }

    function cleanAll() {
      document.getElementById("search_status").innerHTML = "";
      document.getElementById("mailID").value = "";
    }
  </script>
</head>

<body>
  測試資料:trico109748007@gmail.com.tw<br />
  輸入電子信箱：<input id="mailID" type="text" /><br />
  <input name="search" onclick="searchMail(mailID.value);" type="button" value="送出" />
  <input name="clean" onclick="cleanAll();" type="button" value="清除資料" />

  <span id="search_status"></span>
</body>

</html>

 

設計概念

從後端接受前端以AJAX方式傳來的查詢字串

搜尋Google試算表中是否有相對應的內容

如果有的話就以JSON格式回傳到前端

前端接受到資料之後，透過JSON.parse解析並處理”變成字串的日期型態資料”

最後將資料串接並顯示在網頁之中

測試資料:trico109748007@gmail.com.tw
輸入電子信箱：

 

參考資料

怎麼在個別文章/頁面加入 javascript 或 CSS?

google表單訂單查詢加匯款後3碼輸入【Google表單教學】

Tags: