線上書籍

Home

[1062] PHP7入門

一、 關於本課程
  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:這是為了下一學期要寫XOOPS模組所必備的基本能力。
  2. MySQL:也就是SQL資料庫語言,我們的資料都要放進資料庫中。
  3. HTML5:也就是做網頁,用來撰寫系統外觀架構、表單...等。
  4. CSS3:用來美化系統外觀(HTML5和CSS3是上學期的課,本學期不再詳述)
  5. BootStrap4:快速導入自適應框架,讓您的系統在手機看起來也一樣美觀。
  6. Smarty: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. 做好編輯器設定: { "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程式碼用,請加入設定: "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. 常用快捷鍵:

    • 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/
四、 程式運行環境
  1. 需有網頁伺服器(如:Apache),因為PHP必須依附在網頁伺服器中。
  2. 需有資料庫(如:MySQLMariaDB),用來放填入的資料
  3. 在家中沒有伺服器或者沒有網路的環境,可裝Uniform ServerXAMPP,請勿用AppServ這個殘缺的東西!
  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基本寫法: <?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. 輸入 ! ,然後按 tab鍵 建立基礎HTML5頁面,請存成index.tpl。
  2. 輸入 b4-$ ,然後按 tab鍵 可建立含BootStrap4的基本頁面。
  3. 可在 <body> 中輸入 .container ,然後按 tab鍵 來產生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 並解壓縮到網頁目錄 D:\UniServerZ\www 下即可。
十、 Smarty基本操作
  1. 和外觀有關的東西都放到樣板中,所需的資料全由.php提供,如:index.php內容: <?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> 中的內容: <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="名稱">預設值</textarea>
十三、 接收表單變數
  1. 例如表單有個: <input type="text"  name="title"> ,表單送出後,方法若用post,那麼會得到 $_POST['title'] 變數;若是用 get,那就是 $_GET['title']
  2. 用echo 印出變數:字串請用雙引號包起來;變數若要放在字串中,請用{}隔開。
  3. 可用 if(條件){為真}else{為假} 來判斷變數是否存在。
十四、 善用註解
  1. // 這是PHP單行註解,自己一行,或者放在程式後面都可以
  2. /* 這是PHP多行註解,中間可以有很多行 */
  3. <!-- 這是 HTML 的註解,別搞混了 -->
  4. 在編輯器中按 Ctrl + / 即可產生適當的註解符號。
十五、 本學期主題:公民新聞報導系統
  1. 參考網站:https://www.twreporter.org/
  2. 仔細研究一下該網站有什麼特色?