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

發表於 2020-05-18 更新於 2024-08-27 分類於競賽檢定，網頁設計乙級閱讀次數：文章字數： 10,028 所需閱讀時間 ≈ 00:18:14

本篇為網乙解析系列之題組一。難易度偏低，評分項目多且步驟較多但重複性高，只要善用同題目作為範本複製貼上，進行修改調整就能快速完成題目動作。本篇之前置作業 (lib.php 與 MySQL 規劃）不再進行說明。

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

No.10 管理登入按鈕 (20%)

您必須先做第 10 題，才能方便在其他題目上做切換前後台檢查。90 分鐘所設計的 lib.php 記得放到本題組目錄下。
q1t10

修正登入連結

將三個頁面跟登入按鈕有關的 onclick 做正確的導向。我們直接轉址到 admin.php 就可以了。調整

index.php, news.php, login.php

<!--右邊-->   
<button style="width:100%; margin-left:auto; margin-right:auto; margin-top:2px; height:50px;" onclick="lo(&#39;?do=admin&#39;)">管理登入</button>

調整 onclick 到正確的 php 位置

index.php, news.php, login.php

<!--右邊-->
<button style="width:100%; margin-left:auto; margin-right:auto; margin-top:2px; height:50px;" onclick="lo('admin.php')">管理登入</button>

判斷是否已登入

如果在 admin.php 還沒有登入，就踢到 login.php 去。將這段塞到最前面

修改 admin.php

admin.php

<?php
require_once('lib.php');
if (empty($_SESSION['admin'])) plo("login.php");
?>

FROM 提交動作

這裡很簡單沒有 php 要處理（因為要提交表單到 api.php )：

在 from 的 action 內多一個 api.php 連接，target 則不要
另外順手把密碼的 name=ps 改成 name=pwd 看順眼

<!--正中央-->
<form method="post" action="?do=check" target="back">
  <p class="t botli">管理員登入區</p>
  <p class="cent">帳號 ： <input name="acc" autofocus="" type="text"></p>
  <p class="cent">密碼 ： <input name="ps" type="password"></p>
  <p class="cent"><input value="送出" type="submit"><input type="reset" value="清除"></p>
</form>

調整為

<!--正中央-->
<form method="post" action="api.php?do=check">
  <p class="t botli">管理員登入區</p>
  <p class="cent">帳號 ： <input name="acc" autofocus="" type="text"></p>
  <p class="cent">密碼 ： <input name="pwd" type="password"></p>
  <p class="cent"><input value="送出" type="submit"><input type="reset" value="清除"></p>
</form>

FROM 的 SQL 處理

舉凡所有的 from 表單都獨立起來到 api.php 做處理，所以 login 的動作要開始寫入：

新增 api.php 寫入，檢查資料庫是否存在
登入成功則給予 SESSION 咬住紀錄。
這裡題目要求錯誤提示並返回時要清除輸入資料，所以用 JS 轉址方式，不能用 window.history.back

建立 api.php

api.php

<?php
require_once("lib.php");
switch ($_GET['do']) {
  case 'check':
    $re = select("q1t10_admin", "acc='" . $_POST['acc'] . "' and pwd='" . $_POST['pwd'] . "'");
    if ($re) {
      $_SESSION['admin'] = $_POST['acc'];
      plo("admin.php");
    } else echo "<script>alert('帳號或密碼錯誤');" . jlo("login.php") . "</script>";
    break;
}

登出作業

我們要處理登出的反應，也就是清除 SESSION，同樣透過 api.php 完成：

修正 admin.php 的登出按鈕，處理 location.replace() 部分添加 api.php?do=logout

修改 admin.php

admin.php

<button onclick="document.cookie=&#39;user=&#39;;location.replace(&#39;?&#39;)" style="width:99%; margin-right:2px; height:50px;">管理登出</button>

修改為

<button onclick="document.cookie='user=';location.replace('api.php?do=logout')" style="width:99%; margin-right:2px; height:50px;">管理登出</button>

接著登出處理，添加 case logout 項目

修改 api.php

api.php

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

No.3 網站標題 (35%)

你已經可以正常切換前後台就能開始處理各題目，同時注意後台 admin.php 的初始頁為該 No.3。因這裡算第一次處理後台，所以 main_zone 要先處理掉

q1t3

內容區域調整

原後台選單連結都是?do=admin&redo=XX。所以先做切換 mainzone 的功能。在後台主頁增添 php 代碼

增添 admin.php

admin.php

$mainzone = (!empty($_GET['do'])) ? $_GET['do'] : "atitle";

同時簡化這些 do+redo 的連結，我們合併成 do 將每個開頭多個 a 字母做差異。先修好第一筆選單的 href 連接並指到 atitle 。

admin.php

<a style="color:#000; font-size:13px; text-decoration:none;" href="./Management page_files/Management page.htm">
  <div class="mainmu">網站標題管理</div>
</a>
<a style="color:#000; font-size:13px; text-decoration:none;" href="?do=admin&redo=ad">
  <div class="mainmu">動態文字廣告管理</div>
</a>
<a style="color:#000; font-size:13px; text-decoration:none;" href="?do=admin&redo=mvim">
  <div class="mainmu">動畫圖片管理</div>
</a>
<a style="color:#000; font-size:13px; text-decoration:none;" href="?do=admin&redo=image">
  <div class="mainmu">校園映象資料管理</div>
</a>
<a style="color:#000; font-size:13px; text-decoration:none;" href="?do=admin&redo=total">
  <div class="mainmu">進站總人數管理</div>
</a>
<a style="color:#000; font-size:13px; text-decoration:none;" href="?do=admin&redo=bottom">
  <div class="mainmu">頁尾版權資料管理</div>
</a>
<a style="color:#000; font-size:13px; text-decoration:none;" href="?do=admin&redo=news">
  <div class="mainmu">最新消息資料管理</div>
</a>
<a style="color:#000; font-size:13px; text-decoration:none;" href="?do=admin&redo=admin">
  <div class="mainmu">管理者帳號管理</div>
</a>
<a style="color:#000; font-size:13px; text-decoration:none;" href="?do=admin&redo=menu">
  <div class="mainmu">選單管理</div>
</a>

修改為

admin.php

<a style="color:#000; font-size:13px; text-decoration:none;" href="?do=atitle"><div class="mainmu">網站標題管理 </div></a>
<a style="color:#000; font-size:13px; text-decoration:none;" href="?do=aad"><div class="mainmu">動態文字廣告管理 </div></a>
<a style="color:#000; font-size:13px; text-decoration:none;" href="?do=amvim"><div class="mainmu">動畫圖片管理 </div></a>
<a style="color:#000; font-size:13px; text-decoration:none;" href="?do=aimage"><div class="mainmu">校園映象資料管理 </div></a>
<a style="color:#000; font-size:13px; text-decoration:none;" href="?do=atotal"><div class="mainmu">進站總人數管理 </div></a>
<a style="color:#000; font-size:13px; text-decoration:none;" href="?do=abottom"><div class="mainmu">頁尾版權資料管理 </div></a>
<a style="color:#000; font-size:13px; text-decoration:none;" href="?do=anews"><div class="mainmu">最新消息資料管理 </div></a>
<a style="color:#000; font-size:13px; text-decoration:none;" href="?do=aadmin"><div class="mainmu">管理者帳號管理 </div></a>
<a style="color:#000; font-size:13px; text-decoration:none;" href="?do=amenu"><div class="mainmu">選單管理 </div></a>

抽取內容區做成 include，預設是第三題頁面，所以抽取該段另存為 atitle.php

admin.php

<p class="t cent botli">網站標題管理</p>
<form method="post" target="back" action="?do=tii">
  <table width="100%">
    <tbody>
      <tr class="yel">
        <td width="45%">網站標題</td>
        <td width="23%">替代文字</td>
        <td width="7%">顯示</td>
        <td width="7%">刪除</td>
        <td></td>
      </tr>
    </tbody>
  </table>
  <table style="margin-top:40px; width:70%;">
    <tbody>
      <tr>
        <td width="200px"><input type="button" onclick="op(&#39;#cover&#39;,&#39;#cvr&#39;,&#39;view.php?do=title&#39;)"
            value="新增網站標題圖片"></td>
        <td class="cent"><input type="submit" value="修改確定"><input type="reset" value="重置"></td>
      </tr>
    </tbody>
  </table>
</form>

更改為

admin.php

<?php 
include_once($mainzone . ".php" ); 
/*不用要<?=?>會出現 1 的文字*/
?>

接下來所有的解題步驟會是後台 select, insert, update, delete ，前台只需 select

後台的內容格式

找到 atitle.php 表格中間，塞入 php:select 並帶入 tr>td HTML 顯示
新增提交到 view.php?do=titleadd，保留原 onclick 結構不要動到。
form 提交到 api.php?do=titlemdy
更新圖片提交到 view.php?do=titlechg 並夾帶 ID，保留原 onclick 結構不要動到。
注意 input 的 name 與 value 寫法，依自訂函式修改刪除有固定的宣告格式，請注意重點說明。

修改 atitle.php

atitle.php

<p class="t cent botli">網站標題管理</p>
<form method="post" action="api.php?do=titlemdy">
  <table width="100%">
    <tbody>
      <tr class="yel">
        <td width="45%">網站標題</td>
        <td width="23%">替代文字</td>
        <td width="7%">顯示</td>
        <td width="7%">刪除</td>
        <td></td>
      </tr>
      <?php
      $re = select("q1t3_title", 1);
      foreach ($re as $ro) {
      ?>
        <tr>
          <td><img src="img/<?= $ro['img'] ?>" width="300" height="30"></td>
          <td><input type="text" name="text[<?= $ro['id'] ?>]" value="<?= $ro['text'] ?>"></td>
          <td>
            <input type="hidden" name="dpy[<?= $ro['id'] ?>]" value="0">
            <input type="radio" name="radio" value="<?= $ro['id'] ?>" <?= ($ro['dpy']) ? "checked" : "" ?>>
          </td>
          <td><input type="checkbox" name="del[]" value="<?= $ro['id'] ?>"></td>
          <td><input type="button" onclick="op('#cover','#cvr','view.php?do=titlechg&id=<?= $ro['id'] ?>')" value="更新圖片"></td>
        </tr>
      <?php
      }
      ?>
    </tbody>
  </table>
  <table style="margin-top:40px; width:70%;">
    <tbody>
      <tr>
        <td width="200px"><input type="button" onclick="op('#cover','#cvr','view.php?do=titleadd')" value="新增網站標題圖片"></td>
        <td class="cent"><input type="submit" value="修改確定"><input type="reset" value="重置"></td>
      </tr>
    </tbody>
  </table>
</form>

※重點※

批次修改說明

lib.php 的自訂函式 update 已設計成支援多筆資料更新。原理為使用陣列進行迴圈處理，最小單位一次只處理一個 SQL 欄位更新。每個最小變數將提供id（索引 key), name（SQL 欄位）, value（內容值）。

例如 input：

form's method is post

<input type="text" name="text[7]" value="內容 7">
<input type="text" name="text[8]" value="內容 8">

這樣在自訂函式 update($_POST,"mytable") 處理結果為：

UPDATE mytable SET text='內容 7' where id=7;
UPDATE mytable SET text='內容 8' where id=8;

radio 部分的 dpy 表單需求比較麻煩（全題組唯獨只有 q1t3 出現），需要特別處理：

先設計 hidden 表單的 dpy[id] 全部都是 0。
接著 radio 表單負責告知已選取之 id 為多少。
由 api.php 將合併翻新 dpy[id]=1，這樣最後的 dpy 陣列除了指定 id 是 1，其他都是 0。

舉例：

form's method is post

<input type="hidden" name="dpy[1]" value="0">
<input type="hidden" name="dpy[2]" value="0">
<input type="hidden" name="dpy[3]" value="0">
<input type="radio" name="radio" value="3" <?= ($ro['dpy']) ? "checked" : "" ?>>

此時 3 做 dpy 唯一並送出後，得到 dpy[]={0,0,0,0,...} & radio=3。因此我們要整理成 dpy[]={0,0,1,0,...} 方便做 UPDATE 批次暴力修改。

批次刪除說明

自訂函式 delete 也是支援多筆刪除，原理也是批次處理成變數做 delete，但只需要 del 動作名稱與 id 對象即可。例如：

form's method is post

<input type="text" name="del[]" value="7">
<input type="text" name="del[]" value="8">

則 delete($_POST,"mytable")處理結果為：

DELETE FROM mytable where id=7;
DELETE FROM mytable where id=8;

新增單筆

後續有多種不同操作進入 view.php，先設定好 switch-case 處理判斷 titleadd 處理，主要是顯示 HTML FORM。其次該表單將提交到 api.php，採有相同的 do 參數（同樣走 do=titleadd) 這能方便之後的快速複製。注意有用到檔案上傳因此 form 宣告 enctype="multipart/form-data" 。

建立 view.php

view.php

<?php
require_once("lib.php");
switch ($_GET['do']) {
  case 'titleadd':
?>
    <form method="post" action="api.php?do=<?= $_GET['do'] ?>" enctype="multipart/form-data">
      <p class="t botli">新增標題區圖片</p>
      <p class="cent">標題區圖片 ： <input name="img" type="file"></p>
      <p class="cent">標題區替代文字 ： <input name="text" type="text"></p>
      <p class="cent"><input value="新增" type="submit"><input type="reset" value="重置"></p>
    </form>
<?php
    break;
}
?>

接著，規劃 titleadd 的 api 提交動作，新增 case 透過 function 快速完成 insert，並回到 admin 首頁

增添 api.php

api.php

case 'titleadd':
  $_POST['img'] = addfile($_FILES['img']);
  insert($_POST, "q1t3_title");
  plo("admin.php");
  break;

修改多筆 + 刪除多筆

從前台試著操作多筆修改跟刪除按下送出。網頁會到 api.php?do=titlemdy，繼續此動作處理。
同時將 radio 與 dpy[] 整合為完整的 dpy[]，完成後回到後台頁面 admin.php
沒把握你可以在 case 內先下 print_r($_POST)，確認畫面的資料正不正常跟有哪些資料

增添 api.php

api.php

case 'titlemdy':
  $_POST['dpy'][$_POST['radio']] = 1;
  update($_POST, "q1t3_title");
  delete($_POST, "q1t3_title");
  plo("admin.php");
  break;

修改單一圖片

這時候的列表、新增、修改、刪除都可順利操作，只剩單一圖片修改將由 view.php 作業。可以拿前 case 來改，因為只有純上傳圖片我們需要 $_GET 藏一個 ID

增添 view.php

view.php

case 'titlechg':
?>
  <form method="post" action="api.php?do=<?= $_GET['do'] ?>&id=<?= $_GET['id'] ?>" enctype="multipart/form-data">
    <p class="t botli">修改標題區圖片</p>
    <p class="cent">標題區圖片 ： <input name="img" type="file"></p>
    <p class="cent"><input value="修改" type="submit"><input type="reset" value="重置"></p>
  </form>
<?php
  break;

提交部分參考之前的 case 做修改，為了配合格式，將 id、欄位對象、新檔名整合成陣列變數送交給 update

增添 api.php

api.php

case 'titlechg':
  $_POST['img'][$_GET['id']] = addfile($_FILES['img']);
  update($_POST, "q1t3_title");
  plo("admin.php");
  break;

前台顯示

由於 inde.php 代碼太多避免誤碰，前端所需 PHP 處理改寫在 lib.php 內，視同寫在 index.php （注意所有頁面都會繼承，故變數命名需注意）

增添 lib.php

lib.php

//t3
$re = select("q1t3_title", "dpy=1");
$t3_img = "img/" . $re[0]['img'];
$t3_text = $re[0]['text'];

將 title 區域部分做修改（記得前面要有 include lib.php)，同時超連結順手一律導向 index.php（題目沒要求導向）
要求圖片替代文字素材卻用 background，不做推測，a 與 div 都給予 title 說明

admin.php, login.php, index.php, news.php

<a title="" href="?">
<div class="ti" style="background:url(&#39;use/&#39;); background-size:cover;"></div><!--標題-->
</a>

帶入 $t3_img 與 $t3_text 調整為

admin.php, login.php, index.php, news.php

<a title="<?= $t3_text ?>" href="?">
  <div title="<?= $t3_text ?>" class="ti" style="background:url(<?= $t3_img ?>); background-size:cover;"></div>
  <!--標題-->
</a>

這時候要注意 login.php 跟 index.php 跟 news.php 都還沒有連結 lib.php。所以開頭記得補上

<?php
require_once('lib.php');
?>

No.4 動態文字廣告 (30%)

透過已完成的第三題，你可以很快地複製修改出此題的後台內容格式。

q1t4

後台的內容格式

注意 input 的 name 與 value，宣告方法依據修改與刪除有所不同。
新增單項提交到 view.php?do=maqeadd
form 提交到 api.php?do=maqemdy
提交前另準備一組 dpy[$id]=0，這樣沒選的保持 0，有選的被覆蓋會是 1，update 時全體更新

新增 aad.php （參考 atitle.php)

aad.html

<p class="t cent botli">動態文字廣告管理</p>
<form method="post" action="api.php?do=maqemdy">
  <table width="100%">
    <tbody>
      <tr class="yel">
        <td width="68%">動態文字廣告</td>
        <td width="7%">顯示</td>
        <td width="7%">刪除</td>
      </tr>
      <?php
      $re = select("q1t4_maqe", 1);
      foreach ($re as $value) {
      ?>
        <tr>
          <td><input style="width:90%" type="text" name="text[<?= $value['id'] ?>]" value="<?= $value['text'] ?>"></td>
          <td>
            <input type="hidden" name="dpy[<?= $value['id'] ?>]" value="0">
            <input type="checkbox" name="dpy[<?= $value['id'] ?>]" value="1" <?= ($value['dpy']) ? "checked" : "" ?>>
          </td>
          <td><input type="checkbox" name="del[]" value="<?= $value['id'] ?>"></td>
        </tr>
      <?php
      }
      ?>
    </tbody>
  </table>
  <table style="margin-top:40px; width:70%;">
    <tbody>
      <tr>
        <td width="200px"><input type="button" onclick="op('#cover','#cvr','view.php?do=maqeadd')" value="新增動態文字廣告"></td>
        <td class="cent"><input type="submit" value="修改確定"><input type="reset" value="重置"></td>
      </tr>
    </tbody>
  </table>
</form>

新增單筆

對 view.php 做新的 case 規劃（可複製前題 case 做修改）

增添 view.php

view.php

case 'maqeadd':
?>
  <form method="post" action="api.php?do=<?= $_GET['do'] ?>" enctype="multipart/form-data">
    <p class="t botli">新增動態文字廣告</p>
    <p class="cent">動態文字廣告 ： <input name="text" type="text"></p>
    <p class="cent"><input value="新增" type="submit"><input type="reset" value="重置"></p>
  </form>
<?php
  break;

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

增添 api.php

api.php

case 'maqeadd':
  insert($_POST, "q1t4_maqe");
  plo("admin.php?do=aad");
  break;

修改多筆 + 刪除多筆

從前台試著操作多筆修改跟刪除按下送出。網頁會到 api.php?do=maqemdy。處理完成後回到後台頁面 admin.php

沒把握你可以在 case 內先下 print_r($_POST)，確認畫面的資料正不正常跟有哪些資料

增添 api.php

api.php

case 'maqemdy':
  update($_POST, "q1t4_maqe");
  delete($_POST, "q1t4_maqe");
  plo("admin.php?do=aad");
  break;

前台顯示

由於 inde.php 代碼太多避免誤碰，前端所需 PHP 處理改寫在 lib.php 內，視同寫在 index.php （注意所有頁面都會繼承，故變數命名需注意）

撈取文字並串為一個字串並用空白分開。

增添 lib.php

lib.php

//t4
$re = select("q1t4_maqe", "dpy=1");
$t4_text = "";
foreach ($re as $data) $t4_text .= $data['text'] . "　　";

接著前端部分，將 marquee 區域部分標籤內增加 php 變數

<marquee scrolldelay="120" direction="left" style="position:absolute; width:100%; height:40px;">
</marquee>

帶入 $t4_text 改為

<marquee scrolldelay="120" direction="left" style="position:absolute; width:100%; height:40px;">
    <?= $t4_text ?>
</marquee>

No.5 動畫圖片輪播 (30%)

透過前面的操作完成，可以很快地複製修改出此題的後台內容格式。

q1t5

後台的內容格式

注意 input 的 name 與 value，宣告方法依據修改與刪除有所不同。
新增單項提交到 view.php?do=mvimadd
form 提交到 api.php?do=mvimmdy
更新動畫提交到 view.php?do=mvimchg 並夾帶 ID
提交前另準備一組 dpy[$id]=0，這樣沒選的保持 0，有選的被覆蓋會是 1，update 時全體更新

新增 amvim.php（參考 atitle.php)

amvim.php

<p class="t cent botli">動畫圖片管理</p>
<form method="post" action="api.php?do=mvimmdy">
  <table width="100%">
    <tbody>
      <tr class="yel">
        <td width="68%">動畫圖片</td>
        <td width="7%">顯示</td>
        <td width="7%">刪除</td>
        <td></td>
      </tr>
      <?php
      $re = select("q1t5_mvim", 1);
      foreach ($re as $value) {
      ?>
        <tr>
          <td><embed src="img/<?= $value['text'] ?>" width="300"></td>
          <td>
            <input type="hidden" name="dpy[<?= $value['id'] ?>]" value="0">
            <input type="checkbox" name="dpy[<?= $value['id'] ?>]" value="1" <?= ($value['dpy']) ? "checked" : "" ?>>
          </td>
          <td><input type="checkbox" name="del[]" value="<?= $value['id'] ?>"></td>
          <td><input type="button" onclick="op('#cover','#cvr','view.php?do=mvimchg&id=<?= $value['id'] ?>')" value="更換動畫"></td>
        </tr>
      <?php
      }
      ?>
    </tbody>
  </table>
  <table style="margin-top:40px; width:70%;">
    <tbody>
      <tr>
        <td width="200px"><input type="button" onclick="op('#cover','#cvr','view.php?do=mvimadd')" value="新增動畫圖片"></td>
        <td class="cent"><input type="submit" value="修改確定"><input type="reset" value="重置"></td>
      </tr>
    </tbody>
  </table>
</form>

新增單筆

對 view.php 做新的 case 規劃（可複製前題 case 做修改）

增添 view.php

view.php

case 'mvimadd':
?>
  <form method="post" action="api.php?do=<?= $_GET['do'] ?>" enctype="multipart/form-data">
    <p class="t botli">新增動畫圖片</p>
    <p class="cent">動畫圖片 ： <input name="img" type="file"></p>
    <p class="cent"><input value="新增" type="submit"><input type="reset" value="重置"></p>
  </form>
<?php
  break;

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

增添 api.php

api.php

case 'mvimadd':
  $_POST['text'] = addfile($_FILES['img']);
  insert($_POST, "q1t5_mvim");
  plo("admin.php?do=amvim");
  break;

修改多筆 + 刪除多筆

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

增添 api.php

api.php

case 'mvimmdy':
  update($_POST, "q1t5_mvim");
  delete($_POST, "q1t5_mvim");
  plo("admin.php?do=amvim");
  break;

修改單一圖片

這時候的新增修改刪除都可以順利操作，只剩換圖作業。可以拿前一 case 來改一下。因為只有純上傳，我們需要藏一個 ID

增添 view.php

view.php

case 'mvimchg':
?>
  <form method="post" action="api.php?do=<?= $_GET['do'] ?>&id=<?= $_GET['id'] ?>" enctype="multipart/form-data">
    <p class="t botli">修改動畫圖片</p>
    <p class="cent">標題區圖片 ： <input name="img" type="file"></p>
    <p class="cent"><input value="修改" type="submit"><input type="reset" value="重置"></p>
  </form>
<?php
  break;

提交部分參考之前的 case 做修改，為了配合格式，將 id、欄位對象、新檔名整合成陣列變數送交給 update

增添 api.php

api.php

case 'mvimchg':
  $_POST['text'][$_GET['id']] = addfile($_FILES['img']);
  update($_POST, "q1t5_mvim");
  plo("admin.php?do=amvim");
  break;

此時到這裡，後台的功能已設計完成。接下來是在各版型內顯示該 title 圖片

前台的動畫顯示

先撈取出 mvim 的所有檔案路徑，先存在一個 array。之後會用到

增添 lib.php

lib.php

//t5
$re = select("q1t5_mvim", "dpy=1");
foreach ($re as $data) $t5_ary[] = "img/" . $data['text'];

題目已經做好 js 的輪播工具。透過理解知道由一個 JS 陣列變數 lin 進行抽換。所以我們要幫所有圖片塞入到該陣列。php 的 array 要塞到 js 的陣列可使用 json_encode 來快速完成。貪快可把宣告 new array 給直接指定了。

修改 index.php

index.php

var lin=new Array();

修改為

index.php

var lin = new Array();
lin = <?= json_encode($t5_ary) ?>;

此時就能正常播放。但初始畫面有 3 秒的空窗沒東西。這是題目設計沒弄好。如果要修正可調整兩點（可以不做）

網頁執行時，應該先出現 DIV 再有 JS（才能抓到 DOM 位置），原題目顛倒。
if 內負責等待三秒，應該在等待三秒前先跑一次 html 印出

調整原段

index.php

<!--正中央-->
<script>
    var lin = new Array();
    lin = <?=json_encode($t5_ary)?>;
    if(lin.length>1)
    {
        setInterval("ww()",3000);
        now=1;
    }
    function ww()
    {
        $("#mwww").html("<embed loop=true src='"+lin[now]+"' style='width:99%; height:100%;'></embed>")
        //$("#mwww").attr("src",lin[now])
        now++;
        if(now>=lin.length)
        now=0;
    }
</script>
<div style="width:100%; padding:2px; height:290px;">
    <div id="mwww" loop="true" style="width:100%; height:100%;">
        <div style="width:99%; height:100%; position:relative;" class="cent">沒有資料</div>
    </div>
</div>

修正為

index.php

<!--正中央-->
<div style="width:100%; padding:2px; height:290px;">
  <div id="mwww" loop="true" style="width:100%; height:100%;">
    <div style="width:99%; height:100%; position:relative;" class="cent">沒有資料</div>
  </div>
</div>
<script>
  var lin = new Array();
  lin = <?= json_encode($t5_ary) ?>;
  var now = 0;
  ww(); // 修正初始沒資料畫面
  if (lin.length > 1) {
    setInterval("ww()", 3000);
    now = 1;
  }

  function ww() {
    $("#mwww").html("<embed loop=true src='" + lin[now] + "' style='width:99%; height:100%;'></embed>")
    //$("#mwww").attr("src",lin[now])
    now++;
    if (now >= lin.length)
      now = 0;
  }
</script>

No.6 校園映像 (40%)

與第五題的後台版面比較相近，可以拿來很快複製修改出第六題的內容格式。

q1t6

後台的內容格式

調整 aimage.php 表格中間，塞入 php:select 並帶入 tr>td HTML 顯示。每次只顯示 3 筆，所以要設定 limit 與 page 關係
新增單項提交到 view.php?do=imageadd
form 提交到 api.php?do=imagemdy
更新動畫提交到 view.php?do=imagechg，並夾帶 ID
這裡還要多個分頁效果步驟，先把畫面都能一次可呈現之後再設計分頁
提交前另準備一組 dpy[$id]=0，這樣沒選的保持 0，有選的被覆蓋會是 1，update 時全體更新

新增 aimage.php（參考 amvim.php)

aimage.php

<p class="t cent botli">校園映像資料管理</p>
<form method="post" action="api.php?do=imagemdy">
  <table width="100%">
    <tbody>
      <tr class="yel">
        <td width="68%">校園映像資料圖片</td>
        <td width="7%">顯示</td>
        <td width="7%">刪除</td>
        <td></td>
      </tr>
      <?php
      $nowpage = (empty($_GET['page'])) ? 1 : $_GET['page'];
      $begin = ($nowpage - 1) * 3;
      $re = select("q1t6_img", "1 limit " . $begin . ",3");
      foreach ($re as $value) {
      ?>
        <tr>
          <td><embed src="img/<?= $value['text'] ?>" width="100" height="68"></td>
          <td>
            <input type="hidden" name="dpy[<?= $value['id'] ?>]" value="0">
            <input type="checkbox" name="dpy[<?= $value['id'] ?>]" value="1" <?= ($value['dpy']) ? "checked" : "" ?>>
          </td>
          <td><input type="checkbox" name="del[]" value="<?= $value['id'] ?>"></td>
          <td><input type="button" onclick="op('#cover','#cvr','view.php?do=imagechg&id=<?= $value['id'] ?>')" value="更換圖片"></td>
        </tr>
      <?php
      }
      ?>
    </tbody>
  </table>
  <table style="margin-top:40px; width:70%;">
    <tbody>
      <tr>
        <td width="200px"><input type="button" onclick="op('#cover','#cvr','view.php?do=imageadd')" value="新增校園映像圖片"></td>
        <td class="cent"><input type="submit" value="修改確定"><input type="reset" value="重置"></td>
      </tr>
    </tbody>
  </table>
</form>

此時可以在 URL 上面多加個 &page=2 做測試，是否正常的 limit。
接著規劃分頁導覽，從 news.php 那裏偷來現成的 HTML/CSS 長這樣

news.php

<div style="text-align:center;">
    <a class="bl" style="font-size:30px;" href="?do=meg&p=0">&lt;&nbsp;</a>
    <a class="bl" style="font-size:30px;" href="?do=meg&p=0">&nbsp;&gt;</a>
</div>

把這段塞到版型下面，也就是兩個 table 之間修改成。同時做兩件事

由於分頁導航使用 function page($table,$sql,$range,$now_page)
回傳會是一個陣列包了頭 <、連續數字、尾 >，且各自帶 page 值，用 foreach 做印出
同時判斷如果是當前頁等於印出的文字時，字體放大

aimage.php

<div style="text-align:center;">
  <?php
  $re = navpage("q1t6_img", 1, 3, $nowpage);
  foreach ($re as $key => $value)
    echo '<a class="bl" style="font-size:' . (($nowpage == $key) ? "60" : "30") . 'px;" href="?do=aimage&page=' . $value . '">' . $key . '</a>';
  ?>
</div>

新增單筆

對 view.php 做新的 case 規劃（可複製前題目做修改）

增添 view.php

view.php

case 'imageadd':
?>
  <form method="post" action="api.php?do=<?= $_GET['do'] ?>" enctype="multipart/form-data">
    <p class="t botli">新增校園映像圖片</p>
    <p class="cent">校園映像圖片 ： <input name="img" type="file"></p>
    <p class="cent"><input value="新增" type="submit"><input type="reset" value="重置"></p>
  </form>
<?php
  break;

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

增添 api.php

api.php

case 'imageadd':
  $_POST['text'] = addfile($_FILES['img']);
  insert($_POST, "q1t6_img");
  plo("admin.php?do=aimage");
  break;

修改多筆 + 刪除多筆

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

增添 api.php

api.php

case 'imagemdy':
  update($_POST, "q1t6_img");
  delete($_POST, "q1t6_img");
  plo("admin.php?do=aimage");
  break;

修改單一圖片

這時候的新增修改刪除都可以順利操作，只剩單圖片更改作業。完成 view.php。可以拿前一 case 來改一下

增添 view.php

view.php

case 'imagechg':
  ?>
  <form method="post" action="api.php?do=<?= $_GET['do'] ?>&id=<?= $_GET['id'] ?>" enctype="multipart/form-data">
    <p class="t botli">修改校園映像圖片</p>
    <p class="cent">校園映像圖片 ： <input name="img" type="file"></p>
    <p class="cent"><input value="修改" type="submit"><input type="reset" value="重置"></p>
  </form>
  <?php
  break;

接著，參考之前的 case，同時為了配合 function，將 id 跟 file 合併為一個陣列

增添 api.php

api.php

case 'imagechg':
  $_POST['text'][$_GET['id']] = addfile($_FILES['img']);
  update($_POST, "q1t6_img");
  plo("admin.php?do=aimage");
  break;

此時到這裡，後台的功能已設計完成。接下來是在各版型內顯示該 title 圖片

前台的顯示格式

題目已經做好 js 的輪播代碼但沒有提供 HTML 真差勁，因此先分析再猜想原構。

var nowpage=0,num=0;
function pp(x){
    var s,t;
    if(x==1&&nowpage-1>=0) {nowpage--;}
    if(x==2&&(nowpage+1)*3<=num*1+3) {nowpage++;}
    $(".im").hide()
    for(s=0;s<=2;s++){
        t=s*1+nowpage*1;
        $("#ssaa"+t).show()
    }
}
pp(1);

大致上理解每次操作會對所有 class=im 的對象做隱藏，而只對 id=ssaa+數字做顯示。function pp() 會根據目前參數 x 是多少做對應的 nowpage 增減 (x 只會是 1 或 2)，nowpage 會去自動推算那些 #ssaa+數字 要顯示。所以大致上的 HTML 應該長這樣：

<div class="cent">
    <img src="上箭頭" onclick=pp(1)>
    <img class="im" id="ssaa0" src="">
    <img class="im" id="ssaa1" src="">
    <img class="im" id="ssaa2" src="">
    <img class="im" id="ssaa3" src="">
    <img src="下箭頭" onclick=pp(2)>
</div>

將 img 這些 HTML 段落，寫在 select 時規劃好。這裡的$key 沒有特別值，會是 0 開始

增添 lib.php

lib.php

//t6
$re = select("q1t6_img", "dpy=1");
$t6_many = count($re);
$t6_text = "";
foreach ($re as $key => $value) $t6_text .= '<img src="img/' . $value['text'] . '" class="im" id="ssaa' . $key . '" width="150" height="103"/>';

接著有三個頁面要一起改，找到該區域

index.php & login.php & news.php

<span class="t botli">校園映象區</span>

整合 php 與調整 HTML，修改為

index.php & login.php & news.php

<span class="t botli">校園映象區</span>
<div class="cent" style="padding:10px 20px">
	<img src="img/01E01.jpg" onclick="pp(1)">
	<?= $t6_text ?>
	<img src="img/01E02.jpg" onclick="pp(2)">
</div>

此時還不能完全正常操作。因為 JS 的資料有 2 點錯誤：

var num=0; 這部分是指總數量。所以要給 JS 一個總圖數。
if(x==2&&(nowpage+1)*3<=num*1+3) 這裡計算方式錯誤，應該是下個頁碼跳點將不是最後頁碼跳點（最後的秀圖跳點會是總數減三。

因此修改為

index.php & login.php & news.php

var nowpage = 0, num = <?= $t6_many ?>;
function pp(x) {
  var s, t;
  if (x == 1 && nowpage - 1 >= 0) nowpage--; //往前
  if (x == 2 && nowpage + 1 <= num - 3) nowpage++; //往後
  $(".im").hide()
  for (s = 0; s <= 2; s++) {
    t = s * 1 + nowpage * 1;
    $("#ssaa" + t).show()
  }
}
pp(1)

No.7 進站總人數 (20%)

這題很簡單，如法炮製隨便找個類似來改
q1t7

修改後台的內容格式

整個複製版型後，根據需求做修改調整。題目沒要求是否帶舊值（示意圖有）你可以不做。
記得 from 提交改成到 do=totalmdy。要記得 id 固定是 1

新增 atotal.php（參考 atitle.php)

atotal.php

<?php
$re = select("q1t7_total", 1);
?>
<form method="post" action="api.php?do=totalmdy">
  <p class="t botli">進站總人數管理</p>
  <p class="cent">進站總人數 ： <input name="num[1]" value="<?= $re[0]['num'] ?>" type="text"></p>
  <p class="cent"><input value="修改確定" type="submit"><input type="reset" value="重置"></p>
</form>

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

增添 api.php

case 'totalmdy':
  update($_POST, "q1t7_total");
  plo("admin.php?do=atotal");
  break;

前台的 total 顯示格式

增加以下代碼做提取準備。同時判別如果沒 SESSION 紀錄，先 update 更新+1 並更新此值。（透過我們設計的 num+1，函式會自動加 1，不用管原本是多少）

增添 lib.php

//t7
if (empty($_SESSION['visit'])) {
  $_SESSION['visit'] = "check";
  $post['num+1'] = 1;
  update($post, "q1t7_total");
} //先判斷是否更新，之後才撈取
$re = select("q1t7_total", 1);
$t7_text = $re[0]['num'];

再來將進站總人數區域部分標籤內增加 php 變數

admin.php & login.php & index.php & news.php

<span class="t">進站總人數 :1</span>

改為 admin.php & login.php & index.php & news.php

<span class="t">進站總人數 : <?= $t7_text ?></span>

No.8 頁尾版權 (10%)

就拿第 7 題來改吧
q1t8

修改後台的內容格式

整個複製版型後，根據需求做修改調整。題目未要求帶原值可自決定。記得 from 提交改成到 do=footermdy。

新增 abottom.php（參考 atotal.php)

abottom.php

<?php
$re = select("q1t8_footer", 1);
?>
<form method="post" action="api.php?do=footermdy">
  <p class="t botli">頁尾版權資料管理</p>
  <p class="cent">頁尾版權資料 ： <input name="text[1]" value="<?= $re[0]['text'] ?>" type="text"></p>
  <p class="cent"><input value="修改確定" type="submit"><input type="reset" value="重置"></p>
</form>

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

增添 api.php

api.php

case 'footermdy':
  update($_POST, "q1t8_footer");
  plo("admin.php?do=abottom");
  break;

前台的顯示

增加以下代碼做提取

增添 lib.php

//t8
$re = select("q1t8_footer", 1);
$t8_text = $re[0]['text'];

將所有的進站總人數區域部分標籤內增加 php 變數

admin.php & login.php & index.php & news.php

<span class="t" style="line-height:123px;"></span>

帶入 $t8_text 改為

admin.php & login.php & index.php & news.php

<span class="t" style="line-height:123px;"><?= $t8_text ?></span>

No.9 最新消息 (55%)

此題目與第六題都是文字類型管理，從此複製開始修改

q1t9

後台的內容格式

從複製版型開始，根據需求做修改調整
新增單項提交到 view.php?do=newsadd
form 的提交到 api.php?do=newsmdy
提交前多一組 dpy[$id]=0，這樣沒選的會是 0，有選的會是 1，update 時一律更新
後台題目沒要求分頁效果（可不做但前台有），本題根據示意圖有特別去做，設計 limit 與 page 關係

新增 anews.php（參考 aimage.php)

anews.php

<p class="t cent botli">最新消息資料管理</p>
<form method="post" action="api.php?do=newsmdy">
  <table width="100%">
    <tbody>
      <tr class="yel">
        <td width="68%">最新消息資料內容</td>
        <td width="7%">顯示</td>
        <td width="7%">刪除</td>
      </tr>
      <?php
      $nowpage = (empty($_GET['page'])) ? 1 : $_GET['page'];
      $begin = ($nowpage - 1) * 4;
      $re = select("q1t9_news", "1 limit " . $begin . ",4");
      foreach ($re as $value) {
      ?>
        <tr>
          <td><textarea name="text[<?= $value['id'] ?>]" cols="70" rows="3"><?= $value['text'] ?></textarea></td>
          <td>
            <input type="hidden" name="dpy[<?= $value['id'] ?>]" value="0">
            <input type="checkbox" name="dpy[<?= $value['id'] ?>]" value="1" <?= ($value['dpy']) ? "checked" : "" ?>>
          </td>
          <td><input type="checkbox" name="del[]" value="<?= $value['id'] ?>"></td>
        </tr>
      <?php
      }
      ?>
    </tbody>
  </table>

  <table style="margin-top:40px; width:70%;">
    <tbody>
      <tr>
        <td width="200px"><input type="button" onclick="op('#cover','#cvr','view.php?do=newsadd')" value="新增最新消息圖片"></td>
        <td class="cent"><input type="submit" value="修改確定"><input type="reset" value="重置"></td>
      </tr>
    </tbody>
  </table>
</form>

添加分頁到兩個 table 之間

anews.php

<div style="text-align:center;">
  <?php
  $re = navpage("q1t9_news", 1, 4, $nowpage);
  foreach ($re as $key => $value) {
    echo '<a class="bl" style="font-size:' . (($nowpage == $key) ? "60" : "30") . 'px;" href="?do=anews&page=' . $value . '">' . $key . '</a>';
  }
  ?>
</div>

新增單筆

對 view.php 做新的 case 規劃（可複製前題目做修改）

增添 view.php

view.php

case 'newsadd':
?>
  <form method="post" action="api.php?do=<?= $_GET['do'] ?>" enctype="multipart/form-data">
    <p class="t botli">新增最新消息資料</p>
    <p class="cent"><span style="vertical-align:top;">最新消息資料 ： </span><textarea name="text"></textarea></p>
    <p class="cent"><input value="新增" type="submit"><input type="reset" value="重置"></p>
  </form>
<?php
  break;

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

增添 api.php

api.php

case 'newsadd':
  insert($_POST, "q1t9_news");
  plo("admin.php?do=anews");
  break;

修改多筆 + 刪除多筆

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

增添 api.php

api.php

case 'newsmdy':
  update($_POST, "q1t9_news");
  delete($_POST, "q1t9_news");
  plo("admin.php?do=anews");
  break;

前台的顯示

撈取之前，題目說明最多抓五個，超過時判斷 more 的顯示條件。
前台使用 <il></il> 去列表，只顯示部分字，利用 mb_substr(DATA,START,RANGE) 來處理此步驟。
滑鼠移過去時會自動跳完整內文，採用素材 JS 去完成
將 JS 分析出來，原 HTML 在 <ul></ul> 內部，推測格式結構為：

<ul class="ssaa" style="list-style-type:decimal;">
    <li>少量文字<span class="all" style="display:none">完整文字</span></li>
</ul>

此時開始規劃More..跟多筆<li>的 HTML 提取

增添 lib.php

//t9
//for index.php
$re = select("q1t9_news", "dpy=1");
$t9_more = (count($re) > 5) ? '<a style="float:right" href="news.php">More..</a>' : '';
$re = select("q1t9_news", "dpy=1 limit 5");
$t9_text = "";
foreach ($re as $data)
  $t9_text .= '<li>' . mb_substr($data['text'], 0, 20) . '<span class="all" style="display:none">' . $data['text'] . '</span></li>';

到前台調整 more 的出現時機，塞在標題右側
調整修改並加入 PHP 變數，(li 做在 lib.php 內）

修改 index.php

index.php

<span class="t botli">最新消息區
</span>
<ul class="ssaa" style="list-style-type:decimal;">
</ul>

修改為

index.php

<span class="t botli">最新消息區<?= $t9_more ?></span>
<ul class="ssaa" style="list-style-type:decimal;">
  <?= $t9_text ?>
</ul>

前台的 news more

與 index.php 的最新消息觀念差不多，還要多個分頁功能。此外，JS 的 DOM 部分不太一致要小心。先把資料顯示做出來，參考前例之外，還多了 page 要規劃 limit

增添 lib.php

lib.php

//for news.php
$nowpage = (empty($_GET['page'])) ? 1 : $_GET['page'];
$t9_begin = ($nowpage - 1) * 5;
$re = select("q1t9_news", "dpy=1 limit " . $t9_begin . ",5");
$t9_list = "";
foreach ($re as $data)
  $t9_list .= '<li>' . mb_substr($data['text'], 0, 20) . '<span class="all" style="display:none">' . $data['text'] . '</span></li>';

接著修改前台，這裡要改 ol 才能指定編號，同時 start 自訂編號起始值，利用變數去配合。

修改 news.php

news.php

<!--正中央-->
<ol class="ssaa" style="list-style-type:decimal;" start=<?=$t9_begin+1?>>
  <?=$t9_list?>
</ol>

再來是規劃分頁導覽，參考前台 news.php 的素材。

news.php

<div style="text-align:center;">
  <a class="bl" style="font-size:30px;" href="?do=meg&p=0">&lt;&nbsp;</a>
  <a class="bl" style="font-size:30px;" href="?do=meg&p=0">&nbsp;&gt;</a>
</div>

我們為了要規劃文字大小，我們把部分移到 sql.php 提取的作業去

增添 lib.php

lib.php

//for news.php pagenav
$re = navpage("q1t9_news", "dpy=1", 5, $nowpage);
$t9_page = "";
foreach ($re as $key => $value)
  $t9_page .= '<a class="bl" style="font-size:' . (($nowpage == $key) ? "60" : "30") . 'px;" href="?page=' . $value . '">' . $key . '</a>';

修改 news.php

news.php

<div style="text-align:center;">
  <?=$t9_page?>
</div>

No.11 管理者帳號管理功能 (15%)

因為是文字型，所以挑第四題來複製修改。由於題目未說明清楚且示意圖未帶出 admin/1234 引此我們也不帶出。

q1t11

後台的內容格式

form 的提交到 api.php?do=adminmdy
新增單項的提交到 view.php?do=adminadd

新增 aadmin.php（參考 aad.php)

aadmin.php

<p class="t cent botli">管理者帳號管理</p>
<form method="post" action="api.php?do=adminmdy">
  <table width="100%">
    <tbody>
      <tr class="yel">
        <td width="34%">帳號</td>
        <td width="34%">密碼</td>
        <td width="7%">刪除</td>
      </tr>
      <?php
      $re = select("q1t10_admin", "id!=1");
      foreach ($re as $value) {
      ?>
        <tr>
          <td><input style="width:90%" type="text" name="acc[<?= $value['id'] ?>]" value="<?= $value['acc'] ?>"></td>
          <td><input style="width:90%" type="password" name="pwd[<?= $value['id'] ?>]" value="<?= $value['pwd'] ?>"></td>
          <td><input type="checkbox" name="del[]" value="<?= $value['id'] ?>"></td>
        </tr>
      <?php
      }
      ?>
    </tbody>
  </table>
  <table style="margin-top:40px; width:70%;">
    <tbody>
      <tr>
        <td width="200px"><input type="button" onclick="op('#cover','#cvr','view.php?do=adminadd')" value="新增管理者帳號"></td>
        <td class="cent"><input type="submit" value="修改確定"><input type="reset" value="重置"></td>
      </tr>
    </tbody>
  </table>
</form>

新增單筆

對 view.php 做新的 case 規劃（可複製前題目做修改）

增添 view.php

view.php

case 'adminadd':
?>
  <form method="post" action="api.php?do=<?= $_GET['do'] ?>" enctype="multipart/form-data">
    <p class="t botli">新增管理者帳號</p>
    <p class="cent">帳號 ： <input name="acc" type="text"></p>
    <p class="cent">密碼 ： <input name="pwd" type="password"></p>
    <p class="cent">確認密碼 ： <input name="check" type="password"></p>
    <p class="cent"><input value="新增" type="submit"><input type="reset" value="重置"></p>
  </form>
<?php
  break;

對 api.php 做 SQL 處理，接著回到該單元內容。（可複製前題目做修改）。題目沒要求驗證密碼判斷一致設計，因此不花時間做

增添 api.php

api.php

case 'adminadd':
  unset($_POST['check']);
  insert($_POST, "q1t10_admin");
  plo("admin.php?do=aadmin");
  break;

修改多筆 + 刪除多筆

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

增添 api.php

case 'adminmdy':
  update($_POST, "q1t10_admin");
  delete($_POST, "q1t10_admin");
  plo("admin.php?do=aadmin");
  break;

No.12 選單管理功能 (45%)

這題步驟很多且版型欄位較多，是偷第四題來改並參考第三題的格式做調整

q1t12

後台的內容格式

找到表格中間，塞入 php:select 並帶入 tr>td HTML 顯示
跑回圈時取得各次選單的數量為 $son
新增單項的提交到 view.php?do=menuadd
form 的提交到 api.php?do=menumdy
編輯次選單提交到 view.php?do=menuchg 並夾帶 ID
提交前多一組 dpy[$id]=0 這樣沒選的會是 0，有選的會是 1，update 時一律更新

新增 amenu.php（參考 aad.php)

amenu.php

<p class="t cent botli">選單管理</p>
<form method="post" action="api.php?do=menumdy">
  <table width="100%">
    <tbody>
      <tr class="yel">
        <td width="30%">主選單名稱</td>
        <td width="30%">選單連結網址</td>
        <td width="8%">次選單數</td>
        <td width="7%">顯示</td>
        <td width="7%">刪除</td>
        <td></td>
      </tr>
      <?php
      $re = select("q1t12_menu", "fa=0");
      foreach ($re as $value) {
        $many = count(select("q1t12_menu", "fa=" . $value['id']));
      ?>
        <tr>
          <td><input style="width:90%" type="text" name="text[<?= $value['id'] ?>]" value="<?= $value['text'] ?>"></td>
          <td><input style="width:90%" type="text" name="link[<?= $value['id'] ?>]" value="<?= $value['link'] ?>"></td>
          <td><?= $many ?></td>
          <td>
            <input type="hidden" name="dpy[<?= $value['id'] ?>]" value="0">
            <input type="checkbox" name="dpy[<?= $value['id'] ?>]" value="1" <?= ($value['dpy']) ? "checked" : "" ?>>
          </td>
          <td><input type="checkbox" name="del[]" value="<?= $value['id'] ?>"></td>
          <td><input type="button" onclick="op('#cover','#cvr','view.php?do=menuchg&id=<?= $value['id'] ?>')" value="編輯次選單"></td>
        </tr>
      <?php
      }
      ?>
    </tbody>
  </table>
  <table style="margin-top:40px; width:70%;">
    <tbody>
      <tr>
        <td width="200px"><input type="button" onclick="op('#cover','#cvr','view.php?do=menuadd')" value="新增主選單"></td>
        <td class="cent"><input type="submit" value="修改確定"><input type="reset" value="重置"></td>
      </tr>
    </tbody>
  </table>
</form>

新增單筆

對 view.php 做新的 case 規劃（可複製前題目做修改）

增添 view.php

view.php

case 'menuadd':
?>
  <form method="post" action="api.php?do=<?= $_GET['do'] ?>" enctype="multipart/form-data">
    <p class="t botli">新增主選單</p>
    <table class="cent" style="width:50%;margin:0 auto">
      <thead>
        <tr>
          <td>選單名稱</td>
          <td>選單連結網址</td>
          <td></td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input name="text" type="text"></td>
          <td><input name="link" type="text"></td>
        </tr>
      </tbody>
    </table>
    <p class="cent"><input value="新增" type="submit"><input type="reset" value="重置"></p>
  </form>
<?php
  break;

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

增添 api.php

api.php

case 'menuadd':
  insert($_POST, "q1t12_menu");
  plo("admin.php?do=amenu");
  break;

修改多筆 + 刪除多筆

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

增添 api.php

api.php

case 'menumdy':
  update($_POST, "q1t12_menu");
  delete($_POST, "q1t12_menu");
  plo("admin.php?do=amenu");
  break;

次選單

只剩此選單管理作業。這裡非常複雜需要吸收理解一下：

這裡把新增修改刪除都做在一起了，我們要將列表思考成 new 跟 old，才能 new 做 insert，old 做 update 跟 delete
new 的 del 很麻煩且無意義，所以不要給新增欄位有刪除功能
function insert 一次只能一筆，所以要用迴圈去處理
新增欄位必須要靠 JQ 完成

增添 view.php

view.php

case 'menuchg':
?>
  <form method="post" action="api.php?do=<?= $_GET['do'] ?>&id=<?= $_GET['id'] ?>" enctype="multipart/form-data">
    <p class="t botli">編輯次選單</p>
    <table class="cent" style="width:50%;margin:0 auto">
      <thead>
        <tr>
          <td>選單名稱</td>
          <td>選單連結網址</td>
          <td>刪除</td>
        </tr>
      </thead>
      <tbody id="tb">
        <?php
        $re = select("q1t12_menu", "fa=" . $_GET['id']);
        foreach ($re as $ro) {
        ?>
          <tr>
            <td><input name="text[<?= $ro['id'] ?>]" type="text" value="<?= $ro['text'] ?>"></td>
            <td><input name="link[<?= $ro['id'] ?>]" type="text" value="<?= $ro['link'] ?>"></td>
            <td><input type="checkbox" name="del[]" value="<?= $ro['id'] ?>"></td>
          </tr>
        <?php
        }
        ?>
      </tbody>
    </table>
    <p class="cent">
      <input value="修改確定" type="submit">
      <input type="reset" value="重置">
      <input type="button" value="更多" onclick="add()">
    </p>
  </form>
  <script>
    function add() {
      txt = `
          <tr>
            <td><input name="new[text][]" type="text"></td>
            <td><input name="new[link][]" type="text"></td>
            <td></td>
          </tr>
        `;
      $("#tb").append(txt);
    }
  </script>
<?php
  break;

新資料：新欄位都被塞到一個叫 new 的混和陣列，整理成為 $new[名稱]=連結。然後再用 foreach 做批次處理新增
舊資料：拿掉 new 這東西後就只剩舊資料了，跟之前相同作法修改刪除

增添 api.php

api.php

case 'menuchg':
  foreach ($_POST['new']['text'] as $key => $val) {
    $post['text'] = $val;
    $post['link'] = $_POST['new']['link'][$key];
    $post['fa'] = $_GET['id'];
    insert($post, "q1t12_menu");
  }
  unset($_POST['new']);
  update($_POST, "q1t12_menu");
  delete($_POST, "q1t12_menu");
  plo("admin.php?do=amenu");
  break;

這裡素材已提供 CSS 互動效果（源於 HTML+js.js+css.css)，大致上效果為可以先理解為外層 div:mainmu，內層 div:mainmu2

JS 收放效果主要是當滑鼠移動到 .mainmu（主選單）上時，該子對象（次選單）的 .mu 會顯示或隱藏
子對象一開始先 display:none
.mainmu 為一個 orange css 效果， .mainmu2 為另一個 green css 效果，若畫面沒出現就檢查 css 的 icon 路徑是否正常並補上

大致範例架構如下（這裡為了精簡閱讀，style 都拿掉了）

<a href="">
  <div class="mainmu">
    <span>父</span>
    <div class="mainmu2 mw" style="display:none">
        <a href="">子 A</a>
    </div>
    <div class="mainmu2 mw" style="display:none">
        <a href="">子 B</a>
    </div>
  </div>
</a>

所以到 lib.php 內做撈取動作，為了方便好寫，直接 HTML 放在回圈內跟著跑

增添 lib.php

lib.php

//t12
$t12_text = "";
$re1 = select("q1t12_menu", "fa=0 and dpy=1");
foreach ($re1 as $fa) {
  $t12_text .= '
    <a style="color:#000; font-size:13px; text-decoration:none;" href="' . $fa['link'] . '">
      <div class="mainmu">
        <span>' . $fa['text'] . '</span>
  ';
  $re2 = select("q1t12_menu", "fa=" . $fa['id']);
  foreach ($re2 as $son) {
    $t12_text .= '
        <div class="mw mainmu2" style="display:none">
          <a style="color:#000; font-size:13px; text-decoration:none;" href="' . $son['link'] . '">' . $son['text'] . '</a>
        </div>
    ';
  }
  $t12_text .= '
      </div>
    </a>
  ';
}

將 login.php、index.php、news.php 的選單區域部分標籤內增加 php 變數

<div id="menuput" class="dbor">
<!--主選單放此-->
<span class="t botli">主選單區</span>
<?= $t12_text ?>
</div>

END 調整版面 (5%)

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

q1layout

找到主區域的 div 修改為

<div id="main" style="overflow: scroll;margin: 10px auto;padding: 0;border: 0;">

把多餘個寬度處理掉，找到 footer 把 width 拿掉改為

<div style="left:0px; position:relative; background:#FC3; margin-top:4px; height:123px; display:block;">

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

No.10 管理登入按鈕 (20%)

修正登入連結

修改 index.php, news.php, login.php

判斷是否已登入

修改 admin.php

FROM 提交動作

修改 login.php

FROM 的 SQL 處理

建立 api.php

登出作業

修改 admin.php

修改 api.php

No.3 網站標題 (35%)

內容區域調整

增添 admin.php

後台的內容格式

修改 atitle.php

批次修改說明

批次刪除說明

新增單筆

建立 view.php

增添 api.php

修改多筆 + 刪除多筆

增添 api.php

修改單一圖片

增添 view.php

增添 api.php

前台顯示

增添 lib.php

修改 admin.php, login.php, index.php, news.php

No.4 動態文字廣告 (30%)

後台的內容格式

新增 aad.php （參考 atitle.php)

新增單筆

增添 view.php

增添 api.php

修改多筆 + 刪除多筆

增添 api.php

前台顯示

增添 lib.php

修改 login.php, index.php, news.php

No.5 動畫圖片輪播 (30%)

後台的內容格式

新增 amvim.php（參考 atitle.php)

新增單筆

增添 view.php

增添 api.php

修改多筆 + 刪除多筆

增添 api.php

修改單一圖片

增添 view.php

增添 api.php

前台的動畫顯示

增添 lib.php

修改 index.php

No.6 校園映像 (40%)

後台的內容格式

新增 aimage.php（參考 amvim.php)

新增單筆

增添 view.php

增添 api.php

修改多筆 + 刪除多筆

增添 api.php

修改單一圖片

增添 view.php

增添 api.php

前台的顯示格式

增添 lib.php

修改 index.php & login.php & news.php

No.7 進站總人數 (20%)

修改後台的內容格式

新增 atotal.php（參考 atitle.php)

增添 api.php

前台的 total 顯示格式

增添 lib.php

修改 admin.php & login.php & index.php & news.php

No.8 頁尾版權 (10%)

修改後台的內容格式

新增 abottom.php（參考 atotal.php)

增添 api.php