---
title: XAMPP 安裝及介紹
tags: 網頁組
---

# XAMPP 安裝及介紹 - 前言

學習過前端基礎之後，我們現在要邁向後端的學習了，在進入後端之前，我們需要先擁有一個環境，這章節會教給大家一款簡單方便的軟體，它能夠快速地幫我們架設起後端的環境。

:::info
上課簡報：[網頁組教學簡報](https://docs.google.com/presentation/d/1Mf3lur-8NikMqZ0VJpsUFjRoYIvfhDukULaD4fmag3E/edit?usp=sharing)
:::

# 本節目標

- 認識 XAMPP
- XAMPP 安裝完成

# 什麼是 XAMPP

XAMPP 是一個可以簡單整合 Apache（網頁伺服器）、PHP（伺服器端語言）、Perl（程式語言）及 MariaDB（資料庫）的軟體包，透過 XAMPP 就可以方便快速架站。

我們在架站時需要透過網頁伺服器讓訪客能夠連到我們的網站，目前比較普遍的網頁伺服器有 Apache HTTP 伺服器（簡稱 Apache）、以及 Microsoft 的 Internet Information Server（簡稱 IIS）等，透過網頁伺服器就能將網頁（包含圖像、影音等各種檔案）提供給請求者。

而使用 PHP+MySQL 架站的網站並不少，這些都可以透過 XAMPP 簡單架設完成，XAMPP 可以用於完全自架站（自己寫的網站），也適用於 WordPress 或 Joomla 等 CMS（自由開源的部落格軟體和內容管理系統）。

> tips：可以根據關鍵字搜尋更多資訊喔～

# 安裝 XAMPP

:::info
[XAMPP 官方網站](https://www.apachefriends.org/zh_tw/index.html)
:::

## XAMPP版本與系統說明

請依照網站系統與開發需求決定下載的版本，例如用 Linux 架站則選擇 XAMPP for Linux，接著確認 PHP 版本，例如用 WordPress 網站可以先查看建議的 PHP 版本，假設最低需求是 PHP 7.1 則至少要選擇 PHP 7.3.30 以上的版本。

選定好版本以後，安裝包裡面會有許多系統資訊，以下做簡易說明：

- Apache 2.4.41：網頁服務提供系統
- MariaDB 10.4.6：資料庫服務提供系統
- PHP 7.3.9：網頁程式語言
- phpMyAdmin 4.9.0.1：網頁程式語言管理平台
- OpenSSL 1.1.1：網路傳輸加密服務系統
- XAMPP Control Panel 3.2.4：XAMPP 管理系統
- Webalizer 2.23-04：網站日誌分析系統
- Mercury Mail Transport System 4.63：E-mail 服務提供系統
- FileZilla FTP Server 0.9.41：檔案伺服器服務提供系統
- Tomcat 7.0.92 (with mod_proxy_ajp as connector)：Java 虛擬化網頁服務提供系統
- Strawberry Perl 5.16.3.1 Portable：MinGW C / C ++ 編譯器安裝包

## XAMPP安裝步驟

XAMPP 是一套簡易安裝的軟體，有時可能會因為防毒軟體的安全判讀問題造成跳出警告訊息，但其實這套軟體並沒有病毒或惡意程式，請不用理它按「Yes」鍵就可以了。

:::success
安裝步驟只要一直按下一步就好。
:::

我們主要用到的功能是以下幾個
- Apache —— 網頁伺服器
- MySQL —— 資料庫
- PHP ——執行在伺服端，可以用來編寫動態網頁的語言
- phpMyAdmin —— 用來管理MySQL的工具，Web介面，操作起來很簡明

安裝時的路徑通常會放在 C 槽，如果你想放在 D 槽也是可以的。

## 介面介紹

- 綠框：服務與狀態區，當服務啟動時 Module 狀態區的部份會變成綠色。
- 橘框：執行代碼，PID(s) 是指該服務在作業系統上的執行碼，可以與工作管理員對照。
- 藍框：服務使用的通道。
- 紫框：服務管控區，用來啟動與停止服及修改設定檔。
- 粉框：服務執行狀態報告，用來回報目前服務執行的情況。

## 啟動與測試

按下 Start 開啟 Apache 和 MySQL，看到 Module 部分變成綠色的了
> Apache 為網頁伺服器，MySQL 為資料庫


那要如何測試我們是不是正確的啟動服務了呢，最快的方式就是打開瀏覽器來看，XAMPP 預設會開啟 80 port，我們可以輸入 http://localhost:80 或是透過介面按下 Admin 就能夠看到 XAMPP 預設的 DashBoard
> tips：localhost 也可以換成 127.0.0.1，兩個是一樣的



看到 DashBoard 代表我們的 Apache 服務正確打開了，接下來我們要來確認我們剛安裝的套件 phpMyAdmin 有沒有被正確啟動。

我們在網址列輸入 http://localhost/phpmyadmin/ 或是透過介面按下 Admin


如果成功啟動的話，就會看到 phpMyAdmin 的畫面

## 路境介紹

XAMPP 的其中一個 P 代表 PHP 環境，我們可以用 `phpinfo()` 函數來顯示PHP環境安裝了些套件，以及PHP環境的支援，我們現在可以寫個小小的 PHP 網頁程式，命名為 index.php，裡面的內容會長這樣：

<?php
    phpinfo();
?>

那這個檔案應該要放在哪裡呢？可能會以為用 XAMPP 打開服務只要丟在 XAMPP 資料夾底下就可以了，但其實這樣是不對的。

XAMPP 預設的路徑就指向了 xampp/htdocs，所以我們所有的網頁都要放進這個資料夾底下

現在可以看到我有一個 phpinfo 的資料夾，裡面放了我的 index.php，並且已經放到了 xampp/htdocs 裡面

所以我們在網址列應該要輸入的是 http://localhost/phpinfo/index.php
我們就可以成功看到我們 PHP 的環境支援以及己安裝的套件。

如果輸入的是 http://localhost/index.php 會發現我們被導回到了 dashboard，這是因為我們開錯個 index.php 了，我們讀取到了 XAMPP 預設的 index.php，它會幫忙導回 dashboard，所以要記得路徑正確非常重要。
> tips：路徑要使用全英文喔❗

:::warning
總結：我們接下來的專案都應該放在 xampp/htdocs 底下，路徑要是英文，開啟網頁時必須輸入正確的路徑，而且要先把 XAMPP 的 Apache 服務開啟。
:::

---

## 參考資料
:::info
[XAMPP安裝與操作初步](https://ithelp.ithome.com.tw/articles/10197921)

[XAMPP 介紹、下載與教學](https://kumo.tw/article.php?id=15)
:::

---

有了環境之後，下一篇會正式進入 PHP 的環節，就要邁入後端的開發了。