[題目解析] 技能檢定！網頁設計乙級術科考題分析（題組二）

本篇為網乙解析系列之題組二，難易度最簡單且完成時間所需最少。本篇之前置作業 (lib.php 與 MySQL 規劃）不再進行說明。

網乙術科題庫分析：
事前建置說明 - [題目解析] 技能檢定！網頁設計乙級術科考題分析（事前準備）

No.3 網站標題 (20%)

這題只需要 HTML 編輯動作，以及規劃登入紀錄瀏覽次數的 SQL 設計要求。

標題圖片

調整網站的標題圖片，替代文字可能是 title 或是 alt。建議都做。

修改 index.php

找到 #title2 部分

index.php

<div id="title2">
</div>

修改為

index.php

<div id="title2">
<img src="img/02B01.jpg" alt="健康促進網 - 回首頁" title="健康促進網 - 回首頁">
</div>

今天日期、今日瀏覽人次、累計瀏覽人次

先開始規劃如何取得這三個變數，提供前端使用。

1. 今天日期：用 date() 去做出題目要求的格式
2. 今日瀏覽人次：把每天的日期記錄起來，不存在就新增。有新訪客就加 1。
3. 累計瀏覽人次：跑個迴圈把資料表內所有數字加起來

增添 lib.php

lib.php

//t3
$re = select("q2t3_visit", "date='" . date("Y-m-d") . "'"); //檢查今日是否存在
if ($re == null) { //資料庫內尚未持有今日資訊
  $post['num'] = 0;
  $post['date'] = date("Y-m-d");
  $id = insert($post, "q2t3_visit");
  $t3_visit = 0; //拜訪數據 0
} else {
  $id = $re[0]['id'];
  $t3_visit = $re[0]['num']; //下載拜訪數據
}

if (empty($_SESSION['visit'])) { //檢查後若為新訪客
  $_SESSION['visit'] = true;
  $_POST['num+1'] = $id;
  update($_POST, "q2t3_visit"); //資料庫數據+1
  $t3_visit++; //拜訪數據+1
}

$re = select("q2t3_visit", 1);
$t3_total = 0;
foreach ($re as $ro) $t3_total += $ro['num'];//統計總數

修改 index.php

回到前台開始顯現（記得 include 這個 lib.php)

index.php

<?php //塞入 HTML 開頭
include "lib.php";
?>

修改

index.php

<div id="title">
  00 月 00 號 Tuesday | 今日瀏覽：1 | 累積瀏覽：36 </div>

為

index.php

<div id="title">
  <?= date("m 月 d 號 l") ?> | 今日瀏覽：<?= $t3_visit ?> | 累積瀏覽：<?= $t3_total ?>
  <a href="index.php" style="float:right">回首頁</a>
</div>

右邊的回首頁按鈕

建立超連結透過 float 方式靠右，跟上面同樣位置，如下：

修改 index.php

index.php

<div id="title">
  <?= date("m 月 d 號 l") ?> | 今日瀏覽：<?= $t3_visit ?> | 累積瀏覽：<?= $t3_total ?>
  <a href="index.php" style="float:right">回首頁</a>
</div>

No.4 主選單 (15%)

這題是送分題，題目要求的動作在板型上都早已完成不需處理。所有選單會根據內容連接，所以只注意 URL 對應

規劃選單連結內容

這裡設計 $content_zone 代碼為指定畫面，會依檔案名稱而異

修改 index.php

這裡先預先做好兩種畫面，一個是用戶主頁，另一個是管理者主頁。管理者部分在 No.14 部分會用到。於頁首開頭處填入：

index.php

//for t4
$admain = (empty($_SESSION['admin'])) ? "main" : "admain";
$main = (empty($_GET['do'])) ? $admain : $_GET['do'];

以及找到內容區之位置填入

index.php

<div class="">
</div>

改成

index.php

<div><?php include $main . ".php" ?></div>

No.5 動態文字廣告 (5%)

就只是 <marquee></marquee>，依題目手動輸入字串在正確位置，在會員登入的左邊

加入跑馬燈

注意已經占用 18%空間，左邊可用空間至少有 82%。

修改 index.php

找到

index.php

<span style="width:18%; display:inline-block;">
<a href="?do=login">會員登入</a></span>

加入跑馬燈

index.php

<marquee style="width:80%; display:inline-block;">
  請民眾踴躍投稿電子報，讓電子報成為大家相互交流、分享的園地！詳見最新文章
</marquee>
<span style="width:18%; display:inline-block;">
  <a href="?do=login">會員登入</a>
</span>

No.6 會員登入登出 (30%)

設計登入登出按鈕，所對應的驗證功能與查詢密碼與註冊。

設計登入

示意圖上的線框設計，是使用 HTML5 表單的 fieldset，大部分的版面示意都有出現，所以多背一下這個結構。

<fieldset>
  <legend>Title</legend>
  Your Content
</fieldset>

建立 login.php

填入代碼設計提交表單。重點在於解題要習慣所有表單都會到 api.php 處理並夾帶動作要求 do=login。

login.php

<fieldset>
  <legend>會員登入</legend>
  <form action="api.php?do=login" method="post">
    帳號：<input type="text" name="acc"><br>
    密碼：<input type="password" name="pwd"><br>
    <input type="submit" value="登入"><input type="reset" value="清除">
    <a href="?do=forget">忘記密碼</a> | <a href="?do=reg">尚未註冊</a>
  </form>
</fieldset>

題目還有要求 login.php 兩個連結到忘記密碼與註冊 (forget,register) 要做先跳過。在第九第十題才會開始設計。

建立 api.php

設計 switch 來做 do=login 的處理。

• 此外如果 admin 登入正確就給一個 session by admin
• 題目要求有處理結果的提示（使用 JS.alert，並使用 js 轉址。如果可登入就給個 session by user

api.php

<?php
include "lib.php";
switch ($_GET['do']) {
  case 'login':
    if ($_POST['acc'] == 'admin' && $_POST['pwd'] == '1234') $_SESSION['admin'] = 'admin';

    $re = select("q2t6_user", "acc='" . $_POST['acc'] . "'");
    if ($re == null) echo "<script>alert('查無帳號');" . jlo("index.php?do=login") . "</script>";
    $re = select("q2t6_user", "acc='" . $_POST['acc'] . "' and pwd='" . $_POST['pwd'] . "'");
    if ($re == null) echo "<script>alert('密碼錯誤');" . jlo("index.php?do=login") . "</script>";
    else {
      $_SESSION['user'] = $_POST['acc'];
      plo("index.php");
    }
    break;
}
?>

登入登出按鈕

登入成功後，調整登入登出按鈕效果。這裡寫在 lib.php 可以減少對素材 index.php 的代碼複雜。

• 未登入顯示<a href='?do=login'>會員登入</a>
• 已登入顯示歡迎，".$_SESSION['user']."<a href='api.php?do=logout'>登出</a>，登出在題目上有要求框線

增添 lib.php

lib.php

//t6
$t6_btn =
  (empty($_SESSION['user'])) ?
  '<a href="?do=login">會員登入</a>' :
  '歡迎， ' . $_SESSION['user'] . ' <a href="api.php?do=logout" style="border: solid 1px #000">登出</a>';

修改 index.php

修改該對應位置

index.php

<span style="width:18%; display:inline-block;"><a href="?do=login">會員登入</a></span>

為

index.php

<span style="width:18%; display:inline-block;"><?= $t6_btn ?></span>

登出

題目沒有要求設計登出（可做可不做），設計清除 session 並回到首頁。

增添 api.php

api.php

case 'logout':
  unset($_SESSION['user']);
  unset($_SESSION['admin']);
  plo("index.php");
  break;

No.7 主題內容顯示 (20%)

這題分兩個動作設計，分別是首頁的 tabs HTML（用 Dreamwaver 做）頁簽版，與分類網誌（用 PHP+SQL 做）表列版

首頁的分頁標籤

index.php 預設所對應的 content zone 是 main。透過 dreamweaver 完成就好（因為 JS 較複雜）

1. 開啟 dreamweaver，建立一個空白 HTML。清空所有代碼，另存到某位置（如桌面）
2. 使用 （示意圖為 C6 版本，泰山考場應該是 C6 版本，本解析將採用 C6 版本）
   C6 版本：插入 > Spry > Spry 標籤面板 (CC 已不支援）
   CC 版本：插入 > Jquery UI > tab
3. 按下存檔，系統會問是否將延伸外掛 (JS+CSS 那些）存到該路徑上。（桌面上會多個 JS+CSS 資料夾）
4. 將資料夾 SpryAssets 放回考試之根目錄，並將程式碼貼回 main.php

以下為 Dreamweaver 幫你生成的 HTML+JS+CSS

<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 3</li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">內容 1
    </div>
    <div class="TabbedPanelsContent">內容 2
    </div>
    <div class="TabbedPanelsContent">內容 3
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>

設計 main.php

4 個標籤文字內容各在 02A03.txt~02A06.txt，加以整理為（可以在 Dreamweaver 貼上文字，讓 DW 幫你生成 p 與 br 標籤：

main.php

<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">健康新知</li>
    <li class="TabbedPanelsTab" tabindex="0">菸害防治</li>
    <li class="TabbedPanelsTab" tabindex="0">癌症防治</li>
    <li class="TabbedPanelsTab" tabindex="0">慢性病防治</li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
      缺乏運動已成為影響全球死亡率的第四大危險因子-國人無規律運動之比率高達 72.2%<br>
      資料來源： 行政院衛生署國民健康局 <br>
      發佈日期： 2012 / 10 / 07<br>
      世界衛生組織指出運動不足已成全球第四大致死因素，每年有 6%的死亡率與運動不足有關，僅次於高血壓（13％）、菸品使用（9％）及高血糖（6％）之後，有超過 200 萬死亡人數可歸因於靜態生活。世界上約 60-85％的成人過著靜態生活，三分之二的兒童運動不足，未來都將影響健康並造成公共衛生問題。運動不足除了增加死亡率，還會使心血管疾病、糖尿病、肥胖的風險加倍，並增加大腸癌、高血壓、骨質疏鬆、脂質失調症（lipid
      disorders）、憂鬱、焦慮的風險。大約 21-25％乳癌及大腸癌、27%糖尿病與 30％的缺血性心臟病，係因運動不足所造成。許多國家運動不足的人口比率，也正不斷地增加，依據行政院體育委員會 2011 年運動城巿調查結果顯示，國人無規律運動習慣之比率高達 72.2%。<br>
      我國十大死因的危險因子皆與運動不足有關，運動的好處很多，可以預防慢性疾病，降低罹患癌症、跌倒的風險等。國家衛生研究院溫啟邦教授利用台灣一個大型的追蹤世代，分析各個不同運動量的健康效益。研究發現，與不運動的人相比，每天運動 15 分鐘（每週約 90 分鐘）是可以減少 14%總死亡、10%癌症死亡及 20%的心血管疾病死亡，延長 3 年壽命。這些好處不但適用於各個年齡層包括年青人、年老人，也適用於男性與女性，對有心血管疾病風險的人包括吸菸、肥胖者，也一樣有用。<br>
      國民健康局鼓勵民眾養成規律運動習慣，對於預防心血管疾病、糖尿病、高血脂以及高血壓等，都有顯著的效益，並可降低罹患癌症的風險，加速代謝脂肪，強化肌肉組織與功能，維持健康體重，提高腦內啡的釋放，降低情緒壓力。一般而言，成人只要每週運動累積達 150 分鐘、兒童每日運動累積 60 分鐘，就能有足夠的運動量，建議成人每天運動 30 分鐘，可分段累積運動量，效果與一次做完一樣。例如上下班（學）通勤時間與中午休息時間分段進行，每次 15 分鐘分 2 次或是每次 10 分鐘分 3 次完成，只要每天持之以恆，健康體能就會大大地提昇。<br>
      許多上班族時常抱怨沒時間或空間運動，國民健康局製作 15 分鐘「上班族健康操」，不受場地、服裝的限制，每天上、下午各跳 15 分鐘健康操，可消耗 100 大卡的熱量，持續 1 年，約可減少 4 公斤，不但消耗過多熱量，還能促進身體健康。國民健康局為幫助同仁達到規律運動，運用電腦提示系統，於每天上午 9 時 45 分及下午 3 時 45 分，電腦螢幕會自動跳出「上班族健康操」畫面，鼓勵同仁暫時放下手邊的工作，隨著音樂一起動一動。<br>
      對於沒有運動習的民眾，「健走」也是很好的入門運動，衛生署國民健康局自 91 年起推動「每日一萬步
      健康有保固」，「健走」是既簡單又輕鬆的運動，不需特殊裝備，只要穿著輕便服裝、運動鞋，運用「抬頭挺胸縮小腹、雙手微握放腰部、自然擺動肩放鬆、邁開腳步向前行」健走小口訣，以 4 公里/小時的速度，日行萬步，只要 90 分鐘，步行約 6 公里，就可以消耗約 300 大卡，走向健康。<br>
      國民健康局並介紹運動生活化之小撇步，協助民眾落實生活化的運動。<br>
      1. 從日常生活中找出時間來活動，例如：步行買午、晚餐、水果、日用品；步行去用餐；蹓狗。<br>
      2. 外出或是上下班（學）不妨多多利用大眾運輸工具，讓自己提早出門提前一站下車，步行至目的地。<br>
      3. 可以走樓梯就不要坐電梯，如果一下子沒辦法走這麼多樓梯，步行走上幾層樓後再搭乘電梯，慢慢增加自己的運動量。<br>
      4. 多和家人到戶外活動，或騎腳踏車、打球等活動。<br>
      5. 假日可以自己動手整理家裡、擦擦地板，也可以增加運動量！或利用掃地、拖地時加大動作幅度，那也是很好的身體活動。<br>
      6. 在家裡、辦公室附近找方便的資源運動，包括公園、職場辦的課程、活動。<br>
      7. 減少看電視、打電玩等靜態生活的時間。<br>
      民眾對運動如有疑問，可參考國民健康局肥胖防治網-「快樂動」(http://obesity.bhp.gov.tw)，亦可撥打免費市話健康體重管理電話諮詢服務，諮詢專線「0800-367-100（0800-瘦落去-要動動）」，也可利用國民健康局局網首頁或肥胖防治網問題諮詢專區的網路電話撥入功能，向客服人員諮詢關於運動、健康飲食及健康體重管理等相關疑問。
    </div>
    <div class="TabbedPanelsContent">
      菸害防治法規<br>
      第二十三條　　違反第五條或第十條第一項規定者，處新臺幣一萬元以上五萬元以下罰鍰，並得按次連續處罰。<br>
      第二十四條　　製造或輸入違反第六條第一項、第二項或第七條第一項規定之菸品者，處新臺幣一百萬元以上五百萬元以下罰鍰，並令限期回收；屆期未回收者，按次連續處罰，違規之菸品沒入並銷毀之。<br>
      販賣違反第六條第一項、第二項或第七條第一項規定之菸品者，處新臺幣一萬元以上五萬元以下罰鍰。<br>
      第二十五條　　違反第八條第一項規定者，處新臺幣十萬元以上五十萬元以下罰鍰，並令限期申報；屆期未申報者，按次連續處罰。<br>
      規避、妨礙或拒絕中央主管機關依第八條第二項規定所為之取樣檢查（驗）者，處新臺幣十萬元以上五十萬元以下罰鍰。<br>
      第二十六條　　製造或輸入業者，違反第九條各款規定者，處新臺幣五百萬元以上二千五百萬元以下罰鍰，並按次連續處罰。<br>
      廣告業或傳播媒體業者違反第九條各款規定，製作菸品廣告或接受傳播或刊載者，處新臺幣二十萬元以上一百萬元以下罰鍰，並按次處罰。<br>
      違反第九條各款規定，除前二項另有規定者外，處新臺幣十萬元以上五十萬元以下罰鍰，並按次連續處罰。<br>
      第二十七條　　違反第十一條規定者，處新臺幣二千元以上一萬元以下罰鍰。<br>
      第二十八條　　違反第十二條第一項規定者，應令其接受戒菸教育；行為人未滿十八歲且未結婚者，並應令其父母或監護人使其到場。<br>
      無正當理由未依通知接受戒菸教育者，處新臺幣二千元以上一萬元以下罰鍰，並按次連續處罰；行為人未滿十八歲且未結婚者，處罰其父母或監護人。<br>
      第一項戒菸教育之實施辦法，由中央主管機關定之。<br>
      第二十九條　　違反第十三條規定者，處新臺幣一萬元以上五萬元以下罰鍰。<br>
      第三十條　　製造或輸入業者，違反第十四條規定者，處新臺幣一萬元以上五萬元以下罰鍰，並令限期回收；屆期未回收者，按次連續處罰。<br>
      販賣業者違反第十四條規定者，處新臺幣一千元以上三千元以下罰鍰。<br>
      第三十一條　　違反第十五條第一項或第十六條第一項規定者，處新臺幣二千元以上一萬元以下罰鍰。<br>
      違反第十五條第二項、第十六條第二項或第三項規定者，處新臺幣一萬元以上五萬元以下罰鍰，並令限期改正；屆期未改正者，得按次連續處罰。<br>
      第三十二條　　違反本法規定，經依第二十三條至前條規定處罰者，得併公告被處分人及其違法情形。<br>
      第三十三條　　本法所定罰則，除第二十五條規定由中央主管機關處罰外，由直轄市、縣（市）主管機關處罰之。<br>
    </div>
    <div class="TabbedPanelsContent">
      <p>降低罹癌風險 建構健康生活型態<br>
        癌症防治 三管齊下 Part 1 降低罹癌風險建構健康生活型態 </p>
      <p>撰文：徐文媛　諮詢對象：衛生署國民健康局副局長趙坤郁 </p>
      <p>致癌的因素很多，而且往往就存在於我們周遭環境及日常生活中。唯有正常飲食、適當運動、遠離致癌因子、養成健康行為與生活習慣，並改善生活環境品質，才能減少罹癌的危機。<br>
        形塑健康生活新價值觀<br>
        「健康生活型態」牽涉的範圍很廣，衛生署國民健康局副局長趙坤郁表示，做為國家癌症防治政策的一環，應優先選擇具實證研究基礎的指標，所以健康飲食、菸害防制、檳榔防制及建立運動習慣，都是目前積極推動的衛生政策。<br>
        生活型態需要長時間建立，所以要改變民眾健康生活型態，必須設定出各項目標策略和衡量指標，設法營造有助達成目標的軟、硬體環境，這些工作往往需要跨部門，甚至從民間社團、社區等基層的參與，才能讓議題逐漸發酵，達到社會價值的建立及風氣的改變。例如在健康飲食方面，至少需要健康局與食品衛生處（未來即將成立的食品藥物管理局）合作，除了宣導正確的飲食習慣，也要為民眾吃的健康把關，避免汙染等有害食物流入巿面。<br>
        在推廣動態生活，建立國人運動習慣上，透過訂定國人健康體能指標，調查全國及各縣巿的運動盛行率，並以每年提升 0.5%為目標，結合體育主管單位及 25 縣巿政府同步進行政策的倡議及執行。以最容易、最安全的健走運動為例，現在 11
        月 11 日「健走日」已成為許多縣巿政府的重要活動；而去年健康局選擇竹北、屏東、新莊三個縣轄巿，調查健康體能自治性環境的策略指標及調查評估方法，也成為今年體委會要求各縣巿建置運動地圖時的重要參考。<br>
        建構健康生活型態是「預防勝於治療」的積極實現，不只能降低罹癌風險，也有助降低其他現代文明病的發生，長期來看是最具經濟效益的健康投資。趙坤郁強調，在全球化浪潮下，我們的飲食、嗜好。.. 等生活型態與西方國家愈來愈趨近，疾病型態也可能逐漸接近，必須及早提出因應措施。<br>
        <br>
      </p>
      <p>資料來源：行政院衛生署衛生報導 139 期<br>
        上稿日期：2010/1/20<br>
      </p>
    </div>
    <div class="TabbedPanelsContent">長期憋尿 泌尿系統問題多 <br>
      資料來源：中央健康保險局雙月刊第 98 期<br>
      上稿日期：2012/08/10<br>
      文／游小雯<br>
      諮詢／郭育成（台北市立聯合醫院陽明院區泌尿科主任）<br>
      膀胱是中空、有彈性的肉囊，
      約有 400c.c. 的容積，可暫存由腎臟製造、經輸尿管輸送下來的尿液。一般人排尿量每回約 200 到 350c.c.，每天至少要有 4 到 8 次排尿次數才算正常；如果膀胱已存有近 400c.c 的尿液卻未排出，就會有尿很急、膀胱很脹的感覺，所謂的「憋尿」，就是讓膀胱經常撐在「脹滿」的狀態，沒有適時地清空排尿。「就像水溝的水沒有在流動一樣！」台北市立聯合醫院陽明院區泌尿科郭育成主任表示，把尿憋在膀胱中，就像是沒有流動的髒水，很容易滋生細菌及沉澱物，長期下來，不僅泌尿道易受感染、影響膀胱收縮力，甚至會造成腎臟永久傷害，不僅無法完全修復，還要終身小心照護。<br>
      憋尿會憋出哪些毛病呢？<br>
      「憋尿、排尿」這個看似簡單的動作，對身體健康卻有極大的影響，以下 4 項就是一般人最常憋出問題的病症：<br>
      1、尿道感染：<br>
      憋尿時，長時間無尿液經過尿道，無法將尿道開口的細菌沖走，大量細菌在尿道聚集，很容易引起發炎，尤其尿流不通暢的人（如前列腺肥大、障礙性排尿或結石），尿道感染的發生率，會比正常人高出許多。<br>
      2、膀胱發炎：<br>
      憋尿使膀胱長期脹大，膀胱壁血管受到壓迫，膀胱黏膜就會缺血，只要身體抵抗力差時，細菌趁虛而入即造成「急性膀胱炎」。膀胱炎發生時，膀胱壁變得較敏感，儘管積存的尿液不多，也會急著想上廁所，但一次卻只能尿出一點點；而大部份的膀胱炎，尿道粘膜通常也處於發炎狀態，所以會出現「燒灼感」，此外通常還會有「血尿」的情況發生。比較嚴重的膀胱炎甚至會發燒、併發腎臟炎等症狀。<br>
      3、前列腺炎與副睪丸炎：<br>
      男性若水份攝取不夠或憋尿使排尿次數過少，細菌就有機會透過尿道引發感染；嚴重的話，尿液甚至會經由輸精管倒流至前列腺或副睪丸，而引發前列腺炎或副睪丸炎，最嚴重可導致不孕，增加更多棘手的併發症。<br>
      4、膀胱損傷：<br>
      長期憋尿會使膀胱過度脹扯、壁肌肉層變薄，如果出現纖維化的情形會影響彈性，導致膀胱收縮力因此變差，而有疼痛、頻尿或尿不乾淨等後遺症；如果神經受損嚴重，膀胱括約肌無力，甚至會造成尿不出來的後果。平日勤保健，別讓憋尿造成終身遺憾許多上班族與公司主管，一忙或開會經常就是好幾個小時，為了不影響進度，常忘了上廁所，即使有尿意也盡量憋著，憋尿不只是造成泌尿系統發炎，尿液回流到腎臟也會造成腎積水引發尿毒症等併發症，最後很可能靠洗腎度日了！<br>
      平日盡量力行以下 4 項原則：<br>
      1、多喝水、不憋尿。<br>
      2、注意個人衛生：如多淋浴少盆浴、女生在如廁後記得由前往後擦、性行為前後（不論男女）應注意會陰部、肛門口及尿道口的清潔工作。<br>
      3、正常的飲食習慣及充分的休息與睡眠，以增加抵抗力及免疫力。<br>
      4、多注意及控制易引發膀胱炎的疾病：如糖尿病、尿路結石、攝護腺肥大等。<br>
      如果民眾發現自己解尿不舒服時，一定要在第一時間就診，讓醫師採用檢體對症下藥，只要沒有其他的特殊問題併存，同時能接受完整療程的抗生素治療，通常一星期左右即可痊癒。不過服藥的時間及用量絕對要遵照醫師囑咐，如果自行隨意停藥或不按時服用，很可能會造成殘存的細菌出現抗藥性，非但原本的症狀無法痊癒，還可能帶來慢性泌尿道發炎、尿路結石、腎臟功能受損等併發症，千萬要特別注意。
    </div>
  </div>
</div>
<script type="text/javascript">
  var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>

分類網誌

先設計版型，用 table 標籤分為左邊的選項區域（固定）跟右邊的文章區。導覽列要出現該分類標題

1. $title：利用 $_GET[‘cls’] 去轉為對應的麵包屑之標題文字
2. 文章區：如果有 $_GET[‘id’] 時，則顯示該細節文章，沒有則根據 $_GET[‘cls’] 去產生標題與超連結帶 id

建立 po.php（參考 login.php)

po.php

<?php
$_GET['cls'] = (empty($_GET['cls'])) ? 1 : $_GET['cls'];
$title = ["健康新知", "菸害防治", "癌症防治", "慢性病防治"];
?>
目前位置：首頁>分類網誌><?= $title[$_GET['cls'] - 1] ?>
<table>
  <tr>
    <td width=20% valign=top>
      <fieldset>
        <legend>網誌分類</legend>
        <a class="blo" href="?do=po&cls=1">健康新知</a>
        <a class="blo" href="?do=po&cls=2">菸害防治</a>
        <a class="blo" href="?do=po&cls=3">癌症防治</a>
        <a class="blo" href="?do=po&cls=4">慢性病防治</a>
      </fieldset>
    </td>
    <td valign=top>
      <fieldset>
        <legend>文章列表</legend>
        <?php
        if (empty($_GET['id'])) {
          $re = select("q2t7_blog", "cls=" . $_GET['cls']);
          foreach ($re as $ro) echo '<a href="?do=po&cls=' . $_GET['cls'] . '&id=' . $ro['id'] . '">' . $ro['title'] . '</a><br>';
        } else {
          $re = select("q2t7_blog", "id=" . $_GET['id']);
          echo $re[0]['text'];
        }
        ?>
      </fieldset>
    </td>
  </tr>
</table>

No.8 頁尾版權 (5%)

主要是添加 date() 做為年份。至於定位部分因為說明+示意圖太詭異，請直接以題目之文字描敘為主。

設計頁尾版權

如果你要修正 CSS，靠兩個 DIV 處理第一行至中，第二行為 float:right

修改 index.php

找到

index.php

<div id="bottom">
本網站建議使用：IE9.0 以上版本，1024 x 768 pixels 以上觀賞瀏覽 ， Copyright © 2014 健康促進網社群平台 All Right Reserved 
<br>服務信箱：health@test.labor.gov.tw<img src="./home_files/02B02.jpg" width="45">
</div>

主要是 <?date("Y")?> 這部分，改成

index.php

<div id="bottom">
    <div class="ct">本網站建議使用：IE9.0 以上版本，1024 x 768 pixels 以上觀賞瀏覽 ， Copyright © <?=date("Y")?>健康促進網社群平台 All Right Reserved     </div>
    <div style="float:right">服務信箱：health@test.labor.gov.tw<img src="./home_files/02B02.jpg" width="45"></div>
</div>

No.9 忘記密碼頁面 (10%)

延續第六題的單元，因為要直接顯示結果在同畫面就不用轉去 api 處理了。將 PHP 寫在原畫面上

設計表單

這裡就 select，檢查，對應輸出。

建立 forget.php

forget.php

<?php
$ans = "";
if (!empty($_POST['mail'])) {
  $re = select("q2t6_user", "mail='" . $_POST['mail'] . "'");
  if ($re != null) $ans = "你的密碼為：" . $re[0]['pwd'];
  else $ans = "查無此資料";
}
?>
<fieldset>
  <legend>忘記密碼</legend>
  <form method="post">
    請輸入信箱以查詢密碼<br>
    <input type="text" name="mail"><br>
    <?= $ans ?><br>
    <input type="submit" value="尋找">
  </form>
</fieldset>

No.10 註冊會員頁面 (15%)

延續第六題的單元，在 index.php?do=reg 這個網頁位置。做個 form 表單新增。

版面設計

先設計好版面，善用之前的版型出現過的 fieldset 標籤：

建立 reg.php（參考 login.php)

reg.php

<fieldset>
  <legend>會員註冊</legend>
  *請設定您要註冊的帳號及密碼（最長 12 個字元） <br>
  <form action="api.php?do=reg" method="post">
    Step1: 登入帳號 <input type="text" name="acc"><br>
    Step2: 登入密碼 <input type="password" name="pwd"><br>
    Step3: 再次確認密碼 <input type="password" name="pwd1"><br>
    Step4: 信箱（忘記密碼時使用） <input type="text" name="mail"><br>
    <input type="submit" value="註冊"><input type="reset" value="清除">
  </form>
</fieldset>

增添 api.php

表單做新增 SQL 處理，連同把驗證也在這裡，如果錯誤就用 window.history.back 踢回上一頁

1. 如果四個欄位有空白，alert 警告並踢回上頁
2. 如果密碼兩者不同值，alert 警告並踢回上頁
3. 如果檢查到重覆帳號，alert 警告並踢回上頁
4. 如果沒有，就新增帳號密碼，alert 成功轉回首頁。($_POST[‘pwd1’] 用不到，需 unset)

api.php

case 'reg':
  $msg = "";
  if ($_POST['acc'] == null || $_POST['pwd'] == null || $_POST['pwd1'] == null || $_POST['mail'] == null)
    $msg .= "alert('不可空白');";
  if ($_POST['pwd'] != $_POST['pwd1'])
    $msg .= "alert('密碼錯誤');";
  $re = select("q2t6_user", "acc='" . $_POST['acc'] . "'");
  if ($re != null)
    $msg .= "alert('帳號重複');";

  if ($msg) echo "<script>" . $msg . "window.history.back()</script>";
  else {
    unset($_POST['pwd1']);
    insert($_POST, "q2t6_user");
    echo "<script>alert('註冊完成，歡迎加入');" . jlo("index.php") . "</script>";
  }
  break;

No.11 最新文章 (25%)

這題設計要點比較多，分為幾個重點如下

• 分頁功能（limit 一次 5 筆），包含分頁導覽。
• 左邊為標題區，右邊為內容區。內容區可能是縮文或是全文（利用 $_GET[‘id’] 判斷處理）。
• 登入者提供讚功能

列表 5 筆 + 分頁導覽 + 縮文 or 全文

列表五筆的重點代碼

$_GET['id'] = (empty($_GET['id'])) ? 0 : $_GET['id'];
$nw = (empty($_GET['page'])) ? 1 : $_GET['page'];
$begin = ($nw - 1) * 5;
$re = select("q2t7_blog", "dpy=1 limit " . $begin . ",5");
foreach ($re as $ro) {
?>
  <tr>
    <td><?= $ro['title'] ?></td>
    <td><?= $ro['text'] ?></td>
  </tr>
<?php
}

分頁導覽的重點代碼

$re = navpage("q2t7_blog", "dpy=1", 5, $nw);
foreach ($re as $key => $value) {
  if ($nw == $key) echo '<a style="font-size:2em" href="?do=news&page=' . $value . '">' . $key . '</a>';
  else echo '<a href="?do=news&page=' . $value . '">' . $key . '</a>';
}

縮文 or 全文的重點代碼。

1. 如果 GET[‘id’] 存在且同等於本行的 ID，那就是全文
2. 否則，顯示縮文並自帶超連結夾帶 id，記得保留 page 值

<?= ($_GET['id'] == $ro['id']) ? $ro['text'] : '<a href="?do=news&page=' . $nw . '&id=' . $ro['id'] . '">' . mb_substr($ro['text'], 0, 10) . '...</a>' ?>

合併起來為以下完整碼

建立 news.php

news.php

目前位置：首頁>最新消息區
<table>
  <tr>
    <td width=20% valign=top>標題</td>
    <td valign=top>內容</td>
  </tr>
  <?php
  $_GET['id'] = (empty($_GET['id'])) ? 0 : $_GET['id'];
  $nw = (empty($_GET['page'])) ? 1 : $_GET['page'];
  $begin = ($nw - 1) * 5;
  $re = select("q2t7_blog", "dpy=1 limit " . $begin . ",5");
  foreach ($re as $ro) {
  ?>
    <tr>
      <td><?= $ro['title'] ?></td>
      <td>
        <?= ($_GET['id'] == $ro['id']) ?
          $ro['text'] :
          '<a href="?do=news&page=' . $nw . '&id=' . $ro['id'] . '">' . mb_substr($ro['text'], 0, 10) . '...</a>' ?>
      </td>
    </tr>
  <?php
  }
  ?>
</table>
<?php
$re = navpage("q2t7_blog", "dpy=1", 5, $nw);
foreach ($re as $key => $value) {
  if ($nw == $key) echo '<a style="font-size:2em" href="?do=news&page=' . $value . '">' . $key . '</a>';
  else echo '<a href="?do=news&page=' . $value . '">' . $key . '</a>';
}
?>

讚功能

素材內有提供函式 good(id,type,user) 能協助你向後端傳送訊息以及切換畫面的文字顯示，步驟稍微會變多但好處是在分頁下能即時操作，然而考量題目 12 的排序問題，筆者認為不要使用該素材 Ajax 版本避免造成誤會上的扣分，改使用 php 的刷新載入方式完成。

登入者的顯示

先設計一個變數為 $gdbtn 判斷使用者已登入才有內容，並檢查是否 [user name] 與 [blog id] 有紀錄

1. 有，設計收回讚反應
2. 沒有，設計讚反應

增添 news.php

$gdbtn = "";
if (!empty($_SESSION['user'])) {
  $gd = select("q2t11_good", "user='" . $_SESSION['user'] . "' and blog=" . $ro['id']);
  $gdbtn = ($gd != null) ?
    '<a href="api.php?do=gdsub&id=' . $ro['id'] . '">收回讚</a>' :
    '<a href="api.php?do=gdadd&id=' . $ro['id'] . '">讚</a>';
}

這段代碼放在 SQL select 之後的迴圈並取得 $ro['id']，讚擺放在新的第三組 td 內，故 table 標籤部分整合起來變成：

news.php

<table>
  <tr>
    <td width=20% valign=top>標題</td>
    <td valign=top>內容</td>
    <!-- ↓↓↓↓↓↓↓↓↓↓ there ↓↓↓↓↓↓↓↓↓-->
    <td width=10%></td>
  </tr>
  <?php
  $_GET['id'] = (empty($_GET['id'])) ? 0 : $_GET['id'];
  $nw = (empty($_GET['page'])) ? 1 : $_GET['page'];
  $begin = ($nw - 1) * 5;
  $re = select("q2t7_blog", "dpy=1 limit " . $begin . ",5");
  foreach ($re as $ro) {
    /* ↓↓↓↓↓↓↓↓↓↓ there ↓↓↓↓↓↓↓↓↓ */
    $gdbtn = "";
    if (!empty($_SESSION['user'])) {
      $gd = select("q2t11_good", "user='" . $_SESSION['user'] . "' and blog=" . $ro['id']);
      $gdbtn = ($gd != null) ?
        '<a href="api.php?do=gdsub&id=' . $ro['id'] . '">收回讚</a>' :
        '<a href="api.php?do=gdadd&id=' . $ro['id'] . '">讚</a>';
    }
  ?>
    <tr>
      <td><?= $ro['title'] ?></td>
      <td>
        <?= ($_GET['id'] == $ro['id']) ?
          $ro['text'] :
          '<a href="?do=news&page=' . $nw . '&id=' . $ro['id'] . '">' . mb_substr($ro['text'], 0, 10) . '...</a>' ?>
      </td>
      <!-- ↓↓↓↓↓↓↓↓↓↓ there ↓↓↓↓↓↓↓↓↓-->
      <td><?= $gdbtn ?></td>
    </tr>
  <?php
  }
  ?>
</table>

讚的資料處理

提交的 API 行為分兩個動作：

• 對文章的 num 修改數字，num+1 跟 num-1 函式庫那裏會自動+1-1。
• 對資料表 q2t11_good 做新增 (insert) 或刪除 (delete) 當作對應的讚紀錄。
• 刪除時因為不知道讚紀錄的 ID ，所以另使用 delat 以條件（用戶 ID 跟文章 ID) 做刪除而不是靠紀錄 ID。
• 另外也要記得對該文章的統計做更新 (update)

增添 api.php

api.php

case 'gdadd':
  $post['user'] = $_SESSION['user'];
  $post['blog'] = $_GET['id'];
  insert($post, "q2t11_good");

  $num['num+1'] = $_GET['id'];
  update($num, "q2t7_blog");
  echo "<script>window.history.back()</script>";
  break;
case 'gdsub':
  $post['delwh'] = "user='" . $_SESSION['user'] . "' and blog=" . $_GET['id'];
  delete($post, "q2t11_good");

  $num['num-1'] = $_GET['id'];
  update($num, "q2t7_blog");
  echo "<script>window.history.back()</script>";
  break;

No.12 人氣文章 (25%)

版型跟第 11 題差不多，主要設計有以下幾點：

1. 一樣有分頁功能（limit 一次 5 筆），包含分頁導覽。
2. 左邊為標題區，右邊為縮文區。全文使用浮動視窗顯示（偷第一題的 JS 來用、)
3. 顯示讚統計
4. 登入者提供讚功能

這題稍微複雜些，主要是需要 select 後跑 foreach 的位置在版型內部。以及 foreach 內需要混和不少題目動作。難度還可以且代碼也不算多，就比較需要理解每一小段的用途。像是 limit 的列表、讚功能與登入者、分頁、分頁導覽。以及一些細節上的顯示調整。

列表 5 筆 + 分頁導覽 + 讚功能

除了縮文與全文的表現方式會特別解釋，其他這裡不再細部解析三段代碼，直接調整到適合的版型。

另外調整一下現有的資料：

1. 調整 select 的 order by num desc
2. 先顯是全文，我們之後再來處理這點
3. 多了 $ro[‘num’] 顯示統計值，記得放入圖片 02B03.jpg

建立 pop.php（參考 news.php)

pop.php

目前位置：首頁>人氣文章區
<table>
  <tr>
    <td width=20% valign=top>標題</td>
    <td valign=top>內容</td>
    <td width=20%>人氣</td>
  </tr>
  <?php
  $_GET['id'] = (empty($_GET['id'])) ? 0 : $_GET['id'];
  $nw = (empty($_GET['page'])) ? 1 : $_GET['page'];
  $begin = ($nw - 1) * 5;
  $re = select("q2t7_blog", "dpy=1 order by num desc limit " . $begin . ",5");
  foreach ($re as $ro) {
    $gdbtn = "";
    if (!empty($_SESSION['user'])) {
      $gd = select("q2t11_good", "user='" . $_SESSION['user'] . "' and blog=" . $ro['id']);
      $gdbtn = ($gd != null) ?
        '<a href="api.php?do=gdsub&id=' . $ro['id'] . '"> - 收回讚</a>' :
        '<a href="api.php?do=gdadd&id=' . $ro['id'] . '"> - 讚</a>';
    }
  ?>
    <tr>
      <td><?= $ro['title'] ?></td>
      <td><?= $ro['text'] ?></td>
      <td><?= $ro['num'] ?>個人說<img style="height:1em" src="img/02B03.jpg"><?= $gdbtn ?></td>
    </tr>
  <?php
  }
  ?>
</table>
<?php
$re = navpage("q2t7_blog", "dpy=1", 5, $nw);
foreach ($re as $key => $value) {
  if ($nw == $key) echo '<a style="font-size:2em" href="?do=news&page=' . $value . '">' . $key . '</a>';
  else echo '<a href="?do=news&page=' . $value . '">' . $key . '</a>';
}
?>

以上你已經完成 80%要求

浮動視窗

去偷第一題的 JS，就放在 01P02.htm（首頁） 的最新消息那裏包含 JS，整理一下段落後放置到你本頁的最後，並先分析需要的 code 在哪裡

<div id="alt" style="position: absolute; width: 350px; min-height: 100px; word-break:break-all; text-align:justify;  background-color: rgb(255, 255, 204); top: 0px; left: 400px; z-index: 99; display: none; padding: 5px; border: 3px double rgb(255, 153, 0); background-position: initial initial; background-repeat: initial initial;"></div>
<script>
  $(".sswww").hover(
    function() {
      $("#alt").html("" + $(this).children(".all").html() + "").css({
        "top": $(this).offset().top - 250
      })
      $("#alt").show()
    }
  )
  $(".sswww").mouseout(
    function() {
      $("#alt").hide()
    }
  )
</script>

這段解釋大致重點為：滑到觸發對象 .sswww時 div#alt 會顯示出來，並同時抓取觸發對象的內部 class=all 之內容。所以我們改一下 HTMLL 跟 JS，在每個迴圈裡面的文字部分。

<td>
  <div class="sswww"><?= mb_substr($ro['text'], 0, 10)?>...
    <span class="all" style="display:none"><?= $ro['text'] ?></span>
  </div>
</td>

調整 pop.php

總結整步驟完整代碼為

pop.php

目前位置：首頁>人氣文章區
<table>
  <tr>
    <td width=20% valign=top>標題</td>
    <td valign=top>內容</td>
    <td width=20%>人氣</td>
  </tr>
  <?php
  $_GET['id'] = (empty($_GET['id'])) ? 0 : $_GET['id'];
  $nw = (empty($_GET['page'])) ? 1 : $_GET['page'];
  $begin = ($nw - 1) * 5;
  $re = select("q2t7_blog", "dpy=1 order by num desc limit " . $begin . ",5");
  foreach ($re as $ro) {
    $gdbtn = "";
    if (!empty($_SESSION['user'])) {
      $gd = select("q2t11_good", "user='" . $_SESSION['user'] . "' and blog=" . $ro['id']);
      $gdbtn = ($gd != null) ?
        '<a href="api.php?do=gdsub&id=' . $ro['id'] . '"> - 收回讚</a>' :
        '<a href="api.php?do=gdadd&id=' . $ro['id'] . '"> - 讚</a>';
    }
  ?>
    <tr>
      <td><?= $ro['title'] ?></td>
      <td>
        <div class="sswww"><?= mb_substr($ro['text'], 0, 10) ?>...
          <span class="all" style="display:none"><?= $ro['text'] ?></span>
        </div>
      </td>
      <td><?= $ro['num'] ?>個人說<img style="height:1em" src="img/02B03.jpg"><?= $gdbtn ?></td>
    </tr>
  <?php
  }
  ?>
</table>
<?php
$re = navpage("q2t7_blog", "dpy=1", 5, $nw);
foreach ($re as $key => $value) {
  if ($nw == $key) echo '<a style="font-size:2em" href="?do=news&page=' . $value . '">' . $key . '</a>';
  else echo '<a href="?do=news&page=' . $value . '">' . $key . '</a>';
}
?>
<div id="alt" style="position: absolute; width: 350px; min-height: 100px; word-break:break-all; text-align:justify;  background-color: rgb(255, 255, 204); top: 0px; left: 400px; z-index: 99; display: none; padding: 5px; border: 3px double rgb(255, 153, 0); background-position: initial initial; background-repeat: initial initial;"></div>
<script>
  $(".sswww").hover(
    function() {
      $("#alt").html("" + $(this).children(".all").html() + "").css({
        "top": $(this).offset().top - 120,
        "left": $(this).offset().left - 280,
      })
      $("#alt").show()
    }
  )
  $(".sswww").mouseout(
    function() {
      $("#alt").hide()
    }
  )
</script>

No.13 問卷調查 (25%)

問卷有三種不同畫面需求，分別是初始畫面，投票畫面，結果畫面。這裡透過 GET 參數做 switch 對應指向。

規劃畫面切換

這題分為三種版型，分別是初始畫面、投票畫面、結果畫面。根據 GET 參數做對應指向。規劃 switch 來區分這三組畫面

建立 que.php

que.php

目前位置：首頁>問卷調查
<?php
$sw = 0;
if (!empty($_GET['vote'])) $sw = 1;
if (!empty($_GET['show'])) $sw = 2;
switch ($sw) {
  case '1':
    break;
  case '2':
    break;
  default:
    break;
}
?>

初始畫面

先規劃一開始的內容畫面，可以從 pop.php 複製過來開始調整。初始畫面位置在 switch default 內：

1. 超連結處前往到本頁面其他 case，夾帶以下可能的 GET 值：
   投票畫面 case 1：vote=id, title=標題
   結果畫面 case 2：show=id, title=標題，total=總數
2. 有無登入利用 $_SESSION['user'] 判斷並提供適當的三元運算顯示。

增添 que.php

以下為初始版型且可撈取問卷主題與編號排序

que.php

default:
?>
  <table>
    <tr>
      <td valign=top>編號</td>
      <td valign=top>問卷題目</td>
      <td>投票總數</td>
      <td>結果</td>
      <td>狀態</td>
    </tr>
    <?php
    $re = select("q2t13_vote", "parent=0");
    foreach ($re as $ro) {
      $total = 0;
      $vv = select("q2t13_vote", "parent=" . $ro['id']);
      foreach ($vv as $son) $total += $son['num'];
    ?>
      <tr>
        <td><?= $ro['id'] ?></td>
        <td><?= $ro['text'] ?></td>
        <td><?= $total ?></td>
        <td><a href="?do=que&show=<?= $ro['id'] ?>&title=<?= $ro['text'] ?>&total=<?= $total ?>">結果</a></td>
        <td><?= (empty($_SESSION['user'])) ? '請先登入' : '<a href="?do=que&vote=' . $ro['id'] . '&title=' . $ro['text'] . '">參與投票</a>' ?></td>
      </tr>
    <?php
    }
    ?>
  </table>
<?php
  break;

投票版面

對 case 1 設計投票畫面，從 GET 取的 parent 值。之後提交到 api.php?do=vote 處理 form。

增添 que.php

que.php

case '1':
?>
  <h3><?= $_GET['title'] ?></h3>
  <form action="api.php?do=vote" method="post">
    <?php
    $re = select("q2t13_vote", "parent=" . $_GET['vote']);
    foreach ($re as $ro) echo '<input type="radio" name="num+1" value="' . $ro['id'] . '">' . $ro['text'] . '<br>';
    ?>
    <input type="submit" value="我要投票">
  </form>
<?php
  break;

注意一下這裡用 name=num+1 並值為 ID

增添 api.php

api.php

case 'vote':
  update($_POST, "q2t13_vote");
  plo("index.php?do=que");
  break;

結果版面

• 這時候手動模擬登入帳號做一些投票動作，讓資料有些數據方便設計檢查結果畫面。重點在百分比的設計。
• 規劃一個 div 高 1rem，寬為 $pse 以及做 inline-block。table 稍微排版一下跟示意圖相近
• $pse 為百分比，有可能當 total 為 0 會無法當分母，所以要加個判斷算法為： $ro[num] ÷ $_GET['total'] × 100

增添 que.php

que.php

case '2':
?>
  <h3><?= $_GET['title'] ?></h3>
  <ol>
    <?php
    $re = select("q2t13_vote", "parent=" . $_GET['show']);
    $i = 1;
    foreach ($re as $ro) {
      $pse = ($_GET['total'] == 0) ? 0 : $ro['num'] / $_GET['total'] * 100;
    ?>
      <li>
        <div><?= $ro['text'] ?></div>
        <div style="width:<?= $pse ?>px;height:1em;background-color:black;display:inline-block"></div><?= $ro['num'] ?>票 (<?= $pse ?>%)
      </li>
      <br>
    <?php
    }
    ?>
  </ol>
  <input type="button" value="返回" onclick="window.history.back()">
<?php
  break;

No.14 後台管理 (10%)

整理出可登入 admin 後的畫面選單以及預設畫面。不難，需要承接第四題的代碼

規劃兩種 MENU

抽取出下面 menu 內容轉移到 lib.php，變數為 <?=$menu?>

修改 index.php

index.php

<a class="blo" href="?do=po">分類網誌</a>
<a class="blo" href="?do=news">最新文章</a>
<a class="blo" href="?do=pop">人氣文章</a>
<a class="blo" href="?do=know">講座訊息</a>
<a class="blo" href="?do=que">問卷調查</a>

更改為

<?=$menu?>

增添 lib.php

• 調整兩種 MENU 內容，並根據是否因 SESSION[‘admin’] 存在做不同的選單顯示。
• 後者可複製前者，多 a 開頭代表不同位置。
• 題目有些選單沒有列入設計，沒有用到的 href 可以改成 #。

lib.php

//t14
$menu = '
  <a class="blo" href="?do=po">分類網誌</a>
  <a class="blo" href="?do=news">最新文章</a>
  <a class="blo" href="?do=pop">人氣文章</a>
  <a class="blo" href="#">講座訊息</a>
  <a class="blo" href="?do=que">問卷調查</a>
';
if (!empty($_SESSION['admin'])) $menu = '
  <a class="blo" href="?do=apo">帳號管理</a>
  <a class="blo" href="#">分類網誌</a>
  <a class="blo" href="?do=apop">最新文章管理</a>
  <a class="blo" href="#">講座管理</a>
  <a class="blo" href="?do=aque">問卷管理</a>
';

接著，除了選單區因應 admin 不同，內容區要跟著 admin 也不同。修改 T4 的內容（同個 lib.php)，這部分之前在 t4 已經處理過

修改 index.php

$admain=(empty($_SESSION['admin']))?"main":"admain";
$main=(empty($_GET['do']))?$admain:$_GET['do'];

這樣你必須要做一個 admain.php，根據題目指示

新增 admain.php

<h1 class="ct">請選擇管理項目</h1>

試著用 admin 登入操作是否正常顯示後台

No.15 帳號後台管理 (15%)

畫面有兩個表格要做，一個是 select 帳戶資料並可 delete。另一個是之前已經做過的註冊功能（可直接複製來用）。

修改後台的內容格式

• 整個複製版型後，根據需求做版面，記得導向到 api 額外處理刪除的 sql。
• 另外後半段跟 reg.php 功能效果都一樣，可以用 include 快速完成。

新增 apo.php（參考 reg.php)

apo.php

<fieldset>
  <legend>帳號管理</legend>
  <form action="api.php?do=memdel" method="post">
    <table width="100%">
      <tr>
        <td>帳號</td>
        <td>密碼</td>
        <td>刪除</td>
      </tr>
      <?php
      $re = select("q2t6_user", 1);
      foreach ($re as $ro) {
      ?>
        <tr>
          <td><?= $ro['acc'] ?></td>
          <td><?= $ro['pwd'] ?></td>
          <td><input type="checkbox" name="del[]" value="<?= $ro['id'] ?>"></td>
        </tr>
      <?php
      }
      ?>
    </table>
    <input type="submit" value="確定刪除"><input type="reset" value="清空選取">
  </form>
  <h2>新增會員</h2>
  <?php include "reg.php" ?>
</fieldset>

增添 api.php

最後做刪除作業並轉回該頁

api.php

case 'memdel':
  delete($_POST, "q2t6_user");
  plo("index.php?do=apo");
  break;

No.16 最新文章後台管理 (15%)

重點在 limit 與分頁導覽以及多了 dpy 選項。複製 q2t11 的版型來調整且 page 每次顯示為 3 ，並規劃 dpy 與 del 這兩個 checkbox

後台的內容格式

整個複製版型後，根據需求做修改調整，記得 from 提交改成到 do=adminnews。至於 limit 與 page 都在 news.php 那裏出現過，改一下 5 變 3，以及 page_link 的 href 的前往位置

新增 apop.php（參考 news.php)

apop.php

<form action="api.php?do=newsmdy" method="post">
  <table>
    <tr>
      <td>編號</td>
      <td valign=top>標題</td>
      <td valign=top>顯示</td>
      <td valign=top>刪除</td>
      <td></td>
    </tr>
    <?php
    $nw = (empty($_GET['page'])) ? 1 : $_GET['page'];
    $begin = ($nw - 1) * 3;
    $re = select("q2t7_blog", "1 limit " . $begin . ",3");
    foreach ($re as $ro) {
    ?>

      <tr>
        <td><?= $ro['id'] ?></td>
        <td><?= $ro['title'] ?></td>
        <td>
          <input type="hidden" name="dpy[<?= $ro['id'] ?>]" value="0">
          <input type="checkbox" name="dpy[<?= $ro['id'] ?>]" value="1" <?= ($ro['dpy']) ? "checked" : "" ?>>
        </td>
        <td><input type="checkbox" name="del[]" value="<?= $ro['id'] ?>"></td>
      </tr>
    <?php
    }
    ?>
  </table>
  <?php
  $re = navpage("q2t7_blog", 1, 3, $nw);
  foreach ($re as $key => $value) {
    if ($nw == $key) echo '<a style="font-size:2em" href="?do=apop&page=' . $value . '">' . $key . '</a>';
    else echo '<a href="?do=apop&page=' . $value . '">' . $key . '</a>';
  }
  ?>
  <br><input type="submit" value="確定修改">
</form>

增添 api.php

對 api.php 做 SQL 處理，接著回到該單元內容。（可複製前題目做修改）

case 'newsmdy':
  update($_POST, "q2t7_blog");
  delete($_POST, "q2t7_blog");
  plo("index.php?do=apop");
  break;

No.17 問卷後台管理 (20%)

重點是需要多個 JQ 來執行增加欄位。

修改後台的內容格式

主要保留 fieldset 的設計，並注意題目要求要透過 JS 來完成新增欄位。一樣傳送到 api.php?do=addque。這裡稍微提到，因為是同一個 table。所以必需要將 POST 看成兩筆，分別是父層級 fa 及子層級 son。

新增 aque.php

<fieldset>
  <legend>新增問卷</legend>
  <form action="api.php?do=queadd" method="post">
    <div id=que>
      問卷名稱：<input type="text" name="fa" id=""><br>
      選項：<input type="text" name="son[]" id=""><br>
    </div>
    <input type="button" value="更多" onclick=add()><input type="submit" value="新增"><input type="reset" value="清除">
  </form>
</fieldset>
<script>
  function add() {
    txt = '選項：<input type="text" name="son[]" id=""><br>';
    $("#que").append(txt);
  }
</script>

增添 api.php

因為是共用同一個 form。所以新增時要分兩階段處理。

1. 先抽取出 fa 到第一組陣列並丟到 insert 並取得 ID。
2. 得知剛剛新增的 ID，接著將剩下的 POST 進行分解成批次寫入。

case 'queadd':
  $post['text'] = $_POST['fa'];
  $faid = insert($post, "q2t13_vote");
  foreach ($_POST['son'] as $ro) {
    $son['text'] = $ro;
    $son['parent'] = $faid;
    insert($son, "q2t13_vote");
  }
  plo("index.php");
  break;

END 調整版面 (5%)

這題動作如果來不及做可以放棄，元素材差異性下有可能不會被考官所注意到。

修改 index.php

找到主區域的 div 修改為

index.php

<div id="all" style="overflow-y: scroll;margin: 10px auto;padding: 0;border: 0;width: 1024px;height: 768px;">

找到上面的主標題圖片把多餘個寬度處理掉，將寬度鎖定到 100%

index.php

<img style="width:100%" src="img/02B01.jpg" alt="健康促進網 - 回首頁" title="健康促進網 - 回首頁">

透過 Chrome 遊覽器檢查可以得到 1024*768 且上下左右 10px 並垂直至中的動作要求。

另外可以移除無效的 HTML 元素

index.php

<!-- 
<div id="alerr" style="background:rgba(51,51,51,0.8); color:#FFF; min-height:100px; width:300px; position:fixed; display:none; z-index:9999; overflow:auto;">
  <pre id="ssaa"></pre>
</div>
<iframe name="back" style="display:none;"></iframe>
-->