2. 開始動手做界面

一般使用者看到的網頁畫面或者操作界面，我們稱之為「前端」
「前端」通常是HTML+CSS+JavaScript的搭配。
1. HTML：網頁標籤，長像這樣：<div></div>，用來設計網頁的架構。
2. CSS：樣式表，用來美化畫面用
3. JavaScript：用來掌控網頁的各種元件，可以做出操作友善的界面
前端只要有瀏覽器就能執行，不見得需要網頁伺服器。

例如：從資料庫讀出所有文章的資料後，如何送到前端做呈現？方法也有好幾種：

利用API：
1. 這是現今比較主流作法
2. 後端只負責提供 RESTful API（通常就是回傳一串 json資料），然後由前端工具去擷取，並產生畫面。
3. 好處是前後端可以分得很乾淨，甚至可以不用在同一臺主機，前端彈性大，可以做成網站界面，也可以做成手機App。
4. 缺點是學習曲線較高
利用樣板引擎（我們用這種方式）：
1. 前後端分開寫，前端內容會在設計在 tpl 或 html 檔中，後端為 php檔
2. 後端透過樣板引擎（如 Smarty、TBS）將資料塞入前端，產生前端畫面
3. 好處是前後端可以分開處理，入門難度不算高
4. 缺點是只能在同一臺機器上處理，資料無再次應用
利用後端直接產生前端：
1. 不推這種作法
2. 好處是稍微簡單一些，無須搭配任何套件
3. 缺點是通常就是前後端混寫在一起，難以維護，通常是比較早期，或剛入門時用的方式

:::

展開 | 闔起