[題目解析] 技能檢定!網頁設計乙級術科考題分析(事前準備)
本篇為全網乙解析系列之開頭序之章,為國內技術技能檢定中心之網頁設計乙級術科項目之全題庫四題解析(為試題編號 17300-102201~4,適用修訂版本為 109/03/25)。本篇提供應考人的事前準備相關說明,包含整體考試流程說明與考題資訊,以及你應該如何準備。
關於本解析
本系列解析主要是針對網頁設計乙級術科考照的考前練習解析,大部分內容皆以目標考試時間四小時內完成為解析目標。因為了縮短作答效率,本解析所編寫的網頁設計皆盡可能編譯簡化與基本功能,較不適合發展於商務或工作專案上使用。但能加深初學者作為入門的練習經驗學習。事前準備有以下要點說明:
- 術科題目與素材包取得:
應考人可以從技檢中心下載題目 pdf 與網站素材包,此資源將跟實際考試之內容一致。網站素材包內含四組指定題目所需之媒體影音圖片、文字、版型檔等。 - 考試時間說明:
除了考試時間為四小時的正式應考時間,另外提供 90 分鐘的本機端伺服器架設與環境測試(將會保留環境),以及結束評分作業時間(將不含在應考作答時間內)。 - 考場注意事項:
現場不提供網路連線、題目於正式應考前開始抽籤題目,延續前 90 分鐘之伺服器環境使用(但請勿提前猜題作答,測試時間僅允許檔案與伺服器之資料測試並確保環境無誤)。 - 完考評分重點:
作答完畢請舉手向考官一對一現場驗收,評分標準為一百分為扣分基準,未達到試紙題目步驟或操作要求則進行扣分,60 分不及格者為合格失敗,美觀與美感不列入扣分項目,試紙之介面示意圖僅供參考。 - 本解析開發工具:
網頁設計乙級提供應考人使用之開發工具總類眾多(請詳閱術科題目說明),本解析採用 XAMPP(PHP+MySQL+phpMyAdmin) 與 VSCode 為開發工具。 - 本解析宣導說明:
本解析提供四組完成品範例提供自主學習,小站無私共享且不易維護,請勿隨意散播、測試攻擊或其他非法之操作行為。
作者:Loki Jiang × 修訂:109/05/14
- 網頁乙級術科試題下載:請連結至 → [技能檢定中心] 取得題目與素材包
- 本解析完整代碼:https://github.com/summer10920/exam_1073002b10_fast/
- 完成網站範例
關於網頁設計乙級
網頁設計乙級並不考量前端之美感或操作體驗,較偏向於後端網頁設計之領域為主,主要為依據題目需求進行功能設計完成簡易之主題網站繳交。證照考取率較低且報考人數較少,絕大部分的原因在於考場時間短少、學術推廣與解析教材不足、以及題目熟悉度與打字速度之重要性。
考試分為三階段,初階段 90 分鐘進行座位抽籤與環境測試,中階段 4 小時進行題目抽籤與實作解答,後階段不計時的驗收評分。所以三段時間可以分別規劃並做心理準備與時間分配。
應考與驗收注意
你有 240 分鐘可以進行網站程式編寫,含網站、資料庫、函式編寫等作業。取得作答題目後,開始正式編寫網頁。
- 依題目要求,請記得設定網站根目錄為
D:/WebXX/
(XX 為您的應考座號),在此目錄下建置所抽選到之題目, - 題目上沒有出現的動作就不用去完整設計。題目扣分制且多做功能不計分,你的任務是四小時內完成。
- 只要作答題目上有要求的動作即可,示意參考圖僅供參考不需相同呈現,請依題目動作之規範設計走(也就是美觀與 UIUX 是不影響計分)。
- 同上舉例,若題目描述請提供修改功能之設計:只需考量修改功能即可,操作合理性並不列入評分項目(如不需帶出舊值之表單,直接空欄位顯示依然可進行修改)。
- 如果希望這是你的作品之一可以另外做完整版本,考試拚的是時間內完成的速成版本。
作答完還剩時間就回頭檢查所有評分動作,考官不會接觸鍵盤滑鼠,由口頭進行動作要求你來負責操作示範。100 分開始倒扣,每一動作未達則扣 5 分。你可以作答到最後完整 4 小時鐘響後才進行驗收(時間不重疊)。
環境架設測試
你有 90 分鐘可以進行環境安裝測試,含伺服器軟體(由考場提供)與資料庫等建置測試作業。請利用此時段進行安裝建置與環境測試,如果屬於電腦故障或權限不足請即時向監考官反應。
- 當一切網站環境安裝與運作皆可正常無誤後,即可離場等待下階段進場應考,該電腦伺服器建置會保留到下階段作為應考環境(也就是自建應考環境)。
素材包測試(確保檔案正常使用)
將 XAMPP 安裝起來,並將題庫版型放入正確位置並加以整理檔案,檢查是否網頁能被站台正常讀取顯示,有問題請嘗試排除或向考場反應替換主機。
- 建立 D: 下資料夾
\Web01\
、\Web02\
、\Web03\
、\Web04\
,並將題目檔案整理放入,確保四組題目之素材可正常使用。 - 將 XAMPP 安裝並啟動,檢查 apache 與 MySQL 是否可正常使用 80 與 3306 port。
- 模擬抽到某題目時,將上列指定的一組題目資料夾改成 webXX (XX 為座位)進行測試,並記得指定 XAMPP 之站台路徑 (root) 為此目錄。
- 若無法正常使用素材,請檢察壓縮檔是否破損或嘗試重新作業,若仍檔案毀損請向考場反應重新取得素材包或更換主機。
web01 素材整理與檢查
- 複製所有版型檔案至
D:\web01\
,包含 4 組資料夾與 4 個 網頁版型檔- Administrator Login_files
- home_files
- Management page_files
- news_files
- 01P01.htm~01P04.htm
- 該 4 組資料夾內都是相近之內容但有缺陷,唯獨只有 1 組資料夾有 ICON 資料夾(提供 CSS 將影響 MENU 視覺)導致不正常顯示。
修正方式為:從 Management page_files 資料夾對 ICON 資料夾複製到另外三組資料夾內,如此一來全版型都能正常顯示 CSS。 - 將 01P01.htm~01P04.htm 依序題目說明修改檔名
login.php
、index.php
、admin.php
、news.php
- 建立資料夾
D:\web01\img
將所有 jpg 與 gif 放入,建立資料夾D:\web01\data
並將所有 txt 放入 - img 代表媒體資料夾,除了為介面素材圖之路徑外,也扮演檔案上傳的路徑位置。
- 下圖為初始與完成時所有檔案對照
undo:
final:
web02 素材整理與檢查
- 複製所有版型資料夾至站台 root 位置,更名為 Web02 資料夾。
- 修改 02P01.htm 為 index.php
- 將素材之圖片類型複製到 root/img 內。將圖片之文字檔複製到 root/data 內。記得找圖去 img 找字去 data
- 圖為初始與完成時所有檔案對照
undo:
final:
web03 素材整理與檢查
- 複製所有版型資料夾至站台 root 位置,更名為 Web03 資料夾。
- 修改檔名
- 03P01.htm->index.php
- 03P02.htm->order.php
- 03P01.htm->admin.php
- 將素材之圖片與影片都移動到 root/img 內,將文字檔複製到 root/data 內
- img 代表媒體資料夾,除了為介面素材圖之路徑外,也扮演檔案上傳的路徑位置。
- 圖為初始與完成時所有檔案對照
undo:
final:
web04 素材整理與檢查
- 複製所有版型資料夾至站台 root 位置,更名為 Web04 資料夾
- 修改檔名
- 04P01.htm->index.php
- 04P02.htm->admin.php
- 將素材之圖片都移動到 root/img 內,將文字檔複製到 root/data 內
- img 代表媒體資料夾,除了為介面素材圖之路徑外,也扮演檔案上傳的路徑位置。
- 圖為初始與完成時所有檔案對照
undo:
final:
XAMPP Apache 測試(確保正常運作)
啟用 PHP+MYSQL 服務,測試 PHP 運作及 SQL 連線是否正常讀取,如果以下測試不正常代表伺服器環境有誤請嘗試修正伺服器參數與連線設定。
- 你可藉由本解析所需之自訂函式庫lib.php(做為測試代碼工具)拿來進行測試資料庫的 CRUD 是否正確,確保 PHP 伺服器正常。
- 任意手動建立資料庫與資料表數據,測試 PDO 連線,確保 SQL 伺服器正常。
建立 lib.php
- 本篇做題採用 PDO 的資料庫連結方式,透過建立一次 Function 就能快速直覺使用。
- 建立 lib.php,將所有 function 寫在此檔,方便之後於網頁做 inclue 使用
- 背熟並記得利用 90 分鐘內完成此測試檔。
- 前半段主要是提供 insert、update、delete、select 等應用。盡可能完成前段內容。這能公用到四個題目
- 之後當你正式開始作答題目,可以將公用的變數放置在 lib.php 後半段,直接全部通用。
lib.php
session_start(); //open session
//SQL 連結 PDO 物件
$db=new PDO("mysql:host=127.0.0.1;dbname=db00;charset=utf8","root","",null);
date_default_timezone_set('Asia/Taipei'); //修正時區
//select SQL
function select($tb,$wh){ //提供資料表名稱跟條件,我能操作 SQL-Select 回傳
global $db;
return $db->query("SELECT * FROM ".$tb." WHERE ".$wh)->fetchAll();
}
//insert SQL
function insert($ary,$tb){ //若給我資料跟資料表名稱,我自動的新增一筆資料
global $db;
$field="id";
$data="null";
foreach ($ary as $key => $value) {
$field.=",".$key;
$data .=",'".$value."'";
}
$db->query("INSERT INTO ".$tb."(".$field.") VALUES (".$data.")");
return $db->lastInsertId(); //取得剛剛新增的索引
}
//update SQL
function update($ary,$tb){
global $db;
foreach ($ary as $do => $data){
switch ($do) {
case 'num+1': //如果陣列 key 是 num+1,對 value(id 值) 做 num+1
$db->query("UPDATE ".$tb." SET num=num+1 WHERE id=".$data);
break;
case 'num-1': //如果陣列 key 是 num-1,對 value(id 值) 做 num-1
$db->query("UPDATE ".$tb." SET num=num-1 WHERE id=".$data);
break;
default: //多組批次更新,key = id,暴力的一次只更新 1 個欄位
foreach ($data as $key => $value)
$db->query("UPDATE ".$tb." SET ".$do."='".$value."' WHERE id=".$key);
break;
}
}
}
//delete SQL
function delete($ary,$tb){
global $db;
foreach ($ary as $do => $data) {
switch ($do) {
case 'del': //多筆刪除,前端 $_POST['del'][5]=這個 POST 陣列裡面有 del 這個維度陣列
foreach ($data as $value)
$db->query("DELETE FROM ".$tb." WHERE id=".$value);
break;
case 'delwh': //依條件做特殊狀況刪除
$db->query("DELETE FROM ".$tb." WHERE ".$data);
break;
}
}
}
//php 轉址
function plo($link){
return header("location:".$link);
}
//JS 轉址
function jlo($link){
return "location.href='".$link."'";
}
//add file 單筆,不要整個$_FILES 丟過來
function addfile($file){
$newname=time()."_".$file['name'];
copy($file['tmp_name'],"img/".$newname);
return $newname;
}
//分頁導覽
function navpage($tb,$wh,$range,$nowpage){
$total=count(select($tb,$wh));
$many=ceil($total / $range);
$pg['<']=($nowpage==1)?$nowpage:$nowpage-1;
for ($i=1;$i<=$many;$i++) $pg[$i]=$i;
$pg['>']=($nowpage==$many)?$many:$nowpage+1;
return $pg;
}
函式說明
session_start(); //open session |
- 這三個是基本會用到的基礎宣告。包含 SESSION、PDO、時區。之後只要 PHP 有 include 本檔案時,都能引用此三項東西。
- PDO 是一種可以連線任何品牌的 SQL 連線方式,PHP5.4 有列入為內建物件導向,使用前需要 new 物件並存放到變數$db,之後舉凡任何 sql 指令都能透過 PDO 執行。
- 宣告前先提供連線資訊 包含 SQL 類型、主機位置、資料庫名稱、編碼格式、帳號密碼、其他參數等。
- 本解析會只會用到 PDO 指令為
query("#SQL CODE")->fetchAll()
為主,代表執行與回存所有結果。
//select SQL |
做 SQL 的 select 動作,需要取得資料表名稱、$tb 跟條件、$wh,執行 SQL 結果並以陣列回傳所有結果。
//insert SQL |
做 SQL 的 insert 動作,SQL 新增語法為 INSERT INTO table (name1,name2,name3...)VALUES(val1,val2,val3...)
。因此你需要整理成以上字串,再透過 query("#SQLCODE")
去執行結果。最後再去查詢剛剛新增的 ID 是多少。
//update SQL |
作 SQL 的 update 動作,需要取得陣列跟資料表名稱。丟進來的陣列使用 foreach 拆開判斷處理。修改請求大多都是多筆各單值批次。只有在做特殊修改時會是單筆、(num+1 or -1)。
第一層為動作指定 name 跟 data。根據什麼名稱做不同的 update 描述。修改方式有 3 種不同做法,分類出是num+1
,num-1
,普通的資料修改
,差別用一維 [$name=>$data]
或二維陣列 [$na=>$dt=>[$key=>$value]]
- num+1:
代表要對某數字做+1,此時 data($dt) 代表式條件的 id 值 - num-1:
代表要對某數字做-1,此時 data($dt) 代表式條件的 id 值 - default:
也就是要做多筆批次更新。所以需知道條件之 id($key) 與內容 ($value),$dt 裡面會包了這兩組內容因此拆開取得,此時、$na 代表欄位名。另外注意像是 radio 或 select 做修改,丟過來的、$ary 陣列必須塞好新值是 0 或 1。這樣函式就比較暴力的全部資料以一次一個欄位的做更新。
//delete SQL |
作 SQL 的 delete 動作,需要取得陣列跟資料表名稱。丟進來的陣列有不同效果。刪除動作在 4 組題目內有兩種可能。分別是批次刪除跟特別條件刪除。
- del:代表是批次刪除,將 data 分析出所有的 value。做多筆一個個刪除。
- delwh:代表是有條件的刪除,此時$dt 代表條件。
//php 轉址 |
做為轉址用,有可能在 PHP 下執行或 JS 下執行,所以做兩個不同函式。
//add file 單筆,不要整個$_FILES 丟過來 |
檔案上傳所用,先取得 file 陣列各內容數據,並新命名為日期+原檔案名稱。複製到指定路徑 img 資料夾內。並回傳新名字
//分頁導覽 |
提供資料表、條件、一次幾筆、目前頁數。接著動作為:
- 先計算出有多少
$total
筆資料需要多少個導覽按鈕$many
。 - 用一個陣列
$pg
透過$key
與$value
存入顯示文跟頁數字。同時判斷當下$nowpage
是第幾頁使< > 有不同的$value
變化 - 最後回傳整個陣列,讓前端以此 array 逐一列印出來。同時用 link 的 URL 來做網址。例如
譬如算出為 5 頁,目前是第 3 頁。則變數 $pg 的內容:
- $key 的資料為 <,1,2,3,4,5,>
- $value 的資料為 2,1,2,3,4,5,4
接著前端這裡的輸出方式為:
//將陣列做成 HTML 連結 之顯示 |
這樣你會得到一連串的超連結。
XAMPP MySQL 測試(確保正常運作)
為了確保 MySQL 可正常使用,開始作答編寫前,使用 phpmyadmin 先整理資料庫的建檔(有能力全都編入,時間不夠就局部編入)。任何已存在的題目資料都先手動填入 mysql,這樣比較易於測試資料庫讀寫。
- 資料庫內的欄位命名沒有特別要求,唯獨被函式庫綁定用的名稱要配合,如 id,num 這些必須固定 (才能觸發 lib.php 所寫死的處理條件)
- 欄位命名技巧上可跟 input:type 相同方便判斷。譬如 input:text,那名字可以取 text,為了方便統一文字串都使用 text 而不使用 var_chat
- 每個資料表都需索引,因故新增索引時記得給予 AUTO_INCREMENT
考場要求的資料庫命名規劃
- 建立資料庫名稱
dbXX
、XX 為你的考試座號,透過資料表命名來區分個題目之資料表,舉例 q1t3_title 代表題組 1 第 3 題 - 如果你抽到某題組,保留該題組之資料表即可,其他資料表可移除或不理會。
- 記得指定** utf8mb4_unicode_ci **為預設編碼。
web01 的各項資料表
網站標題區 q1t3_title
- 建立
q1t3_title
,要求 4 筆 - 取得 01B01~04 資料做手動新增
- dpy 只能一個為 1,其餘為 0
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(10) | UNSIGNED | 否 | 無 | AUTO_INCREMENT | ||
2 | img | text | utf8mb4_unicode_ci | 否 | 無 | |||
3 | text | text | utf8mb4_unicode_ci | 否 | 無 | |||
4 | dpy | int(1) | 否 | 無 |
CREATE TABLE `q1t3_title` ( |
id | img | text | dpy |
---|---|---|---|
1 | 01B01.jpg | 卓越科技大學校園資訊系統 | 0 |
2 | 01B02.jpg | 卓越科技大學校園資訊系統 | 1 |
3 | 01B03.jpg | 卓越科技大學校園資訊系統 | 0 |
4 | 01B04.jpg | 卓越科技大學校園資訊系統 | 0 |
INSERT INTO `q1t3_title` (`id`, `img`, `text`, `dpy`) VALUES |
動態文字廣告區 q1t4_maqe
- 建立資料表
q1t4_maqe
,題目要 5 筆 - 從 01A02.txt 內取得資料做手動新增
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(10) | UNSIGNED | 否 | 無 | AUTO_INCREMENT | ||
2 | text | text | utf8mb4_unicode_ci | 否 | 無 | |||
3 | dpy | int(11) | 否 | 無 |
CREATE TABLE `q1t4_maqe` ( |
id | text | dpy |
---|---|---|
1 | 轉知臺北教育大學與臺灣師大合辦第 11 屆麋研齋全國硬筆書法比賽活動 | 1 |
2 | 轉知:法務部辦理「第五屆法規知識王網路闖關競賽辦法 | 1 |
3 | 轉知 2012 年全國青年水墨創作大賽活動 | 1 |
4 | 欣榮圖書館 101 年悅讀達人徵文比賽,歡迎全校師生踴躍投稿參加 | 1 |
5 | 轉知:教育是人類升沉的樞紐-2013 教師生命成長營 | 1 |
INSERT INTO `q1t4_maqe` (`id`, `text`, `dpy`) VALUES |
動畫圖片輪播區 q1t5_mvim
- 建立資料表
q1t5_mvim
,題目只要求 4 筆 - 從 img 資料夾選擇 4 個 gif
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(10) | UNSIGNED | 否 | 無 | AUTO_INCREMENT | ||
2 | text | text | utf8mb4_unicode_ci | 否 | 無 | |||
3 | dpy | int(11) | 否 | 無 |
CREATE TABLE `q1t5_mvim` ( |
id | text | dpy |
---|---|---|
1 | 01C01.gif | 1 |
2 | 01C02.gif | 1 |
3 | 01C03.gif | 1 |
4 | 01C04.gif | 1 |
INSERT INTO `q1t5_mvim` (`id`, `text`, `dpy`) VALUES |
校園映像區 q1t6_img
- 建立資料表
q1t6_img
,題目要求四筆 - 從 img 資料夾手動新增 JPG(01D01-10D10) 之檔名
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(10) | UNSIGNED | 否 | 無 | AUTO_INCREMENT | ||
2 | text | text | utf8mb4_unicode_ci | 否 | 無 | |||
3 | dpy | int(11) | 否 | 無 |
CREATE TABLE `q1t6_img` ( |
id | text | dpy |
---|---|---|
1 | 01D01.jpg | 1 |
2 | 01D02.jpg | 1 |
3 | 01D03.jpg | 1 |
4 | 01D04.jpg | 1 |
INSERT INTO `q1t6_img` (`id`, `text`, `dpy`) VALUES |
進佔總人數區 q1t7_total
- 建立資料表
q1t7_total
,會有+1 的動作這裡用 num 為名 - 隨意新增一筆值如 555
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(10) | UNSIGNED | 否 | 無 | AUTO_INCREMENT | ||
2 | num | int(11) | 否 | 無 |
CREATE TABLE `q1t7_total` ( |
id | num |
---|---|
1 | 555 |
INSERT INTO `q1t7_total` (`id`, `num`) VALUES (1, 555); |
頁尾版權區 q1t8_footer
- 建立資料表
q1t8_footer
- 隨意新增一筆值如 ‘這裡是頁尾版權資料’
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(10) | UNSIGNED | 否 | 無 | AUTO_INCREMENT | ||
2 | text | text | utf8mb4_unicode_ci | 否 | 無 |
CREATE TABLE `q1t8_footer` ( |
id | text |
---|---|
1 | 這裡是頁尾版權資料 |
INSERT INTO `q1t8_footer` (`id`, `text`) VALUES (1, '這裡是頁尾版權資料'); |
最新消息區 q1t9_news
- 建立資料表
q1t9_news
,資料有 6 筆 - 從 01A01.txt 手動新增資料
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(10) | UNSIGNED | 否 | 無 | AUTO_INCREMENT | ||
2 | text | text | utf8mb4_unicode_ci | 否 | 無 | |||
3 | dpy | int(11) | 否 | 無 |
CREATE TABLE `q1t9_news` ( |
id | text | dpy |
---|---|---|
1 | 教師研習「世界公民生命園丁國內研習會」 … | 1 |
2 | 公告綜合高中一年級英數補救教學時間 上 … | 1 |
3 | 102 年全國大專校院運動會 「主題標語及 … | 1 |
4 | 台灣亞洲藝術文化教育交流學會第一屆年會 … | 1 |
5 | 11 月 23 日、(星期五) 將於彰化縣田 … | 1 |
6 | 台視百萬大明星節目辦理海選活動 時間:1 … | 0 |
INSERT INTO `q1t9_news` (`id`, `text`, `dpy`) VALUES |
管理登入按鈕 q1t10_admin
- 建立資料表
q1t10_admin
,資料 1 筆 - 新增資料 admin/1234
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(11) | 否 | 無 | AUTO_INCREMENT | |||
2 | acc | text | utf8mb4_unicode_ci | 否 | 無 | |||
3 | pwd | text | utf8mb4_unicode_ci | 否 | 無 |
CREATE TABLE `q1t10_admin` ( |
id | acc | pwd |
---|---|---|
1 | admin | 1234 |
INSERT INTO `q1t10_admin` (`id`, `acc`, `pwd`) VALUES (1, 'admin', '1234'); |
選單管理功能 q1t12_menu
- 建立資料表
q1t12_menu
,資料 3 筆 - fa 為上級從屬, 0 代表主選單 (0),或某一索引值 ID 之次選單
- 手動新增資料
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(10) | UNSIGNED | 否 | 無 | AUTO_INCREMENT | ||
2 | text | text | utf8mb4_unicode_ci | 否 | 無 | |||
3 | link | text | utf8mb4_unicode_ci | 否 | 無 | |||
4 | fa | int(11) | 否 | 無 | ||||
5 | dpy | int(11) | 否 | 無 |
CREATE TABLE `q1t12_menu` ( |
id | text | link | fa | dpy |
---|---|---|---|---|
1 | 管理登入 | login.php | 0 | 1 |
2 | 網站首頁 | index.php | 0 | 1 |
3 | 更多內容 | news.php | 2 | 1 |
INSERT INTO `q1t12_menu` (`id`, `text`, `link`, `fa`, `dpy`) VALUES |
web02 的各項資料表
網站標題區 q2t3_visit
- 建立資料表
q2t3_visit
- 需要紀錄今日瀏覽與累計瀏覽
- 隨便建立今天的資料
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(10) | UNSIGNED | 否 | 無 | AUTO_INCREMENT | ||
2 | date | date | 否 | 無 | ||||
3 | num | int(11) | 否 | 無 |
CREATE TABLE `q2t3_visit` ( |
id | date | num |
---|---|---|
1 | 2020-05-22 | 100 |
INSERT INTO `q2t3_visit` (`id`, `date`, `num`) VALUES (1, NOW(), 100); |
會員登入出 q2t6_user
- 建立資料表
q2t6_user
- 做為會員管理,admin 與 user 做在一起。admin 必需 id=1
- 依據題目要求預先塞資料 (02A08.txt)
- 此資料表將提供題目 6.9.10.15 使用
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(10) | UNSIGNED | 否 | 無 | AUTO_INCREMENT | ||
2 | acc | text | utf8mb4_unicode_ci | 否 | 無 | |||
3 | pwd | text | utf8mb4_unicode_ci | 否 | 無 | |||
4 | text | utf8mb4_unicode_ci | 否 | 無 |
CREATE TABLE `q2t6_user` ( |
id | acc | pwd | |
---|---|---|---|
1 | admin | 1234 | admin@labor.gov.tw |
2 | test | 5678 | test@labor.gov.tw |
3 | mem01 | mem01 | mem01@labor.gov.tw |
4 | mem02 | mem02 | mem02@labor.gov.tw |
INSERT INTO `q2t6_user` (`id`, `acc`, `pwd`, `mail`) VALUES |
主題內容 q2t7_blog
- 這裡不是給首頁主題,而是給分類網誌使用。首頁主題用 dreamweaver+HTML 完成即可
- 建立資料表
q2t7_blog
並將資料歸入,cls 用數字替代分類網誌代號。 - 此題目除了第 7 題(分類網誌)、第 11+16 題(最新文章)、第 12 題(人氣文章) 都會用到,差別 select 的方式不同
- 總和第 7.11.12.16 題,欄位會需要分類、標題、內文、讚數、顯示
- 文章整理起來為:分類 (02A02.txt)、標題+內文 (02A03~02A06.txt),資料只有給四篇,但可依題目示意圖將內文拆成 2 篇(一) 跟(二)
- 參考 02A02+02A03~02A06.txt,寫入資料庫 (本解析的示範表格字多故以 … 帶過)
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(10) | UNSIGNED | 否 | 無 | AUTO_INCREMENT | ||
2 | cls | int(11) | 否 | 無 | 分類 | |||
3 | title | text | utf8mb4_unicode_ci | 否 | 無 | 標題 | ||
4 | text | text | utf8mb4_unicode_ci | 否 | 無 | 內文 | ||
5 | num | int(11) | 否 | 無 | 讚數 | |||
6 | dpy | int(11) | 否 | 無 | 顯示 |
CREATE TABLE `q2t7_blog` ( |
id | cls | title | text | num | dpy |
---|---|---|---|---|---|
1 | 1 | 缺乏運動已成為影響全球死亡率的第四大危險因子 (一) | 缺乏運動已成為影響全球死亡率的 … | 1 | 1 |
2 | 1 | 缺乏運動已成為影響全球死亡率的第四大危險因子 (二) | 許多上班族時常抱怨沒時間或空間 … | 1 | 1 |
3 | 2 | 菸害防治法規 (一) | 第二十三條 違反第五條或第十 … | 1 | 1 |
4 | 2 | 菸害防治法規 (二) | 第二十八條 違反第十二條第一 … | 1 | 1 |
5 | 3 | 降低罹癌風險 建構健康生活型態 (一) | 癌症防治 三管齊下 Part 1 降低 … | 1 | 1 |
6 | 3 | 降低罹癌風險 建構健康生活型態 (二) | 在推廣動態生活,建立國人運動習 … | 1 | 1 |
7 | 4 | 長期憋尿 泌尿系統問題多 (一) | 資料來源:中央健康保險局雙月刊 … | 1 | 1 |
8 | 4 | 長期憋尿 泌尿系統問題多 (二) | 3、前列腺炎與副睪丸炎: 男性若 … | 1 | 1 |
INSERT INTO `q2t7_blog` (`id`, `cls`, `title`, `text`, `num`, `dpy`) VALUES |
最新文章 q2t11_good
- 題目資料與第 7 題資料表共用即可。只差在額外的按讚系統
- 建立資料表
q2t11_good
,用來紀錄q2t6_user
與q2t7_blog
的關係表 - 只要有文章與用戶有關連性就新增或刪除資料。
- 為了快速方便這裡不塞資料,一開始都是沒有成立。需要按讚就 insert,不需要就 delete
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(10) | UNSIGNED | 否 | 無 | AUTO_INCREMENT | ||
2 | user | text | utf8mb4_unicode_ci | 否 | 無 | |||
3 | blog | int(11) | 否 | 無 |
CREATE TABLE `q2t11_good` ( |
問卷調查 q2t13_vote
- 顯示問卷內容,可透過登入進行參與投票。
- 問卷題目分為標題與選項,可以透過 parent 方式整合一組
q2t13_vote
資料表 - 此資料表與 13.17 題共用
- 根據 02A07.txt 先塞好資料
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(10) | UNSIGNED | 否 | 無 | AUTO_INCREMENT | ||
2 | text | text | utf8mb4_unicode_ci | 否 | 無 | |||
3 | parent | int(11) | 否 | 無 | ||||
4 | num | int(11) | 否 | 無 |
CREATE TABLE `q2t13_vote` ( |
id | text | parent | num |
---|---|---|---|
1 | 問題一:你最常做什麼運動來促進健康體能呢? | 0 | 0 |
2 | 問題二:二手菸沒有安全劑量,只要有暴露,就會有危險,請問它會造成身體上哪些危害? | 0 | 0 |
3 | 健走或爬樓梯、慢跑等較不受時間、場地限制的運動。 | 1 | 0 |
4 | 仰臥起坐、抬腿及伏地挺身、伸展操、瑜珈等室內運動。 | 1 | 0 |
5 | 球類運動、游泳、跳舞、騎腳踏車等加強心肺功能的運動。 | 1 | 0 |
6 | 舉重鍛鍊、彈力帶、啞鈴等運用輔助器材鍛鍊肌耐力的運動。 | 1 | 0 |
7 | 增加罹患冠狀動脈心臟病及罹病死亡之風險。 | 2 | 0 |
8 | 對孩子的的健康會產生許多影響,例如容易咳嗽或打噴嚏、罹患氣喘或讓症狀更嚴重、會 … | 2 | 0 |
9 | 孕婦吸入二手菸易造成流產、早產、胎盤早期剝離、子宮感染等疾病。 | 2 | 0 |
10 | 長期的暴露會造成更嚴重的胸腔問題和過敏症,還會增加心臟病和肺癌的罹患率。 | 2 | 0 |
11 | 以上皆是。 | 2 | 0 |
INSERT INTO `q2t13_vote` (`id`, `text`, `parent`, `num`) VALUES |
web03 的各項資料表
網站標題區 null
後台帳號登入使用 admin/1234,由於沒有要求且沒有帳戶管理功能。可以直接用 PHP 處理不用做 SQL
預告海報 q3t5_img, q3t5_effect
- 作為首頁的 slider 輪播
- 建立資料表
q3t5_img
,塞入約 9 筆資料
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(10) | UNSIGNED | 否 | 無 | AUTO_INCREMENT | ||
2 | text | text | utf8mb4_unicode_ci | 否 | 無 | |||
3 | img | text | utf8mb4_unicode_ci | 否 | 無 | |||
4 | odr | int(11) | 否 | 無 | ||||
5 | dpy | int(11) | 否 | 無 |
CREATE TABLE `q3t5_img` ( |
id | text | img | odr | dpy |
---|---|---|---|---|
1 | 03A01 | 03A01.jpg | 0 | 1 |
2 | 03A02 | 03A02.jpg | 0 | 1 |
3 | 03A03 | 03A03.jpg | 0 | 1 |
4 | 03A04 | 03A04.jpg | 0 | 1 |
5 | 03A05 | 03A05.jpg | 0 | 1 |
6 | 03A06 | 03A06.jpg | 0 | 1 |
7 | 03A07 | 03A07.jpg | 0 | 1 |
8 | 03A08 | 03A08.jpg | 0 | 1 |
9 | 03A09 | 03A09.jpg | 0 | 1 |
INSERT INTO `q3t5_img` (`id`, `text`, `img`, `odr`, `dpy`) VALUES |
- 另外還要個資料表儲存特效的參數紀錄,建立
q3t5_effect
。 - 設定內容為 1~3 都可
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(10) | UNSIGNED | 否 | 無 | AUTO_INCREMENT | ||
2 | once | int(11) | 否 | 無 |
CREATE TABLE `q3t5_effect` ( |
id | once |
---|---|
1 | 3 |
INSERT INTO `q3t5_effect` (`id`, `once`) VALUES (1, 3); |
主題內容 q3t7_movie
- 院線片電影資料
- 建立資料表
q3t7_movie
- 題目沒有給文字,隨意輸入
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(10) | UNSIGNED | 否 | 無 | AUTO_INCREMENT | ||
2 | title | text | utf8mb4_unicode_ci | 否 | 無 | |||
3 | cls | int(11) | 否 | 無 | ||||
4 | length | text | utf8mb4_unicode_ci | 否 | 無 | |||
5 | date | date | 否 | 無 | ||||
6 | corp | text | utf8mb4_unicode_ci | 否 | 無 | |||
7 | maker | text | utf8mb4_unicode_ci | 否 | 無 | |||
8 | video | text | utf8mb4_unicode_ci | 否 | 無 | |||
9 | img | text | utf8mb4_unicode_ci | 否 | 無 | |||
10 | text | text | utf8mb4_unicode_ci | 否 | 無 | |||
11 | odr | int(11) | 否 | 無 | ||||
12 | dpy | int(11) | 否 | 無 |
CREATE TABLE `q3t7_movie` ( |
id | title | cls | length | date | corp | maker | video | img | text | odr | dpy |
---|---|---|---|---|---|---|---|---|---|---|---|
1 | 電影名稱 A | 1 | 1 分 30 秒 | 2020-05-25 | 發行商 A | 導演 A | 03B01v.mp4 | 03B01.png | 內容與劇情介紹 A | 0 | 1 |
2 | 電影名稱 B | 2 | 1 分 30 秒 | 2020-05-25 | 發行商 B | 導演 B | 03B02v.mp4 | 03B02.png | 內容與劇情介紹 B | 0 | 1 |
3 | 電影名稱 C | 3 | 1 分 30 秒 | 2020-05-26 | 發行商 C | 導演 C | 03B03v.mp4 | 03B03.png | 內容與劇情介紹 C | 0 | 1 |
4 | 電影名稱 D | 4 | 1 分 30 秒 | 2020-05-26 | 發行商 D | 導演 D | 03B04v.mp4 | 03B04.png | 內容與劇情介紹 D | 0 | 1 |
5 | 電影名稱 E | 1 | 1 分 30 秒 | 2020-05-27 | 發行商 E | 導演 E | 03B05v.mp4 | 03B05.png | 內容與劇情介紹 E | 0 | 1 |
6 | 電影名稱 F | 2 | 1 分 30 秒 | 2020-05-27 | 發行商 F | 導演 F | 03B06v.mp4 | 03B06.png | 內容與劇情介紹 F | 0 | 1 |
INSERT INTO `q3t7_movie` (`id`, `title`, `cls`, `length`, `date`, `corp`, `maker`, `video`, `img`, `text`, `odr`, `dpy`) VALUES |
訂票管理 q3t8_book
- 訂票資訊,只需要索引、電影 ID、訂票日、場次、座位號,購買日
- 其中座位號為字串型陣列,PHP 在處理時要特別轉換處理
- 建立
q3t8_book
。這裡資料輸入因較複雜(字串化陣列),因故不先手動輸入。
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(10) | UNSIGNED | 否 | 無 | AUTO_INCREMENT | ||
2 | movie | text | utf8mb4_unicode_ci | 否 | 無 | |||
3 | date | date | 否 | 無 | ||||
4 | time | int(11) | 否 | 無 | ||||
5 | seat | text | utf8mb4_unicode_ci | 否 | 無 | |||
6 | buydate | date | 否 | 無 |
CREATE TABLE `q3t8_book` ( |
web04 的各項資料表
商品分類 q4t4_class
- 商品有分大分類與中分類,可利用 parent 來做區分與歸屬關係
- 建立資料表
q4t4_class
。根據 0401.txt 手動加入資料
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(11) | 否 | 無 | AUTO_INCREMENT | |||
2 | title | text | utf8mb4_unicode_ci | 否 | 無 | |||
3 | parent | int(11) | 否 | 無 |
CREATE TABLE `q4t4_class` ( |
id | title | parent |
---|---|---|
1 | 流行皮件 | 0 |
2 | 流行鞋區 | 0 |
3 | 流行飾品 | 0 |
4 | 背包 | 0 |
5 | 男用皮件 | 1 |
6 | 女用皮件 | 1 |
7 | 少女鞋區 | 2 |
8 | 紳士流行鞋區 | 2 |
9 | 時尚手錶 | 3 |
10 | 時尚珠寶 | 3 |
11 | 背包 | 4 |
INSERT INTO `q4t4_class` (`id`, `title`, `parent`) VALUES |
商品介紹 q4t5_product
- 產品存放的資料表,根據題目要求規劃多組欄位。
- 產品類別設計為 fa 與 son 分別代表此產品歸類於 q4t4_class 哪處 ID
- 建立資料表
q4t5_product
,根據 0403~0410.txt 塞入資料
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(11) | 否 | 無 | AUTO_INCREMENT | |||
2 | fa | int(11) | 否 | 無 | ||||
3 | son | int(11) | 否 | 無 | ||||
4 | title | text | utf8mb4_unicode_ci | 否 | 無 | |||
5 | price | int(11) | 否 | 無 | ||||
6 | spec | text | utf8mb4_unicode_ci | 否 | 無 | |||
7 | num | int(11) | 否 | 無 | ||||
8 | img | text | utf8mb4_unicode_ci | 否 | 無 | |||
9 | text | text | utf8mb4_unicode_ci | 否 | 無 | |||
10 | dpy | int(11) | 否 | 無 | ||||
11 | seq | text | utf8mb4_unicode_ci | 否 | 無 |
CREATE TABLE `q4t5_product` ( |
id | fa | son | title | price | spec | num | img | text | dpy | seq |
---|---|---|---|---|---|---|---|---|---|---|
1 | 1 | 5 | 手工訂製長夾 | 1200 | 全牛皮 | 2 | 0403.jpg | 手工製作長夾卡片層 6*2 鈔票層 *2 零錢拉鍊層 … | 1 | 010203 |
2 | 1 | 5 | 兩用式磁扣腰包 | 685 | 中型 | 18 | 0404.jpg | 材質:進口牛皮 顏色:黑色荔枝紋+黑色珠光面皮 … | 1 | 020705 |
3 | 1 | 5 | 超薄設計男士長款真皮 | 800 | L 號 | 61 | 0405.jpg | 基本:編織皮革對摺長款零錢包 特色:最潮流最時 … | 1 | 020706 |
4 | 2 | 7 | 經典牛皮少女帆船鞋 | 1000 | S 號 | 6 | 0406.jpg | 以傳統學院派風格聞名,創始近百年工藝製鞋精神 … | 1 | 030103 |
5 | 2 | 8 | 經典優雅時尚流行涼鞋 | 2650 | LL | 8 | 0407.jpg | 優雅流線方型楦頭設計,結合簡潔線條綴飾, 獨特 … | 1 | 030203 |
6 | 3 | 10 | 寵愛天然藍寶女戒 | 28000 | 1 克拉 | 1 | 0408.jpg | ◎典雅設計品味款 ◎藍寶為珍貴天然寶石之一,具 … | 1 | 040202 |
7 | 4 | 11 | 反折式大容量手提肩背包 | 888 | L 號 | 15 | 0409.jpg | 特色:反折式的包口設計,釘釦的裝飾,讓簡單的包 … | 1 | 050107 |
8 | 4 | 11 | 男單肩包男 | 650 | 多功能 | 7 | 0410.jpg | 特色:男單肩包/電腦包/公文包/雙肩背包多用途 … | 1 | 060108 |
INSERT INTO `q4t5_product` (`id`, `fa`, `son`, `title`, `price`, `spec`, `num`, `img`, `text`, `dpy`, `seq`) VALUES |
訂單管理 q4t8_order
- 訂單只要能記住會員跟購買資訊,我們能將購買之品項、價格、數量整合為一個陣列、(字串化、),這樣簡單化
- 建立資料表
q4t8_order
,這裡資料因較複雜(字串化陣列),因故不特別手動輸入。
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(10) | UNSIGNED | 否 | 無 | AUTO_INCREMENT | ||
2 | acc | text | utf8mb4_unicode_ci | 否 | 無 | |||
3 | name | text | utf8mb4_unicode_ci | 否 | 無 | |||
4 | text | utf8mb4_unicode_ci | 否 | 無 | ||||
5 | addr | text | utf8mb4_unicode_ci | 否 | 無 | |||
6 | tel | text | utf8mb4_unicode_ci | 否 | 無 | |||
7 | date | date | 否 | 無 | ||||
8 | buy | text | utf8mb4_unicode_ci | 否 | 無 | ary(product+num) | ||
9 | total | int(11) | 否 | 無 |
CREATE TABLE `q4t8_order` ( |
會員管理 q4t9_user
- 依要求規劃會員所需之九項欄位
- 建立資料表
q4t9_user
,沒有素材所以隨便掰一組會員
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(10) | UNSIGNED | 否 | 無 | AUTO_INCREMENT | ||
2 | acc | text | utf8mb4_unicode_ci | 否 | 無 | |||
3 | pwd | text | utf8mb4_unicode_ci | 否 | 無 | |||
4 | name | text | utf8mb4_unicode_ci | 否 | 無 | |||
5 | text | utf8mb4_unicode_ci | 否 | 無 | ||||
6 | addr | text | utf8mb4_unicode_ci | 否 | 無 | |||
7 | tel | text | utf8mb4_unicode_ci | 否 | 無 | |||
8 | date | date | 否 | 無 |
CREATE TABLE `q4t9_user` ( |
id | acc | pwd | name | addr | tel | date | |
---|---|---|---|---|---|---|---|
1 | test | test | 測試 01 | test@test.com | test road | 8888-888-888 | 2020-05-22 |
INSERT INTO `q4t9_user` (`id`, `acc`, `pwd`, `name`, `mail`, `addr`, `tel`, `date`) VALUES |
管理者 q4t10_admin
- 儲存後台管理者資訊,其中會細分五項權限。除了規劃五組欄位,也能使用字串化陣列去紀錄。
- 建立資料表
q4t10_admin
- 這裡需輸入 admin/1234 並權限全給。可以先設計測試用的 str.php 放在根目錄下執行取得編碼後的字串。1 代表有 0 代表沒有
for($i=0;$i<5;$i++) $ary[$i]=1;
echo serialize($ary); // a:5:{i:0;i:1;i:1;i:1;i:2;i:1;i:3;i:1;i:4;i:1;} - 取得字串化陣列數據後,建立預設管理者
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(10) | UNSIGNED | 否 | 無 | AUTO_INCREMENT | ||
2 | acc | text | utf8mb4_unicode_ci | 否 | 無 | |||
3 | pwd | text | utf8mb4_unicode_ci | 否 | 無 | |||
4 | access | text | utf8mb4_unicode_ci | 否 | 無 |
CREATE TABLE `q4t10_admin` ( |
id | acc | pwd | access |
---|---|---|---|
1 | admin | 1234 | a:5:{i:0;i:1;i:1;i:1;i:2;i:1;i:3;i:1;i:4;i:1;} |
INSERT INTO `q4t10_admin` (`id`, `acc`, `pwd`, `access`) VALUES |
頁尾版權區 q4t11_footer
- 建立資料表
q4t11_footer
,隨意新增一筆值如 「這裡是頁尾版權資料」
# | 名稱 | 型態 | 編碼與排序 | 屬性 | 空值 | 預設值 | 備註 | 額外資訊 |
---|---|---|---|---|---|---|---|---|
1 | id | int(10) | UNSIGNED | 否 | 無 | AUTO_INCREMENT | ||
2 | text | text | utf8mb4_unicode_ci | 否 | 無 |
CREATE TABLE `q4t11_footer` ( |
id | text |
---|---|
1 | 這裡是頁尾版權資料 |
INSERT INTO `q4t11_footer` (`id`, `text`) VALUES (1, '這裡是頁尾版權資料'); |