2020 全國技能競賽網頁設計參賽心得

🥉 榮獲銅牌

📋 前言

這是我第一次參加全國性的程式競賽。比賽內容要求在四個小時內完成一個完整的網頁前端與後端設計，前端部分使用 HTML、CSS 與 JavaScript，後端則利用 PHP 串接 MySQL 資料庫。主辦方同時提供 phpMyAdmin 作為管理與操作資料庫的工具，讓參賽者能順利完成系統整合。

限時四小時完成前後端整合網頁設計
前端採用 HTML、CSS 與 JavaScript 技術
後端使用 PHP 與 MySQL，並透過 phpMyAdmin 管理資料庫

關於比賽

技能競賽是一種展示專業技能與創造力的平台，參賽者通常是各領域的專業人士、學生或技術愛好者。他們通過比賽展現自己的技術能力，並在與其他選手的交流中提升自我。

這些競賽涵蓋範圍廣泛，從程式設計、機器人設計到烘焙、木工等實用技術領域，都有專屬的賽事設計。參賽者需要在有限的時間內完成高水準的作品或解決特定的挑戰，過程不僅考驗專業知識，還需要創造性思維與臨場應變能力。

評審通常由該領域的專家組成，根據創意性、實用性和完成度進行綜合評分。技能競賽的目的是促進專業技能的交流與進步，激勵參賽者追求卓越，並為社會培養更多具備實際技能的人才。

準備過程

我跟著新北高工的學長姊一起練習，但我在這之前沒有學習過有關網頁技術的任何技能，是以一個小白參加這個比賽。而新北高工的老師從 HTML 和 CSS 的刻板開始教起，實際上在區賽結束以前我都還沒有學習過真正的程式語言。

而我之所以能順利通過區賽，是因為學長幫我解完了題目，而我將程式碼背下來。

通過區賽後我要開始準備全國賽，這時候我才學習到 JavaScript 表單驗證、動態內容更新和動畫效果，PHP、SQL 等後端的技術。題目中有考到基本的網頁安全、防止 SQL 注入、權限驗證等。

而這些大致是我的第一次技能競賽的準備過程。區賽後我深入了解了網頁的運作原理，對於後端的知識也更加好奇。

初賽

區賽的地點是在桃園幼獅，正式題目跟公告的題目差不多，不同的地方是資料庫的部分多了修改留言跟刪除留言，其餘的大致一樣。

我當時是使用 Adobe Dreamweaver 排版，VScode 寫 PHP，但因為不熟練以及很多東西忘記，像是忘記 PHP 的後端連接、忘記 SQL 語法、忘記 XAMPP 的設定等等，總之就是一團糟。

最後我只完成了首頁跟登入系統，而且登入系統還是寫死的那種，如下：

$username = 'admin';
$password = '1234';

if ($username == 'admin' && $password == '1234') {
  echo "登入成功";
} else {
  echo "登入失敗";
}

決賽

決賽地點在台北南港展覽館。當時因疫情需要消毒和戴口罩，雖然稍有不便，但並未影響比賽心情。決賽的題目新增了LOGO設計和網頁開發流程圖，這些在比賽前已經熟練練習，算是必得的分數。此外，正式題目還包括資安相關內容，如預防 SQL 注入、權限失效等，這些也是學長提前提醒並練習過的。全國賽與區賽最大的不同在於比賽場地為開放空間，像展覽一樣，參觀者可以觀看我們的比賽，這讓壓力增加不少。比賽分兩天，第一天熟悉環境，第二天正式比賽，時間為四小時。這次準備充分，自信滿滿。我注意到區賽時忽略的細節，例如比賽提供的題目本，其中有重要提示和評分指標。我在前 30 分鐘完成了 LOGO 和網頁開發流程圖後，直接著手分數最高的項目：資料庫 SQL、登入登出、註冊、新增留言、修改留言、刪除留言及顯示留言。由於需要模板支持這些功能，我先用 HTML 製作簡易網站，完成核心功能後再進行 CSS 優化。相比區賽，我在全國賽的表現進步許多，但仍有遺憾：在後台與資料庫的部分花費太多時間（BUG過多），最後調整策略，先完成CSS和其他有把握的內容。修改留言功能最終未完成，留下些許缺憾。

比賽心得

從比賽報名到全國賽得獎只有經過短短四個月，而在這四個月中我學習到了程式語言的邏輯、網頁運作的原理、資料庫的運用、資訊安全等。而這也是我第一次參加如此大型的比賽，在南港展覽館走路都會被採訪，但其實專注在比賽的內容後就不會被外界干擾了。這是一次有趣的經驗，這次的比賽成為我人生的轉折點，為未來的生涯規劃奠定了基礎。