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