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樣板
二、
Sign in with Wallet
Connect another wallet