建立PHP & MySQL應用程式開發環境 - XAMPP安裝與測試
6 likes5,391 views
文档详细讲解了如何建立PHP和MySQL应用程序开发环境，包括手动安装Apache、PHP和MariaDB的步骤，及使用XAMPP安装的一系列指导。还涉及到如何配置MySQL、Apache的默认设置以及如何使用Dreamweaver创建和编辑网站。最后，还介绍了Notepad++作为文本编辑器的设定。
![shapethefuture
電子工程系
應 用 電 子 組
電 腦 遊 戲 設 計 組
/* Authentication type and info */
$cfg['Servers'][$i]['auth_type'] = 'cookie';
$cfg['Servers'][$i]['user'] = 'root';
$cfg['Servers'][$i]['password'] = 'your_password';
$cfg['Servers'][$i]['extension'] = 'mysql';
$cfg['Servers'][$i]['AllowNoPassword'] = true;
$cfg['Lang'] = '';
設定MySQL root帳號密碼 6/6
322016/12/22](https://image.slidesharecdn.com/02xampp-151102142618-lva1-app6892/85/PHP-MySQL-XAMPP-32-320.jpg)
![shapethefuture
電子工程系
應 用 電 子 組
電 腦 遊 戲 設 計 組
新增表格預設編碼為latin1，建議改為utf8，並使用
utf8_unicode_ci連線校對
修改xamppmysqlbinmy.ini
在[client]區塊加入
default-character-set = utf8
在[mysqld]區塊加入
character-set-server = utf8
collation-server = utf8_unicode_ci
設定MySQL編碼 1/2
332016/12/22](https://image.slidesharecdn.com/02xampp-151102142618-lva1-app6892/85/PHP-MySQL-XAMPP-33-320.jpg)
![shapethefuture
電子工程系
應 用 電 子 組
電 腦 遊 戲 設 計 組
在[client]區塊加入
default-character-set = utf8
在[mysqld]區塊加入
character-set-server = utf8
collation-server = utf8_unicode_ci
設定MySQL編碼 2/2
342016/12/22](https://image.slidesharecdn.com/02xampp-151102142618-lva1-app6892/85/PHP-MySQL-XAMPP-34-320.jpg)
建立PHP & MySQL應用程式開發環境 - XAMPP安裝與測試
- 1. 電子工程系應 用 電 子 組 電 腦 遊 戲 設 計 組 建立PHP & MySQL應用 程式開發環境 吳錫修 Dec 21, 2016
- 2. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 手動分別安裝Apache、PHP及MariaDB Apache HTTP Server http://httpd.apache.org/ PHP模組 http://php.net/ MariaDB https://mariadb.org/ 傳統安裝方式 2
- 3. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 不是用MySQL嗎? MariaDB資料庫管理系統是MySQL的⼀個分⽀，由開源社群維護，採用 GPL授權許可。源於甲骨文公司收購MySQL後，有將MySQL閉源的潛 在風險，因此社群採用分⽀的方式來避開這個風險 MariaDB的目的是完全相容MySQL，包括API和命令列，使之能輕 鬆成為MySQL的代替品 MariaDB 10.0.9版起使用XtraDB儲存引擎（名稱代號為Aria）來代 替MySQL的InnoDB 關於MariaDB 3
- 4. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 ⼀款免費且容易安裝設定的Apache軟體套件，其中還包含 MariaDB 、PHP 、及 Perl模組 ⽀援Windows、Linux、OS X XAMPP簡介 4
- 5. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 https://www.apachefriends.org/download.html Windows、Linux、OS X三種平台 下載XAMPP 5
- 6. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 執行自XAMPP網站下載的自我解壓執行檔，例如： xampp-win32-7.0.13-0-VC14-installer.exe 1. 安裝注意事項 建議不要安裝到C:Program Files (x86)目錄下，或者關閉UAC 安裝XAMPP 1/8 6
- 7. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 2. 起始安裝作業 安裝XAMPP 2/8 7
- 8. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 3. 選擇安裝的模組 建議至少安裝MySQL、phpMyAdmin 安裝XAMPP 3/8 8
- 9. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 4. 設定安裝目錄，預設為C:xampp 安裝XAMPP 4/8 9
- 10. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 4. Bitnami功能說明 取消勾選「Learn more about Bitnami for XAMPP」 安裝XAMPP 5/8 10
- 11. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 5. 準備開始安裝XAMPP 如要變更設定可點擊Back按鈕返回前⼀步驟 安裝XAMPP 6/8 11
- 12. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 6. 安裝作業執行中 安裝XAMPP 7/8 12
- 13. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 7. 安裝完成 安裝XAMPP 8/8 13
- 14. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 啟動XAMPP Control Panel 啟動Apache及MySQL服務 測試XAMPP 1/4 14
- 15. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 允許Apache HTTP Server存取網路 測試XAMPP 2/4 15
- 16. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 允許mysql存取網路 測試XAMPP 3/4 16
- 17. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 開啟瀏覽器，輸入localhost 測試XAMPP 4/4 17
- 18. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 點擊XAMPP Control Panel右側Netstat按鈕，查看使用0.0.0.0： 80所對應的PID編號及程式名稱 排除80 port被佔用 1/3 18
- 19. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 按Windows鍵+X，開啟Windows工作管理員，根據所查到的PID， 結束掉該程序，再重新開啟Apache 排除80 port被佔用 2/3 19
- 20. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 Skype功能表「Tools/Options…」 AdvancedConnection，取消Skype預設使用80及443這二個ports 排除80 port被佔用 3/3 202016/12/22
- 21. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 我們也可變更Apache服務通訊埠來解決80 port衝突，但連線時要 記得指定port 點擊XAMPP Control Panel右側Config按鈕 變更Apache服務通訊埠 1/3 21
- 22. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 點擊Service and Port Settings按鈕 變更Apache Main Port為8080 變更Apache服務通訊埠 2/3 22
- 23. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 修改httpd.conf設定檔內容，將Listen改為8080 port 變更Apache服務通訊埠 3/3 23
- 24. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 網站預設目錄為xampp安裝目錄下的htdocs子目錄 1. 修改xamppapacheconfhttpd.conf，變更網站目錄 變更Apache網頁目錄 1/2 242016/12/22
- 25. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 DocumentRoot "d:/projects/htdocs" <Directory "d:/projects/htdocs"> 2. 將xampp之htdocs子目錄複製到d:/projects目錄下 3. 重新啟動Apache服務 變更Apache網頁目錄 2/2 252016/12/22
- 26. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 PHP設定檔中 php.ini (xamppphp php.ini)，預設的時間是用國際 標準時間(UTC)，而台灣時間是國際標準時間 +8 date.timezone = Asia/Taipei 變更系統預設時區 26
- 27. shapethefuture MySQL預設管理帳號為root，未加密碼 1. 開啟phpMyAdmin管理頁面 設定MySQL root帳號密碼 1/6 27 Wu, ShyiShiou Dept. of E.E., NKUT
- 28. shapethefuture 2. 使用者帳號>root 127.0.0.1>編輯權限 設定MySQL root帳號密碼 2/6 28 Wu, ShyiShiou Dept. of E.E., NKUT
- 29. shapethefuture 3. 切換到修改密碼頁籤，設定密碼 設定MySQL root帳號密碼 3/6 29 Wu, ShyiShiou Dept. of E.E., NKUT
- 30. shapethefuture 4. 以相同方式修改root ::1及root localhost帳號密碼 設定MySQL root帳號密碼 4/6 30 Wu, ShyiShiou Dept. of E.E., NKUT
- 31. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 變更MySQL root密碼後，必須⼀併更新PHPMyAdmin設定檔內容 （xamppphpmyadminconfig.inc.php） 設定MySQL root帳號密碼 5/6 312016/12/22
- 32. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 /* Authentication type and info */ $cfg['Servers'][$i]['auth_type'] = 'cookie'; $cfg['Servers'][$i]['user'] = 'root'; $cfg['Servers'][$i]['password'] = 'your_password'; $cfg['Servers'][$i]['extension'] = 'mysql'; $cfg['Servers'][$i]['AllowNoPassword'] = true; $cfg['Lang'] = ''; 設定MySQL root帳號密碼 6/6 322016/12/22
- 33. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 新增表格預設編碼為latin1，建議改為utf8，並使用 utf8_unicode_ci連線校對 修改xamppmysqlbinmy.ini 在[client]區塊加入 default-character-set = utf8 在[mysqld]區塊加入 character-set-server = utf8 collation-server = utf8_unicode_ci 設定MySQL編碼 1/2 332016/12/22
- 34. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 在[client]區塊加入 default-character-set = utf8 在[mysqld]區塊加入 character-set-server = utf8 collation-server = utf8_unicode_ci 設定MySQL編碼 2/2 342016/12/22
- 35. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 在Apache網站目錄下新增⼀個子資料夾，例如： D:projectshtdocsIOThome Dreamweaver選單命令「網站/新增網站」 網站名稱：IOThome 本機網站資料夾：D:projectshtdocsIOThome 使用DreamWeaver建立網站 1/8 35
- 36. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 使用DreamWeaver建立網站 2/8 36
- 37. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 切換到「伺服器」項目，按下「+」鈕新增伺服器 使用DreamWeaver建立網站 3/8 37
- 38. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 伺服器基本設定 伺服器名稱：自訂 連線方式：本機/網路 伺服器資料夾： D:projectshtdocsIOThome Web URL：自訂，例如http://localhost/IOThome 使用DreamWeaver建立網站 4/8 38
- 39. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 伺服器進階設定 勾選儲存時自動上傳檔案到伺服器 伺服器模式：PHP MySQL 使用DreamWeaver建立網站 5/8 39
- 40. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 確認無誤後點擊「儲存」按鈕 使用DreamWeaver建立網站 6/8 40
- 41. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 在「檔案」面板即可看到新增的網站 使用DreamWeaver建立網站 7/8 41
- 42. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 Dreamweaver選單命令「網站/管理網站(M)…」可修改相關設定 使用DreamWeaver建立網站 8/8 42
- 43. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 Dreamweaver選單命令「檔案/開新檔案(N)…」 使用DreamWeaver編輯PHP程式 1/3 43
- 44. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 加入PHP程式碼 <?php #顯示目前的PHP環境設定 phpinfo(); ?> 使用DreamWeaver編輯PHP程式 2/3 44
- 45. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 存檔測試 使用DreamWeaver編輯PHP程式 3/3 45
- 46. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 Dreamweaver檔案預設編碼設定 選單命令「編輯/偏好設定(P)…」 新文件預設編碼，選擇Unicode (UTF-8) DreamWeaver檔案編碼設定 1/2 46
- 47. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 Dreamweaver個別檔案編碼設定 功能表「修改/頁面屬性(P)…」 標題/編碼方式，選擇Unicode (UTF-8) DreamWeaver檔案編碼設定 2/2 47
- 48. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 免費好用的文字編輯軟體，免安裝，⽀援多種程式語言格式 ⽀援中文介面 下載 https://notepad-plus-plus.org/download/ 使用Notepad++ 1/3 48
- 49. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 設定編輯PHP程式 使用Notepad++ 2/3 49
- 50. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 設定使用UTF-8編碼 使用Notepad++ 3/3 50
- 51. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 ⼀般html檔案可加入以下敘述 <head> <meta equiv="Content-Type" content="text/html; charset=utf-8"> </head> PHP檔案可以加上以下敘述 header("Content-Type:text/html; charset=utf-8"); 文件內容編碼設定 51