:::

1. 建構開發環境與系統規劃

一、關於本課程

講義：https://www.tad0616.net/43
本課程是系列中的第三個學程，屬較進階部份，因此，有任何聽不懂的：隨時發問！
上課歡迎起來走動，互相觀摩交流，盡量別保持安靜。飲食部份請至走廊食用。
上課時間為週六9:00～12:00及13:30～16:30，共計九次。
上課歡迎拍照、錄音、錄影，能和同學分享更好。
座位基本上沒有強制性，但也不建議每次都換來換去。自備筆電更佳！
社大電腦C磁碟會還原，可在D磁碟安裝常用的可攜式軟體
記得認識一下助教！

二、這學期會學到...

PHP7：這是為了下一學期要寫XOOPS模組所必備的基本能力。
MySQL：也就是SQL資料庫語言，我們的資料都要放進資料庫中。
HTML5：也就是做網頁，用來撰寫系統外觀架構、表單...等。
CSS3：用來美化系統外觀（HTML5和CSS3是上學期的課，本學期不再詳述）
BootStrap4：快速導入自適應框架，讓您的系統在手機看起來也一樣美觀。
Smarty：PHP樣板引擎，讓版面製作變得更一致、更簡單。

三、開發工具：可攜式Visual Studio Code編輯器

基本上只要是自己熟悉的純文字或IDE編輯工具都可以。
Visual Studio Code編輯器官網：https://code.visualstudio.com/
本學期採用可攜式Visual Studio Code編輯器（https://gareth.flowers/vscode-portable/）請將之裝在D磁碟機。
建議安裝node.js https://nodejs.org/en/ ，讓功能更完整。

做好編輯器設定：

{
"workbench.colorTheme": "Monokai",
// 控制字型大小 (以像素為單位)。
"editor.fontSize": 18,
//  - 'bounded' (當檢視區縮至最小並設定 'editor.wordWrapColumn' 時換行).
"editor.wordWrap": "on",
// 控制編輯器是否應自動設定貼上的內容格式。格式器必須可供使用，而且格式器應該能夠設定文件中一個範圍的格式。
"editor.formatOnPaste": true,
// 使用滑鼠滾輪並按住 Ctrl 時，縮放編輯器的字型
"editor.mouseWheelZoom": true,
// 在儲存時設定檔案格式。格式器必須處於可用狀態、檔案不得自動儲存，且編輯器不得關機。
"editor.formatOnSave": true,
// 控制已變更之檔案的自動儲存。接受的值: 'off'、'afterDelay、'onFocusChange' (編輯器失去焦點)、'onWindowChange' (視窗失去焦點)。若設為 'afterDelay'，可以在 "files.autoSaveDelay" 中設定延遲。
"files.autoSave": "onFocusChange",
"files.associations": {
"*.tpl": "html"
},
// 指向 PHP 可執行檔。
"php.validate.executablePath": "D:/UniServerZ/core/php71/php.exe",
}

然後安裝以下套件：
- (1) phpfmt：格式化PHP程式碼用，請加入設定：
```
"phpfmt.php_bin": "D:/UniServerZ/core/php70/php.exe",
"phpfmt.format_on_save": true,
"phpfmt.indent_with_space": 4,
"phpfmt.enable_auto_align": true,
"phpfmt.visibility_order": true,
"phpfmt.passes": [],
"phpfmt.smart_linebreak_after_curly": true,
```
- (2) vscode-goto-documentation：快速文件搜尋
- (3) AutoFileName : 讓編輯器自動完成圖片或檔案路徑。
- (4) Auto Rename Tag : 讓成對的標籤自動一起修改。
- (5) Auto Close Tag : 讓標籤自動閉合的。
- (6) Bootstrap 4 & Font awesome snippets : 插入Bootstrap 4 或 Font awesome 語法片段。
- (7) stylefmt：美化CSS
常用快捷鍵：
- Ctrl+ N：建立新檔
- Ctrl+ C：複製
- Ctrl+ V：貼上
- Ctrl+ F：搜尋
- Ctrl+ Shift+ F：跨檔搜尋
- Ctrl+ H：取代
- Ctrl+ /：註解
- Ctrl+ `：開終端機
- Ctrl+ B：關閉左側工具
- Ctrl+ X：刪除目前行
- Ctrl+ G：跳至某行
- Ctrl+ end：跳至文件結尾
- Ctrl+ Z：回上個動作（復原）
- Ctrl+ Y：回下個動作（再做）
- shift+ alt+ F：美化（格式化）語法
- shift+ alt+ 滑鼠左鍵：區塊標記
- 完整快捷鍵整理：https://poychang.github.io/vscode/

四、程式運行環境

需有網頁伺服器（如：Apache），因為PHP必須依附在網頁伺服器中。
需有資料庫（如：MySQL或MariaDB），用來放填入的資料
在家中沒有伺服器或者沒有網路的環境，可裝Uniform Server 或 XAMPP，請勿用AppServ這個殘缺的東西！
- (1) 請下載： https://campus-xoops.tn.edu.tw/modules/tad_uploader/index.php?op=dlfile&cfsn=117&cat_sn=19
- (2) 執行UniController.exe可開啟控制台，依序點選Start MySQL及Start Apache啟動伺服器。
- (3) 若無法啟動，或者Apache無法啟動，請安裝Visual Studio 2015 Visual C++ 可轉散發套件
申請學生練習主機空間（http://stu.tncomu.tn.edu.tw）
- (1) 學生練習主機為Linux主機，僅社大學員可以申請（FTP及MySQL帳號）。
- (2) 使用期限為本學期，學期結束後，可能隨時會清除舊資料，故請自行備份。
- (3) 申請後，您的網站網址為：「http://stu.tncomu.tn.edu.tw/~帳號」
- (4) 資料庫和FTP帳號、密碼是一樣的！

五、幾個您要知道的位置（假設裝在D:）

網頁（程式）目錄的位置：D:\UniServerZ\www
- (1) 請在底下建立reporter資料夾
- (2) 請至Visual Studio Code編輯器開啟該資料夾以做為專案
資料庫的存放位置：D:\UniServerZ\core\mysql\data
PHP 設定檔 php.ini 的位置：D:\UniServerZ\core\php71\php_production.ini
MySQL設定檔 my.ini 的位置：D:\UniServerZ\core\mysql\my.ini
網站連結位置：http://電腦IP或http://localhost或http://127.0.0.1
phpMyAdmin 的連結位置：http://localhost/us_phpmyadmin

六、網站運作圖

七、 PHP基本語法

PHP基本寫法：

<?php
$title = '尚無文章標題';
echo $title;

請存到網頁目錄，如：D:\UniServerZ\www\index.php
PHP程式的副檔名一律為.php
PHP程式碼必須放在 <?php和 ?>的起始標記和結束標記符號中。
若是該檔案中只有純粹的PHP語法，並沒有其他的HTML語法，那麼，就不建議加上「 ?>」符號
PHP的變數都是 $開頭，中間不可有特殊符號，只能用底線，不可數字開頭，大小寫有別。
=是指派運算元，就是把右邊的值放入左邊的變數中。
在PHP中，凡是資料類型是字串的都必須用引號包起來，用雙引號或單引號都可以。
每一個PHP語句後要加上「 ;」結尾。
echo是PHP用來輸出資料的語言結構（不是函數），常用。
開啟瀏覽器，在網址列輸入「http://localhost/index.php」或「http://127.0.0.1/index.php」

八、建立樣板檔

輸入 !，然後按 tab鍵建立基礎HTML5頁面，請存成index.tpl。
輸入 b4-$，然後按 tab鍵可建立含BootStrap4的基本頁面。
可在 <body>中輸入 .container，然後按 tab鍵來產生BootStrap4的容器標籤。
表單語法： <form action="接收程式.php" method="傳送方式">表單</form>
- (1) action屬性：用來指定使用者填好的東西，要送去給哪個程式來執行。
- (2) method屬性：指定傳送方法，可以是 POST（建議）或 GET（預設）
- (3) 如果希望表單可以上傳，必須加入 enctype="multipart/form-data"
CSS樣式屬性以及可用的值可從這裡查詢：http://css.doyoe.com/properties/index.htm
顏色挑選工具：https://www.webpagefx.com/web-design/color-picker/

九、套用Smarty樣板

為讓程式歸程式，外觀歸外觀，可透過樣板引擎，將PHP變數傳給樣板檔，以顯示在畫面上。
樣板檔其實就是網頁檔，附檔名為tpl或html，裡面會有樣板語法。
Smarty的官網在：http://www.smarty.net
下載 smarty 3.1.30 並解壓縮到網頁目錄 D:\UniServerZ\www 下
將解壓縮後的目錄名稱改為 smarty 就好。
smarty目錄下，只要留下libs即可，其餘並不需要。
建立四個Smarty需要的目錄：
- (1) templates：放置原始樣板的目錄（一定會用到）
- (2) templates_c：編譯後的樣板目錄（需可寫入）
- (3) configs：設定目錄（不見得會用到）
- (4) cache：樣板快取目錄（需可寫入）
或直接下載整理好的 smarty 3.1.29 並解壓縮到網頁目錄 D:\UniServerZ\www 下即可。

十、 Smarty基本操作

和外觀有關的東西都放到樣板中，所需的資料全由.php提供，如：index.php內容：

<?php
require_once 'smarty/libs/Smarty.class.php';
$smarty  = new Smarty;
$title = '尚無文章標題';
$smarty->assign('title', $title);
$smarty->display('index.tpl');

樣板檔一律放至 templates 目錄中，
利用 $smarty->assign('樣板標籤名稱', $變數值);將變數送至樣板檔。
templates/index.tpl <body>中的內容：
```
<h2>{$title}</h2>
```
記得到編輯右下角點擊「純文字」，然後在上方中間，選擇替.tpl做關聯，並關聯至HTML
樣板標籤的寫法就是： {$樣板標籤名稱}
表單的重點語法就是下列的語法而已，其他語法都只是用來裝潢用的，不要也沒關係的。

十一、基礎的 input 表單元件

<input type="格式" name="名稱" value="預設值" placeholder="佔位字元">
常用有： text（文字框）、 hidden（隱藏框）、 password（密碼框）、 file（上傳）
其中的 name最重要！一定要有！因為 name送出後，會變成 PHP 的變數名稱。
可輸入 b4-form-group-text快速產生一整組BootStrap4的文字輸入欄位

十二、其他常用的表單元件 HTML 語法及屬性

用 <button type=”submit”>按鈕文字</button>可做出按鈕效果
單選框： <input type="radio" name="名稱" value="值 1">選項文字 1
- (1) 單選框通常會有好幾個選項，一組選項就要一組 <input>，name 都要一樣才行！
- (2) 若要預設選取，要加上 checked="checked"
複選框： <input type="checkbox" name="名稱[]" value="值 1">選項文字 1
- (1) 複選框通常同時會有好幾個選項，一組選項就要一組 <input>
- (2) name 都要一樣才行！而且因為是複選，所以 name 要加上 []，如此會送出陣列。
- (3) 若要預設選取，要加上 checked="checked"
下拉選單： <select name="名稱" size=1>選項</select>
- (1) 選項： <option value="值">選項文字</option>
- (2) 若要預設選取：要在<option>中加入 selected="selected"
- (3) 若希望下拉選單可以複選，除了 name 要加上 []外，還要加上 multiple屬性。
大量文字框： <textarea name="名稱">預設值</textarea>

十三、接收表單變數

例如表單有個： <input type="text" name="title">，表單送出後，方法若用post，那麼會得到 $_POST['title'] 變數；若是用 get，那就是 $_GET['title']
用echo 印出變數：字串請用雙引號包起來；變數若要放在字串中，請用{}隔開。
可用 if(條件){為真}else{為假}來判斷變數是否存在。