Title1

Title2

Title3

16-1 自製bootstrap4樣板

一、程式

  1. 複製 index.php => user.php

二、樣板

  1. 在 web/templates 新增 user.tpl
  2. bootstrap4 台灣網站:https://bootstrap.hexschool.com/
    將「初學者範本」複製到 user.tpl
    替換 jquery
    https://code.jquery.com/
    用「bg-primary」測試樣板
    將js 調動至 「</head>」之前
  3. 登入 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>

     

  4. 基礎的 input 表單元件
    <input type="格式" name="名稱" value="預設值" placeholder="佔位字元"  required>
    
    	常用有:text(文字框)、hidden(隱藏框)、password(密碼框)、file(上傳)
    
    	其中的 name 最重要!一定要有!因為 name 送出後,會變成 PHP 的變數名稱。
    
    	required :必填
  5. 其他常用的表單元件 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>

     

  6. 接收表單變數
    例如表單有個:<input type="text"  name="title">,表單送出後,方法若用post,那麼會得到 $_POST['title'] 變數;若是用 get,那就是 $_GET['title']
    用echo 印出變數:字串請用雙引號包起來;變數若要放在字串中,請用{}隔開。
    可用if(條件){為真}else{為假}來判斷變數是否存在。

     

  7. 表單的屬性
    action="<{$smarty.server.SCRIPT_NAME}>"
  8. 隱藏一個執行op
    <input type="hidden" name="op" id="op" value="login">
  9. 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();
    }

     

  10. head.php
    
    $_SESSION['admin'] = isset($_SESSION['admin']) ? $_SESSION['admin'] : false;

     

  11. user.php
    
        $_SESSION['admin'] = true;     
        header("location:index.php");//注意前面不可以有輸出

     

  12. 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>

     

  13.