0207-網頁前端設計與開發運用培訓班 === ###### tags: `德鍵` --- 一、目前狀況 --- 1. 資料庫：web11 2. 資料表：users ```sql 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. 在登入畫面，已有註冊按鈕 ![](https://i.imgur.com/Vn2p9Fq.png) 3. 在user.php 增加一個流程 op=reg_form 請思考這個流程的畫面，要如何寫在程式中 訪客原本只有一個「登入表單」現在又要增加一個「註冊表單」 ![](https://i.imgur.com/oiBQRLu.png) 登入表單：tpl/login.tpl 4. 調整 登入表單：tpl/login.tpl => tpl/login_form.tpl user.php?op=login_form 或 user.php ![](https://i.imgur.com/9ZdXtmf.png)<br> ![](https://i.imgur.com/i8DX0XR.png)<br> ![](https://i.imgur.com/SD92Zou.png) 5. 增加 註冊表單： tpl/reg_form.tpl => 請在tpl下，建立一個「reg_form.tpl」<br> ![](https://i.imgur.com/cnzLWK8.png)<br> user.php?op=reg_form 所以要增加一個case 與一個 函式<br> ![](https://i.imgur.com/EuZOHwc.png)<br> ![](https://i.imgur.com/0amnwUA.png) 6. 調整註冊按鈕 tpl/login_form.tpl ```htmlmixed= user.php?op=reg_form ``` ![](https://i.imgur.com/HpbYACF.png) 7. 至此我們已將程式流程調成為 訪客：user.php?op=login_form 與 user.php?op=reg_form 可是去執行上面二個程式，畫面都還是一樣 所以程式應如何調整？ 請思考....... 8. 其實可以拿 op 來判斷 ![](https://i.imgur.com/6rJ3f3L.png)<br> ```htmlmixed= <{* 訪客 *}> <{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 ```htmlmixed= <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() ```php 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() ```php /*======================= 註冊函式(寫入資料庫) =======================*/ 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) 來解密！ ```php $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 ```php /*======================= 註冊函式(寫入資料庫) =======================*/ 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