[達人專欄] 論壇是怎麼架設的？自己動手做做看！（一）

　
　　你是否想過自己架設一個網站呢？

　　小學三年級的時候，我還真的想過。記得當時很天真地上 Yahoo! 搜尋「如何做網站」，找到了一堆 Microsoft FrontPage 的資料，然後就很興奮地打開電腦的 FrontPage，也塞了一堆垃圾內容湊成一個 html 檔案，結果卻發現根本沒辦法讓別的電腦看到我的網頁，於是我就放棄了。

　　接下來十幾年的學生生涯，技能樹被我亂點一通，直到大學某個學期扛完整個小組的期末專題，才終於弄懂網站運作的觀念。

　　實際寫過一次以後，才發現原來寫網站不是一件想像中那麼困難的事情，因此決定用簡單的方式來分享架設網站的方法。然而，依我幹話很多的習慣看來，單就一篇文章是不可能講得完的，初稿寫完之後也證實了我的幹話真的很多，所以在這之前就先來說明我們平常看到的網站如何運作吧。

　　為了弄懂連線的觀念，首先要瞭解我們的電腦平時瀏覽網頁的連線過程，而關於比較底層的觀念就不深入談了。我們以巴哈姆特本身來當作範例：

　　https://home.gamer.com.tw/homeindex.php?owner=johnny860726

　　這是我的小屋網址。當我們瀏覽這個網址的時候，瀏覽器會把它拆成以下幾種元素：

　　1. 傳輸協定：HTTPS
　　2. 網域名稱：home.gamer.com.tw
　　3. 路徑：/
　　4. 程式檔案名：homeindex.php
　　5. 參數：{owner: johnny860726}

　　接下來我們要知道何謂 DNS 伺服器。DNS 稱為網域名稱系統（Domain Name System），這些 DNS 伺服器的主機裡面通常存了各個網站的真實 IP，就好像戶政事務所知道大家住在哪裡一樣。

　　因為我們的電腦起初並不知道 home.gamer.com.tw 在哪裡，因此需要向 DNS 伺服器查詢該域名的 IP 地址：

　　我們的電腦：「請問 home.gamer.com.tw 在哪裡？」

　　DNS 伺服器：「你好，home.gamer.com.tw 的位置在 104.16.181.30 喔。」

　　通常我們的網際網路服務供應業者（ISP，Internet Service Provider，例如中華電信）會提供 DNS 的服務，但也有企業是自行架設，像 Google 本身就有架幾個 DNS（IP 為 8.8.8.8 和 8.8.4.4）。我們可以透過更改電腦的網路設定，去指定改用 Google 的 DNS，否則一般網路預設都會使用 ISP 提供的 DNS。

　　簡單來說，如果我辦的是中華電信的網路，我電腦用的 DNS 就會預設是由他們提供。

　　這裡可以順帶談談，中國的 ISP 業者使用的 DNS 會配合當局政策，故意混淆某些特定域名和 IP 的對應關係，例如當有人想要查詢 google.com 的 IP，這些中國的 DNS 伺服器就會回應給予假的 IP 地址，所以中國的使用者才會總是連不上 Google 的網站，而需要使用 VPN 翻牆。

　　我們知道了該連到哪裡以後，瀏覽器會依照 HTTP 協定規範產生連線請求（request），經由家裡網路的數據機送出含有這些資料的封包，這封包裡就包括了剛才上面列出的程式檔案名、參數，以及我們這些使用者自己的電腦 IP 等資訊。

　　巴哈姆特目前使用的 HTTPS（Hypertext Transfer Protocol Secure，超文本傳輸安全協定）正是一種以 HTTP 為基礎傳送資料的協定，而 HTTPS 因為傳輸的資料特別經過加密，也才不容易在過程中遭到別台電腦監聽並竊取資料，是相對比較安全的做法。

　　當我們把連線請求送到巴哈姆特的主機之後，巴哈姆特主機對我們的請求內容經過解析，便會呼叫 homeindex.php 這支 PHP 程式，令它開始運作。這支程式會檢查連線請求裡頭附帶的 owner 參數，而因為剛才已經有指定 owner 參數為 johnny860726，所以這支程式知道我們想要看 johnny860726 的小屋，於是接著向巴哈姆特自己的資料庫查詢資料。

　　當它找到了符合這個帳號的資料（例如暱稱為解凍豬腳、等級為 43），就會依照這些資料臨時產生出一個網頁，再將這個網頁的內容傳回來。記得剛才說過，我們送出的連線請求資料中含有我們自己電腦的 IP 地址，對吧？所以巴哈姆特的主機才能把資料傳回來。這就好像我們在信件裡面寫上寄件人地址一樣，對方才知道回信該寄到哪裡。

　　這些被回傳過來、使用者可見的網頁內容就叫做「前端」，而剛才所舉例如巴哈姆特主機裡的 homeindex.php 程式和背後查詢資料的機制，就稱為「後端」。也因此，我們在徵才文案裡面常見到「前端工程師」和「後端工程師」二詞，工作內容差異正是如此。

　　除非利用漏洞取得主機的控制權，否則基本上我們沒辦法知道實際的程式碼內容：它表面上是個 PHP 檔案，但傳回來的資料其實是個 HTML 結構的網頁。依照這樣的原理，也就可以解釋為什麼有些圖片的網址是以 .php 為結尾，因為傳回來的數據只是個圖片檔案，我們並沒有真的「讀取」那個 PHP 檔案的「內容」，而是對方的伺服器執行了那個 PHP 檔案，然後把圖片的「檔案內容」回傳給我們，所以我們的瀏覽器就會認定它是一張圖片。

　　沒有錯！巴哈姆特雖然有成千上萬篇文章，但其實他們並沒有把每篇文章存成一個網頁檔案，而是把文章的原始碼存在資料庫裡。當我們向 forum.gamer.com.tw 這台主機的 C.php 送出請求的時候，巴哈姆特的伺服器才往資料庫查詢、動態產生出一個 HTML 網頁，再把產生出來的網頁內容整份傳回來，所以我們才會需要在文章網址傳入 bsn、snA 等參數。

　　至於我們如何登入帳號呢？首先要知道，我們在註冊帳號的時候，會先把帳號密碼等資訊傳送給巴哈姆特，註冊成功的話就由他們經過防護措施保存起來，至於這防護措施的細節之後有機會再說吧～

　　接著，當我們之後輸入帳號密碼，巴哈姆特的伺服器首先會檢查帳號密碼是不是正確，正確的話就會產生一組 session ID 作為證明，情境如下：

　　豬腳：「你好，巴哈姆特，我想登入我的帳號。」

　　巴哈姆特：「你哪位？」

　　豬腳：「我的帳號是 johnny860726，密碼是 c8763#c8763。」

　　巴哈姆特：「我檢查一下……嗯！你的帳號密碼是正確的。我現在隨機產生一組暫時的通關密語，這個通關密語是 bfd65583df5e04bf。下次你找我的時候只要附帶這組通關密語，你就可以用你的身分來發廢文了，這組通關密語我也會幫你記著。」

　　這樣當我之後瀏覽小屋的時候，就會有以下情境：

　　豬腳：「嗨！又見面了。記得我嗎？看看我手上信封裡的這張紙條吧。」

　　巴哈姆特的守衛打開信封檢查紙條，看見上面寫著「bfd65583df5e04bf」，立刻想起了上次給予豬腳許可證的事：「喔！我還記得，通關密語正確呢，看來你就是 johnny860726 本人了。那麼，我就連同你小屋的私人文章一起顯示給你看看吧。」

　　這就是 session 的運作原理。

　　豬腳拿給守衛的信封記載了一些資訊，這個信封稱為「header」，裡頭被放入了很多張紙條，其中一個紙條正是我們熟知的「cookie」，豬腳的通關密語就寫在 cookie 紙條裡面。有時候這張 cookie 紙條也會寫些其他資訊，例如巴哈姆特會用 cookie 來儲存「是否使用夜間模式瀏覽論壇」或「最近瀏覽過哪些哈啦板」之類比較不需要存在巴哈姆特伺服器上的資料。

　　如果你現在已經登入了巴哈姆特，可以試著按下 F12 > Application > Cookies 觀察儲存在你電腦裡的 cookie 表，就會發現巴哈姆特有條 cookie 叫做「BAHARUNE」，那就是巴哈姆特給你的通關密語了。請務必注意，千萬不要讓別人知道你的 BAHARUNE 內容啊！因為那就代表著擁有你帳號權限的鑰匙：

　　其實這樣我已經把一個論壇的運作原理幾乎講完了，你信不信？真的就這麼簡單。

　　之後，我會實際使用 XAMPP 這套軟體操作一次，並且用常見的 PHP、MariaDB 示例，這樣大家不用買主機就可以用自己的電腦架設一個 HTTP 伺服器，也能體驗一下用網站擁有者的角度來看待這個世界。

　　相信看完本篇文以後，你就會知道論壇是怎麼運作，而看完下一篇文就會知道怎麼徒手架設一個簡單的論壇了……應該啦。那今天就先講到這裡囉，感謝大家的觀看。

同系列文章：

論壇是怎麼架設的？自己動手做做看！（二）

論壇是怎麼架設的？自己動手做做看！（三）

227

LINE 分享

留言

2019-07-05 20:15一顆茶葉蛋：
哈哈我看不懂
2019-07-13 22:04解凍豬腳：嫩
2019-07-05 20:15雪之王女‧F‧巧可奈：
相當實用的文章^^
2019-07-13 22:04解凍豬腳：感謝 [e7]
2019-07-05 20:18緋渚綾瀨：
密碼好星爆
2019-07-13 22:06解凍豬腳：10 秒 16 顆飼料
2019-07-05 20:19A2266604：
我們愛的司服器呢
2019-07-13 22:06解凍豬腳：已黑單
2019-07-05 20:20雨丸✰“ReのLife”★：
豬腳1人自己扛完整個小組的期末專題?![e28]
2019-07-13 22:08解凍豬腳：不是全都一個人啦，前端好在還有隊友幫忙罩，我前端很爛 [e3]
倒是後端真的有九成的 code 都一個人寫
2019-07-05 20:220056マンジュウ：
總之我先噓密碼
2019-07-13 22:08解凍豬腳：寶……你捨得噓我嗎
2019-07-05 20:28千夜老師ღ：
噓ㄌ
2019-07-13 22:09解凍豬腳：噓的人都要被我吊起來玩弄
2019-07-05 20:28空誠：
豬腳論壇，噁男們的快樂天堂
2019-07-13 22:09解凍豬腳：小妹我才不是噁男
2019-07-05 20:29咖啡因超人・夜久：
很強的樣子文組表示看不懂
2019-07-13 22:09解凍豬腳：嗚嗚……文組看不懂的話就代表我的敘事能力很糟糕了
2019-07-05 20:29young：
先推優質文
2019-07-13 22:09解凍豬腳：每天都要優質 [e16]
2019-07-05 20:29Caiseu225(繼續習下韓上)：
佬......
2019-07-13 22:10解凍豬腳：姥……
2019-07-05 20:31Lily らい：
簡單易懂的解說^^
2019-07-13 22:10解凍豬腳：讓我插
2019-07-05 20:33苒：
那麼哈拉版那種文章又是怎麼建立及更新樓層的?

2019-07-13 22:28解凍豬腳：　
以 MySQL 的系統來說，通常這種情況就會用到不只一個資料表

比如說現在有個 snA 編號為 400 的文章裡面有 sn 編號為 45787, 46898, 47022 的三篇文，那這兩張資料表就可以這樣設計：

存討論串的資料表：

snA | bsn | author | title
-----------------------------------------------
398 | 60076 | johnny860726 | 【情報】雷雷我老婆
399 | 60076 | sega | 【公告】飯可以亂吃，話不能亂講
400 | 60076 | erwin990423 | 【攻略】小妹我要睡覺了
401 | 60076 | lily14010 | 【情報】我喜歡豬腳

--

存文章的資料表：

snA | bsn | sn | author | content
---------------------------------------------
398 | 60076 | 45787 | johnny860726 | RT
398 | 60076 | 46898 | erwin990423 | 幹你真的很噁
399 | 60076 | 46903 | johnny860726 | 你害我拉肚子了
398 | 60076 | 47022 | sega | 這我一定 A 車

這個時候，存文章的資料表當中，snA 欄位就是 foreign key，因為它指向了存討論串的資料表當中的 primary key（這樣說有點不精確就是了，因為不同板會有相同的 snA，所以不能完全說它是前者資料表的 primary key 或後者資料表的 foreign key，但概念大致是這樣沒錯）

上場外看文章列表（B.php）的時候就 WHERE bsn = 60076，就會看到所有討論串

點進文章（C.php）的時候，就 WHERE bsn = 60076 AND snA = 400，這樣就會看到該討論串裡的所有文章
　
2019-07-05 20:35雞塊：
推免得別人
2019-07-13 22:29解凍豬腳：免得別人看不到這篇文 [e16]
2019-07-05 20:36中二И小屁孩：
我的夢想是弄一個自己的網站跟朋友哈拉
可是我沒有朋友
2019-07-13 22:29解凍豬腳：原來是因為沒有朋友啊…… [e36]
2019-07-05 20:39VooDoo〞巫毒之子：
看到一半頭腦當機qq
2019-07-13 22:30解凍豬腳：當初在學校剛上 PHP 的時候，也是腦袋各種當機，完全死機的那種 [e20]
2019-07-05 20:49防彈脂肪：
支離破碎的理解
哇誇某
2019-07-13 22:30解凍豬腳：再看一百次
2019-07-05 20:53乃乃：
感謝分享成功用內文的密碼登入豬腳的帳號了
以後可以正大光明的噁別的版務了[e29]
2019-07-13 22:30解凍豬腳：你本來就噁
2019-07-05 20:56聖夜騎士-山羊鮭魚排：
還是看不懂，可以請豬腳親自幫我輔導ㄇ？
2019-07-13 22:31解凍豬腳：可以喲……[e5]
2019-07-05 20:57Kurt Lowe：
你的密碼差1個字元，需要幫你修正嗎？
2019-07-13 22:31解凍豬腳：10 秒 16 個字元
2019-07-05 21:22小龍發威：
甲鬼甲怪
2019-07-13 22:31解凍豬腳：人家是小妹啦 [e33]
2019-07-05 21:47柚羽：
先推免的別人以為我看不懂
2019-07-13 22:31解凍豬腳：豪
2019-07-05 21:48哥布林鎖鍊旋轉者：
先收藏，以後再看
2019-07-13 22:31解凍豬腳：學 coding 永遠不嫌晚
2019-07-05 21:55玥晴 Luna (＃ΦωΦ＃)：
佬
2019-07-13 22:31解凍豬腳：姥……[e16]
2019-07-05 22:34麥麥：
好過上學，比老師的說明好多
2019-07-13 22:33解凍豬腳：我覺得其實這種東西要授課也真的不太容易講，因為會覺得好像都照著老師的 code 寫，就很難瞭解其中的意義，所以當初的觀念有八成以上還是回到家自己 try 出來的
2019-07-05 22:35MR-acetyl：
哇^_^，長知識了，話說maimai的登入網站和其他入口網站應該也是這樣吧https://truth.bahamut.com.tw/s01/201906/549eb4e0073fae96609ba15820cf93a7.JPG?w=300
2019-07-13 22:33解凍豬腳：基本上任何普通的網站都是這樣沒錯
2019-07-05 22:35ゞ雷雷✿°：
最蠢的雷雷，和最神奇的豬腳的差別真大XD
2019-07-13 22:34解凍豬腳：寶……我最適合照顧蠢蠢的人了 [e5]
2019-07-05 23:08前列腺刹車：
是說中國的DNS會給用家假的IP的話，那我直接打google的IP不就行?
2019-07-13 22:43解凍豬腳：DNS 地址混淆只是中國防火長城的眾多手段之一，而且 HTTPS 技術所使用的憑證通常都是跟 domain name 對應，很少人會去申請跟 IP 對應的 SSL 憑證

比如說我們平常打 google.com 都是有 HTTPS 的，這個憑證是認 google.com 而不是 2404:6800:4012:1::200e: 這個 IP

Google 他們不見得有幫他們使用的 IP 申請 SSL 憑證，而且有時候他們可能會替換 IP（例如主機維護的時候換另一台上來頂著用），所以即使你能用 IP 直接連到網站，沒有 HTTPS 還是會導致很多服務失效，因此有了 IP 位址也沒有用，這時候就只能依賴 VPN 了
2019-07-05 23:35卍玩命殺手卍：
xampp來架一個server也只能在同一個區網來做連線(雖然也是達到檢視目的了)對外的防火牆以及路由器的各種阻擋，如果不是了解的人基本上無法把Apache給外網連結，還有要繼續介紹下去還是說說HTTPS不然直接明文傳輸被攔截封包也是問題，還有這種文給一些有興趣的人來說很好，加油
2019-07-13 22:48解凍豬腳：坦白說我對 HTTPS 的理解還不夠透澈，急著拿出來講只怕成了賣弄
現階段打算先把傳送資料、使用資料庫的概念作為重點，感謝你
2019-07-06 00:58披著狼皮的羊：
早期有另外一種方式架論壇(依x那種)當時我也有試著架設不過那種似乎不難如，不過現在我也忘得差不多了當初只是好玩試試看，朋友架設起來無法對外開放我就去試試看，後來還真的讓我搞好....
2019-07-13 23:33解凍豬腳：你指的應該有點類似 Discuz! 的套件，那種通常申請一下就可以了，當初我也有玩過，不過有的服務真的是做得太周全，按兩下就建立好一個論壇，對瞭解原理沒有什麼幫助
2019-07-06 02:18しろ：
我第一反應你是不是寫了一個什麼豬腳論壇(總覺得甲味會很重)上來分享030
2019-07-14 01:19解凍豬腳：我只有瘦瘦可愛的男孩子的監控面板
2019-07-14 01:19解凍豬腳：沒
2019-07-06 02:57紫菜★〃：
好像看懂又好像根本有看沒有懂…
看了留言,突然覺得獲得了安慰XD
還是辛苦分析了……
2019-07-14 01:20解凍豬腳：多數情況下還是要動手做才會比較容易熟悉觀念
2019-07-06 07:32小紅a：
啊...我以為是從試架XOOPS或Discoz!這種套裝程式開始
居然一下子跳高難度0w0
2019-07-14 01:20解凍豬腳：啊……套裝程式照著步驟做一下就會了，會了套件卻不會基本觀念，這可沒意義
2019-07-06 12:36只是個路人：
我...我的腦袋無法承受如此龐大的資訊量
2019-07-15 17:29解凍豬腳：單看文章的話確實不容易一次吸收，之前聽課的時候也是這樣，通常會建議實際動手做
2019-07-06 15:00黑金：
跪求P2
2019-07-15 17:29解凍豬腳：那就期待我不偷懶吧 [e7]
2019-07-07 21:51阿辰：
不愧為巴哈上的IT Evangelist!
2019-07-15 17:30解凍豬腳：[e17] 能跟大家交流是好事
2019-07-09 16:31：
真的淺顯易懂
2019-07-15 17:30解凍豬腳：感謝，有這句話就一切值得了 [e6]
2019-07-16 23:32FallenDown：
好像有點head first的感覺耶～讚讚
2019-07-22 03:13DIS黒き銃神(祭絲tama子)：
摁，後面就完全看不懂網站的流程呢

我現在只會在虛擬機架設可以連線的伺服器
豬腳哥哥要教我嗎^.<
2019-08-04 20:02(๑˘• ¸•)˘{鳴aiRN7⁆：
內容詳盡，範例好懂；讚！
2019-11-12 10:10只是個柳丁(´ ･ω ･`)：
跪著看完

小屋創作

日誌2019-07-05 20:12
[達人專欄] 論壇是怎麼架設的？自己動手做做看！（一）

相關創作

休眠睡眠

【教學】BIOS安全開機啟動/MBR轉GPT (不用第三方程式)

OREO餅乾

留言

日誌2019-07-05 20:12[達人專欄] 論壇是怎麼架設的？自己動手做做看！（一）

相關創作

休眠睡眠

【教學】BIOS安全開機啟動/MBR轉GPT (不用第三方程式)

OREO餅乾

留言

日誌2019-07-05 20:12
[達人專欄] 論壇是怎麼架設的？自己動手做做看！（一）