建立php & mysql應用程式開發環境 - xampp安裝與測試

電子工程系應用電子組電腦遊戲設計組

建立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


19

shap

e th

e fu

ture


Skype功能表「Tools/Options…」

AdvancedConnection，取消Skype預設使用80及443這二個ports


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


22

shap

e th

e fu

ture


修改httpd.conf設定檔內容，將Listen改為8080 port


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>編輯權限



shap

e th

e fu

ture

3. 切換到修改密碼頁籤，設定密碼



shap

e th

e fu

ture

4. 以相同方式修改root ::1及root localhost帳號密碼



shap

e th

e fu

ture


變更MySQL root密碼後，必須⼀併更新PHPMyAdmin設定檔內容（xampp\phpmyadmin\config.inc.php）


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'] = '';


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



36

shap

e th

e fu

ture


切換到「伺服器」項目，按下「+」鈕新增伺服器


37

shap

e th

e fu

ture


伺服器基本設定

伺服器名稱：自訂

連線方式：本機/網路

伺服器資料夾： D:\projects\htdocs\IOThome

Web URL：自訂，例如http://localhost/IOThome


38

shap

e th

e fu

ture


伺服器進階設定

勾選儲存時自動上傳檔案到伺服器

伺服器模式：PHP MySQL


39

shap

e th

e fu

ture


確認無誤後點擊「儲存」按鈕


40

shap

e th

e fu

ture


在「檔案」面板即可看到新增的網站


41

shap

e th

e fu

ture


Dreamweaver選單命令「網站/管理網站(M)…」可修改相關設定


42

shap

e th

e fu

ture


Dreamweaver選單命令「檔案/開新檔案(N)…」

使用DreamWeaver編輯PHP程式 1/3

43

shap

e th

e fu

ture


加入PHP程式碼<?php

#顯示目前的PHP環境設定

phpinfo();

?>


44

shap

e th

e fu

ture


存檔測試


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

建立php & mysql應用程式開發環境 - xampp安裝與測試

Software