0206-網頁前端設計與開發運用培訓班
===
###### tags: `德鍵`
---
一、後台增加「登出」
---
1. templates/tpl/admin.tpl

				<ul class="list-group list-group-flush">
					<a href="index.php">
						<li class="list-group-item">首頁</li>
					</a>
					<a href="user.php?op=logout">
						<li class="list-group-item">登出</li>
					</a>
				</ul>

2. templates/tpl/admin.tpl

					<li class="list-group-item">
						<a href="index.php" class="btn-block">首頁</a>
					</li>	
					<li class="list-group-item">
						<a href="user.php?op=logout" class="btn-block">登出</a>
					</li>

2.

二、資料庫連線
---
1. 使用phpMyadmin建立一個資料庫
請輸入「資料庫名稱」與語系「utf8_general_ci」

2. 讓PHP連線到MySQL資料庫
---
HTML網頁語法無法直接存取資料庫伺服器，需透過程式來介接。
注意！PHP7已經不支援MySQL系列函數，而是改用MySQLi物件，或者PDO物件。
使用PDO物件的好處是方便介接其他資料庫，而用MySQLi物件的優點則是其運作和早期MySQL較像，熟悉MySQL函數的話，幾乎可以無痛轉移。底下還是以MySQLi為範例。
基本MySQL資料庫連線方法：
$db = new mysqli(_DB_HOST, _DB_ID, _DB_PASS, _DB_NAME);
if ($db->connect_error) {
die('無法連上資料庫：' . $db->connect_error);
}
$db->set_charset("utf8");
指定欲連線的來源位置（一般為localhost），資料庫帳號、密碼及資料庫名稱。
若無錯誤訊息，表示連線成功。連線後，需設定用utf8編碼來擷取資料。

sqlConfig.php
---
在head.php 同層目錄下，建立「sqlConfig.php」

<?php
#資料庫伺服器
$db_host = "localhost";
#資料庫使用者帳號
$db_user = "root";
#資料庫使用者密碼
$db_password = "111111";
#資料庫名稱
$db_name = "web11";
#PHP 5.2.9以後
$db = new mysqli($db_host, $db_user, $db_password, $db_name); 
if ($db->connect_error) {
  die('無法連上資料庫 (' . $db->connect_errno . ') '
        . $db->connect_error);
}
#設定資料庫語系
$db->set_charset("utf8");

3. 在「head.php」引入「sqlConfig.php」
取消註解即可，然後回到網頁重整，如無錯誤訊息，代表資料庫連線成功

三、會員註冊表單
---
會員資料表規劃
---
1. 資料表：users
2. 欄位結構：

| 欄位名稱 | 資料類型 | 欄位設定選項 | 註解 |
| -------- | -------- | -------- | -------- |
| uid | mediumint(8) | AUTO_INCREMENT <br/> UNSIGNED | 會員編號 |
| uname | varchar(255) | | 帳號 |
| pass | varchar(255) | | 密碼 |
| name | varchar(255) | | 姓名 |
| tel | varchar(255) | | 電話 |
| email | varchar(255) | | 信箱 |
| kind | enum('0','1') | DEFAULT '0' | 會員類別 |
| token | varchar(255) | | token |

3. 使用phpMyadmin建立一個資料表
資料表：users 欄位數: 7


--
-- 資料表結構 `users`
--

CREATE TABLE `users` (
  `uid` mediumint(8) UNSIGNED NOT NULL COMMENT '會員編號',
  `uname` varchar(255) NOT NULL COMMENT '帳號',
  `pass` varchar(255) NOT NULL COMMENT '密碼',
  `name` varchar(255) NOT NULL COMMENT '姓名',
  `tel` varchar(255) NOT NULL COMMENT '電話',
  `email` varchar(255) NOT NULL COMMENT '信箱',
  `kind` enum('0','1') NOT NULL DEFAULT '0' COMMENT '會員類別',
  `token` varchar(255) NOT NULL COMMENT 'token'
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COMMENT='會員資料表';


--
-- 資料表索引 `users`
--
ALTER TABLE `users`
  ADD PRIMARY KEY (`uid`);
  

--
-- 使用資料表自動遞增(AUTO_INCREMENT) `users`
--
ALTER TABLE `users`
  MODIFY `uid` mediumint(8) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT '會員編號';
COMMIT;  

4. 資料表建立完成後，可以匯出結構備份，方便日後重建資料表

規劃會員相關功能
---

| 功能 | $op 或參數 |
| -------- | -------- | -------- |
| 登入表單 | user.php?op=op_form |
| 登入檢查 | user.php?op=login |
| 登出 | user.php?op=logout |

google表單
---
1. Line通知

//表單變數
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);
}

2. LINE通知 + 合計 + 試算表

//表單變數
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;
      if(title == "今日菜色(加10元白飯換五穀飯)"){        
        var subTotal =  value.split("-");
        total += parseInt(subTotal[1]) ;
      }
    }
    //其他自訂欄位(尾)
    //----單筆回應資料end  
    rowdata['合計'] =  total;
     
    //----單筆要做的事情
    sendToLine(rowdata);//LineNotify通知
    appendRow(rowdata);//寫入試算表
    //----單筆要做的事情 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);
}

//試算表變數
var SpreadsheetAppId = "SpreadsheetAppId";
var sheetName = '總表';
 
function appendRow(rowdata){
   
  //用id取得試算表
  var ss = SpreadsheetApp.openById(SpreadsheetAppId);  
  //用工作表名稱設定工作表
  var Sheet = ss.getSheetByName(sheetName);
  //設定工作表 0 1 2 ....
  //var Sheet = ss.getSheets()[0];//第1個工作表
   
  //插入第2行空白
  var row = 2;
  Sheet.insertRowBefore(row);
  //        
   
  //寫入記錄
  //時間戳記 姓名	今日菜色(加10元白飯換五穀飯)	備註	合計
  var data = [rowdata['時間戳記'],rowdata['姓名'],rowdata['今日菜色(加10元白飯換五穀飯)'],rowdata['備註'],rowdata['合計']];
   
  data.forEach(function(item,index){
    Sheet.getRange(row, index+1).setValue(item);
  });
}