創作內容

227 GP

[達人專欄] 論壇是怎麼架設的?自己動手做做看!(一)

作者:解凍豬腳│2019-07-05 20:12:37│巴幣:777│人氣:8015
 
  你是否想過自己架設一個網站呢?

  小學三年級的時候,我還真的想過。記得當時很天真地上 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 伺服器,也能體驗一下用網站擁有者的角度來看待這個世界。

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



同系列文章:
 
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=4450093
All rights reserved. 版權所有,保留一切權利

相關創作

同標籤作品搜尋:網頁|網站|網頁設計|PHP|HTML|Cookie|電腦|連線|網路

留言共 41 篇留言

一顆茶葉蛋
哈哈我看不懂

07-05 20:15

解凍豬腳
07-13 22:04
雪之王女‧F‧巧可奈
相當實用的文章^^

07-05 20:15

解凍豬腳
感謝 [e7]07-13 22:04
緋渚綾瀨
密碼好星爆

07-05 20:18

解凍豬腳
10 秒 16 顆飼料07-13 22:06
A2266604
我們愛的司服器呢

07-05 20:19

解凍豬腳
已黑單07-13 22:06
雨丸✰“ReのLife”★
豬腳1人 自己扛完整個小組的期末專題?![e28]

07-05 20:20

解凍豬腳
不是全都一個人啦,前端好在還有隊友幫忙罩,我前端很爛 [e3]
倒是後端真的有九成的 code 都一個人寫07-13 22:08
0056マンジュウ
總之我先噓密碼

07-05 20:22

解凍豬腳
寶……你捨得噓我嗎07-13 22:08
千夜老師ღ
噓ㄌ

07-05 20:28

解凍豬腳
噓的人都要被我吊起來玩弄07-13 22:09
空誠
豬腳論壇,噁男們的快樂天堂

07-05 20:28

解凍豬腳
小妹我才不是噁男07-13 22:09
咖啡因超人・夜久
很強的樣子 文組表示看不懂

07-05 20:29

解凍豬腳
嗚嗚……文組看不懂的話就代表我的敘事能力很糟糕了07-13 22:09
young
先推優質文

07-05 20:29

解凍豬腳
每天都要優質 [e16]07-13 22:09
Caiseu225(繼續習下韓上)
佬......

07-05 20:29

解凍豬腳
姥……07-13 22:10
Lily らい
簡單易懂的解說^^

07-05 20:31

解凍豬腳
讓我插07-13 22:10

那麼哈拉版那種文章又是怎麼建立及更新樓層的?

07-05 20:33

解凍豬腳
 
以 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,這樣就會看到該討論串裡的所有文章
 07-13 22:28
雞塊
推 免得別人

07-05 20:35

解凍豬腳
免得別人看不到這篇文 [e16]07-13 22:29
中二И小屁孩
我的夢想是弄一個自己的網站跟朋友哈拉
可是我沒有朋友

07-05 20:36

解凍豬腳
原來是因為沒有朋友啊…… [e36]07-13 22:29
VooDoo〞巫毒之子
看到一半 頭腦當機qq

07-05 20:39

解凍豬腳
當初在學校剛上 PHP 的時候,也是腦袋各種當機,完全死機的那種 [e20]07-13 22:30
防彈脂肪
支離破碎的理解
哇誇某

07-05 20:49

解凍豬腳
再看一百次07-13 22:30
乃乃
感謝分享 成功用內文的密碼登入豬腳的帳號了
以後可以正大光明的噁別的版務了[e29]

07-05 20:53

解凍豬腳
你本來就噁07-13 22:30
聖夜騎士-山羊鮭魚排
還是看不懂,可以請豬腳親自幫我輔導ㄇ?

07-05 20:56

解凍豬腳
可以喲……[e5]07-13 22:31
Kurt Lowe
你的密碼差1個字元,需要幫你修正嗎?

07-05 20:57

解凍豬腳
10 秒 16 個字元07-13 22:31
小龍發威
甲鬼甲怪

07-05 21:22

解凍豬腳
人家是小妹啦 [e33]07-13 22:31
柚羽
先推 免的別人以為我看不懂

07-05 21:47

解凍豬腳
07-13 22:31
哥布林鎖鍊旋轉者
先收藏,以後再看

07-05 21:48

解凍豬腳
學 coding 永遠不嫌晚07-13 22:31
玥晴 Luna (#ΦωΦ#)

07-05 21:55

解凍豬腳
姥……[e16]07-13 22:31
麥麥
好過上學,比老師的說明好多

07-05 22:34

解凍豬腳
我覺得其實這種東西要授課也真的不太容易講,因為會覺得好像都照著老師的 code 寫,就很難瞭解其中的意義,所以當初的觀念有八成以上還是回到家自己 try 出來的07-13 22:33
MR-acetyl
哇^_^,長知識了,話說maimai的登入網站和其他入口網站應該也是這樣吧https://truth.bahamut.com.tw/s01/201906/549eb4e0073fae96609ba15820cf93a7.JPG?w=300

07-05 22:35

解凍豬腳
基本上任何普通的網站都是這樣沒錯07-13 22:33
ゞ雷雷✿°
最蠢的雷雷,和最神奇的豬腳的差別真大XD

07-05 22:35

解凍豬腳
寶……我最適合照顧蠢蠢的人了 [e5]07-13 22:34
前列腺刹車
是說中國的DNS會給用家假的IP的話,那我直接打google的IP不就行?

07-05 23:08

解凍豬腳
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 了07-13 22:43
卍玩命殺手卍
xampp來架一個server也只能在同一個區網來做連線(雖然也是達到檢視目的了)對外的防火牆以及路由器的各種阻擋,如果不是了解的人基本上無法把Apache給外網連結,還有要繼續介紹下去還是說說HTTPS不然直接明文傳輸被攔截封包也是問題,還有這種文給一些有興趣的人來說很好,加油

07-05 23:35

解凍豬腳
坦白說我對 HTTPS 的理解還不夠透澈,急著拿出來講只怕成了賣弄
現階段打算先把傳送資料、使用資料庫的概念作為重點,感謝你07-13 22:48
披著狼皮的羊
早期有另外一種方式架論壇(依x那種)當時我也有試著架設不過那種似乎不難如,不過現在我也忘得差不多了當初只是好玩試試看,朋友架設起來無法對外開放我就去試試看,後來還真的讓我搞好....

07-06 00:58

解凍豬腳
你指的應該有點類似 Discuz! 的套件,那種通常申請一下就可以了,當初我也有玩過,不過有的服務真的是做得太周全,按兩下就建立好一個論壇,對瞭解原理沒有什麼幫助07-13 23:33
しろ
我第一反應 你是不是寫了一個什麼豬腳論壇(總覺得甲味會很重)上來分享030

07-06 02:18

解凍豬腳
我只有瘦瘦可愛的男孩子的監控面板07-14 01:19
解凍豬腳
07-14 01:19
紫菜★〃
好像看懂又好像根本有看沒有懂…
看了留言,突然覺得獲得了安慰XD
還是辛苦分析了……

07-06 02:57

解凍豬腳
多數情況下還是要動手做才會比較容易熟悉觀念07-14 01:20
小紅a
啊...我以為是從試架XOOPS或Discoz!這種套裝程式開始
居然一下子跳高難度0w0

07-06 07:32

解凍豬腳
啊……套裝程式照著步驟做一下就會了,會了套件卻不會基本觀念,這可沒意義07-14 01:20
只是個路人
我...我的腦袋無法承受如此龐大的資訊量

07-06 12:36

解凍豬腳
單看文章的話確實不容易一次吸收,之前聽課的時候也是這樣,通常會建議實際動手做07-15 17:29
黑金
跪求P2

07-06 15:00

解凍豬腳
那就期待我不偷懶吧 [e7]07-15 17:29
阿辰
不愧為巴哈上的IT Evangelist!

07-07 21:51

解凍豬腳
[e17] 能跟大家交流是好事07-15 17:30

真的淺顯易懂

07-09 16:31

解凍豬腳
感謝,有這句話就一切值得了 [e6]07-15 17:30
FallenDown
好像有點head first的感覺耶~讚讚

07-16 23:32

DIS黒き銃神(祭絲tama子)
摁,後面就完全看不懂網站的流程呢

我現在只會在虛擬機架設可以連線的伺服器
豬腳哥哥要教我嗎^.<

07-22 03:13

(๑˘• ¸•)˘{鳴aiRN7⁆
內容詳盡,範例好懂;讚!

08-04 20:02

只是個柳丁(´ ・ω ・`)
跪著看完

11-12 10:10

我要留言提醒:您尚未登入,請先登入再留言

227喜歡★johnny860726 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:0701 近況... 後一篇:[達人專欄] 跟著豬腳 ...

追蹤私訊切換新版閱覽

作品資料夾

------------------ (0)

豬腳生活 (1)
日常雜談、巴哈大小事 (193)
煞氣a國中生 (7)
高中生活日誌 (55)
大學生活日誌 (34)
冬令營回憶錄 (19)
也許藏有一些小祕密吧? (3)
各式各樣的開箱文 (11)
貓科動物時間 (15)

------------------ (0)

繪圖創作 (1)
電繪插圖、草稿 (199)
短篇漫畫、單幅標語 (61)
上課太無聊的手繪塗鴉 (8)
不知道該怎麼分類的綜合作品 (18)

文字創作 (1)
草莓兵的國軍紀實 (14)
我與らい的點點滴滴 (12)
那些榮耀的時刻與心跳加速的瞬間 (60)
有感而發的隨筆之作、無法分類的短文 (17)

------------------ (0)

語言學習 (1)
日語:天気がいいから (5)
粵語:唔好再淨係識講粗口喇 (6)
英語:Hey, you! (1)

程式設計及電腦網路 (1)
系列文:跟著豬腳 C 起來 (10)
系列文:論壇網站運作原理 (3)
Go(Golang) (11)
Ruby / RGSS (7)
Visual Basic (13)
JavaScript (1)
各種原理 (17)

思想:多思考一下,世界會更不一樣 (1)
網路經驗、社會觀察 (23)
檸檬庫 (21)

數學:我來拯救你的期中考了 (1)
各類基礎觀念 (5)
國中生也能懂的微積分 (9)
微分方程 (0)

小說:用筆鋒劃出新世界的入口 (1)

繪圖:我也想畫出私巴拉西的美圖 (10)

------------------ (0)

施工中 (22)

不堪回首的痕跡、雜物堆放 (31)

------------------ (0)

未分類 (1)

kkll7952巴友們
+ 3月-4月遊戲製作進度+簡報分享 + https://home.gamer.com.tw/creationDetail.php?sn=5919640看更多我要大聲說3小時前


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】