Tad 教材網 - 線上書籍

:::

\[1062\] PHP7入門
===============

### 一、 自製BootStrap4頁面

1. 先前用的是CDN方式來製作，需在網路連線狀態才得以開發，亦可自製離線版基本頁面。
2. 先下載最新版 bootstrap4：<http://bootstrap.hexschool.com/docs/4.0/getting-started/download/>。下載後，存到網頁目錄下，並解壓縮，會得到 js 及 css 兩個資料夾。
3. 由於BootStrap4拿掉了圖示，所以，我們可以直接到 <http://fontawesome.io/> 下載，解壓後，將 fonts 及 css 複製到網頁目錄下。
4. 接著下載 jquery：<https://jquery.com/download/>，並存入 js 資料夾中
5. 最後下載popper.js存入 js 資料夾中（bootstrap4 選單會用到） ：<https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js>
6. 我們可以在css下新增一個my.css檔案，以便放置自己的CSS樣式設定。 ```
  <pre class="brush:xml;gutter:false;">
  
  <html lang="zh-Hant-TW">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>頁面標題</title>
      <link rel="stylesheet" href="css/bootstrap.min.css">
      <link rel="stylesheet" href="css/font-awesome.min.css">
      <link rel="stylesheet" href="css/my.css">
  </head>
  
  <body>
  
      <script src="js/jquery-3.2.1.min.js"></script>
      <script src="js/popper.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
  </body>
  
  </html>
  ```
 
### 二、 隨視窗大小自動調整大小的底圖（CSS+jquery）

1. 概念：容器中設定圖片背景，初次載入或調整視窗大小時，會自動調整容器符合螢幕大小。
2. 新增一組`.img-container`容器，至my.css加入背景圖樣式設定
3. 圖檔抓取可至：<https://pixabay.com/> 下載，無須裁切
4. CSS完整屬性手冊：<http://css.doyoe.com/properties/index.htm> ```
  <pre class="brush:css;gutter:false;">
  .img-container {
    background: url('../images/pic.jpg') center center/cover no-repeat gray;
  }
  ```
5. `background-size`屬性值`cover`是把圖放大到填滿整個容器，圖片可能無法完整顯示。`contain`則是會依照容器大小完整顯示圖片，會造成容器部份空間無法覆蓋到。
6. 若用整合性寫法，背景尺寸要放在位置後面，並且記得加上`/`才有效果。
7. 利用jquery可以偵測各種事件，並指定執行動作，例如畫面載入完要執行的動作可用： ```
  <pre class="brush:jscript;gutter:false;">
  $(document).ready(function () {
      //執行動作
  });
  ```
8. 若視窗大小有調整，則事件為： ```
  <pre class="brush:jscript;gutter:false;">
  $(window).resize(function () {
      //執行動作
  });
  ```
9. 動態套用某元素樣式值的作法為： ```
  <pre class="brush:jscript;gutter:false;">
  $("挑選器").css('屬性名稱', '值');
  ```
10. 動態偵測視窗的寬、高值的作法為： ```
  <pre class="brush:jscript;gutter:false;">
  $(window).width();
  $(window).height();
  ```
11. 完整jquery用法可參考：<http://www.css88.com/jqapi-1.9/>
12. 將以上這些東西整合起來（需放在引入jquery.js之後）： ```
  <pre class="brush:jscript;gutter:false;">
  <script type="text/javascript">
      $(document).ready(function () {
          $(".img-container").css('width', $(window).width());
          $(".img-container").css('height', $(window).height());
      });
  
      $(window).resize(function () {
          $(".img-container").css('width', $(window).width());
          $(".img-container").css('height', $(window).height());
      });
  </script>
  ```
 
### 三、 BootStrap4容器及網格概念

1. BootStrap4的網格系統以 `flexbox`（CSS3）為基礎（取代 table、floats…），因此可以做到自動等寬等高的欄位 、自動平均欄位、垂直置中等以往很難做的功能。
2. 同時也代表對 IE9（以下）不再支援，至少要用IE10才行。
3. 凡是要用 BootStrap 的網格系統來排版，一定要使用容器樣式（`.container`）。
4. 一個頁面中可以有多個容器，容器也可以巢狀使用（容器中還有容器）
5. 容器有兩種，一種是寬度有上限的容器`.container`，另一種是滿版的`.container-fluid`
6. `.row` 代表一個橫列，以確保裡面的欄位可以對齊、排序。若同時加入`.no-gutters`，裡頭的欄位則不會有間隔，會緊密連接。
7. 欄位的設定是「`.col-斷點-寬`」，斷點可不指定，寬度1~12，不設寬度會自動平均，若設`auto`會自動根據內容多寡調整大小。滿版為12欄。若超過，則會自動新增一個 `.row`。
8. 在` .container` 之外多一層 `<div>` 並設想要的底色或底圖即可作到滿版底色+有限寬度
 
### 四、 BootStrap4斷點

1. 所謂斷點，在這裡指的是當螢幕尺寸符合斷點規範的大小時，才會根據斷點設定來實施網格系統（例如左邊9欄，右邊3欄），若是不符合斷點範圍，則自動調整為一欄式（通常是在手機瀏覽的情況下）。 
  - (1) `xs` < 576 px（手機直式）
  - (2) `sm` 範圍 576 px～767px（手機橫式）
  - (3) `md` 範圍 768 px～991px（平板直式）
  - (4) `lg` 範圍 992 px～1199px（平板橫式）
  - (5) `xl` >= 1200 px（一般螢幕）
2. 可以同時用多個斷點，例如：`col-sm-4 col-md-3`，意思就是用手機直看時，該區域寬度佔4欄（畫面分為三欄式），用手機橫看時，該區域寬度佔3欄（畫面分為四欄式）。
 
### 五、 BootStrap4 間隔工具

1. 間隔工具的組成為「屬性邊緣-尺寸」，如`.m-3`、`.pt-5`、`py-1`...等。
2. 屬性設定：`m` 即 `margin`（外距），`p` 即 `padding`（內距）
3. 邊緣設定：`t`（即`top`）、`b`（即`bottom`）、`l`（即`left`）、`r`（即`right`）、`x`（即`left `和`right`）、`y`（即`top`和`bottom`）、空白則是設定元素的四個邊緣。
4. 尺寸設定：0~5個空白空間。
5. 詳情：<http://bootstrap.hexschool.com/docs/4.0/utilities/spacing/>
 
### 六、 假文產生器 <http://more.handlino.com/>

1. 載入假文產生器的js ```
  <pre class="brush:jscript;gutter:false;">
  <script src="http://more.handlino.com/javascripts/moretext-1.2.js" type="text/javascript"></script>
  ```
2. 在容器中套用（產生3句，每句20到50個中文字之間） ```
  <pre class="brush:xml;gutter:false;">
  <p class="lipsum(3,20-50)"></p>
  ```
 
### 七、 BootStrap4簡易導覽工具

1. 如果只需要單純選項，最基本架構如下，其中`<nav>`亦可換成`<ul>`： ```
  <pre class="brush:xml;gutter:false;">
  <nav class="nav"></nav>
  ```
2. 選項部份，其中`<a>`亦可換成`<li class="nav-item">`： ```
  <pre class="brush:xml;gutter:false;">
  <a class="nav-link text-white active" href="index.php">首頁</a>
  ```
3. `.nav-link`會讓選項較寬大；`.text-white`設成白色文字；`.active`指作用中選項。
4. 詳情：<http://bootstrap.hexschool.com/docs/4.0/components/navs/>
 
### 八、 利用javascript來製作隨機底圖（補充）

1. 先宣告javascript陣列（當然要準備這幾張圖） ```
  <pre class="brush:jscript;gutter:false;">
  var images = ['pic1.jpg', 'pic2.jpg', 'pic3.jpg'];
  ```
2. 隨機取得某個陣列值 ```
  <pre class="brush:jscript;gutter:false;">
  images[Math.floor(Math.random() * images.length)]
  ```
3. `Math.random()`會產生 0到0.9999...的小數
4. `images.length`是陣列數量，兩者相乘（\*3）會變成 0 ~ 2.9999...的小數
5. `Math.floor()`只取最大整數部份，所以，會產生0~2之間的整數，亦即陣列索引 ```
  <pre class="brush:jscript;gutter:false;">
  <script type="text/javascript ">
      $(document).ready(function () {
          var images = ['pic.jpg', 'pic2.jpg', 'pic3.jpg'];
          $('.img-container').css({ 'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')' });
      });
  </script>
  ```
 
### 九、 BootStrap4表單

1. 在 Visual Studio Code 中輸入`b4-form-grid`按 <kbd>Enter</kbd>可以快速產生一整組表單語法。
2. 在一般的HTML中`<fieldset>`和`<legend>`是有其獨特用途和外觀的，但在 BS4 的表單中，`<fieldset>`等同`<div>`，`<legend>`等同`<label>`，因此，擇一即可，效果是一樣的。
3. 在 Visual Studio Code 中輸入`b4-form-group`按 <kbd>Enter</kbd> 可以快速產生一組表單元件群組的語法。 「表單群組」是指一組用`.form-group`容器中，包住「標籤+輸入元件」。
4. 「表單群組」預設為標籤在上，輸入框在下。
5. 若要做成標籤在左，輸入框在右的表單群組，在`.form-group`後要加一個`.row`，才能變成水平輸入表單。 
  - (1) 在`<label>`中要加入`.col-sm-*` 指定標籤空間大小，還要加入`.col-form-label`確保和輸入元件可以垂直對齊。
  - (2) `<input>`外面要用`<div>`包起來，並加入`.col-sm-*` 指定輸入框的空間大小
  - (3) 若是希望標籤可以靠右邊對齊，則可加入`.text-sm-right`，如此，只有螢幕大於576px時才會靠右，小螢幕時，最自動回到左上方。
  - (4) 如果要在欄位下方加上說明，可用`.form-text`，並用`.text-danger`來設定成紅色
 
### 十、 資料庫規劃

1. 若是不熟，建議先用試算表軟體，如：Calc或Excel來規劃一下（內含完整架構及模擬資料），順便想像一下需要的功能和欄位。
2. 啟動adminer或者直接連至 [http://localhost/us\_opt2/index.php](http://localhost/us_opt2/index.php)
3. 帳密預設為 root 及 12345，點擊「建立新資料庫」，如「`reporter`」，「校對」選擇「`utf8_general_ci`」  
   ![](https://www.tad0616.net/uploads/tad_book3/image/43/php26.png)
4. 點擊「建立資料表」，建立需要的資料表，例如「`article`」資料表 ，「引擎」請選「MyISAM」  
   ![](https://www.tad0616.net/uploads/tad_book3/image/43/php27.png)
5. 接著建立以下資料表： <table border="0" cellpadding="2" cellspacing="0" class="table table-bordered table-condensed table-hover table-striped" width="100%"> <colgroup> <col width="60*"></col> <col width="99*"></col> <col width="97*"></col> </colgroup> <thead> <tr> <th style="vertical-align: middle; text-align: center;">列</th> <th style="text-align: center; vertical-align: middle;">類型</th> <th style="text-align: center; vertical-align: middle;">註解</th> </tr> </thead> <tbody> <tr> <td style="vertical-align: middle;">sn</td> <td>mediumint(9) 自動遞增</td> <td>流水號</td> </tr> <tr> <td style="vertical-align: middle;">title</td> <td>varchar(255)</td> <td>文章標題</td> </tr> <tr> <td style="vertical-align: middle;">content</td> <td>text</td> <td>文章內容</td> </tr> <tr> <td style="vertical-align: middle;">create\_time</td> <td>datetime</td> <td>建立時間</td> </tr> <tr> <td style="vertical-align: middle;">update\_time</td> <td>datetime</td> <td>最後更新時間</td> </tr> </tbody> </table>
6. 注意，一定要有流水號（勾選AI，即自動遞增）  
   ![](https://www.tad0616.net/uploads/tad_book3/image/43/php28.png)
7. 最後，請匯出sql檔，以便下次使用。  
   ![](https://www.tad0616.net/uploads/tad_book3/image/43/php29.png)
 
### 十一、 為何需要使用適當欄位類型？

1. 節省空間：不同欄位類型佔用空間不同，往往可以差到好幾倍。
2. 降低開發難度：選用適當欄位類型可以減少許多檢查，例如`ENUM`，或設定適當索引
3. 避免錯誤：例如電話號碼就不可用數字欄位，避免0開頭被省略。
 
### 十二、 讓PHP7連線到MySQL資料庫

1. HTML網頁語法無法直接存取資料庫伺服器，需透過程式來介接。
2. 注意！PHP7已經不支援MySQL系列函數，而是改用MySQLi物件，或者PDO物件。
3. 使用PDO物件的好處是方便介接其他資料庫，而用MySQLi物件的優點則是其運作和早期MySQL較像，熟悉MySQL函數的話，幾乎可以無痛轉移。底下還是以MySQLi為範例。
4. 基本MySQL資料庫連線方法： ```
  <pre class="brush:php;gutter:false;">
  $db = new mysqli(_DB_HOST, _DB_ID, _DB_PASS, _DB_NAME);
  if ($db->connect_error) {
      die('無法連上資料庫：' . $db->connect_error);
  }
  $db->set_charset("utf8");
  ```
5. 指定欲連線的來源位置（一般為localhost），資料庫帳號、密碼及資料庫名稱。
6. 若無錯誤訊息，表示連線成功。連線後，需設定用utf8編碼來擷取資料。
 
### 十三、 常數設定

1. 常數是一定設定就不會變，和變數可以隨時指派其值不一樣。
2. 常數可以直接在函數中使用
3. 一般常數會以大寫前面加底線來辨識（實際上，不加底線或是用小寫也是可以）。
4. 常數定義方式： ```
  <pre class="brush:php;gutter:false;">
  define('常數名稱', '對應值');
  ```
5. 可作一個config.php檔，然後讓其他程式來引入。
 
### 十四、 if條件判斷

1. PHP的判斷式寫法 ```
  <pre class="brush:php;gutter:false;">
  if(判斷條件){
    //條件為真執行
  }elseif(判斷條件){
    //elseif的條件為真執行
  }else{
    //條件為假時執行
  }
  ```
2. Smarty的判斷式寫法 ```
  <pre class="brush:xml;gutter:false;">
  {if 判斷條件}
    //條件為真執行
  {elseif 判斷條件}
    //elseif 的條件為真執行
  {else}
    //條件為假時執行
  {/if}
  ```
3. 由上往下判斷，一旦為真，就執行指定動作。後面就不再繼續判斷。
4. `elseif `和 `else `均可省略，視情況使用即可。
5. `elseif `可以有很多組，其餘的只能有一組。若是太多`elseif`，建議改用`switch`
 
### 十五、 資料庫insert寫入語法

1. 要操作MySQL，必須用SQL語言，新增資料的SQL語法如下（大小寫無關）： ```
  <pre class="brush:sql;gutter:false;">
  INSERT [INTO] `資料表名稱` [(`欄位1`, `欄位2`...)] VALUES ('值1', '值2'...)
  ```
2. 建議凡是資料庫名稱、資料表名稱、欄位名稱都用重音符號```包起來。
3. 凡是「值」的，都用單引號`'`包起來。
 
### 十六、 用PHP來操作資料庫流程

1. 先完成連線，取得資料庫資源變數物件，例如：$db
2. 利用` $db->real_escape_string()` 過濾資料，目的是順利讓所有資料存入資料庫，並避免隱碼攻擊。如： ```
  <pre class="brush:php;gutter:false;">
  $title  = $db->real_escape_string($_POST['title']);
  ```
3. `$db->query($sql)` 就是送執行指令到資料庫。
4. `$db->error` 會秀出資料庫傳回來的錯誤訊息
5. 取得寫入時該資料產生的流水號：`$db->insert_id`
6. 凡是寫入、修改、刪除，進行完都應該做轉向，避免使用者重新整理畫面，又重複執行寫入、修改或刪除：`header("location: index.php?sn={$sn}");`
7. `header()`函數基本上是設定文件檔頭，其中 location屬性可以指定文件轉向，故利用之來達成轉向功能。 ```
  <pre class="brush:php;gutter:false;">
  if (isset($_POST['op']) and $_POST['op'] == "insert") {
      $db = new mysqli(_DB_HOST, _DB_ID, _DB_PASS, _DB_NAME);
      if ($db->connect_error) {
          die('無法連上資料庫：' . $db->connect_error);
      }
      $db->set_charset("utf8");
  
      $title   = $db->real_escape_string($_POST['title']);
      $content = $db->real_escape_string($_POST['content']);
      $sql     = "INSERT INTO `article` (`title`, `content`, `create_time`, `update_time`) VALUES('{$title}', '{$content}', now(), now())";
      $db->query($sql) or die($db->error . $sql);
      $sn = $db->insert_id;
      header("location: index.php?sn={$sn}");
  }
  ```
 
</body></html>

:::