owned this note
owned this note
Published
Linked with GitHub
0211-網頁前端設計與開發運用培訓班
===
###### tags: `德鍵`
---
一、Google表單
---
1. 建立Google表單
請確認「[位置表](https://docs.google.com/spreadsheets/d/1-FXza-_ZRM75PbbPmm6pIlFD9HM62g7aNNrKgq1HnrM/edit#gid=1271125681)」的Gmail是否正確
2. 欄位：桌號、雞腿飯-90元、雞排飯-80元、排骨飯-70元、招牌飯-60元、備註
3. 要自訂表單，不設定「收集電子郵件地址」
4. 欄位型態，請選「簡答」、請不要設定必填
5. 由回覆關連試算表
6. 設定「有新回應時透過電子郵件通知我」
二、取得資訊
---
8. 取得表單ID：
9. 取得[LINE權杖](https://notify-bot.line.me/zh_TW/)：
10. 取得 Form Action：
11. 桌號：
12. 雞腿飯-90元：
13. 雞排飯-80元：
14. 排骨飯-70元：
15. 招牌飯-60元：
16. 備註：
三、表單資訊
---
1. 在 xampp/htdocs/google1 資料夾
2. [bootstrap線上版](https://bootstrap.hexschool.com/)
3. 存成index.html
```htmlmixed=
<!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>育將點餐系統</title>
</head>
<body>
<h1 class="text-center mt-5">育將點餐系統</h1>
<div class="container">
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></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>
</body>
</html>
```
4. 表單範例
```htmlmixed=
<form role="form" action="請填googleFormAction" method="post" id="myForm" >
<div class="row">
<!--桌號-->
<div class="col-sm-3">
<div class="form-group">
<label>桌號<span class="text-danger">*</span></label>
<select name="" id="" value="" class="form-control" size="1">
<option value="">請選擇桌號</option>
<option value="1號桌">1號桌</option>
<option value="2號桌">2號桌</option>
<option value="3號桌">3號桌</option>
<option value="4號桌">4號桌</option>
<option value="5號桌">5號桌</option>
<option value="6號桌">6號桌</option>
</select>
</div>
</div>
</div>
<div class="row">
<!--雞腿飯-90元-->
<div class="col-sm-3">
<div class="form-group">
<label>雞腿飯-90元<span class="text-danger">(請填數量)</span class="text-danger"></label>
<input type="number" class="form-control" name="" id="" value="0">
</div>
</div>
<!--雞排飯-80元-->
<div class="col-sm-3">
<div class="form-group">
<label>雞排飯-80元<span class="text-danger">(請填數量)</span class="text-danger"></label>
<input type="number" class="form-control" name="" id="" value="0">
</div>
</div>
<!--排骨飯-70元-->
<div class="col-sm-3">
<div class="form-group">
<label>排骨飯-70元<span class="text-danger">(請填數量)</span class="text-danger"></label>
<input type="number" class="form-control" name="" id="" value="0">
</div>
</div>
<!--招牌飯-60元-->
<div class="col-sm-3">
<div class="form-group">
<label>招牌飯-60元<span class="text-danger">(請填數量)</span class="text-danger"></label>
<input type="number" class="form-control" name="" id="" value="0">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<!-- 備註 -->
<div class="form-group">
<label class="control-label">備註</label>
<textarea class="form-control" rows="4" id="" name=""></textarea>
</div>
</div>
</div>
<div class="text-center pb-3">
<button type="submit" class="btn btn-primary">送出</button>
</div>
</form>
```
5.
四、測試表單
---
1. 測試填表單，看是試算表可以接到資料
2. 在index.html 中 加入
```htmlmixed=
<!-- 表單返回頁，記得在表單加「 target='returnWin' 」 -->
<iframe name="returnWin" style="display: none;" onload="this.onload=function(){window.location='ok.html'}"></iframe>
```
3. 製做 ok.html
```htmlmixed=
<!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>點餐成功</title>
</head>
<body>
<div class="container mt-5 ">
<div class="jumbotron">
<h1 class="display-4 text-center">點餐成功</h1>
<p class="lead text-center">老闆馬上親自來確認，點餐內容及製作餐點</p>
<hr class="my-4">
<p class="text-center">育將電腦工作室 mail：tawan158@gmail.com TEL：0921-560421</p>
<a class="btn btn-success btn-block" href="index.html" role="button">點餐</a>
<a class="btn btn-primary btn-block" target="_blank" href="https://www.ugm.com.tw" role="button">官網</a>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></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>
</body>
</html>
```
4. 測試填表後，是否轉至ok.html
五、表單驗證
---
1. 更換[Jquery.js](https://jquery.com/)
```javascript=
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
```
2. 下載「[jQuery Validation Plugin](https://jqueryvalidation.org/)」
```javascript=
<!-- 表單驗證 -->
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>
```
3. 調用驗證方法
參考：<br>
[jquery validate表單驗證的基本用法入門：](https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/270803/)<br>
[梅問題．教學網：](https://www.minwt.com/webdesign-dev/js/21536.html)
```htmlmixed=
(1)required:true 必輸欄位
(2)remote:"check.shtml" 使用ajax方法呼叫check.shtml驗證輸入值
(3)email:true 必須輸入正確格式的電子郵件(只能驗證格式,不保證有效性)
(4)url:true 必須輸入正確格式的網址
(5)date:true 必須輸入正確格式的日期
(6)dateISO:true 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性
(7)number:true 必須輸入合法的數字(負數，小數)
(8)digits:true 必須輸入整數
(9)creditcard: 必須輸入合法的信用卡號
(10)equalTo:"#field" 輸入值必須和#field相同
(11)accept: 輸入擁有合法字尾名的字串（上傳檔案的字尾）
(12)maxlength:5 輸入長度最多是5的字串(漢字算一個字元)
(13)minlength:10 輸入長度最小是10的字串(漢字算一個字元)
(14)rangelength:[5,10] 輸入長度必須介於 5 和 10 之間的字串")(漢字算一個字元)
(15)range:[5,10] 輸入值必須介於 5 和 10 之間
(16)max:5 輸入值不能大於5
(17)min:10 輸入值不能小於10
```
調用驗證方法
---
```javascript=
<script>
$(document).ready(function(){
$("#myForm").validate();
});
</script>
```
自訂義規則
```javascript=
<script>
$(function(){
$("#myForm").validate({
submitHandler: function(form) {
form.submit();
},
rules: {
'entry.40315414' : {
required: true
}
},
messages: {
'entry.40315414' : {
required: "請輸入桌號"
}
}
});
});
</script>
```
自訂規則1
----
```javascript=
<!-- 調用驗證方法 -->
<script>
$(function(){
$("#myForm").validate({
submitHandler: function(form) {
form.submit();
},
rules: {
'entry.40315414' : {//桌號
required: true
},
'entry.672544075' : {//雞腿飯
digits:true ,
min: 0
},
'entry.904913690' : {//雞排飯
digits:true ,
min: 0
},
'entry.1051371274' : {//排骨飯
digits:true ,
min: 0
},
'entry.202608930' : {//招牌飯
digits:true ,
min: 0
}
},
messages: {
'entry.40315414' : {
required: "請輸入桌號"
},
'entry.672544075' : {
digits:"請填正確數量" ,
min: "請填正確數量"
},
'entry.904913690' : {//雞排飯
digits:"請填正確數量" ,
min: "請填正確數量"
},
'entry.1051371274' : {//排骨飯
digits:"請填正確數量" ,
min: "請填正確數量"
},
'entry.202608930' : {//招牌飯
digits:"請填正確數量" ,
min: "請填正確數量"
}
}
});
});
</script>
```
範例：https://blog.ugm.com.tw/google1/
六、通知Line
---
1. 命名檔名
2. 「檔案/專案屬性」=>時區改台北
3. 把程式更換
```javascript=
//表單變數
var googleFormID = "googleFormID";
function FormResponse(){
// 通過ID打開一個表單，並記錄對每個問題的回答。
var form = FormApp.openById(googleFormID);
var formResponses = form.getResponses();//得到所有回應
//---- 所有回應
for (var i = 0; i < formResponses.length; i++) {
var formResponse = formResponses[i];//每一筆回應
var itemResponses = formResponse.getItemResponses();//回應內容
var formResponseTime = formResponse.getTimestamp();//時間戳記
var formRespondentEmail = formResponse.getRespondentEmail();//取得表單上「電子郵件地址」
//----宣告試算表每列變數----
var rowdata = {};
var total = 0;
//其他自訂欄位(前)
//rowdata["填報標題"] = "";//填報標題
rowdata["時間戳記"] = formResponseTime;//表單回應時間
rowdata['電子郵件地址'] = formRespondentEmail;//電子郵件地址
//----取得單筆回應資料
for (var j = 0; j < itemResponses.length; j++) {
var itemResponse = itemResponses[j];
var title = itemResponse.getItem().getTitle();//問題名稱
var value = itemResponse.getResponse();//填報內容
rowdata[title] = value;
}
//其他自訂欄位(尾)
//----單筆回應資料end
//----單筆要做的事情
sendToLine(rowdata);//LineNotify通知
//----單筆要做的事情 end
}
//刪除回應問題
form.deleteAllResponses();
}
//填入Line Notify 權杖
var lineToken = "lineToken";
function sendToLine(rowdata){
//整理
var message = "\n";
for (var key in rowdata){
message += key + " : " + rowdata[key] + "\n";
}
var options =
{
method : "post",
payload : "message=" + message,
headers : {"Authorization" : "Bearer "+ lineToken},
muteHttpExceptions : true
};
UrlFetchApp.fetch("https://notify-api.line.me/api/notify",options);
}
```
4. 「編輯/現有專案啟動程序」 => 新增觸發條件
5. 最後完成品
```javascript=
//表單變數
var googleFormID = "googleFormID";
function FormResponse(){
// 通過ID打開一個表單，並記錄對每個問題的回答。
var form = FormApp.openById(googleFormID);
var formResponses = form.getResponses();//得到所有回應
//---- 所有回應
for (var i = 0; i < formResponses.length; i++) {
var formResponse = formResponses[i];//每一筆回應
var itemResponses = formResponse.getItemResponses();//回應內容
var formResponseTime = formResponse.getTimestamp();//時間戳記
//var formRespondentEmail = formResponse.getRespondentEmail();//取得表單上「電子郵件地址」
//----宣告試算表每列變數----
var rowdata = {};
var total = 0;
//其他自訂欄位(前)
//rowdata["填報標題"] = "";//填報標題
rowdata["時間戳記"] = formResponseTime;//表單回應時間
//rowdata['電子郵件地址'] = formRespondentEmail;//電子郵件地址
//----取得單筆回應資料
for (var j = 0; j < itemResponses.length; j++) {
var itemResponse = itemResponses[j];
var title = itemResponse.getItem().getTitle();//問題名稱
var value = itemResponse.getResponse();//填報內容
rowdata[title] = value;
//時間戳記 桌號 雞腿飯-90元 雞排飯-80元 排骨飯-70元 招牌飯-60元 備註
if(title == "雞腿飯-90元" || title == "雞排飯-80元" || title == "排骨飯-70元" || title == "招牌飯-60元" ){
var subTotal = title.split("-");
total += parseInt(subTotal[1]) * value;
}
}
//其他自訂欄位(尾)
//----單筆回應資料end
rowdata['合計'] = total;
//----單筆要做的事情
sendToLine(rowdata);//LineNotify通知
//----單筆要做的事情 end
}
//刪除回應問題
form.deleteAllResponses();
}
//填入Line Notify 權杖
var lineToken = "lineToken";
function sendToLine(rowdata){
//整理
var message = "\n";
for (var key in rowdata){
message += key + " : " + rowdata[key] + "\n";
}
var options =
{
method : "post",
payload : "message=" + message,
headers : {"Authorization" : "Bearer "+ lineToken},
muteHttpExceptions : true
};
UrlFetchApp.fetch("https://notify-api.line.me/api/notify",options);
}
```
github：https://github.com/tawan158/google1
網站：https://tawan158.github.io/google1/
七、計算合計，並寫入「總表」工作表
---
Google Drive
Gist
Clipboard
Sign in with Wallet
