1-1
安裝開發環境
一、網頁建構流程
- 靜態網頁：常見副檔名為【.htm】、【.html】， 並不需要任何伺服器，可直接在瀏覽器打開。
- HTML5：也就是做網頁，用來撰寫系統外觀架構、表單...等。
- BootStrap4：美化網頁用，快速導入自適應框架，讓您的系統在手機看起來也一樣美觀。
- 動態網頁： 搭配伺服器與資料庫共同運作，可以讓使用者操作送出資料，讓管理者收到使用者的需求。
- PHP7： 可以與網頁做互動的編譯器。但PHP必須透過網頁伺服器去做編譯，所以需有網頁伺服器（如：Apache）。
- Smarty：PHP樣板引擎，讓版面製作變得更一致、更簡單。
- MySQL：也就是SQL資料庫語言，我們的資料都要放進資料庫中。
二、Visual Studio Code文字編輯器
- Visual Studio Code編輯器官網：https://code.visualstudio.com/ 請將之裝在D或E磁碟機。
- 安裝繁體中文包：Chinese(Traditional)Language
- 做好編輯器設定：(settings.json)
{
"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": "E:/UniServerZ/core/php74/php.exe",
}
- 接著安裝以下套件：
- phpfmt：格式化PHP程式碼用，請加入設定：
"phpfmt.php_bin": "E:/UniServerZ/core/php74/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,
- vscode-goto-documentation：快速文件搜尋
- AutoFileName : 讓編輯器自動完成圖片或檔案路徑。
- Auto Rename Tag : 讓成對的標籤自動一起修改。
- Auto Close Tag : 讓標籤自動閉合的。
- Bootstrap 4 & Font awesome snippets : 插入Bootstrap 4 或 Font awesome 語法片段。
- stylefmt：美化CSS。
- Beauty：格式化HTML。
三、以UniForm Server建立伺服器及資料庫環境(動態網頁用到)
- Uniform Server ZeroXIV 伺服器環境（上課用）
- C磁碟會還原，可在D或E磁碟安裝常用的可攜式軟體。
- 預設會解壓縮到「磁碟代號:\UniServerZ」。
- 請開啟伺服器的控制台：\UniServerZ\UniController.exe。
- 資料的帳號為root，密碼為root，若要修改，點擊控制台的「MySQL→Change MySQL password」即可修改MySQL密碼。
- 啟動網頁伺服器：Start Apache及資料庫 Start MySQL。
- 若有跳出防火牆訊息，一律選「是」 。
- 若無法啟動UniForm Server或者Apache無法啟動，請以管理員身份安裝 Visual Studio 2015 Visual C++ 可轉散發套件
- 若80port被佔：
- 檢查是否有啟動IIS，請至「控制台→系統管理工具→IIS管理員」停止之即可。
- 檢查是否有啟動Skype或迅雷，若有請先關閉之。
- 開啟命令提示字元視窗，輸入以下指令：
netstat -ano
找出佔用Port 80的程式PID？ 倘若發現PID = 4，請下達以下指令：
net stop http
Sc config start=disabled
這樣子問題應該就解決了。
四、安裝 WebDeveloper 附加元件
- WebDeveloper 附加元件：https://addons.mozilla.org/zh-tw/firefox/addon/web-developer/
- chrome: WebDeveloper: https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=zh-TW
1. 實戰之前