0207-網頁前端設計與開發運用培訓班
===
###### tags: `德鍵`
---
一、目前狀況
---
1. 資料庫：web11
2. 資料表：users

CREATE TABLE `users` (
  `uid` mediumint(8) unsigned NOT NULL AUTO_INCREMENT 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,
  PRIMARY KEY (`uid`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COMMENT='會員資料表';

二、註冊流程
1. 目前已有流程

| 功能 | $op 或參數 |
| -------- | -------- | -------- |
| 登入表單 | user.php?op=op_form 或<br> user.php |
| 登入檢查 | user.php?op=login |
| 登出 | user.php?op=logout |
2. 在登入畫面，已有註冊按鈕

3. 在user.php 增加一個流程 op=reg_form
請思考這個流程的畫面，要如何寫在程式中
訪客原本只有一個「登入表單」現在又要增加一個「註冊表單」
登入表單：tpl/login.tpl

4. 調整
登入表單：tpl/login.tpl => tpl/login_form.tpl
user.php?op=login_form 或 user.php
<br>
<br>

5. 增加
註冊表單： tpl/reg_form.tpl => 請在tpl下，建立一個「reg_form.tpl」<br>
<br>
user.php?op=reg_form
所以要增加一個case 與一個 函式<br>
<br>

6. 調整註冊按鈕 tpl/login_form.tpl

user.php?op=reg_form


7. 至此我們已將程式流程調成為
訪客：user.php?op=login_form 與 user.php?op=reg_form
可是去執行上面二個程式，畫面都還是一樣
所以程式應如何調整？
請思考.......

8. 其實可以拿 op 來判斷
<br>

    <{* 訪客 *}>
    <{if $op=="login_form" }>
      <{include file="tpl/login_form.tpl"}>
    <{elseif $op=="reg_form"}>
      <{include file="tpl/reg_form.tpl"}>
    <{/if}>		

9. reg_form.tpl

<div class="container mt-5">
  <h1 class="text-center">註冊表單</h1>
  
  <form action="user.php" method="post" id="myForm" class="mb-20" enctype="multipart/form-data">
  
    <div class="row">         
      <!--帳號-->              
      <div class="col-sm-4">
        <div class="form-group">
          <label>帳號<span class="text-danger">*</span></label>
          <input type="text" class="form-control" name="uname" id="uname" value="" required>
        </div>
      </div>         
      <!--密碼-->              
      <div class="col-sm-4">
        <div class="form-group">
          <label>密碼<span class="text-danger">*</span class="text-danger"></label>
          <input type="password" class="form-control" name="pass" id="pass" value="" required>
        </div>
      </div>         
      <!--確認密碼-->              
      <div class="col-sm-4">
        <div class="form-group">
          <label>確認密碼<span class="text-danger">*</span class="text-danger"></label>
          <input type="password" class="form-control" name="chk_pass" id="chk_pass" value="" required>
        </div>
      </div>         
      <!--姓名-->              
      <div class="col-sm-4">
        <div class="form-group">
          <label>姓名<span class="text-danger">*</span class="text-danger"></label>
          <input type="text" class="form-control" name="name" id="name" value="" required>
        </div>
      </div>         
      <!--電話-->              
      <div class="col-sm-4">
        <div class="form-group">
          <label>電話<span class="text-danger">*</span class="text-danger"></label>
          <input type="text" class="form-control" name="tel" id="tel" value="" required>
        </div>
      </div>             
      <!--信箱-->              
      <div class="col-sm-4">
        <div class="form-group">
          <label>信箱<span class="text-danger">*</span class="text-danger"></label>
          <input type="text" class="form-control" name="email" id="email" value="" required>
        </div>
      </div> 
    </div>
    <div class="text-center pb-20">
      <input type="hidden" name="op" value="reg">
      <button type="submit" class="btn btn-primary">送出</button>
    </div>

  </form>

</div>

10. 表單送出後 op=reg
所以 switch 要加一個 case "reg" 與 reg()
11. function reg()

  global $db;
  print_r($_POST);
  die();

12.

二、寫入資料庫
---
1. 可以利用「adminer」寫入一筆記錄，得到語法
2. 資料庫使用說明：https://www.ugm.com.tw/modules/tad_book3/page.php?tbdsn=1602
3. function reg()

/*=======================
註冊函式(寫入資料庫)
=======================*/
function reg(){
  global $db;
  #過濾變數
  $_POST['uname'] = $db->real_escape_string($_POST['uname']);
  $_POST['pass'] = $db->real_escape_string($_POST['pass']);
  $_POST['chk_pass'] = $db->real_escape_string($_POST['chk_pass']);
  $_POST['name'] = $db->real_escape_string($_POST['name']);
  $_POST['tel'] = $db->real_escape_string($_POST['tel']);
  $_POST['email'] = $db->real_escape_string($_POST['email']);
  #寫入語法
  $sql="INSERT INTO `users` 
        (`uname`, `pass`, `name`, `tel`, `email`)  
        VALUES 
        ('{$_POST['uname']}', '{$_POST['pass']}', '{$_POST['name']}', '{$_POST['tel']}', '{$_POST['email']}');
  ";
  #寫入資料庫
  $db->query($sql) or die($db->error. $sql);
  $uid = $db->insert_id;
  return $uid;
}

三、 處理密碼加密
---
1. 早期都是使用md5, 不過它已被破解
2. 現在可以使用「password_hash」
password_hash($pwd, PASSWORD_DEFAULT)
3. 不可逆！同一個密碼加密後的值會不一樣！
4. 可利用 password_verify($password, $hash) 來解密！

$pass = $db->real_escape_string($_POST['pass']);
if (empty($pass)) {
    die("密碼為必填！");
}
$pass  = password_hash($pass, PASSWORD_DEFAULT);

5. 測試
password_hash.php<br>

<?php
/*
檔案名稱：password_hash.php
*/
$pwd = "123456";
$hash = password_hash($pwd, PASSWORD_DEFAULT);//加密
$md5 = md5($pwd);
 
echo "------------------ hash -----------------";
echo "<br>";
echo $hash;
echo "<br>";
if (password_verify($pwd, $hash)) { //判斷密碼
  echo "密碼正確(hash)";
}
echo "<br>";
echo "------------------ md5 -----------------";
echo "<br>";
echo $md5;

6. 密碼破解網站：https://www.cmd5.com/
7. step5

/*=======================
註冊函式(寫入資料庫)
=======================*/
function reg(){
  global $db;
  
  $_POST['uname'] = $db->real_escape_string($_POST['uname']);
  $_POST['pass'] = $db->real_escape_string($_POST['pass']);
  $_POST['chk_pass'] = $db->real_escape_string($_POST['chk_pass']);
  $_POST['name'] = $db->real_escape_string($_POST['name']);
  $_POST['tel'] = $db->real_escape_string($_POST['tel']);
  $_POST['email'] = $db->real_escape_string($_POST['email']);
  #加密處理
  if($_POST['pass'] != $_POST['chk_pass'])die("密碼不一致");
  $_POST['pass']  = password_hash($_POST['pass'], PASSWORD_DEFAULT);

  $sql="INSERT INTO `users` (`uname`, `pass`, `name`, `tel`, `email`)
  VALUES ('{$_POST['uname']}', '{$_POST['pass']}', '{$_POST['name']}', '{$_POST['tel']}', '{$_POST['email']}');";

  $db->query($sql) or die($db->error() . $sql);
  $uid = $db->insert_id;


}

8.
四、待處理事項
---
1. 前台驗證
2. 後台驗證
3. 轉向函式

五、美化Google表單

<iframe name="returnWin" style="display: none;" onload="this.onload=function(){window.location='ok.html'}"></iframe>

1. form 須給一個 target="returnWin"
2. google rpo https://github.com/tawan158/google