Jill 筆記 - 線上書籍

:::

PHP從入門到放棄實戰班
============

### 一、網頁建構流程

1. 靜態網頁：常見副檔名為【.htm】、【.html】， 並不需要任何伺服器，可直接在<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: #ffffff; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">瀏覽器打開。
 - [HTML5](http://www.runoob.com/html/html5-intro.html)：也就是做網頁，用來撰寫系統外觀架構、表單...等。
 - [BootStrap4](http://bootstrap.hexschool.com/)：美化網頁用，快速導入自適應框架，讓您的系統在手機看起來也一樣美觀。
2. 動態網頁： <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: #ffffff; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">搭配伺服器與資料庫共同運作，<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: #ffffff; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">可以讓使用者操作送出資料，讓管理者收到使用者的需求。 
 - [PHP7](http://php.net/)： <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: #ffffff; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">可以與網頁做互動的編譯器。但PHP必須透過網頁伺服器去做編譯，所以需有網頁伺服器（如：[Apache](https://httpd.apache.org/)）。
 - [Smarty](https://www.smarty.net/)：PHP樣板引擎，讓版面製作變得更一致、更簡單。
 - [MySQL](https://www.mysql.com/)：也就是SQL資料庫語言，我們的資料都要放進資料庫中。
 
### 二、Visual Studio Code文字編輯器

1. Visual Studio Code編輯器官網：<https://code.visualstudio.com/> 請將之裝在D或E磁碟機。
2. 安裝繁體中文包：Chinese(Traditional)Language
3. 做好編輯器設定：(settings.json) 
 ```javascript
 {
 "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",
 }
 
 ```
4. 接著安裝以下套件： 
 - phpfmt：格式化PHP程式碼用，請加入設定： 
 ```javascript
 "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建立伺服器及資料庫環境(動態網頁用到)

1. [Uniform Server ZeroXIV](http://120.115.2.101/~jaile/uploads/tad_book3/file/14_0_2_ZeroXIV.exe) 伺服器環境（上課用）
2. C磁碟會還原，可在D或E磁碟安裝常用的可攜式軟體。
3. 預設會解壓縮到「磁碟代號:\\UniServerZ」。
4. 請開啟伺服器的控制台：\\UniServerZ\\UniController.exe。
5. 資料的帳號為root，密碼為root，若要修改，點擊控制台的「MySQL→Change MySQL password」即可修改MySQL密碼。
6. 啟動網頁伺服器：Start Apache及資料庫 Start MySQL。
7. 若有跳出防火牆訊息，一律選「是」 。
8. 若無法啟動UniForm Server或者Apache無法啟動，請以管理員身份安裝 [Visual Studio 2015 Visual C++ 可轉散發套件](http://120.115.2.101/~jaile/uploads/tad_book3/file/vc_redist.x86.exe)
9. 若80port被佔： <div class="alert alert-danger">
 1. 檢查是否有啟動IIS，請至「控制台→系統管理工具→IIS管理員」停止之即可。
 2. 檢查是否有啟動Skype或迅雷，若有請先關閉之。
 3. 開啟命令提示字元視窗，輸入以下指令： 
 netstat -ano 
 找出佔用Port 80的程式PID？ **倘若發現PID = 4，**請下達以下指令： 
 net stop http 
 Sc config start=disabled 
 這樣子問題應該就解決了。
 
 </div>
 
### 四、安裝 WebDeveloper 附加元件

1. WebDeveloper 附加元件：<https://addons.mozilla.org/zh-tw/firefox/addon/web-developer/>
2. chrome: WebDeveloper: <https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=zh-TW>

MarkDown