登入與註冊功能
以session機制建立登入功能
線上示範 (帳：kate_91, 密：kate@03)
原始碼：user_login_session - 密碼消除
index.php
<?php
ini_set("display_errors","On");
error_reporting(E_ALL);
session_start();
if(!empty($_SESSION["userId"])) { //如果session變數有記錄userID的話(表示之前登入成功，記錄了這個session變數)
require_once './view/dashboard.php'; //登入成功，進入後台
} else {
require_once './view/login-form.php'; //若未登入，顯示登入對話方塊
}
?>
首頁第一先透過檢查$_SESSION["userId"]變數是否存在，有的話，表示之前登入成功過，帶入view/dashboard.php，沒有的話，會帶出/view/login-form.php，要求使用者進行登入。
使用jQuery實現註冊、登入與登出功能
在導覽列加入登入、註冊、使用者姓名
線上示範
<nav class="navbar navbar-expand-md fixed-top">
<a class="navbar-brand" href="index.php">富國雞腿王</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="index.php">米飯</a></li>
<li class="nav-item"><a class="nav-link" href="index-noodle.php">麵食</a></li>
<li class="nav-item"><a class="nav-link" href="index-sd.php">小菜</a></li>
<li class="nav-item"><a class="nav-link" href="index-soup.php">湯類</a></li>
<li class="nav-item" id="li-userName"><span id="uname" class="nav-link"></span></li>
<li class="nav-item" id="li-login"><a class="nav-link" href="#loginModal" data-toggle="modal" data-target="#loginModal">登入</a></li>
<li class="nav-item" id="li-register"><a class="nav-link" href="#registerModal" data-toggle="modal" data-target="#registerModal">註冊會員</a></li>
<li class="nav-item" id="li-logout" hidden><a class="nav-link" href="#">登出</a></li>
</ul>
</div>
</nav>
登入對話方塊
<!-- 會員登入對話方塊 -->
<div class="modal fade" id="loginModal" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">富國雞腿王會員登入</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form class="form" method="post" action="#">
<!-- <h2>使用jQuery實現登入系統</h2> -->
<label>Email :</label>
<input type="text" name="demail" id="email-login">
<label>密碼 :</label>
<input type="password" name="password" id="password-login">
<button type="button" class="btn btn-block" name="login" id="login">登入</button>
<button type="button" class="btn btn-block" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
註冊對話塊
<!-- 會員註冊對話方塊 -->
<div class="modal fade" id="registerModal" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">富國水果王會員註冊</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body login-register">
<form class="form" method="post" action="#">
<label>姓名 :</label>
<input type="text" name="dname" id="name">
<label>Email :</label>
<input type="text" name="demail" id="email-register">
<label>密碼 :</label>
<input type="password" name="password" id="password-register">
<label>再次確認密碼 :</label>
<input type="password" name="cpassword" id="cpassword">
<!-- <input type="button" name="register" id="register" value="Register"> -->
<input type="button" class="btn btn-block" name="register" id="register" value="註冊" name="">
<button type="button" class="btn btn-block " data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
login.css
input[type=text],[type=password], textarea {
width: 97.7%;
height: 34px;
padding-left: 5px;
margin-bottom: 20px;
margin-top: 8px;
box-shadow: 0 0 5px rgb(77, 175, 68)c;
border: 2px solid rgb(77, 175, 68);
color: #fff;
background-color: #f7f7f7;
font-size: 1.5rem;
}
.item-count{
background-color: #f7f3ee;
margin-top: 2px;
}
label{
/* color: white; */
/* text-shadow: 0 1px 0 #fff; */
font-size: 1.5rem;
font-weight: bold;
}
.modal-body .btn{
width: 100%;
background: rgb(77, 175, 68);
border: 1px solid #0F799E;
font-size: 20px;
margin-top: 15px;
padding: 4px;
font-weight: bold;
cursor: pointer;
color: white;
text-shadow: 0px 1px 0px #13506D;
}
.modal-body .btn:hover{
background: linear-gradient(#36caf0 5%, #22abe9 100%);
}
#register {
font-size: 20px;
margin-top: 15px;
background: rgb(77, 175, 68);
border: 1px solid #0F799E;
padding: 7px 35px;
color: white;
text-shadow: 0px 1px 0px #13506D;
font-weight: bold;
border-radius: 2px;
cursor: pointer;
width: 100%;
}
#register:hover{
background: linear-gradient(#36caf0 5%, #22abe9 100%);
}
處理導覽列使用者資訊的切換
<script>
function login_navbar(){ //登入後，處理導覽列登入、登出等相關顯示與關閉
$('#li-userName').show();
$('#uname').html(userName); //innerHTML
$('#li-logout').show();
$('#li-login').hide();
$('#li-register').hide();
}
function logout_navbar(){
$('#li-logout').hide();
$('#li-login').show();
$('#li-register').show();
$('#li-userName').hide();
}
var userName = "<?php if (isset($_SESSION['userName'])) {
echo $_SESSION['userName'];}?>";
if (userName !== "") { //如果userName有值的話
login_navbar(); //導覽列切為使用者名稱形式
} else {
logout_navbar(); //導覽列切為登入形式
}
</script>
整合至線上下單的源碼(含session機制，去圖)
注意：mysql必須全部改成mysqli (PHP 5之後，目前我的主機只支援PHP 7)，線上下單有關資料庫的部份已更新至mysqli 。
參考資料：
- Create Simple Registration Form Using jQuery
- PHP Session 使用介紹，啟用與清除 session
- PHP Login Script with Session
- How To Add a Login Form in Navbar
- Adding a Drop Down Login Form to Bootstrap’s Navbar
- Bootstrap Navbar Dropdown Login and Signup Form with Social Buttons
- Bootstrap: Creating Menus, Navbars, and Modals
- Bootstrap Dropdown Login