網頁前端設計與開發運用培訓班
一、程式
- 複製 index.php => user.php
二、樣板
- 在 web/templates 新增 user.tpl
- bootstrap4 台灣網站：https://bootstrap.hexschool.com/
將「初學者範本」複製到 user.tpl
替換 jquery
https://code.jquery.com/
用「bg-primary」測試樣板
將js 調動至 「</head>」之前 - 登入 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="" 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>
<button class="btn btn-lg btn-primary btn-block" type="submit">會員登入</button>
<div>
您還沒還沒註冊嗎？請 <a href="#">點選此處註冊您的新帳號</a>。
</div>
</form>
</div>
- 基礎的 input 表單元件 <input type="格式" name="名稱" value="預設值" placeholder="佔位字元" required> 常用有：text（文字框）、hidden（隱藏框）、password（密碼框）、file（上傳） 其中的 name 最重要！一定要有！因為 name 送出後，會變成 PHP 的變數名稱。 required ：必填
- 其他常用的表單元件 HTML 語法及屬性
用<button type=”submit”>按鈕文字</button>可做出按鈕效果
單選框：<input type="radio" name="名稱" value="值 1">選項文字 1
(1) 單選框通常會有好幾個選項，一組選項就要一組<input>，name 都要一樣才行！
(2) 若要預設選取，要加上 checked="checked"
複選框：<input type="checkbox" name="名稱[]" value="值 1">選項文字 1
(1) 複選框通常同時會有好幾個選項，一組選項就要一組<input>
(2) name 都要一樣才行！而且因為是複選，所以 name 要加上[]，如此會送出陣列。
(3) 若要預設選取，要加上 checked="checked"
下拉選單：<select name="名稱" size=1>選項</select>
(1) 選項：<option value="值">選項文字</option>
(2) 若要預設選取：要在<option>中加入 selected="selected"
(3) 若希望下拉選單可以複選，除了 name 要加上[]外，還要加上 multiple 屬性。
大量文字框：<textarea name="名稱">預設值</textarea>
- 接收表單變數
例如表單有個：<input type="text" name="title">，表單送出後，方法若用post，那麼會得到 $_POST['title'] 變數；若是用 get，那就是 $_GET['title']
用echo 印出變數：字串請用雙引號包起來；變數若要放在字串中，請用{}隔開。
可用if(條件){為真}else{為假}來判斷變數是否存在。
- 表單的屬性
action="<{$smarty.server.SCRIPT_NAME}>" - 隱藏一個執行op
<input type="hidden" name="op" id="op" value="login"> - user.php / login function
function login(){
global $smarty;
$name="admin";
$pass="111111";
if($name == $_POST['name'] and $pass == $_POST['pass']){
echo "您是管理員";
die();
}else{
header("location:user.php");//注意前面不可以有輸出
}
//print_r($_POST);
var_dump($_POST);
DIE();
}
- head.php
$_SESSION['admin'] = isset($_SESSION['admin']) ? $_SESSION['admin'] : false;
- user.php
$_SESSION['admin'] = true;
header("location:index.php");//注意前面不可以有輸出
- user.tpl
<!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="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
<style>
.form-signin {
width: 100%;
max-width: 400px;
padding: 15px;
margin: 0 auto;
}
</style>
<{if !$smarty.session.admin}>
<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>