個人網頁自動化生成系統（四）：模板提交頁面 muban.php 實作

本系列第四篇介紹模板提交頁面 muban.php，讓使用者透過表單輸入「標題之前」、「正文之前」、「正文之後」三段 HTML 片段，送至 muobanshen.php 處理儲存，進而實現頁面版型的動態組合。

頁面結構與表單設計

頁面採用簡單的 HTML 4.01 架構，背景圖 image/b-graingr1.jpg，表單以 POST 方式提交。三個輸入區皆使用 <textarea>，寬 70 欄、高 5 列，名稱分別為 muban1、muban2、muban3。底部提供「提交」與「復位」兩個按鈕。

<form method="post" action="muobanshen.php">
  <table width="750" border="1">
    <tr>
      <td width="155">標題之前：</td>
      <td width="579"><textarea name="muban1" cols="70" rows="5"></textarea></td>
    </tr>
    <tr>
      <td>正文之前：</td>
      <td><textarea name="muban2" cols="70" rows="5"></textarea></td>
    </tr>
    <tr>
      <td>正文之後：</td>
      <td><textarea name="muban3" cols="70" rows="5"></textarea></td>
    </tr>
    <tr>
      <td colspan="2"><div align="center">
        <input type="submit" name="Submit" value="提交">
        <input type="button" name="Submit2" value="復位">
      </div></td>
    </tr>
  </table>
</form>

資料流向與後續處理

1. 使用者在三個文字區塊填入 HTML 片段（可包含樣式、腳本、版權聲明等）。
2. 按下「提交」送至 muobanshen.php，後端將三段內容寫入資料庫或文字檔。
3. 前台頁面產生時（如 index.php），讀取這三段模板，夾帶動態內容（文章標題、正文、側欄等）組合輸出完整頁面。

安全性考量

• XSS 風險： 使用者輸入的 HTML 直接儲存並輸出，若未過濾惡意腳本，將導致跨站腳本攻擊。建議在儲存或輸出時，使用 HTMLPurifier 或僅允許安全標籤屬性。
• CSRF 防護： 表單缺少一次性 Token，建議加入 <input type="hidden" name="csrf_token" value="..."> 並在後端驗證。
• 編碼一致性： 頁面宣告 charset=gb2312，若資料庫或連線編碼不同，需注意轉碼，避免亂碼。

現代化改良方向

• 採用 MVC 架構，將模板引擎（如 Twig、Blade）分離，支援繼承、區塊覆寫等進階功能。
• 改用 JSON 或資料庫欄位儲存結構化模板資料，而非單純 HTML 字串。
• 提供所見即所得（WYSIWYG）編輯器（如 TinyMCE、CKEditor），降低使用者門檻。

雖然這個簡單的模板提交頁面已能滿足基本的版型客製需求，但在安全性與擴充性上仍有提升空間。下一篇將探討 muobanshen.php 的後端處理邏輯與模板套用機制。