創作內容

75 GP

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

作者:解凍豬腳│2019-07-20 19:37:11│巴幣:158│人氣:6986
 
  前篇:論壇是怎麼架設的?自己動手做做看!(一)

  在我們動手開始寫網頁以前,先瞭解架站需要的東西吧!

  至少十年前,網路上就已經有了稱為「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 檔案裡啦!先前已經講過了,一般來說這些資料都會被好好地存放在資料庫裡面,這樣也利於存取或修改。至於如何去利用資料庫,我們就留待下次再來講吧~感謝大家的收看。

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

相關創作

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

留言共 17 篇留言


豬腳姆特

07-20 19:41

MR-acetyl
看來對我來說很難https://truth.bahamut.com.tw/s01/201905/86fedfd05237c288d90e82443aeaecb7.JPG?w=300

07-20 19:41

一顆茶葉蛋
我整篇都看不懂 不過噁男為什麼會可愛= =

07-20 19:41

雨丸✰“ReのLife”★
很厲害 但我看不懂

07-20 19:44

巴哈板孫文
當初在經營CSGO Server的時候,後台玩家資料都是用MySQL紀錄的,想著就累。

07-20 19:55

貓貓鯊鯊
看成架政壇是不是沒救了

07-20 19:58

解凍豬腳
看成架政壇所以沒救了(X)
政壇沒救了(O)07-21 18:56
乃乃
豬腳真的超可愛

07-20 20:03

漣漪
太深奧了吧

07-20 20:44

VooDoo〞巫毒之子
4豬腳

07-20 21:21

貓廚
太優質了吧 豬腳

07-20 22:50

夏井
最近剛好在研究 感謝分享!!

07-20 23:33

玥晴 Luna (#ΦωΦ#)
佬...我看不懂

07-20 23:47

R.J 龍哥
既然用 XAMPP,可以搭配幾年前比較流行的 Discuz 框架當作實例可以節省很多時間
畢竟要設計 http 頁面、流程和論壇機制其實會很費時

07-21 02:06

解凍豬腳
我會寫這篇的初衷比較特別,主要是因為 Discuz! 框架這種東西只要照著步驟寫的話,其實人人都會,而且架好了也沒辦法因此瞭解瀏覽器跟 HTTP 運作的機制(例如資料庫是怎麼一回事?GET/POST 方法是什麼?),可能我系列標題下得不太好就是了 XD07-21 02:14
雪之王女‧F‧巧可奈
最近豬腳小屋創作更新頻率越來越高^^

07-21 08:51

八龍易主(´・ω・`)つ
我不碰NODEJS的原因 就是JS都不懂了 還要去搞這個東西 真的對新手來說是拿石頭砸自己腳
也曾經用別人寫好的框架 作網站 那個時候就是用NODEJS當後臺在跑 很多東西都看不懂 一個個套件綁再一起沒有詳細的新手教學
作者也沒有要鳥你的意思 最後只好放棄

07-23 19:03

八龍易主(´・ω・`)つ
豬腳這個XAMPP
其實其他設定都案下一步就好
不用去另外做設定
寫一個 <?php echo "豬腳好可愛";?>
有顯示畫面就代表成功了

07-23 19:04

更新的人格
已懷念
以前都要自己用阿帕契工具到處設定

這套直接點一點、開個info檔看看有需要設值的地方就能讓伺服運作起來

08-04 19:54

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

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

前一篇:[達人專欄] 跟著豬腳 ... 後一篇:一張價值 20 萬的紙...

追蹤私訊切換新版閱覽

作品資料夾

------------------ (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)

未分類 (0)

hyzgdivina喜歡虹咲的LLer
我的小屋裡有很多又香又甜的Hoenn繪師虹咲漫畫翻譯喔!歡迎LoveLiver來我的小屋裡坐坐~看更多我要大聲說昨天23:33


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

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