--- title: 環境建置作業設定 tags: 泰職_前端網頁開發, CH01, 2H date: 2019-10-04 --- # 開始安裝你的網路測試環境 [TOC] > [name=Loki Jiang] [time=Sun, Jun 2, 2019 10:22 PM] --- ## Xmapp 快速架站包，內容包含Apache(PHP+HTTP Server)、MySQL(MariaDB)、FileZilla(FTP Server) - Xmapp下載 - xampp-win64-x.x.xx-x-VCxx.zip→**免安裝版本，此免安裝版本保留了安裝版本該有的工具，例如說：如果你要架設FileZilla FTP伺服器或者是Mercury郵件伺服器，那你就要下載此版本。 - xampp-portable-win64-x.x.xx-x-VCxx.zip→**免安裝版本，此免安裝版本為瘦身版，因為此版本移除，如：FileZilla FTP伺服器與Mercury郵件伺服器等等的工具，所以XAMPP檔案體積也比較小。此版本也是筆者本教學所使用的版本。 - xampp-win64-x.x.xx-x-VCxx-installer.exe→**安裝檔版本，如果你要將XAMPP安裝至電腦，可以下載此版本。 - 解壓縮必須在隨身碟的根目錄，否則所有的參數都要調整檔案路徑。 ## 文字編輯器 主要是針對程式碼直接撰寫，市面上選擇很多，目前VS Code的使用比例最高，套件資源豐富。 - VS Code下載網址 https://code.visualstudio.com/ - 常用外掛套件 - Auto Close Tag - Auto Rename Tag - Bracket Pair Colorizer - Highlight Matching Tag - indent-rainbow - Path Intellisense - PHP Intelephense - PHP IntelliSense - Prettier - Code formatter - 環境設定 [齒輪]->[設定] - Auto Save 自動儲存:afterDelay - Tab Size 空格數 2 - setting.json :到最後一行添加以下參數編寫填入(注意結尾的逗號) ```json //for PHP IntelliSense, 讓vscode能看懂php幫你檢查錯誤或語法建議 "php.validate.executablePath": "C:/xampp/php/php.exe", "php.executablePath": "C:/xampp/php/php.exe", "php.suggest.basic": false ``` - 可攜免安裝 - 下載windows zip版本 - 主目錄下建立data資料夾[為主要的個人資料設定。每次打包以此遷移] - 將用戶數據目錄複製到`data`並重命名為`user-data`： - `%APPDATA%\Code` - 將extensions目錄複製到`data`： - `%USERPROFILE%\.vscode\extensions` ## 執行網頁伺服器 開始進行第一個網頁執行，從HTML開始到PHP，並試著印出函數phpinfo()做練習 - 建立檔案welcome.php嘗試輸入hello world，執行網頁localhost或127.0.0.1。 ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> 我是Loki </body> </html> ``` - 在並嘗試輸入h1, h2, h3, h4, h5, p, br, hr, table, 等常用HTML標籤 - 更名為index.php測試，效果為預設主頁，建立超連結標籤，表示如何導向連結。更多細節上W3CSCHOOL查看 ## 學校網頁伺服器 - 試著將上傳一個檔案index.php並填寫任意內容 :::success - **IP** : 220.128.133.15 - **WebURL** : http://220.128.133.15/s+`網路磁碟名稱`+`座號` - **MySQL Control** : http://220.128.133.15/大寫批俺ㄟ - **Account** : s+`網路磁碟名稱`+`座號` - **Password** : s+`網路磁碟名稱`+`座號` ::: ![](https://i.imgur.com/76sElJO.png) ![](https://i.imgur.com/nUFkvDI.png)