[第九週]後端基礎— 基本運作原理(搭配 XAMPP)

學習目標：了解後端的最基本運作原理，以及如何利用 XAMPP 快速建立後端環境

靜態網頁與動態網頁

在網頁中「靜態」與「動態」二詞並不是指在視覺上會不會動，而是指是否以「程式」的方式去產生網頁上的資料，舉個例子：

靜態：由設計師設計完版型後，進行切版，完成檔案後直接上傳至主機網站，每當有修改或新增的部分就要重新切版編排在上傳。

動態：大致分成兩種，一種是可以藉由後台的欄位指定標題、內容等，去新增出一個頁面（部落格），另一種是有資料庫的網站，可以跟 User 進行互動，像是留言、購物等（購物網站）。

後端的處理流程

靜態網頁

server 收到 request 後找到相對應的檔案，回傳 response 回去，檔案內容是什麼就回傳什麼。

靜態網頁在後端的處理流程

動態網頁（以 php 舉例）

server 收到 request 後找到副檔名為 .php 的檔案後丟到 php 做執行，php 內部將檔案轉成你要輸出的形式，丟回 server，server 在 response 回去

request => server => php => output => server => response

動態網頁在後端的處理流程

動態網站的 server 跟靜態網站的 server 差在哪？

執行網頁的 server 我們統稱 「web server 網頁伺服器」，用來處理 Request 跟 Response 而這詞有兩個意思：

1. 一台負責提供網頁的電腦，主要是各種程式語言構建而成，通過超文字傳輸協定（HTTP）傳給客戶端（一般是指網頁瀏覽器）。
2. 一個提供網頁的伺服器程式。

靜態、動態的網站就差在於是否有「提供網頁的伺服器程式」。

動態網站我們會在安裝一個伺服器程式，目前網路上市場佔有率最高的伺服器程式為 Apache，透過 Apache 就可以在 web server 執行後端語言（這邊以 php 做舉例），程式動態產生新的資料，將資料記錄到資料庫或回傳到 client 渲染出網頁。

所以我們可以知道，最重要的其實是伺服器程式，沒有伺服器程式網站會直接掛掉，而沒有後端語言就只是變回跟靜態網站一樣，檔案內容是什麼就回傳什麼。

除了運行後端語言外，網址的規則也可以經由 server 設定。＃server 就是程式，所以也可以自己寫出一個 server。

等等怎麼提到其他名詞，什麼是資料庫？

資料庫就是儲存資料的地方，為了方便操作資料庫，而發展出資料庫系統，也就是專門操作有關資料的「程式」，更詳細的說明可參考：[第九週]後端基礎 — 資料庫系統（MySQL）、Table schema

．

．

．

最後來總結一下以上所講的觀念（括弧為舉例使用的程式及語言）：

• 靜態網頁與動態網頁差異在於是否有安裝並執行網頁伺服器。
• 網頁伺服器（Apache）：伺服器程式，專門處理 Request 跟 Response ，是後端最重要的部分。
• 寫程式（PHP）：接收網頁伺服器丟過來的 Request 處理成 output，output 通常是 html。
• 資料庫系統（MySQL）：資料庫程式，專門操作資料庫，提供更有效率查找、修改資料的方法。

建立後端環境

講了落落長，實際操作才能更清楚去理解後端的運作，以下以 XAMPP 來進行實作

XAMPP

• 一次搞定 Apache + MariaDB(MySQL) + PHP 能快速產生後端環境
• 下載教學：
  1. 官網教學影片
  2. Lidemy： windows 版、mac 版

執行 Server

只要燈號變成綠色代表有順利執行

開啟頁面

點擊 Go to Application，就會在瀏覽器上開啟一個網頁

看到這個畫面就代表建置成功囉，我們可以看到 IP 位置與剛剛軟體上是相同的，可以想像成 XAMPP 在你的電腦內安裝了另一台電腦，這台電腦有自己的 IP，Server，網路等相關設置，因此我們可以使用 locallhost:8080 對應到這台電腦，之後在操作時會比較方便

點擊 Enable 看到亮綠燈就代表開啟

開啟後端環境目錄

開啟根目錄：Volum>Mount>Explore

頁面預設都會放在 htdocs 這個資料夾

我們可以看到網址會對應到相對應的資料夾，然後去抓到 index.php，所以可以創一個自己的資料夾然後放入 index.php

<?php
   echo "i am mia"
?>

就成功新增一個頁面了！

更改預設根目錄

設定檔：apache2 > conf > httpd.conf

一開始有提到網址是由 server 來決定，我們可以在 httpd.conf 這個檔案裡重新制定路徑以及其他詳細的規則，因為被設定過其他規則所以你才不會在 Facebook 網址上看到 facebook.com/index.php。

重點整理

• 靜態網頁與動態網頁的差異在於是否有安裝伺服器程式，去額外對檔案執行後端語言，程式動態產生新的資料，將資料記錄到資料庫或回傳到 client 渲染出網頁。
• 網頁伺服器（Apache）：伺服器程式，專門處理 Request 跟 Response，是後端最重要的部分，網址也是由網頁伺服器來進行設定。
• 寫程式（PHP）：網頁伺服器對檔案執行此後端語言，將 Request 處理成 output，而 output 通常是 html。
• 資料庫系統（MySQL）：資料庫程式，專門操作資料庫，提供更有效率查找、修改資料的地方。

參考資料

• [BE101] 用 PHP 與 MySQL 學習後端基礎
• 維基百科 — 網頁伺服器
• 愛貝斯網路 — 靜態網頁跟動態網頁的不同

以上有任何錯誤的地方歡迎指正，感謝。