54屆分區技能競賽網頁技術賽後隨筆

去年比雲端運算職類拿到全國第三後被 BAN 掉，不能再比相同職類，剛好這次年紀壓線可以報名網頁技術，自己也寫網頁一段時間了，就報名來玩看看，也有幸拿到了中區第二，可以再去全國賽玩ㄌ。

這篇文章主要是記錄一下競賽中遇到的問題及心得。

參考資料：【分區賽】113年第54屆分區技能競賽-賽前公告試題資料

競賽環境

如競賽公告的”場地設備準備表”所述，競賽環境提供了下列幾項軟體，粗體是我有用到的：

Windows 10
Chrome、Firefox Developer Edition、內建的 Edge
- 挑習慣的用就好，反正也只會開網頁 + DevTools
- ~~其實我都用 Chrome，但它預設瀏覽器是 Edge 我懶得改~~
XAMPP 8.2.0
- 監評要求檔案放置於桌面 webXX 資料夾，可以改 httpd.conf 的 DocumentRoot 直接把它指過去
jQuery、jQuery UI
- jQuery UI 只用到了 button 跟 dialog
三大框架(Angular、React、Vue)
- 分區賽的題目用 Vanilla JS 就夠了
Prototype
- 這是不是很久以前的東西了
Adobe 全家統(Dreamweaver、Photoshop、Illustrator)、CorelDRAW
- 我都不會用
Visual Studio Code、Sublime Text、PHPStorm
- VS Code 沒裝套件，只有 HTML、CSS、JS 的語法提示
- PHPStorm 內建 PHP 文檔可以看，還可以開 live reload，大推 👍👍👍
- 環境提供 PHPStorm 2021.3 及 2023.3，但後者因為沒網路起用不了，只能用 2021.3
Notepad++、PS Pad、EditPlus、UltraEdit
- 這幾個都用不到

競賽過程

Day 1

中午 12:30 開放報到，人都到齊後帶隊去競賽場地，抽崗位編號然後入座，給大家 15 分鐘測試環境(測硬體、安裝軟體)，電腦不會還原，隔天競賽時直接繼續用。

Day 2

早上 8:00 前報到，講解題目及注意事項大概 30 分鐘，然後就開始 4 小時的競賽。

題目會事先公告在競賽公告上的”競賽試題及說明”，當天會有紙本試題，題目會稍微修改，增加一些有的沒的 feature。

競賽結束後會叫大家把檔案複製到 USB，並把網頁打開，然後就可以離場用餐了，監評會趁這段時間先評主觀分數。

大概 13:30 開始照崗位編號叫進去 demo 評客觀分數，每個人大概 10 分鐘，評完就可以閃人了。

題目解析

這次題目是”快樂旅遊網”，主要有訪客留言、網頁管理、訪客訂餐、訪客訂房這四個功能。

訪客留言

如題目所敘，輸入資料並送出後會顯示在留言列表，可以輸入留言序號(把它當作密碼)來編輯或刪除留言。

輸入欄位有要求像要驗證格式，可以直接用 input type 或 pattern 來做。

html
<!-- Email 只少要有一個 `@` 跟 `.` -->
<input type="email" />
<!-- 電話號碼只能輸入數字及 `-` -->
<input pattern="[0-9-]+" />
<!-- 留言序號只能 3 位數小寫英文及數字 -->
<input pattern="[a-z0-9]{3}" />

輸入的資料用 mysqli 丟進資料庫，我把編輯跟刪除都寫在同一個頁面，透過網址參數 ?action=edit 來判斷要幹嘛，還有 session 來判斷是不是管理員，藉此少寫幾個頁面。

網頁管理

要先做一個登入頁面，登入後可以編輯、刪除留言，還有更改訂房資料。

登入頁面要做一個圖片驗證碼，還要可以重新產生。

我原本想說用小畫家畫個 5 張圖片然後隨機輪替，但好懶得 P 圖，最後選擇直接放一個 <p>1234</p> 然後設定 user-select: none 還有把它搞得很難看到，這樣監評也給過 XD。

現場題目還多了一個第二階段驗證碼，要產隨機的 9 宮格數字，並用拖曳的方式把它照順序排好，但這題才占 1 分，寫起來不划算果斷跳過。

登入驗證反正題目要求就那樣，直接寫死就好 🥰，然後用 $_SESSION 存一個 boolean 來判斷是否登入。

php
<?php
session_start();
if ($_POST['username'] === 'admin' && $_POST['password'] === '1234') {
  $_SESSION['login'] = true;
  header('Location: index.php');
  exit;
}
?>

編輯留言我直接使用上一段所寫的功能，加了些權限判斷讓管理員登入後可以編輯、回應還有刪除。

訂房管理… 沒時間做 PASS。

訪客訂餐

~~沒有任何”訂餐”的要素~~

給 16 張熱炒圖片，設計 RWD 頁面，題目要求寬版(>= 1024px)時一列 4 張，中版(>= 800px)時一列 2 張，窄版(< 800px)時一列 1 張。

這部分直接使用 grid layout 搭配 media query 來做即可。

css
@media (min-width: 1024px) {
  .img-container {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* ...etc */
.img-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

點擊圖片後開啟一個 dialog，有 < O > 三個按鈕，分別是減少透明度、重設透明度、增加透明度。

這部分直接使用 jQuery UI 的 dialog，透明度丟到全域變數，然後按鈕點擊時改變變數即可。

js
window.OPACITY = 1;
const updateOpacity = val => {
  const img = document.querySelector("#dialog img");
  window.OPACITY = val;
  img.style.opacity = window.OPACITY;
};
$("#dialog").dialog({
  buttons: [
    {
      text: "<",
      click: () => updateOpacity(window.OPACITY - 0.1),
    },
    {
      text: "O",
      click: () => updateOpacity(1),
    },
    {
      text: ">",
      click: () => updateOpacity(window.OPACITY + 0.1),
    },
  ],
});

訪客訂房

寫到這邊剩下 5 分鐘，乖乖吃零食等結束。

原本還以為只有我寫不完，但看來這很正常 XD。

結語

報名時還在想我都沒寫過半行 PHP 會不會爛掉，幸好競賽前一天的臨時抱佛腳有派上用場，加上分區賽題目根本就是在考驗手刻 CSS，除了寫不完之外都很順利。

希望 7 月的全國賽競賽順利，趁這段時間給自己一點動力去碰 PHP。

54屆分區技能競賽網頁技術 賽後隨筆

54屆分區技能競賽網頁技術賽後隨筆