2. 邏輯判斷及樣板引擎

一、 套用BootStrap

1. BootStrap（http://getbootstrap.com）是一套twitter開發的CSS自適應框架，可以方便的套在各種版面上，風格清爽美觀，而且簡單易用！
2. 直接套用CDN（免下載就可以用），請貼到</head>前面：

   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
   
   <!-- Optional theme -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
   
   <!-- Latest compiled and minified JavaScript -->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
   
   <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via 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]-->

3. 在<title>上面貼上以下語法：

   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">

二、 BootStrap3版面布局簡易用法

1. BootStrap中文手冊：http://v3.bootcss.com/css/
2. 布局容器：有<div class="container-fluid">和<div class="container">，放在最外層，前者寬度100%，後者約80%。
3. 網格系統：一律為<div class="row">可想像為一個橫列，裡面可以分為12格
4. 設定網格：<div class="col-md-n">，n的值從1~12，一個row裡面加起來總和最大為12。如<div class="col-md-9"><div class="col-md-3">就是左9格，右3格的兩欄式排列。
5. 另，class可以多重指定，例如：<div class="col-md-9 well">同時套用well效果。

三、 BootStrap3表單相關用法

1. 表單可加上role="form"<form role="form">
   • (1)  預設欄位會垂直排列，標籤和表單元件也是垂直排列。
   • (2)  表單若加上 class="form-inline"，則裡面的欄位可並列橫排。
   • (3)  表單若加上 class="form-horizontal"，則裡面的欄位會垂直排列，但標籤和表單元件則是水平排列。
     • a. 此時標籤需用 class="col-md-2 control-label"來定義寬度
     • b. 表單元件則需用div包起來一樣用 class="col-md-10"來定義寬度
2. 每一組欄位（標籤+表單元件），可套用class="form-group"
   • (1)  搭配 has-success會變綠色框（成功）
   • (2)  搭配 has-warning會變草黃色框（警告）
   • (3)  搭配 has-error會變紅色框（錯誤）
   • (4)  搭配form-group-lg，可讓整個欄位變大
   • (5)  搭配form-group-sm，可讓整個欄位變小
3. 表單元件本身，可套用class="form-control"
   • (1)  搭配input-lg，可變成大一點的表單元件
   • (2)  搭配input-sm，可變成小一點的表單元件
4. 單選、複選可用class="radio"或class="checkbox"包起來，若要變成橫向，則加個 -inline即可。
5. 按鈕<button>或連結<a>可加入class="btn"來美化按鈕
   • (1)  可搭配btn-default（灰）、btn-primary（藍）、btn-success（綠）、btn-info（天藍）、btn-warning（橘）、btn-danger（紅）、btn-link（透明）
   • (2)  可搭配btn-lg（大）、btn-sm（小） 或 btn-xs（極小）來調整按鈕尺寸。
   • (3)  搭配btn-block可讓按鈕滿版
   • (4)  搭配active可以使按鈕看起來像按下去一樣
   • (5)  搭配disabled 可以禁用按鈕

四、 PHP變數（用來暫時存放資料的東西...）

1. PHP變數命名原則：以「$」為開頭，第一個字元只能是以英文（a-z或A-Z）或底線（_），數字是不能當作第一個字元的。
2. 變數名稱是有大小寫之分的，例如$name、$Name和$NAME是完全不一樣的！
3. 盡量使用有意義的變數名稱，$name絕對比$aaa來的好！
4. $def_password="1234";//把1234字串指派給$def_password，其中=是「指定運算元」
5. PHP變數只活在自己的檔案中，而且是暢行無阻的！（遇到函數或物件除外）
6. PHP變數以最後指定的值為主，可以隨時重新指定其值。
7. 「作業」請設定一個發布新聞密碼！並在表單新增一個密碼輸入欄位。

五、  PHP 的超級全域變數（superglobals）

1. 以「陣列」方式存在，超級全域變數可在任何地方被拿來使用（包括函數內）。
2. $_SERVER：環境變數，可用phpinfo()觀察之，例如取得使用者來源IP（$_SERVER['REMOTE_ADDR']）
3. $_GET、$_POST、$_REQUEST：來自表單的變數。
4. $_COOKIE：給cookie用的全域變數，cookie是存在使用者電腦的一個小檔案
5. $_SESSION：給session的全域變數，session是存在伺服器中的一個小檔案
6. $_FILES：上傳檔案時會用到的超級全域變數。
7. 其中$_REQUEST 可以接來自get、post、cookie方法傳來的變數。

六、 if的用法

1. if常拿來作為邏輯判斷用，其用法如下：

   if(條件1為真){
     執行動作1;
   }elseif(條件2為真){
     執行動作2;
   }else{
     執行動作3;
   }

2. 條件為真（true）的情況如：有值、1、true、比較運算成立（如 3==3）
3. 條件為假（false）的情況如：空值、0、false、比較運算不成立（如 3==5）
4. 三元運算：(條件) ? (為真執行) : (為假執行);

七、 PHP運算元（有功能的符號）

1. 算術運算元：即「+」加、「-」減、「*」乘、「/」除、「%」餘數。
2. 指定運算元：即「=」。意思是將「右邊的值」指定給「左邊的變數」。
   • (1)  $a = $a + $b 可寫成 $a += $b
3. 比較運算元：「==」相等、「===」完全相等、「!=」「<>」不等、「!==」非全等、「<」小於、「>」大於、「<=」小於等於、「>=」大於等於。
4. 錯誤控制運算元：「@」，放在運算式或函數前，可隱藏錯誤訊息。
5. 執行運算元：即「`系統指令`」，此為重音符號，非單引號。
6. 邏輯運算元：「&&」及、「||」或、「!」否，通常用在if條件判斷。
7. 字串運算元：「.」，可連接字串與變數（或函數）。
8. 陣列運算元：「+」，把右邊的陣列附加到左邊的陣列後，索引重複的值不會被覆蓋。
9. 「作業」請接收表單輸入的密碼，並比對和發布密碼是否正確

八、 執行轉向

1. 凡是想要讓網頁轉到指定頁面，或者資料庫有儲存、更新、刪除到資料庫的動作，執行後，一律建議執行轉向動作。
2. 轉向寫法如下（其實就是靠檔案的檔頭，告訴瀏覽器此檔案要連到另一個位置）：

   header("location:http://網址");

3. 轉向語法之後的程式不會繼續執行！ 錯！會繼續執行，故加個exit; 會更好！
4. 「作業」若比對不正確，請轉回發布頁面。

九、 GET的變數傳遞與接收

1. GET的傳遞方式如下，檔案後以?串接變數，每組變數用&連接：

   http://網址/xxx.php?變數1=值1&變數2=值2& 變數3=值3...

2. 好處是可以被加到我的最愛（可作紀錄或傳遞給別人）
3. 缺點是勿傳遞敏感訊息，因為網址就看得到，而且有長度限制
4. 接收來自GET的變數：$_GET['變數1']、$_GET['變數2']、$_GET['變數3']...
5. 「作業」轉回發布頁面時，並傳遞錯誤訊息，使表單頁面可以顯示錯誤訊息出來。

十、 cookie與session的用法

1. cookie是一種會在使用者端建一個小文字檔來紀錄一些值的機制，其簡易用法如下：

   setcookie('cookie名稱' , '值' , 存活時間);

2. 不同瀏覽器對單一網站能儲存cookie數量有限制，約30~50個不定。
3. 不同瀏覽器對單一cookie的大小也有不同限制，約4000位元組左右。
4. 用戶端電腦的 cookie 只要關閉就沒辦法使用。
5. 要讀出cookie的值，用法為：$_COOKIE['cookie名稱']
6. session稱之為會期，是一種會在主機端建一個小文字檔來紀錄一些值的機制，啟用session方法如下（前面不可以有任何的輸出動作）：

   session_start();

7. 存入session的方法：$_SEEION['session名稱']=值;
8. 讀取session的方法：$_SEEION['session名稱']
9. 清除session的方法：unset($_SESSION['session名稱']);  或 session_unset();
10. 刪除session的方法：session_destroy();
11. 基本上，session比cookie要來得方便！但若要長期儲存（如記憶密碼），用cookie可以設時間的特性，也是不錯的選擇。
12. 「作業」：請做一個記憶發布內容的機制，避免資料丟失。

十一、 TinyButStrong小強樣板

1. 讓PHP程式和畫面設計（即樣板）分開，我們就可以用一般網頁編輯器來設計樣板或者可以讓程式看起來更簡明易懂。
2. 可以不用重複設計專案的每一頁畫面，因樣板可共用，節省開發時間。
3. PHP樣板引擎（用來套用樣板的東西）很多，我們用的是小巧快速的「小強」TinyButStrong樣板引擎（http://www.tinybutstrong.com）
4. 小強的簡體中文說明書：http://www.phpv.net/TBS_Manual.htm

十二、 套用TinyButStrong樣板引擎

1. 解壓縮後，將tbs_class.php及plugin資料夾複製到程式目錄下。
2. 開啟index.php，在最後面加入：

   <?php
   include_once('tbs_class.php');
   $TBS =new clsTinyButStrong ;
   $TBS->LoadTemplate('index_tpl.html',False) ;
   $TBS->Show() ;
   ?>

3. 將原本index.php中網頁的部份複製到新檔中，並存成index_tpl.html。
4. 原本要印出PHP變數值的部份，改成[var.變數名稱]，例如：

   echo "<h1>{$_POST['news_title']}</h1>";
   可改為
   [var.news_title]

5. 在index.php中需建立一個名為$news_title的變數，以便套用到[var.news_title]中。
6. 「作業」請將post.php也樣版化吧！

十三、 小小練習

1. 請新增一個「發布者」以及「發布日期」的欄位（type="date"）、ip請改為隱藏欄位（type="hidden"）
2. 「發布日期」預設值可以用函數 date("Y-m-d"); 來取得今天日期（詳細用法：http://php.net/manual/en/function.date.php）
3. 並將「發布者」以及「發布日期」的值適當的呈現在index.php
4. 加入一個「修改新聞」的功能，並確認「發布新聞」時，會有一個空表單，而「修改新聞」時會載入目前新聞的內容以供修改。

十四、 外部傳進來的變數建議都要經過整理，以策安全

1. isset()用來判斷有無此變數；intval()會將傳入內容整數化。

   $op=isset($_REQUEST['op'])?$_REQUEST['op']:'';
   $sn=isset($_REQUEST['sn'])?intval($_REQUEST['sn']):'';

十五、 switch

1. 我們可以將if改為switch：

   switch ($變數) {
     case '變數值1':
       # code...
       break;
    
     default:
       # code...
       break;
   }