課程介紹網站

2025年度的課程己經開始報名了，有興趣的朋友們可以參考看看!

前端網頁開發技術班(青年專班) –

第二期

• 報名期間：114-05-01 ~ 114-08-01
• 訓練期間：114-09-03 ~ 115-02-25
• 甄試日期：114-08-14

課程時間920小時，115天，主要內容為網頁前端的js/jquery教學，同時也有前端框架vue.js/vue cli的教學，後端則是搭配MongoDB及node.js，開發環境使用VS CODE 搭配Live Server；證照內容是網頁設計丙級，會在開課後兩個月左右先考證照；期末主要的成果是一個專題網站，由學員自行尋找一個主題，然後用所學的技術把網站完成。

青年專班指的是15歲以上，29歲以下的待業人士優先，在甄試時會優先錄取符合條件的學員，不足24人時，才會錄取30歲以上的學員，此班級加入企業參訪行程，將會安排學員前往企業參訪或相關展覽活動以協助了解業界的工作內容。

PHP資料庫網頁設計(政策性課程) –

第二期

• 報名期間：114-05-15 ~ 114-08-15
• 訓練期間：114-09-17 ~ 115-03-12
• 甄試日期：114-08-28

課程內容和前幾期的內容大致相同，課程時間為920小時，115天，本課程有不少的作業量，透過作業的練習，讓學員可以儘快擁有實作的能力，也可以用來檢視自己的學習狀況；這項課程是以後端網頁技術為主，主要程式語言為PHP，資料庫選用MySQL/MariaDB，輔導證照為網頁設計乙級證照，會在最後一周時辦理考照，開發環境主要使用Xampp；課程後期會介紹PHP框架Lavarel，提供學員擁用操作框架開發的能力。

除了以上提到的主要差異外，兩個班次的課程都同時會教授：

• HTML標籤 – 前期可能會搭配DreamWeaver之類的軟體來讓沒有基礎的學員可以快速了解網頁的入門操作，但最終會培養學員能學會純手工打出HTML標籤，並建構靜態的網頁。
• CSS樣式 – 主要是了解CSS3的各種應用，包含了 box-model ，flex-box ，css-animation..etc，後期也會教到css框架Bootstrap的使用。
• javascript/jQuery-不論是前端或後端，都需要對javascript有一定的了解，因此兩個班別都會教授javascript語言，並搭配jQuery函式庫來輔助DOM的操作。
• git/gihub – 版本管理的基本操作，讓學員能儘早適應業界的開發流程及版本控制方式，同時也會利用到github classroom來管理學員的作業，整個課程中都會不斷的使用git及github來輔助。
• Visual Studio Code – VS CODE是主要的開發編輯器。

職訓班的學員大多都是沒有程式基礎，甚至連電腦操作都不熟悉的人，所以課程內容的安排是從零開始，帶領學員了解網頁程式設計的世界，過程中學員也可以逐步的去探索及了解自己是否有這方面的天賦及興趣，說實話，並不是所有的人進來學習後都一定可以學得會並且成為程式設計師，很多人看到要打一堆程式碼和記一堆英文函式及一堆數學就卻步了；但是如果可以克服前面的難關，那麼以目前就業市場對技術人員的需求量來看，學會程式設計不用怕找不到工作。

在教學速度的安排上，前面一兩個月的速度會比較慢，並且會給學員足夠的時間練習，老師也會逐一的去指導及看問題，但是後期的速度就會偏快，並且要求大家回家作作業及練習，相關的功課及評量考試也不少，原因是現代網頁技術已經是一門整合型的學問了，不再是會單一技術就能應付得了，需要學會 html / css / js / php / sql 的語法之外，還要有點美術底子，會基本的修圖，動畫製作，也要了解網路的背景技術是什麼，資安議題有那些，UI/UX又是怎麼一回事等等，因為要學習的東西很多，所以只能把教學速度加快才能讓學員在課程時間內了解完整的技能面貌是如何的，否則只學會其中一個單項的技術，企業是難以認同並錄用的。

全世界都在缺程式設計人材，網頁程式設計只是個入門，在了解以上提到的內容後，歡迎有決心及熱情的朋友來參加學習。

昨天去查看檢定參考資料時，發現網頁乙級術科的題目和素材都更新了，由於只是文字內容的調整，沒有動到題組的改變，所以就沒有另外公告了。

下載來做了比對後，不禁微微一笑，修改的內容幾乎都是我六月寄去的建議書中提到的內容：

1. 第一題的flash檔改成gif檔。
2. 第一題中關於”產生縮圖”的描述，改成了”顯示大小”。
3. 第二題的註冊功能增加了對”確認密碼”欄位的檢查。
4. 第三題的影片素材由avi改成了mp4。
5. 第四題的商品區要增加分頁或滾軸，不能讓商品區的版面高度自己拉長
6. 第四題的商品區確定要有分類導覽文字
7. 購物車可同時選購多項商品
8. 購物車的刪除按鈕要有刪除的功能
9. 第四題的商品文字素材增加了”商品編號”這個項目
10. 新增商品時要即時出現商品編號
11. 編輯商品時不可更改商品編號
12. 強調參考圖及版型檔案僅供參考，只要符合文字描述的功能要求即可
13. 函式庫中更新了各個函式庫及框架的版本到最新版本

雖然還有很多我提到的問題沒有做修改，但素材和函式庫有更新我就很滿足了，至於題目內容的描述更改，對難度的影響只有第四題比較明顯，因為購物車要做的事變多，但題組的合理性有所提升也是好事一件。

接下來的課程會依照這份修改過的題目及素材來教學，希望學員們都能吸收。

利用一周沒課的時間，把解題網站修改完了，從去年五月上線到現在也滿一年了，這次是改成新的自訂函式的解法，同時也把首頁的風格換掉。

接下來要再改一下跨裝置的瀏灠問題，之後有時間希望可以再增加物件導向及框架解題的兩種解法。

這幾天在研究PHP的物件導向，然後拿乙級的題目來練習一下，看看會有什麼差異，之前在用laravel解題時，己經了解了用框架並不一定能讓解題的速度變快，但對於降低錯誤發生，資料和程式分離是有幫助的，這次是嘗試自己建需要的類別，然後再套用到題目中。

在分析過題目後，以乙級的題目來看，最主要的工作還是放在資料庫的行為上，所以我主要是建了一個DB的Class起來，然後把增改刪查的方法寫在裏面，之後只要實例化各個資料表的物件出來使用就可以了；但是只建一個Class來用，其實感受不太到和函式化的差異，但是因為方法是包在物件中，所以命名時不太需要擔心會有重覆的問題。

之後我又想嘗試改成像Laravel那樣的靜態方法及鏈型呼叫，在使用上可以更簡短及優雅，不過在修改時遇到一些問題，花了不少時間排除，雖然這個做法的Class程式碼看起來不太漂亮，但在使用時，比之前使用函式要來得精簡而直覺。

像是分頁這種在很多題目都有出現的應用，我直接在Class中寫了一個方法來專門產生整個相關的HTML碼，直接靜態呼叫就可以看到分頁的頁碼出來了，相較先前需要整段複製貼上，再去改一些內容，這做法的確改善了不少，整個程式碼也精簡許多；最後也利用繼承，在選單的類別中直接新增一個產生選單陣列的方法，這樣就不用在首頁裏去處理主次選單的關係，直接把陣列叫出來使用就可以了。

比較先前的幾個做法，從最原始的直接寫sql語法，再用mysqli_query()去撈資料，到了後來改用PDO及自訂函式來化資料表的操作，再到現在改用物件導向來操作，這樣慢慢進步，感覺是比較紮實的。

不過最後比較整體程式碼的量時，改用物件導向並沒有真的省下很多撰寫程式的時間，反而為了讓Class更通用而花了不少時間在處理例外狀況的判斷上，靜態方法雖然好用，但在繼承時會有一些狀況要處理，不然有可能會發生讀錯資料表的狀況，這是因為靜態成員和靜態方法在記憶體中只有一份，我只是不停的去改寫這個內容，但如果是每個資料表實例化出來就沒這個問題，每個實例化的物件有自己的記憶體位置和空間，不怕衝突，各有利弊，如果只是針對應檢考試，我會比較建議用自訂函式或是做一個純工具化的Class來使用就夠了。

先前說的拿軟乙的題目來改成PHP及MySQL的教學素材一事，在開課前完成了，這個系統應該是會放在內部系統來給學生練習用，不會放在自己的網站上，因為這個網站明年到期時我應該會移到別的地方去。

這些題組大多有在文字上再做一些修改，比較適合拿來做為網頁程式及SQL語法的練習，我把重點放在SQL語法的經營上，尤其是加了一些必須使用子查詢來完成的要求，六題都能做完的學生，SQL基本功就穩了。

另外在解題的流程上，我會希望學生能善用PHP的陣列功能，除了使用SQL語法撈回資料，也能透過陣列的功能先把資料做一些整理，再使用迴圈來印出資料，提高程式的可讀性。

圖表題我只留了第一題的長條圖，因為這是在網頁上相對簡單的應用，其他題目要畫圓餅圖什麼的我就拿掉不做了，長條圖的繪製主要是使用CSS來完成的，這題的重點在練習如何把資料和CSS做結合，根據不同的資料給予不同的長度值。

最後在作業部份則是選了其中一個題組，讓學生去自行設計一個完整的網站，有前後台及登入註冊的功能，前台可以顯示報表，後台則是可以增刪查改原始資料，這樣的一套訓練下來應該也是很夠用了。

原本是打算在開課前完成的系統，但也不知道為什麼這幾個月一直都有事情忙，一直到開課兩周了才有時間來製作這個東西；這個案子一開始的目標很簡單，就是可以用來做為每次開課前做課程時間的安排，原本是用EXCEL在做的，然後再印紙本給學員，我當時再上課時自己做的版本只是先手動把課程資料輸入到資料庫，然後再寫支PHP程式按月份把課程秀出來，如此而已；這次想做的版本希望功能可以更完善，有後台可以做課程資料的編輯。

花了近一周時間斷斷續續的做，目前已經完成了核心的功能，主要是課程項目的管理，假日的管理，自己新增了一個課程綱要管理，可以先把每一天預計要上課的大概內容先記上，後台的部份在資料的新增編輯上儘可能人性化一些，像是可以自動填滿相同的課程，也可以彈性的變換講師等等，不過這些輔助的功能要花的時間反而比核心功能來得多。

因為到20號前比較忙，還得準備軟乙的考試，所以打算先暫停一下，等忙完其它的事情再來繼續，所以大概要到五月才能辦法讓這個系統上線開放使用，目前就只能在我的電腦上先待著。

預計要再增加的功能有課後筆記，用來做為紀錄每堂課的實際內容提醒及一些課程範例及補充教材；另外還需要增加可以管理不同期別課程的功能，目前的設計還是只能一次管理一個期別，要可以管理多個期別甚至多個班級的話，有些地方要重新設計。

這周預計的進度是把先前的解題網站和各題的成果做個整合然後再重新放到網站去給大家參考，三天下來，目前完成了新的首頁製作，直接把四個題目的簡介放在一個畫面中，不再分成需要捲動的畫面，公告文字的部份則是做成可以動態縮放，並且加了cookie，如果使用者曾經來過一次，則預設公告都是小按鈕的型態，第一次造訪或是cookie過期時才會呈現公告版的型態。

解題說明的部份則是調整了版面的配置，把原本的寬度做了調整，方便未來因應RWD，同時修改了導覽列的內容及功能，增加一個可以在各題組間切換的連結選單，也在各個步驟增加了側邊欄，方便在各個步驟間做切換。

至於各題組的成果，主要是增加了一個上方導覽列，方便在各題組的成果網站間切換，同時也增加該題組的解題說明連結，讓整個網站的使用更方便一些

接下來的工作主要是把各題組的程式碼做一些調整，因為檢定用的程式碼直接上網其實是充滿風險的，幸好過去一年只有不到五千的造訪次數，所以也沒出什麼大問題，目前打算整修一下這些內容，至少基本的sql injection / XSS的防護要做到，至於CSRF的防護，要看時間來不來得及再說；除此之外，打算再增加一個資料庫自動還原的功能，以免像先前那樣，資料庫被搞亂了，我得手動去恢復，這個功能會有點麻煩，我希望可以做到自動偵測每天是否有人來使用這些題組，以及是否有變動了資料，如果資料有變動，那麼隔天會自動把資料庫的內容還原，這邊需要動到系統的自動執行功能，要花點時間研究一下，我並不想沒有變動的狀況下每天都自動還原一次，這樣感覺太傷資料庫了。

如果順利，希望可以在三月中之前完成這個計畫並上線。

上一次的練習真的是從零開始，看完一門線上課程加上一點GOOGLE就開始動手做了，做的過程中發現問題才再回頭翻書找資料，而且也只做完後台而已，在寫完三篇心得後，我又花了大概兩天左右的時間把題目重新做了一次，這一次採用的是比較中規中矩的做法，每一張資料表相關的控制器，模型及視圖都獨立開來做，光路由就寫了46條路由，模型九個，控制器11個，視圖10個，中介層1個，服務供應者1個，整個做下來最花時間的地方是在視圖上，因為後台的視圖我還是嘗試要用一個檔案來搞定，這使得語法上變得有點複雜，下一次簡化應該會從這方面著手，就像我在之前的心得中提到的，用框架來做開發，就不要再擔心檔案太多的問題了。

重做一次的心得是框架可以幫助讓整個網站的架構比較清楚，負責邏輯的和負責資料庫的以及負責顯示的，都切得乾乾淨淨的，不像以前原生寫法那樣一個檔案中同時有PHP又有HTML又有JS，要查問題時很花時間，要修改時也要很小心；但是框架並不完全那麼美好，比如我在session和登入驗證上就花了點時間去研究，才能做出我想要的結果來，比如登入驗證的功能，內建的機制雖然很方便，但如果只依靠內建的來實踐功能，很多事反而會受到限制，題目要求的登入很簡單，不需要太多驗證，我想跳過內建的機制，但沒有相關的資訊，網路上找到的全是告訴你登入很簡單，內建就有，你CODE都不用寫就做好了，但我要的是不同的驗證方式，卻沒有相關的資料可以參考，所以使用框架在我目前的程度來看，一點也不輕鬆；我認為框架在後續的維護上是有一定價值的，但像檢定或比賽之類的場合，框架不一定有優勢，除非刻意的去忽視這些規範，用硬幹的方式在框架內做一些扭曲的應用，這樣的話的確能在速度上取得好處，比如今年的全國技能競賽有一個題目的資料庫查詢語法，用框架反而做不出來，最後大家都是用原生的查詢語法下去做。

在這兩次的試解中，其實我花在找資料和看畫的時間上幾乎是解題時間的兩倍，原因是網路上找到的東西大多只是重覆官方提供的範例再解釋一次而己，如果我想做的功能和官方提供的不太一樣，就幾乎找不到解答，我只能自己想辦法去試出來，所以我覺得學習成本上並沒有比較低，而且還得對程式語言有一定基礎的人，才有辦法從框架的官方說明或原始碼中去找到問題，然後完全的掌控整個框架工具的使用，像是session的使用，之前看的課程或資料都沒提到這塊，我想要做到的功能只能自己去試出來，即使是stackoverflow上的資訊有些也是文不對題。

後續的計畫是用laravel 把乙級四個題目做一篇，當成未來教學的教材之一，接下來是研究比較有歷史的Codeigniter，這樣的話，整個網頁乙級術科的解題就完整了。

這兩天雖然累，但還是花了點時間把一些其它的功能試了一下，主要是解決了後台的刪除資料功能，然後也解決了前台的blade include功能，不過這和原生的include並沒有太大差異，只不過解決了這個問題後，我才發現我必須整個解題重做，不然不但無法發揮laravel的特性，反而會讓整個解題的過程和體驗變糟了。

先前我說過blade在處理前端頁面時非常好用，但我錯了，今天在處理不同功能呼叫同一個VIEW時，卡了很久，主因在於我先前的做法還是照著我原生解題的邏輯，所以我把所有view會用到的功能都丟在一個陣列中，然後view會依照我route的設計來顯示需要的內容，因此我的view中使用了switch的方式來判斷要顯示的內容，雖然相比之前的4,500行少了很多，但是這招在後台有用，到了前台就沒用了，我得製作同樣的樣板來搭配前台的不同路由，雖然最終還是做得出來，但是我自己也感覺到這樣的開發方式是有問題的，因此我打算先停手目前的解題，重新做一次題目；先前我是因為對於拆多個檔案的管理方式感到恐懼，所以才會想要儘量把程式碼都集中在一個檔案來處理，不過到了laravel，觀念需要轉一下，所謂檔案就是類別或物件，不再需要像原生開發那樣，擔心檔案一多，連結和導向的管理變得混亂；在laravel中，一個Controller中己經把常用的幾種function都建好，應該專注在單一功能的實踐上就好了，而不需要去擔心檔案的從屬關係，而View則是專注在佈局和內容的呈現上，而不需要擔心這次要顯示的功能是什麼，所以要額外判斷，然後特別去產生不一樣的內容；應該要更大擔的把需要的內容都物件化，讓laravel去管理路由和一些組件關係就好了。

最後在處理Session時，發現laravel的session管理有自己的一套模式，並非是延用PHP原生的管理方式，比如設定檔中有一項設定可以設定要不要在瀏灠器關閉時讓session立刻過期，照題目的要求，這個設定是要打開的，但從這個設定來看，就可以得知和原生的做法不同，原生的Session在關閉瀏灠器後，並不會馬上過期，但是當使用者再連上網站時，PHP會建立一個新的session，這是符合題目要求的，不關閉瀏灠器的狀況下，瀏灠次數不會更新，關閉瀏灠器後再連上才會更新瀏灠次數的要求；但是laravel預設會記住使用者的連線紀錄，所以就算關閉瀏灠器，只要session還沒過期，再次連上網站還是會有效。

另一個問題是我在處理前端時，其實有不少的值是共用的，但是照我原本的寫法，我得在每次要建構View時，都去再撈一次資料，然後再從各個Controller丟去View做顯示，做到這我也自己知道做錯了，這和原生解題時寫一個base.php，然後每個頁面都要先include這個檔案沒什麼兩樣，等於是在瀏灠各頁面時都要去資料庫再撈一次資料一樣的意思，後來終於找到laravel有一個service povider的功能可以使用，白話點說，就是可以利用這個機制來建立整個網站的全域變數，像是標題圖片的位置，瀏灠次數，頁尾版權，前台的選單及校園映象圖片這些在很多畫面會共同用到的資訊，可以建一個全域變數來放著，然後View就可以直接把變數拿來使用，然後各個Controller在建構View時，只要專注在提供自己專有的資料就好了，不需要再去把共同的資料再撈一次。

總結這一周研究Laravel框架的心得就是的確可以在開發上簡化不少工夫，但這過程並不如許多推廣者所說的那樣無痛而美好，就我個人來說，單看網路上的教學都是功能單一的內容，所以看起來好象真的很容易，但是像我這樣拿一個完整的網站範例來練功一下，就會發現還有很多要去了解和深入的地方，再加上整個開發流程和觀念也不同，熟悉機制到觀念轉換，一個月的學習時間應該是跑不了的。

付款後幾乎又過了兩周，終於今天收到證照寄來了，

網頁乙級技術證

從五月報名到十一月拿到證照，整個全國檢定的流程走完也六個月過去了，可惜的是這張證照目前在業界的知名度不如傳統的水電或機械類證照，希望未來可以有更多企業認同這張證照及背後所代表的技術性。

今天不用上課，所以利用半天時間繼續把第一題解下去，今天主要是解決更新資料的問題，先前在用原生的PHP解題時，我是直接用一個表單POST所有資料到一個專門處理資料更新的API去做多筆資料更新的動作，但是在laravel上，預設是一次只能更新一筆資料，另一個問題是Route的設計會和原本的新增路由衝突到，這兩個問題花了一些時間研究，搞定後，其實後台卜就等於做完了。

先說路由的問題，由於Laravel在一開始設計時就傾向於REST的精神，所以在Route上有提供的PUT/PATCH/Delete的方式，但是目前大多數的瀏灠器只有提供GET和POST的方式，所以如果要在表單上實踐其它的HTTP動作，應該是要以AJAX的方式來實踐，不過，Laravel在這部份有提供了一個欺騙的方式，並且也已經做了路由的對應，因此只要在表單上做一個隱藏欄位，並傳送所要執行的動作名稱，接卜來要設定好動作的的路由，然後對應到Controller的update方法，就可以做資料的更新了；

再來是說更新資料的問題，內建提供的update方法預設是必須帶id的，而且一次只能更新一筆資料，所以我改了原本的方法，把id拿掉，然後在表單上放了一個隱藏的欄位當成id，接下來就是用迴圈去把表單資料一筆一筆做更新；雖然可以完成我預期的大量資料更新的工作，不過在了解了laravel的背後機制後，我認為這樣的做法可能不太有效率，所以之後考慮改用別的做法來實踐，但是做到這裏，我己經掌握laravel一些可以自訂及修改的部份了。

最後我試著撈取資料丟回前端的blade去顯示包括標題圖片，進站人數，頁尾版權宣告這些內容，看起來都運作良好，接下來會再研究一下session，cookie及前端js 的整合，這樣應該拿來解其它題都就沒什麼問題了。

目前的階段在使用Laravel上己經沒有什麼大問題了，不過這類框架在使用上的確和原生PHP的觀念上有很大的不同，比如我現在把後台的所有功能顯示的資料都放在一個Controller中去實踐，包括View的樣版也是一個檔案搞定全部的功能，但這個做法和Laravel強調的MVC是不符合的，實際的做法應該把每個功能都獨立一組MVC出去，這樣才方便日後的維護和分工；BUT，我這樣實驗的目的是考量到如果要拿Laravel來做競賽或檢定時，每一個功能都要MVC的話 ，那光開完相關檔案就要去掉不少時間了，所以這部份只是要驗證說Laravel的彈性可以做到什麼桯度，是否可以依照目的不同，而有相應的調整，後來我也在網路上找到一些文章在討論進階的功能管理方式，可以把MVC的架構再做得更精細，不過這要等日後有機會再研究了。

花了兩天的時間研究了一下laravel的實作，如果只是照著書上說的或是線上課程的範例，大多都能執行成功，但這沒什麼，畢竟只是走別人走過的路；所以自己打算找些題材來實作練習，第一個想到的就是拿網頁設計乙級的題目來試刀，從頁面blade語法開始研究到後來的Model及Controller的運作，兩天下來只完成了後台的一半功能，過兩天有空再來完成剩下的，不過這邊先紀錄一下心得，免得到時要接上時又忘了。

單就前端頁面的建構來說，使用blade樣板語法後，前端頁面的建構變得非常簡單而且好維護，原本後台的各個功能頁面我是採用switch case的做法，直接複製各個功能的 html碼，再把一些文字做替換，雖然複製貼上是很簡單的工作，但是在修改各畫面的欄位名稱及文字時，不免還是會有遺漏或打錯的狀況，使用blade後，欄位名稱改成用變數的方式來傳送，只要用語法做好一份模型，接下來就是由Controller來控制要傳什麼功能的欄位名稱過來，樣板會自動生成對應的完整HTML語法，原本要4,5百行的檔案，一下縮到一百行左右而己。

資料模型是我目前覺得比較麻煩的地方，也是今天花最多時間研究的地方，單純就ORM的操作來說，的確可以簡化原本的SQL語法操作，甚至比我先前的先寫function的做法還來得快，但目前發現的缺點是一張資料表只能對應一個Model，所以第一題會用到九張資料表就得九個Ｍodel，然後再對應九個Controller來操作資料的CRUD，當然也得設定至少九個相應的Route來管理各項動作，雖然最後只是複製貼上再改一下資料表名就可以，但是採用框架就是為了做到DRY(Don’t Repeat Yourself)，這讓我不得不考慮是否改成直接用DB類別來操作SQL語法會比較快一些。

laravel在table migration的做法和之前習慣的做法不一樣，所以這部份也是要花時間研究，以往都是直接在資料庫或透過phpmyadmin直接建表完成後再來寫程式的，但是laravel是把整個資料表的操作都拉回到框架裏來操作，這部份是考量到團隊工作時，需要有個資料表修改的紀錄做為開發的參考，另一方面也是為了同步團隊的資料表結構而做的設計。

估計再花個一天時間可以把後端的部份全部做完，前端的部份目前看起來不難，後面會有點挑戰的地方應該是Session的使用及laravel驗證機制的操作。

做到目前的心得是採用框架來做解題，並不一定比較快速，而且開發觀念也得轉個彎，但如果是花點時間練熟悉的話，因為整體的程式碼數量是減少很多的，加上錯誤發生機會降低非常多，所以如果練習的強度夠高，整體速度還是可以加快不少的；後面的計畫是在年底前把網頁乙級四個題目都用laravel做過至少一次，然後找出最有效率的解法來。