WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

5-2. 會員系統的登入與登出

講義參考用，要活用變化，或許要修改喔~

在 mem_login.php 設計登入表單

HTML 的設計部份

<form method="post" action="./mem_login_check.php" class="mem-login-area">
 
  <input type="text" name="mem_mail" class="mem_mail" placeholder="請輸入EMail為帳號" required/>
  <input type="password" name="mem_pwd" class="mem_pwd" placeholder="請輸入密碼...." required/>
 
  <input type="submit" class="submit-btn" value="" />
 
  <a href="./?page=mem_addmem" class="addmem-btn w3-button">會員註冊</a>
  <a href="javascript:;" class="forget-btn w3-button">忘記密碼</a>
 
</form>

CSS 的設計部份

<style>
  .mem-login-area { max-width: 400px; margin: 20px auto 0; height: 330px; position: relative;
    background: url(../img_layout/login.png) no-repeat center top; }
  .mem-login-area input { background-color: #e8f0fe!important;
    border: none; width: 270px; margin-left: 21%; padding: 3px 5px; }
  .mem-login-area input, .mem-login-area a { position: absolute; }
  .mem-login-area .mem_mail { top: 104px; }
  .mem-login-area .mem_pwd { top: 158px; }
  .mem-login-area .submit-btn { background: url(../img_layout/login_btn.png) transparent!important;
    width: 170px; height: 60px; top: 230px; right: 10px; margin: 0; cursor: pointer; }
  .addmem-btn { top: 210px; left: 20px; }
  .forget-btn { top: 250px; left: 20px; }
</style>

在 mem_login_check.php 設計登入檢查的工作

<?php
require_once('../shared/conn_pdo.php');
include_once('../shared/assist.php');
 
try {
  $sql_str = "SELECT * FROM member
              WHERE mem_mail=:mem_mail AND mem_pwd=:mem_pwd AND mem_level>1";
  $RS = $conn -> prepare($sql_str);
 
  $mem_mail = $_POST['mem_mail'];  //接收登入的帳號
  $mem_pwd  = $_POST['mem_pwd'];   //接收登入的密碼  
 
  $RS -> bindParam(':mem_mail', $mem_mail);
  $RS -> bindParam(':mem_pwd', $mem_pwd);
 
  $RS -> execute();
  $total = $RS -> rowCount();
 
  //$total是資料集的筆數, 如果>=1表示有查詢到資料，是符合登入的會員
  if( $total >= 1 ){
    $row_RS = $RS -> fetch(PDO::FETCH_ASSOC);
    $_SESSION['mem_id']    = $row_RS['mem_id'];     //將會員ID記錄到SESSION系統變數
    $_SESSION['mem_name']  = $row_RS['mem_name'];   //將會員名稱記錄到SESSION系統變數
    $_SESSION['mem_level'] = $row_RS['mem_level'];  //將會員等級記錄到SESSION系統變數
 
    $url = '../';  //登入成功要前往的位址
 
  }else{
    //登入失敗..............登入失敗要前往的位址，並加上msg參數
    $url = './?page=mem_login&msg=1';
  }
 
  header('Location:'.$url);  
} 
catch ( PDOException $e ){
  die("ERROR!!!: ". $e->getMessage());
}
?>

回到 mem_login.php 設計登入失敗時的顯示工作

<?php
//msg=1 => 表示登入失敗
//msg=2 => 表示未登入進入會員中心而導引過來
//msg=3 => 非管理者不能進入管理介面
?>  
</form>
 
<h2 class="login-msg w3-center">
  <?php 
  if( isset($_GET['msg']) && $_GET['msg']==1 ){ 
    echo '==== 輸入的帳號或密碼有誤，請重新登入！ ===='; }
  ?>
</h2>

在 mem_logout.php 設計登出表單

<?php
include_once('../shared/assist.php');
 
$_SESSION['mem_id'] = '';
$_SESSION['mem_name'] = '';
$_SESSION['mem_level'] = '';
unset($_SESSION['mem_id']);
unset($_SESSION['mem_name']);
unset($_SESSION['mem_level']);
 
header('Location:../');
?>

 

go TOP