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

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

一、通知

1. 上節我們利用$\_SESSION，做了「登入」、「登出」的功能，這二個動作都必須「轉向」，但轉向後並沒有訊息告知動作是否成功或失敗，因此有需要製做一個，資訊通知中心。
2. jgrowl 官網：<https://github.com/stanlemon/jGrowl>
 
二、方法

1. 引入CSS
2. 引入JS
3. 調用插件 ```
  <pre class="brush:as3;">
  
      <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.1/jquery.jgrowl.min.css" />
      <script src="//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>
  ```
 
三、先整合至樣板

1. 將css、js存至 class/jGrowl
2. 實體引用 ```
  <pre class="brush:as3;">
  
      <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">
        $(document).ready(function(){
          $.jGrowl('訊息通知中心', {  life:3000 , position: 'center', speed: 'slow' });
        });
      </script>
  ```
 
四、上面只要一進入網站，就會有訊息通知，請問該如何做到，有訊息時網頁才啟動「通知功能」

1. 這是原本轉頁的函數 ```
  <pre class="brush:as3;">
  header("location:admin/index.php");
  ```
2. 這是參考xoops轉向的函數 ```
  <pre class="brush:as3;">
  redirect_header(轉向網址,停留豪秒,訊息);
  ```
  
  由於前後台都可以用，所以將此函數放在function.php
3. redirect\_header($url="", $time = 3000, $message = '已轉向！！') ```
  <pre class="brush:as3;">
  
  ###############################################################################
  #  轉向函數
  ###############################################################################
  function redirect_header($url = "", $time = 3000, $message = '已轉向！！') {
  	$_SESSION['redirect'] = "\$.jGrowl('{$message}', {  life:{$time} , position: 'center', speed: 'slow' });";
  	header("location:{$url}");
  	exit;
  }
  ```
4. 當redirect\_header()被執行時，$\_SESSION\['redirect'\] 有值
5. 在前台與後台的head.php下方，必須將 smarty與function都引入完成的位置，加入 ```
  <pre class="brush:as3;">
  $_SESSION['redirect']=isset($_SESSION['redirect'])?$_SESSION['redirect']:"";
  $smarty->assign("redirect", $_SESSION['redirect']);
  $_SESSION['redirect']="";
  ```
6. 如此，我們即可在樣板判斷 <{redirect}> ```
  <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">            
              $(document).ready(function(){
                <{$redirect}>
              });                        
          </script>
      <{/if}>
  ```
7. 登入 ```
  <pre class="brush:as3;">
  
  		//header("location:admin/index.php");
  		redirect_header("admin/index.php", 3000, '登入成功！！');
  ```
  
  ps：注意後台jquery的位置
8. 登出 ```
  <pre class="brush:as3;">
  
    //header("location:index.php");
  	redirect_header("index.php", 3000, '登出成功！！');
  ```
9. 若測試正常，將之變成子樣板  
   theme.html ```
  <pre class="brush:as3;">
  <{include file="tpl/redirect_header.html"}>
  ```
  
   redirect\_header.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">            
          $(document).ready(function(){
            <{$redirect}>
          });                        
      </script>
  <{/if}>
  ```

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown