2. 寫入資料到資料庫

一、自製BootStrap4頁面

先前用的是CDN方式來製作，需在網路連線狀態才得以開發，亦可自製離線版基本頁面。
先下載最新版 bootstrap4：http://bootstrap.hexschool.com/docs/4.0/getting-started/download/。下載後，存到網頁目錄下，並解壓縮，會得到 js 及 css 兩個資料夾。
由於BootStrap4拿掉了圖示，所以，我們可以直接到 http://fontawesome.io/ 下載，解壓後，將 fonts 及 css 複製到網頁目錄下。
接著下載 jquery：https://jquery.com/download/，並存入 js 資料夾中
最後下載popper.js存入 js 資料夾中（bootstrap4 選單會用到）：https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

我們可以在css下新增一個my.css檔案，以便放置自己的CSS樣式設定。

<!DOCTYPE html>
<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）

概念：容器中設定圖片背景，初次載入或調整視窗大小時，會自動調整容器符合螢幕大小。
新增一組.img-container容器，至my.css加入背景圖樣式設定
圖檔抓取可至：https://pixabay.com/ 下載，無須裁切

CSS完整屬性手冊：http://css.doyoe.com/properties/index.htm

.img-container {
  background: url('../images/pic.jpg') center center/cover no-repeat gray;
}

background-size屬性值cover是把圖放大到填滿整個容器，圖片可能無法完整顯示。contain則是會依照容器大小完整顯示圖片，會造成容器部份空間無法覆蓋到。
若用整合性寫法，背景尺寸要放在位置後面，並且記得加上/才有效果。
利用jquery可以偵測各種事件，並指定執行動作，例如畫面載入完要執行的動作可用：
```
$(document).ready(function () {
    //執行動作
});
```

若視窗大小有調整，則事件為：

$(window).resize(function () {
    //執行動作
});

動態套用某元素樣式值的作法為：
```
$("挑選器").css('屬性名稱', '值');
```
動態偵測視窗的寬、高值的作法為：
```
$(window).width();
$(window).height();
```
完整jquery用法可參考：http://www.css88.com/jqapi-1.9/

將以上這些東西整合起來（需放在引入jquery.js之後）：

<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容器及網格概念

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

四、 BootStrap4斷點

所謂斷點，在這裡指的是當螢幕尺寸符合斷點規範的大小時，才會根據斷點設定來實施網格系統（例如左邊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（一般螢幕）
可以同時用多個斷點，例如：col-sm-4 col-md-3，意思就是用手機直看時，該區域寬度佔4欄（畫面分為三欄式），用手機橫看時，該區域寬度佔3欄（畫面分為四欄式）。

五、 BootStrap4 間隔工具

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

六、假文產生器 http://more.handlino.com/

載入假文產生器的js

<script src="http://more.handlino.com/javascripts/moretext-1.2.js" type="text/javascript"></script>

在容器中套用（產生3句，每句20到50個中文字之間）
```
<p class="lipsum(3,20-50)"></p>
```

七、 BootStrap4簡易導覽工具

如果只需要單純選項，最基本架構如下，其中<nav>亦可換成<ul>：
```
<nav class="nav"></nav>
```

選項部份，其中<a>亦可換成<li class="nav-item">：

<a class="nav-link text-white active" href="index.php">首頁</a>

.nav-link會讓選項較寬大；.text-white設成白色文字；.active指作用中選項。
詳情：http://bootstrap.hexschool.com/docs/4.0/components/navs/

八、利用javascript來製作隨機底圖（補充）

先宣告javascript陣列（當然要準備這幾張圖）
```
var images = ['pic1.jpg', 'pic2.jpg', 'pic3.jpg'];
```

隨機取得某個陣列值

images[Math.floor(Math.random() * images.length)]

Math.random()會產生 0到0.9999...的小數
images.length是陣列數量，兩者相乘（*3）會變成 0 ~ 2.9999...的小數

Math.floor()只取最大整數部份，所以，會產生0~2之間的整數，亦即陣列索引

<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表單

在 Visual Studio Code 中輸入b4-form-grid按 Enter可以快速產生一整組表單語法。
在一般的HTML中<fieldset>和<legend>是有其獨特用途和外觀的，但在 BS4 的表單中，<fieldset>等同<div>，<legend>等同<label>，因此，擇一即可，效果是一樣的。
在 Visual Studio Code 中輸入b4-form-group按 Enter 可以快速產生一組表單元件群組的語法。「表單群組」是指一組用.form-group容器中，包住「標籤+輸入元件」。
「表單群組」預設為標籤在上，輸入框在下。
若要做成標籤在左，輸入框在右的表單群組，在.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來設定成紅色

十、資料庫規劃

若是不熟，建議先用試算表軟體，如：Calc或Excel來規劃一下（內含完整架構及模擬資料），順便想像一下需要的功能和欄位。
啟動adminer或者直接連至 http://localhost/us_opt2/index.php
帳密預設為 root 及 12345，點擊「建立新資料庫」，如「reporter」，「校對」選擇「utf8_general_ci」
點擊「建立資料表」，建立需要的資料表，例如「article」資料表，「引擎」請選「MyISAM」

接著建立以下資料表：

列	類型	註解
sn	mediumint(9) 自動遞增	流水號
title	varchar(255)	文章標題
content	text	文章內容
create_time	datetime	建立時間
update_time	datetime	最後更新時間

注意，一定要有流水號（勾選AI，即自動遞增）
最後，請匯出sql檔，以便下次使用。

十一、為何需要使用適當欄位類型？

節省空間：不同欄位類型佔用空間不同，往往可以差到好幾倍。
降低開發難度：選用適當欄位類型可以減少許多檢查，例如ENUM，或設定適當索引
避免錯誤：例如電話號碼就不可用數字欄位，避免0開頭被省略。

十二、讓PHP7連線到MySQL資料庫

HTML網頁語法無法直接存取資料庫伺服器，需透過程式來介接。
注意！PHP7已經不支援MySQL系列函數，而是改用MySQLi物件，或者PDO物件。
使用PDO物件的好處是方便介接其他資料庫，而用MySQLi物件的優點則是其運作和早期MySQL較像，熟悉MySQL函數的話，幾乎可以無痛轉移。底下還是以MySQLi為範例。

基本MySQL資料庫連線方法：

$db = new mysqli(_DB_HOST, _DB_ID, _DB_PASS, _DB_NAME);
if ($db->connect_error) {
    die('無法連上資料庫：' . $db->connect_error);
}
$db->set_charset("utf8");

指定欲連線的來源位置（一般為localhost），資料庫帳號、密碼及資料庫名稱。
若無錯誤訊息，表示連線成功。連線後，需設定用utf8編碼來擷取資料。

十三、常數設定

常數是一定設定就不會變，和變數可以隨時指派其值不一樣。
常數可以直接在函數中使用
一般常數會以大寫前面加底線來辨識（實際上，不加底線或是用小寫也是可以）。
常數定義方式：
```
define('常數名稱', '對應值');
```
可作一個config.php檔，然後讓其他程式來引入。

十四、 if條件判斷

PHP的判斷式寫法

if(判斷條件){
  //條件為真執行
}elseif(判斷條件){
  //elseif的條件為真執行
}else{
  //條件為假時執行
}

Smarty的判斷式寫法

{if 判斷條件}
  //條件為真執行
{elseif 判斷條件}
  //elseif 的條件為真執行
{else}
  //條件為假時執行
{/if}

由上往下判斷，一旦為真，就執行指定動作。後面就不再繼續判斷。
elseif 和 else 均可省略，視情況使用即可。
elseif 可以有很多組，其餘的只能有一組。若是太多elseif，建議改用switch

十五、資料庫insert寫入語法

要操作MySQL，必須用SQL語言，新增資料的SQL語法如下（大小寫無關）：
```
INSERT [INTO] `資料表名稱` [(`欄位1`, `欄位2`...)] VALUES ('值1', '值2'...)
```
建議凡是資料庫名稱、資料表名稱、欄位名稱都用重音符號`包起來。
凡是「值」的，都用單引號'包起來。

十六、用PHP來操作資料庫流程

先完成連線，取得資料庫資源變數物件，例如：$db
利用 $db->real_escape_string() 過濾資料，目的是順利讓所有資料存入資料庫，並避免隱碼攻擊。如：
```
$title  = $db->real_escape_string($_POST['title']);
```
$db->query($sql) 就是送執行指令到資料庫。
$db->error 會秀出資料庫傳回來的錯誤訊息
取得寫入時該資料產生的流水號：$db->insert_id
凡是寫入、修改、刪除，進行完都應該做轉向，避免使用者重新整理畫面，又重複執行寫入、修改或刪除：header("location: index.php?sn={$sn}");

header()函數基本上是設定文件檔頭，其中 location屬性可以指定文件轉向，故利用之來達成轉向功能。

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}");
}

1-5 templates/index.tpl