02-05-網頁前端設計與開發運用培訓班 === ###### tags: `德鍵` --- 一、整理佈景為離線版 --- 1. 登出 user.php?op=logout ```php case "logout" : $msg = logout(); header("location:index.php");//注意前面不可以有輸出 exit; ``` ```php function logout(){ $_SESSION['admin']=""; } ``` 2. 離線版 templates/user.tpl 3. 調整1 ```html <!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="<{$xoImgUrl}>bootstrap/bootstrap.min.css"> <title>會員管理</title> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="<{$xoImgUrl}>bootstrap/jquery-3.4.1.min.js"></script> <script src="<{$xoImgUrl}>bootstrap/popper.min.js"></script> <script src="<{$xoImgUrl}>bootstrap/bootstrap.min.js"></script> </head> <body> <{if $smarty.session.admin}> <{else}> <style> .form-signin { width: 100%; max-width: 400px; padding: 15px; margin: 0 auto; } </style> <div class="container mt-5"> <form class="form-signin" action="user.php" method="post"> <h1 class="h3 mb-3 font-weight-normal">會員登入</h1> <div class="mb-3"> <label for="name" class="sr-only">帳號</label> <input type="text" name="name" id="name" class="form-control" placeholder="請輸入帳號" required> </div> <div class="mb-3"> <label for="pass" class="sr-only">密碼</label> <input type="password" name="pass" id="pass" class="form-control" placeholder="請輸入密碼" required> </div> <div class="checkbox mb-3"> <label> <input type="checkbox" name="remember" id="remember"> 記住我 </label> </div> <input type="hidden" name="op" id="op" value="login"> <button class="btn btn-lg btn-primary btn-block" type="submit">會員登入</button> <div> 您還沒還沒註冊嗎？請 <a href="#">點選此處註冊您的新帳號</a>。 </div> </form> </div> <{/if}> </body> </html> ``` 4. step2 index.php ```php echo $_SESSION['admin'];die(); ``` 5. step3 建立 templates/tpl 資料夾 => login.tpl login.tpl ```html <style> .form-signin { width: 100%; max-width: 400px; padding: 15px; margin: 0 auto; } </style> <div class="container mt-5"> <form class="form-signin" action="user.php" method="post"> <h1 class="h3 mb-3 font-weight-normal">會員登入</h1> <div class="mb-3"> <label for="name" class="sr-only">帳號</label> <input type="text" name="name" id="name" class="form-control" placeholder="請輸入帳號" required> </div> <div class="mb-3"> <label for="pass" class="sr-only">密碼</label> <input type="password" name="pass" id="pass" class="form-control" placeholder="請輸入密碼" required> </div> <div class="checkbox mb-3"> <label> <input type="checkbox" name="remember" id="remember"> 記住我 </label> </div> <input type="hidden" name="op" id="op" value="login"> <button class="btn btn-lg btn-primary btn-block" type="submit">會員登入</button> <div> 您還沒還沒註冊嗎？請 <a href="#">點選此處註冊您的新帳號</a>。 </div> </form> </div> ``` user.tpl ```html <{include file="tpl/login.tpl"}> ``` 二、製做一個管理員樣板 --- 1. templates/user.tpl ```htmlmixed= <{if $smarty.session.admin}> <{include file="tpl/admin.tpl"}> <{else}> <{include file="tpl/login.tpl"}> <{/if}> ``` 2. templates/tpl/admin.tpl ```htmlmixed= <h1 class="text-center">育將電腦工作室 後台</h1> <div class="container"> <div class="row"> <div class="col-sm-9"> </div> <div class="col-sm-3"> </div> </div> </div> ``` 3. 卡片 ```htmlmixed= <div class="card" style="width: 18rem;"> <div class="card-header"> 管理員 </div> <ul class="list-group list-group-flush"> <li class="list-group-item">首頁</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </div> ``` 4. 連結 ```htmlmixed= <div class="card" style="width: 18rem;"> <div class="card-header"> 管理員 </div> <ul class="list-group list-group-flush"> <a href="index.php"> <li class="list-group-item">首頁</li> </a> </ul> </div> ``` 5. theme.tpl ```htmlmixed= <{if $smarty.session.admin}> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="user.php">管理員</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="user.php?op=logout">登出</a> </li> <{else}> <{/if}> ``` 6. 登入 ```htmlmixed= <{if $smarty.session.admin}> <{* 管理員 *}> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="user.php">管理員</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="user.php?op=logout">登出</a> </li> <{else}> <{* 未登入 *}> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="user.php">登入</a> </li> <{/if}> ``` 7. 三、利用SESSION、COOKIE製作登入、登出 --- 1. user.php / function login() ```php function login(){ global $smarty; $name="admin"; $pass="111111"; $token="xxxxxx"; if($name == $_POST['name'] and $pass == $_POST['pass']){ $_SESSION['admin'] = true; $_POST['remember'] = isset($_POST['remember']) ? $_POST['remember'] : ""; if($_POST['remember']){ setcookie("name", $name, time()+ 3600 * 24 * 365); setcookie("token", $token, time()+ 3600 * 24 * 365); } header("location:index.php");//注意前面不可以有輸出 }else{ header("location:user.php");//注意前面不可以有輸出 } } ``` 2. user.php / function logout() ```php function logout(){ $_SESSION['admin']=""; setcookie("name", "", time()- 3600 * 24 * 365); setcookie("token", "", time()- 3600 * 24 * 365); } ``` 3. head.php ```php // 為了cookie使用 if(!$_SESSION['admin']){ $_COOKIE['token'] = isset($_COOKIE['token']) ? $_COOKIE['token'] : ""; $_COOKIE['name'] = isset($_COOKIE['name']) ? $_COOKIE['name'] : ""; if($_COOKIE['name'] == "admin" and $_COOKIE['token'] == "xxxxxx"){ $_SESSION['admin'] = true; } } ``` 4. 處理佈景 <{include file=”tpl/login.tpl”}> 管理員：$_SESSION[‘admin’]=true 訪客：$_SESSION[‘admin’]=false smarty => $smarty.session.admin 登出 處理index.php樣板 二、