網站程式設計-PHP

10-1 實做

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

  1. Bootstrap的套件位置： 網站根目錄/templates/default
  2. 引入CSS：注意這裡使用 cdn，建議將檔案下載，並整理至 class/jgrowl 下 
        <!--引入CSS-->
    <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 下 
        <!--引入JS-->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.1/jquery.jgrowl.min.js"></script>

     

  4. 調用插件 
        <!--調用插件-->
    <script type="text/javascript">
      $(document).ready(function(){
        $.jGrowl('訊息通知中心', {  life:3000 , position: 'center', speed: 'slow' });
      });
    </script>

     

  5. system_redirect.html 
    <!DOCTYPE html>
<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>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js 讓 IE8 支援 HTML5 元素與媒體查詢 -->
    <!-- 警告：Respond.js 無法在 file:// 協定下運作 -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery (Bootstrap 所有外掛均需要使用) -->
    <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>
    <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.1/jquery.jgrowl.min.css" />
    <!--引入JS-->
    <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. 圖示：
  7. 目前前台使用「default」，後台使用「admin」佈景
    登入：/admin.php => /admin/index.php
    登出：/admin/後台程式 => /index.php
    因為前後台共用，所以把函數放在 function.php
  8. function.php 
    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
     

    

$_SESSION['redirect']=isset($_SESSION['redirect'])?$_SESSION['redirect']:"";
$smarty->assign("redirect", $_SESSION['redirect']);
$_SESSION['redirect']="";

     

  10. /admin.php  來源 =>設定 $_SESSION['redirect']  執行 redirect_header() 、目的 =>將訊息送至樣板，並清空$_SESSION['redirect'] 
    <?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 (前、後台都要) 
    

    {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}