MarkDown

\[1062\] PHP7入門 =============== [](https://www.tad0616.net/uploads/tad_book3/file/43/01.pdf) ### 一、 關於本課程 1. 講義：<https://www.tad0616.net/43> 2. 本課程是系列中的第三個學程，屬較進階部份，因此，有任何聽不懂的：隨時發問！ 3. 上課歡迎起來走動，互相觀摩交流，盡量別保持安靜。飲食部份請至走廊食用。 4. 上課時間為週六9:00～12:00及13:30～16:30，共計九次。 5. 上課歡迎拍照、錄音、錄影，能和同學分享更好。 6. 座位基本上沒有強制性，但也不建議每次都換來換去。自備筆電更佳！ 7. 社大電腦C磁碟會還原，可在D磁碟安裝常用的可攜式軟體 8. 記得認識一下助教！ ### 二、 這學期會學到... 1. [PHP7](http://php.net/)：這是為了下一學期要寫XOOPS模組所必備的基本能力。 2. [MySQL](https://www.mysql.com/)：也就是SQL資料庫語言，我們的資料都要放進資料庫中。 3. [HTML5](http://www.runoob.com/html/html5-intro.html)：也就是做網頁，用來撰寫系統外觀架構、表單...等。 4. [CSS3](http://www.runoob.com/css3/css3-tutorial.html)：用來美化系統外觀（HTML5和CSS3是上學期的課，本學期不再詳述） 5. [BootStrap4](http://bootstrap.hexschool.com/)：快速導入自適應框架，讓您的系統在手機看起來也一樣美觀。 6. [Smarty](https://www.smarty.net/)：PHP樣板引擎，讓版面製作變得更一致、更簡單。 ### 三、 開發工具：可攜式Visual Studio Code編輯器 1. 基本上只要是自己熟悉的純文字或IDE編輯工具都可以。 2. Visual Studio Code編輯器官網：<https://code.visualstudio.com/> 3. 本學期採用可攜式Visual Studio Code編輯器（<https://gareth.flowers/vscode-portable/>）請將之裝在D磁碟機。 4. 建議安裝node.js <https://nodejs.org/en/> ，讓功能更完整。 5. 做好編輯器設定： ``` <pre class="brush:jscript;gutter:false;"> { "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", } ``` 6. 然後安裝以下套件： - (1) phpfmt：格式化PHP程式碼用，請加入設定： ``` <pre class="brush:jscript;gutter:false;"> "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 7. 常用快捷鍵： - <kbd>Ctrl </kbd>+ <kbd>N </kbd>：建立新檔 - <kbd>Ctrl </kbd>+ <kbd>C </kbd>：複製 - <kbd>Ctrl </kbd>+ <kbd>V </kbd>：貼上 - <kbd>Ctrl </kbd>+ <kbd>F </kbd>：搜尋 - <kbd>Ctrl </kbd>+ <kbd>Shift </kbd>+ <kbd>F </kbd>：跨檔搜尋 - <kbd>Ctrl </kbd>+ <kbd>H </kbd>：取代 - <kbd>Ctrl </kbd>+ <kbd>/ </kbd>：註解 - <kbd>Ctrl </kbd>+ <kbd>` </kbd>：開終端機 - <kbd>Ctrl </kbd>+ <kbd>B </kbd>：關閉左側工具 - <kbd>Ctrl </kbd>+ <kbd>X </kbd>：刪除目前行 - <kbd>Ctrl </kbd>+ <kbd>G </kbd>：跳至某行 - <kbd>Ctrl </kbd>+ <kbd>end </kbd>：跳至文件結尾 - <kbd>Ctrl </kbd>+ <kbd>Z </kbd>：回上個動作（復原） - <kbd>Ctrl </kbd>+ <kbd>Y </kbd>：回下個動作（再做） - <kbd>shift </kbd>+ <kbd>alt </kbd>+ <kbd>F </kbd>：美化（格式化）語法 - <kbd>shift </kbd>+ <kbd>alt </kbd>+ <kbd>滑鼠左鍵 </kbd>：區塊標記 - 完整快捷鍵整理：<https://poychang.github.io/vscode/> ### 四、 程式運行環境 1. 需有網頁伺服器（如：[Apache](https://httpd.apache.org/)），因為PHP必須依附在網頁伺服器中。 2. 需有資料庫（如：[MySQL](https://www.mysql.com/)或[MariaDB](https://mariadb.org/)），用來放填入的資料 3. 在家中沒有伺服器或者沒有網路的環境，可裝[Uniform Server](http://www.uniformserver.com) 或 [XAMPP](https://www.apachefriends.org)，請勿用AppServ這個殘缺的東西！ - (1) 請下載： [https://campus-xoops.tn.edu.tw/modules/tad\_uploader/index.php?op=dlfile&cfsn=117&cat\_sn=19](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++ 可轉散發套件](https://campus-xoops.tn.edu.tw/modules/tad_uploader/index.php?op=dlfile&cfsn=110&cat_sn=11&name=vc_redist.x86.exe) 4. 申請學生練習主機空間（<http://stu.tncomu.tn.edu.tw>） - (1) 學生練習主機為Linux主機，僅社大學員可以申請（FTP及MySQL帳號）。 - (2) 使用期限為本學期，學期結束後，可能隨時會清除舊資料，故請自行備份。 - (3) 申請後，您的網站網址為：「http://stu.tncomu.tn.edu.tw/~帳號」 - (4) 資料庫和FTP帳號、密碼是一樣的！ ### 五、 幾個您要知道的位置（假設裝在D:） 1. 網頁（程式）目錄的位置：D:\\UniServerZ\\www - (1) 請在底下建立reporter資料夾 - (2) 請至Visual Studio Code編輯器開啟該資料夾以做為專案 2. 資料庫的存放位置：D:\\UniServerZ\\core\\mysql\\data 3. PHP 設定檔 php.ini 的位置：D:\\UniServerZ\\core\\php71\\php\_production.ini 4. MySQL設定檔 my.ini 的位置：D:\\UniServerZ\\core\\mysql\\my.ini 5. 網站連結位置：http://電腦IP或http://localhost或http://127.0.0.1 6. phpMyAdmin 的連結位置：http://localhost/us\_phpmyadmin ### 六、 網站運作圖  ### 七、 PHP基本語法 1. PHP基本寫法： ``` <pre class="brush:php;gutter:false;"> <?php $title = '尚無文章標題'; echo $title; ``` 2. 請存到網頁目錄，如：D:\\UniServerZ\\www\\index.php 3. PHP程式的副檔名一律為.php 4. PHP程式碼必須放在 `<?php `和 `?> `的起始標記和結束標記符號中。 5. 若是該檔案中只有純粹的PHP語法，並沒有其他的HTML語法，那麼，就不建議加上「 `?> `」符號 6. PHP的變數都是 `$ `開頭，中間不可有特殊符號，只能用底線，不可數字開頭，大小寫有別。 7. `= `是指派運算元，就是把右邊的值放入左邊的變數中。 8. 在PHP中，凡是資料類型是字串的都必須用引號包起來，用雙引號或單引號都可以。 9. 每一個PHP語句後要加上「 `; `」結尾。 10. `echo `是PHP用來輸出資料的語言結構（不是函數），常用。 11. 開啟瀏覽器，在網址列輸入「http://localhost/index.php」或「http://127.0.0.1/index.php」 ### 八、 建立樣板檔 1. 輸入 `! `，然後按 <kbd>tab鍵 </kbd>建立基礎HTML5頁面，請存成index.tpl。 2. 輸入 `b4-$ `，然後按 <kbd>tab鍵 </kbd>可建立含BootStrap4的基本頁面。 3. 可在 `<body> `中輸入 `.container `，然後按 <kbd>tab鍵 </kbd>來產生BootStrap4的容器標籤。 4. 表單語法： `<form action="接收程式.php" method="傳送方式">表單</form> ` - (1) `action `屬性：用來指定使用者填好的東西，要送去給哪個程式來執行。 - (2) `method `屬性：指定傳送方法，可以是 POST（建議）或 GET（預設） - (3) 如果希望表單可以上傳，必須加入 `enctype="multipart/form-data" ` 5. CSS樣式屬性以及可用的值可從這裡查詢：<http://css.doyoe.com/properties/index.htm> 6. 顏色挑選工具：<https://www.webpagefx.com/web-design/color-picker/> ### 九、 套用Smarty樣板 1. 為讓程式歸程式，外觀歸外觀，可透過樣板引擎，將PHP變數傳給樣板檔，以顯示在畫面上。 2. 樣板檔其實就是網頁檔，附檔名為tpl或html，裡面會有樣板語法。 3. Smarty的官網在：<http://www.smarty.net> 4. 下載 smarty 3.1.30 並解壓縮到網頁目錄 D:\\UniServerZ\\www 下 5. 將解壓縮後的目錄名稱改為 smarty 就好。 6. smarty目錄下，只要留下libs即可，其餘並不需要。 7. 建立四個Smarty需要的目錄： - (1) templates：放置原始樣板的目錄（一定會用到） - (2) templates\_c：編譯後的樣板目錄（需可寫入） - (3) configs：設定目錄（不見得會用到） - (4) cache：樣板快取目錄（需可寫入） 8. 或直接[下載整理好的 smarty 3.1.29](https://campus-xoops.tn.edu.tw/modules/tad_uploader/index.php?op=dlfile&cfsn=120&cat_sn=17) 並解壓縮到網頁目錄 D:\\UniServerZ\\www 下即可。 ### 十、 Smarty基本操作 1. 和外觀有關的東西都放到樣板中，所需的資料全由.php提供，如：index.php內容： ``` <pre class="brush:php;gutter:false;"> <?php require_once 'smarty/libs/Smarty.class.php'; $smarty = new Smarty; $title = '尚無文章標題'; $smarty->assign('title', $title); $smarty->display('index.tpl'); ``` 2. 樣板檔一律放至 templates 目錄中， 3. 利用 ` $smarty->assign('樣板標籤名稱', $變數值); `將變數送至樣板檔。 4. templates/index.tpl `<body> `中的內容： ``` <pre class="brush:xml;gutter:false;"> <h2>{$title}</h2> ``` 5. 記得到編輯右下角點擊「純文字」，然後在上方中間，選擇替.tpl做關聯，並關聯至HTML 6. 樣板標籤的寫法就是： `{$樣板標籤名稱} ` 7. 表單的重點語法就是下列的語法而已，其他語法都只是用來裝潢用的，不要也沒關係的。 ### 十一、 基礎的 input 表單元件 1. `<input type="格式" name="名稱" value="預設值" placeholder="佔位字元"> ` 2. 常用有： `text `（文字框）、 `hidden `（隱藏框）、 `password `（密碼框）、 `file `（上傳） 3. 其中的 `name `最重要！一定要有！因為 `name `送出後，會變成 PHP 的變數名稱。 4. 可輸入 `b4-form-group-text `快速產生一整組BootStrap4的文字輸入欄位 ### 十二、 其他常用的表單元件 HTML 語法及屬性 1. 用 `<button type=”submit”>按鈕文字</button> `可做出按鈕效果 2. 單選框： `<input type="radio" name="名稱"  value="值 1">選項文字 1 ` - (1) 單選框通常會有好幾個選項，一組選項就要一組 `<input> `，name 都要一樣才行！ - (2) 若要預設選取，要加上 ` checked="checked" ` 3. 複選框： `<input type="checkbox" name="名稱[]"  value="值 1">選項文字 1 ` - (1) 複選框通常同時會有好幾個選項，一組選項就要一組 `<input> ` - (2) name 都要一樣才行！而且因為是複選，所以 name 要加上 `[] `，如此會送出陣列。 - (3) 若要預設選取，要加上 `checked="checked" ` 4. 下拉選單： `<select name="名稱" size=1>選項</select> ` - (1) 選項： `<option value="值">選項文字</option> ` - (2) 若要預設選取：要在<option>中加入 `selected="selected" ` - (3) 若希望下拉選單可以複選，除了 name 要加上 `[] `外，還要加上 `multiple `屬性。 5. 大量文字框： `<textarea name="名稱">預設值 ` ### 十三、 接收表單變數 1. 例如表單有個： ` `，表單送出後，方法若用post，那麼會得到 `$_POST['title'] ` 變數；若是用 get，那就是 `$_GET['title'] ` 2. 用echo 印出變數：字串請用雙引號包起來；變數若要放在字串中，請用{}隔開。 3. 可用 `if(條件){為真}else{為假} `來判斷變數是否存在。 ### 十四、 善用註解 1. `// `這是PHP單行註解，自己一行，或者放在程式後面都可以 2. `/* `這是PHP多行註解，中間可以有很多行 ` */ ` 3. ` ` 4. 在編輯器中按 Ctrl + / 即可產生適當的註解符號。 ### 十五、 本學期主題：公民新聞報導系統 1. 參考網站： 2. 仔細研究一下該網站有什麼特色？