育將電腦工作室 - 線上書籍

網站程式設計-PHP
==========

一、先從官網將方法整理成一般網頁

1. Bootstrap的套件位置： 網站根目錄/templates/default
2. 引入CSS：注意這裡使用 cdn，建議將檔案下載，並整理至 class/jgrowl 下 ```
  <pre class="brush:as3;">
      
      <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.1/jquery.jgrowl.min.css" />
  ```
3. 引入JS：注意這裡使用 cdn，建議將檔案下載，並整理至 class/jgrowl 下 ```
  <pre class="brush:as3;">
      
      <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.1/jquery.jgrowl.min.js"></script>
  ```
4. 調用插件 ```
  <pre class="brush:as3;">
      
      <script type="text/javascript">
        $(document).ready(function(){
          $.jGrowl('訊息通知中心', {  life:3000 , position: 'center', speed: 'slow' });
        });
      </script>
  ```
5. system\_redirect.html ```
  <pre class="brush:as3;">
  
  <html lang="zh-TW">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>jQuery jGrowl</title>
  
      
      <link href="css/bootstrap.min.css" rel="stylesheet">
  
      
      
      
  
      
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      
      <script src="js/bootstrap.min.js"></script>
  
    </head>
    <body>
      <h1>jQuery jGrowl</h1>
      
      <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.1/jquery.jgrowl.min.css" />
      
      <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.1/jquery.jgrowl.min.js"></script>
      
      <script type="text/javascript">
        $(document).ready(function(){
          $.jGrowl('訊息通知中心', {  life:3000 , position: 'center', speed: 'slow' });
        });
      </script>
  
    </body>
  </html>
  ```
6. 圖示：  
   ![](https://docs.google.com/drawings/d/1CNl0d0tABacrO6UBLVIT7dXFLgiMW7-1sXEK-CI8w6c/pub?w=780&h=530)
7. 目前前台使用「default」，後台使用「admin」佈景  
   登入：/admin.php => /admin/index.php  
   登出：/admin/後台程式 => /index.php  
   因為前後台共用，所以把函數放在 function.php
8. function.php ```
  <pre class="brush:as3;highlight:[3];">
  function redirect_header($url="", $time = 3000, $message = '已轉向！！')
  {
    $_SESSION['redirect']="
      $(document).ready(function(){
        $.jGrowl('{$message}', {  life:{$time} , position: 'center', speed: 'slow' });
      });
    ";
    header("location:{$url}");
    exit;
  }
  ```
  
  function：將指令、函數組合成一個套件。  
   可設預設值：$time = 3000 ，3000即是預設值  
   回傳：利用 return 傳回變數或陣列  
   這裡利用 $\_SESSION\['redirect'\] ，當這個變數有值，即代表有轉向動作，因此在佈景可以判斷 $\_SESSION\['redirect'\] 是否有值，如果有，則調用插件顯示訊息。  
   當程式執行 redirect\_header()，除了設定 $\_SESSION\['redirect'\]外，並執行轉向 header("location:{$url}");
9. 前、後台head.php
  
   ```
  <pre class="brush:as3;">
  
  
  $_SESSION['redirect']=isset($_SESSION['redirect'])?$_SESSION['redirect']:"";
  $smarty->assign("redirect", $_SESSION['redirect']);
  $_SESSION['redirect']="";
  ```
10. /admin.php 來源 =>設定 $\_SESSION\['redirect'\] 執行 redirect\_header() 、目的 =>將訊息送至樣板，並清空$\_SESSION\['redirect'\] ```
  <pre class="brush:as3;">
  <?php
  require_once 'head.php';
  
  #整理傳入變數
  $op = isset($_REQUEST['op'])?$_REQUEST['op']:"";
  #定義變數, $_SESSION['uname']用來判斷是否登入
  $_SESSION['uname']=isset($_SESSION['uname'])?$_SESSION['uname']:"";
  
  #程式流程
  switch($op){
    #登入
    case "check_uname":
      $msg = check_uname();
      if($msg){
        #如果帳號、密碼，驗證ok，則跳轉至，後台首頁
        $_SESSION['uname'] = true;
        redirect_header("admin/index.php",3000,"您好：歡迎光臨！！<br>目前在後台首頁！！");
        //header("location:admin/index.php");
        exit;
      }
    break;
    #----
    case "logout":
      $_SESSION['uname'] = "";
      redirect_header("index.php",3000,"您已經登出！！");
      exit;
    break;
  
    //預設動作
    default:
      $op="op_list";
      if($_SESSION['uname']){
        #如果已經登入，則跳轉至後台的首頁
        redirect_header("admin/index.php",3000,"您好：歡迎光臨！！<br>目前在後台首頁！！");
        exit;
      }
    break;
  
  }
  
  #將變數送至樣板引擎
  #op
  $smarty->assign("op", $op);
  #檔案名稱(含副檔)，變數在head.php
  $smarty->assign("WEB", $WEB);
  
  #程式結尾
  $smarty->display('theme.html');
  
  #函數
  ########################################
  # check_uname
  ########################################
  function check_uname()
  {
    #過濾接教變數, 特殊字符轉義
    $_POST['uname'] = addslashes($_POST['uname']);
    $_POST['pass'] = addslashes($_POST['pass']);//
    if($_POST['uname'] == "admin" and $_POST['pass'] == "admin123456")return true;
    return;
  }
  
  ########################################
  # op_test1
  ########################################
  function op_test1()
  {
    return;
  }
  ```
11. theme.html (前、後台都要) ```
  <pre class="brush:as3;">
  
  
      {if $redirect}
        <link rel="stylesheet" type="text/css" href="{$smarty.const.WEB_URL}/class/jgrowl/jquery.jgrowl.min.css" />
        <script src="{$smarty.const.WEB_URL}/class/jgrowl/jquery.jgrowl.min.js"></script>
  
        <script type='text/javascript'>
          {$redirect}
        </script>
      {/if}
  ```
 
</body></html>

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown