自製bootstrap4樣板

16. 實戰！登入登出功能

16-2 利用session做登入 next

網頁前端設計與開發運用培訓班

16-1 自製bootstrap4樣板

一、程式

複製 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>

16. 實戰！登入登出功能

16-2 利用session做登入 next

友善列印 & 下載 PDF 匯出 MarkDown 格式

Title1

Title2

Title3

16-1 自製bootstrap4樣板