前篇：論壇是怎麼架設的？自己動手做做看！（一）
在我們動手開始寫網頁以前，先瞭解架站需要的東西吧！
至少十年前，網路上就已經有了稱為「LAMP」的組合了：作業系統使用 Linux、網頁伺服器軟體使用 Apache、資料庫使用 MySQL、網頁程式語言使用 PHP。
雖然這樣的搭配近年已經有些變動——例如用 Nginx 取代 Apache，或是有些人會乾脆基於 Node.js 的環境用 JavaScript 同時含括網頁程式和伺服器兩項工作——但本篇將以 XAMPP 這套軟體作為示範。XAMPP 是個 Apache + MariaDB + PHP 的組合包，整套都免費的。
MariaDB 同樣是個資料庫管理系統，是 MySQL 的一個分支，但功能基本上跟 MySQL 相同（也相容）。相對於已經被甲骨文公司收購的 MySQL 來說，這裡提到的 MariaDB 是開源的，所以相對優點也比較多（比較沒有風險）。
本篇會選擇 XAMPP 是基於以下理由：
1. 即使是初學者也能很快地用 XAMPP 建置環境
2. 大部分的讀者都是 Windows 的用戶（XAMPP 也有 Mac 版本）
3. 本篇只是為了帶領入門者瞭解基本觀念，先用 XAMPP 就夠了
但還是要先提醒各位，實務上通常不會有人用 Windows + XAMPP 來架網站，因為穩定性跟效能實在是遠遠比不上其他的執行環境。
知道有這些東西以後，我們就可以到官方網頁下載 XAMPP 了，依照自己的作業系統選擇相應的版本，然後安裝它：
![]()
![]()
這裡可以選擇不安裝 Tomcat、FileZilla、Mercury，因為單純寫 PHP 的話用不到。
安裝好以後，你可以到安裝 XAMPP 的目錄底下看到一個 xampp-control.exe，它是一個控制面板，把它打開：
![]()
這個時候點選 Apache 跟 MySQL 右邊的 Start 來開啟它們：
![]()
我們可以看到 Apache 上面標有 80 和 443，而 MySQL 則是 3306。這個數字就是該服務在你電腦上所使用的 port。那 port 是什麼呢？port 的中文叫做連接埠，你可以理解為你的電腦就是一間郵局，而一個郵局會有很多個窗口來分別處理不同事務。
通常，一台電腦會有編號從 0 到 65535 共 65536 個窗口可以使用，當你想要運作一個跟網路有關的服務，你就必須佔用一個空的連接埠，接著就以那連接埠來作為對外的溝通管道。
為了使用方便，當年在網路領域制定相關標準的人就先講好了，如果沒有特別需要的話，各項服務都盡量預設在特定編號的 port，例如：
FTP：21（檔案傳輸）
SMTP：25（郵件傳輸）
DNS：53
HTTP：80
HTTPS：443
MySQL：3306
上列的編號都是約定俗成的，並不代表「port 幾號就一定是什麼功能」，因此若你想要把 HTTP 的服務開在 port 21 還是 53 也沒關係（只要它們還沒被佔用），你甚至可以自己隨意指定一個 port 編號為 87，然後把 HTTP 開在 port 87 上面。
像你以前應該聽說過駭客可以從遠端偷走你的重要檔案（甚至操控電腦），原理通常是他們會先想辦法讓你執行他們做的木馬程式，然後程式會在你電腦開啟一個他們指定好編號的 port、聽從他們的命令（這種用來呼應駭客行為的接口，通常稱為「後門」），並且把你的 IP 位址傳給他們，這樣當他們在另一端知道哪個 IP 中了毒，只要連線過來，就能透過這個後門實現他們本來寫好的操控、傳輸檔案等等的惡意用途了。
XAMPP 就把 Apache 的網頁服務設在約定俗成的 port 80 上面，但你也有可能會遇到你電腦裡面剛好有某個服務（例如 Skype、IIS）正在使用 port 80 的情況，這種情況下 XAMPP 的控制面板就會顯示以下錯誤訊息：
![]()
要是不幸如上圖，port 80 被其他程式佔用的話，請點選 Apache 的 config（設定），然後開啟 httpd.conf，找到一行 Listen 80，把這個 80 改成自己喜歡的數字，例如 8080，這樣你就可以令 XAMPP 改在別的 port 開啟 Apache 了。
![]()
![]()
確定 Apache 跟 MySQL 的服務都已經被打開以後，XAMPP 的控制面板可以先關掉或縮小都沒關係，因為它只是一個控制面板，就好像手機遙控器一樣。
這時候打開你的瀏覽器，在網址列輸入 127.0.0.1:8080，就會看到 XAMPP 預先幫你建立好的網頁了。如果你的 port 本來就能成功開在預設的 80，那就不必輸入「:8080」，因為一般瀏覽器本來預設就是連到 port 80。
127.0.0.1 這個 IP 就是代表自己本機，相當於 localhost，因此你要用「http://localhost」也行。
至於為什麼我沒設定 HTTPS 呢……因為這挺麻煩的，有些人為了保持本機開發環境的穩定，所以連本機也會用 HTTPS 連線，這個有興趣的可以再自己 Google 看看囉。
總之呢，進入了 localhost 的首頁以後，你應該會看到預設的歡迎頁面。
我們在瀏覽器上看到的這個網頁，檔案放在哪裡呢？打開你安裝 XAMPP 的目錄，會看到底下有個 htdocs 資料夾，那就是存放網頁的地方了：
![]()
因為「http://127.0.0.1/」並沒有特別指定要開啟哪一個網頁，所以到這個網址的話，瀏覽器會自動去找 index.php（這個時候「http://127.0.0.1/」就相當於「http://127.0.0.1/index.php」）。
這時候用記事本或其他編輯器（我習慣用 VS Code）打開 index.php，就會看到它實際的程式碼了。這個預設的 index.php 內容有點像是歡迎頁面，其實不太重要，你可以把 htdocs 資料夾裡面除了 index.php 以外的所有檔案跟資料夾刪掉，然後把 index.php 的內容改成：
<?php
if(isset($_GET['x']) && is_numeric($_GET['x'])){
if($_GET['x'] % 2 == 0){
echo '是偶數！';
}else{
echo '是奇數！';
}
}else{
echo 'x 不是數字。';
}
?>
儲存檔案，你就可以用以下的幾個網址試著傳送參數：
http://localhost/index.php?x=1
http://localhost/index.php?x=8
http://localhost/index.php?x=abc
而你也會看到它 echo 回來的內容。
就以上面第一條網址為例。我們以瀏覽者的角度令 x 為 1，這時候以架網站的人在伺服端的角度來看，就必須用 $_GET['x'] 來取得 x 的值。
在取 x 的值以前，我們可以先用 isset() 函數來確定 $_GET['x'] 這個東西到底存不存在，因為如果沒有檢查而直接取用的話，在使用者網址沒有給予 x 參數（例如使用者直接瀏覽http://localhost/index.php 而沒有附帶 ?x=<num>）的情況下就會出現錯誤。至於條件後面的 is_numeric() 則用來檢查 x 是否為數字。
像這種在網址列直接用 ?aaa=bbb&ccc=ddd 形式給予參數的連線請求，稱為「GET」。比如說我們後面接的是 ?id=445566&site=gamer&max=50 的話，網頁伺服器這邊就會收到以下三組參數：
id 的值為 445566
site 的值為 'gamer'
max 的值為 50
我們身為架網站的人，就要利用這些傳來傳去的資料，來讓使用者可以瀏覽到他們想要的東西。
這樣一來我們也能猜得到，當你點進我這篇文章的時候，巴哈姆特主機底下的 creationDetail.php 這個檔案裡面寫的程式碼，必然是用 $_GET['sn'] 來取得我們網址上面的 sn 編號。
接下來寫個進階一點的吧！我們可以模擬一下「瀏覽文章」：
<?php
$article = [];
$article[0] = "你好<br/>我是豬腳<br/>晚安<br/>";
$article[1] = "豬腳真的超可愛<br/>我整個跳起來<br/>你知道嗎<br/>";
$article[2] = "床前明月光<br/>豬腳泡女湯<br/>";
$article[3] = "こまちゃん我婆<br/>";
if(isset($_GET['article']) && is_numeric($_GET['article'])){
$articleNumber = $_GET['article'];
echo $article[$articleNumber];
if($articleNumber > 0){
?>
<a href="./index.php?article=<?php echo($articleNumber-1); ?>">上一篇</a><br/>
<?php
}
if($articleNumber < 3){
?>
<a href="./index.php?article=<?php echo($articleNumber+1); ?>">下一篇</a>
<?php
}
}
?>
這就要講到 PHP 的特性了。PHP 檔案本身實際上是把 HTML 跟 PHP 的程式碼放在同一個檔案，只要是 <?php ... ?> 以外的東西，都會被當成一般的網頁內容來處理。所以，我們在寫 PHP 檔案的時候，基本上就等於在寫一般的 HTML，通常都是遇到需要邏輯操作的場合才用 <?php ... ?> 的標籤把「用 PHP 執行」的東西包在裡面。因為 PHP 是在伺服器上面運作，所以它實際上的程式碼並不會被瀏覽網頁的人看到，只有 PHP 以外和你從 PHP 裡面 echo 出來的東西才會顯示在網頁上。
以上的 echo 函數就是用來輸出文字用的，在 PHP 語法利用 echo 就可以把它跟 HTML 的東西混合在一起，你也可以用 echo 輸出 HTML 標籤，成為 HTML 的一部份，所以你也可以把上述的所有內容全改成純 PHP，然後把 HTML 的部分寫在 echo 要輸出的字串裡面。
雖然方便，但也因為這樣的特性，使得 PHP 的程式碼變得非常醜——把 HTML 的結構和 PHP 的程式碼混在一起，怎麼會好看呢——對工程師來說，這樣無論要縮排還是閱讀都不是很容易。如果希望優化 PHP 跟 HTML 的內容，好讓 code 不要看起來那麼醜，可以用「layout」、「template」、「HTML」、「PHP」等關鍵字去 Google，網路上有各式各樣的做法。
當我們在設定「上一篇」、「下一篇」的連結時，就要考慮使用者瀏覽網頁的角度，所以這裡就要從 article 參數去推算它上一篇、下一篇文章的編號，做出同樣用 index.php 帶參數的連結來讓使用者可以點選。
搭啦～你已經完成了第一步。
在這裡，我們在瀏覽器的網址列上使用網址來送出連線請求（包括你現在在巴哈姆特瀏覽我的這篇文章），這類的連線請求被稱為「GET」。因為傳送的參數內容都直接寫在網址列上面，所以正常的網站一般不會用 GET 方法來傳送極度機密的資訊（例如使用者的帳號密碼）。
也因此，我們在巴哈姆特的登入頁面上，可以看到它使用的是「POST」方法，因為這樣我們在點選「登入」的時候，密碼就不會被顯示在網址列上了。注意，這裡的 login.php 只是取得登入頁面的內容而已，所以仍然是使用 GET，你可以在圖片下半部顯示的 HTML 內容看到，當你點擊登入的時候，瀏覽器會經由 POST method 把資料傳送去 doLogin.php：
![]()
不過說回來，像單純瀏覽文章這種事情，因為我們並不需要傳送機密資料給伺服器，所以直接使用 GET 方法會比較實際、方便，以我們這次寫的內容來說，沒有必要特別改成 POST 方法來傳送 article 編號。
當然，前面都說只是「模擬」了，實務上當然不可能直接把文章內容寫在 PHP 檔案裡啦！先前已經講過了，一般來說這些資料都會被好好地存放在資料庫裡面，這樣也利於存取或修改。至於如何去利用資料庫，我們就留待下次再來講吧～感謝大家的收看。
LINE