關於網頁設計的各種框架在使用上的理解

上周錄取了一份工作,然後這周推辭了,雖然對方後來有提出一周只要去上三天班的兼職方案,但我最後還是決定不去了,對方很有誠意,薪水也符合水準,但一來是有其他的計劃要執行,另一方面則是我想起來我學程式的初衷是為了”創作”;當其它的履歷表都沒有面試機會而唯一錄取的工作內容又超出我現有能力範圍時,我花了半個月在思考我到底在幹什麼,原來這幾年現實中的各種雜事搞得我都忘了我的初衷了,所以一下說要回遊戲業做PM,一下說要高普考做公務員,一下說要轉行當程式設計師,沒一件事做的成,但時光已經不留情面的走過了五年了;

在找工作和撰寫前幾篇乙級術科解題心得時,一直有遇到Framework,但因為課程期間一直沒有實務在教,所以也只是知道個名詞,在做CI的教學時,做完也還是一頭霧水;這兩天又在密集的找了一些資料後,總算有些比較整體性的了解,對於我們這種非本科的凡夫俗子來說,那一堆全是專有名詞的framework的介紹文章,真是看了一百篇也還是不懂到底在講什麼。

先前同學在問我框架是什麼的時候,我還很高興的舉了個例子給他聽:”就好像從A點移動到B點這件事,你用兩條腿來走可以走到,但也可以用腳踏車、摩托車、和汽車來走到;Framework就是把’移動’這件事做各種不同的強化,讓你可以適應各種不同需求”,我當時是覺得我的解釋應該算是夠白話了,不過後來想想,這樣的解釋其實很淺,屬於嘴砲等級的解釋;所以後來在丟履歷等面試的空檔,我針對網頁開發這個領域找了很多資料,也試著下去使用framework,真實的去了解一下,框架這東西到底在做什麼。

目前的框架大致分成前端和後端兩大類,前端的框架大多都是基於Javascript做出來的,目的在於把我們原本使用Html來製作的靜態頁面改成為比較模組化,或者是元件化的組合呈現,儘量避免類似頁面,只因為部份內容不同,就要重新做一個新的頁面出來,前端框架的主要應用大多是以所謂的SPA為主,全名為”單頁式網頁應用程式”(Single Page Application),SPA因為要把原本分屬不同頁面的東西都擠到同一頁來顯示,因此利用框架來簡化程式碼,或者說是把程式碼做適當的管理與組合(因為很多時候前端框架只是讓你寫更多的程式碼,所以需要好的管理方案),讓後續的維護或修改變得比較容易,換句話說,如果你的前端開發,其實沒有很複雜,修改或擴充的需求也很低的話,其實是可以不用考慮使用框架的,函式庫類的jQuery就很夠用了,只是一堆工作的要求都說要有前端框架經驗,要有MVC觀念什麼的,但我是覺得實務上的開發,前端的框架應用似乎不多,因為後端的框架大多也包了前端一大半的工作了。

後端的框架出現的比較早,這是因為早期的一些中大型網頁應用,都是由後端程式去架構前端頁面的形成,當時前端的javascript語言的標準有好幾年沒有什麼進展或修改,反而是後端的應用百家爭鳴,不管是PHP、JSP還是ASP,都發展出滿成熟的框架技術,其中以MVC的架構為主流,這些後端框架主要想解決的問題是網頁HTML碼中又夾了PHP、CSS、Javascript,單一檔案中有多項程式語言混在一起,閱讀和維護都不容易,因此推出MVC的概念及框架,規範了網頁應用的開發要遵循框架內的規矩,讓網頁顯示的部份和資料存取的部份分開來,這樣在原始碼的閱讀和維護上也才會比較清楚;這就好象以前的安全帽裏的海棉是縫死的,你要洗海棉,就等於整頂安全帽要一起洗;現在有在賣海棉可拆洗的安全帽,你就可以只洗海棉而不用整頂下去洗。

然後最近看了很多框架的應用及自己實際去試用後,也推翻了我原本想的”用框架來做網頁術科的解題會比較快的想法”,現在的答案是不一定,要等我真的掌握了框架的應用並且真的去使用了之後,才能做判斷;因為大多數的框架都是基於某程式語言再去開發出來的,這表示在效率上,絕對不會比原生的程式來得快,而且大多數的框架也都有其特別專長的應用領域,所以要看你的應用在那邊,再來決定要使用什麼框架,否則反而會被框架綁住手腳,或是殺雞用牛刀的狀況,再者是,框架都有其規範的使用方式,簡單來說,使用框架,大概等於重新學一種程式語言,只是,框架做不到的事,你可以馬上用原生程式的語法來自己新增功能,最後,目前各種框架強調的MVC架構,其實又大多是基於物件導向的原則,職訓課程期間也沒講到物件導向,同學們去碰這類框架,一定會一頭霧水,雖然我以前有學過JAVA,所以對物件導向算是有認識,但也因為對物件導向的認識,所以我現在覺得這些框架並不一定會真的省到工,也不一定會讓我少寫很多程式碼,畢竟這些框架能生存的真正原因在於維護和修改,而不是為了我們這種要針對考試檢定而來的,所以針對檢定到底要不要使用框架技術來解,我還要再實測一下才能下定論。

我寫這篇並沒有打算要介紹什麼框架,因為介紹不完,而且會有太多專有名詞,解釋起來麻煩,我只是把我這兩周找到的相關資料,自己做一些心得匯整,用自己比較好懂的白話文來幫自己紀錄一下;至於要不要學框架,我現在的計畫就是後端的CI會先學,然後用乙級術科來做練習,前端我會選擇React來學,主要是要做一些SPA的作品當成作品集,這大概就是我接下來一兩個月如果還是沒工作的計畫惹。

 




第四題解題心得-精品電子商務網站

第四題相較前幾題來說,就是個比較複雜,但難度中等的題目,最大的挑戰是來不來得及做到及格,而不是會不會做,因此在解題上,可能更需要一些策略,這是我在考前最後一次練習才想到的,可惜沒有足夠的時間去執行自己的策略,以致於在真的考試時變成來不及,在經過前三題的磨練後,第四題真的沒有什麼難度,只剩熟練的問題而已,而第四題我覺得可能在設計上是針對framework的開發方式而有的題目,採用framework的話可以大幅的減少在資料表的存取動作上,進而縮短整體的解題時間,只是我們最終沒有教到任何一套framework的使用方式而已。

在解題流程上,我後來實際考試時的做法是想先把首頁的選單及產品頁先做出來,這樣可以直接把購物一路做完,之後再去處理後台的部份,因為第四題的後台比較麻煩,而且不是那麼好拿分,因此前台的選單我是直接開資料表後,手動增加產品項目進去,這樣可以很快的把選單做出來,而產品的部份也是開好資料表後,直接手動新增八筆資料進資料表,這邊會花點時間在填產品的大分類和中分類上,不過比起花時間做新增產品的頁面來說,我是覺得這點時間還是划算的,因為手動新增完商品後,整個前台購物流程100多分就入袋了,接下來是製作註冊會員和管理員登入的部份,這邊做完就可以先去做管理員管理及功能權限的部份,然後因為購物功能做完了,所以訂單管理也可以做了,再回來做頁尾版權及最新消息這兩個算送分的動作,最最後才是後台最多分的商品分類及商品管理的部份,這邊因為選單和商品的資料都己經先手動新增好了,所以至少列表出來的動作可以很快的完成,刪除及修改的功能也可以很簡單的做完,至於新增就看時間來不來得再做,如果時間來不及,那寧可先把去會員管理的頁面做出來,這樣大概就可以確保在及格的水準了。

利用jQuery來操作DOM配合ajax可以簡化不少動作

購物幾乎都是用session來處理,減少對資料表的操作

在架構上,我目前也沒什麼好的精簡做法,原則上是一個功能一個檔案來做,只有api會整合在一個檔案中,不過我的檔案數大概是25個檔,但老師的解法好象用上了40多個檔案,我覺得那麼多檔案的操作,肯定是來不及做到及格的,就算用dreamweaver在那操作資料庫,但是前端要手動去調整的部份也不少,快不到那去,所以如果來得及準備,下一次的考試,我第四題應該會採用framework來解題,因為framework大多把一些常用的操作都先包好了,所以只需要專注在資料的處理及頁面的建構上就可以了。

整體來說,我是認為第四題如果是要採用原始PHP的語法來解題的話,那真的要花很多時間去練到很熟才有辦法,我在考試時,當時在選單的部份自己因為放錯tag的位置所以花了快十五分鐘在debug,以致於之後的解題自己也慌了,即便如此,我最終也大概是解到正三十分的成績,再多個半小時做完購物或訂單管理,就有機會及格了,所以嚴格來說也不是鐵板一塊。




第三題解題心得-ABC影城網站

第三題相較一、二題,難度直接提升了兩倍以上的難度,這難度的來源是因為在整個職訓期間,並沒有對前端的動態效果做太多的學習導致的,後台的部份大多數都是簡單的存取控制,不難但會花時間,前端的兩個難點一個是轉場效果的製作及訂位功能中的關聯選單功能需要透過較複雜的JS來完成,而整個課程設計中,對JS的著墨是比較少的,我和幾位同學也是在自己解第三題的過程中去加強對於JS及jQuery的認識與操作,大概需要練習個三次左右才會熟練,而第三題打下的解題基礎,對於第四題則會有相當的幫助。

在解題流程上,我後來的做法是先處理前台的三個主要功能,因為這三個功能做完基本上就不會負分了,而後台可以放棄任一個不做也可以及格,因此解題策略上會先前端再後台,而資料來源則是直接以手動新增的方式一次把所有的資料手動新增到資料表中,然後再把圖檔及影片直接複製到對應的目錄下就可以了,第三題只需要三張資料表就可以搞定了,而新增及修改電影這兩個功能則是花時間但分數少的項目,不需要花時間去處理;

首頁的動畫以jQuery來製作可以少寫很多程式碼,但是因為原本的區塊設計的不是很好,所以這邊要自己背一下相關的版面結構語法及CSS,而動畫的部份我是把三個動畫做成一個函數,要取用時就代入目標id及動畫代碼就可以了,這樣的設計可以讓自動播放和按鈕切換都用同一個函式來處理轉場效果,省事不少。

動畫使用的函式以jQuery的方式來製作

訂位功能比較煩一些,其中有三個動作中包了九個小動作,但合計卻只有15分,一開始的選單部份因為是互有關聯的,所以這邊需要透過jQuery的ajax功能來製作會比較方便,如果要用純php來製作的話需要多做很多判斷,時間上來不及,因此會在api的部份開兩支分別來取出電影日期及場次座位,另外為了方便API的作業,在選單的操作上也會把所有的選定項目分別寫入session暫存,這樣在api那邊就不用再去資料庫撈一次資料出來;

訂票選單的部份會因為前一個項目的不同而有不同的變化,因此採用ajax的方式來處理

解決選單後進入劃位畫面時,版面的結構也是要背一下的,因為版型檔案並沒有提供相關的語法,這邊就各憑本事了,有人用表格,有人用巢狀迴圈,我自己是用CSS的語法去限制座位的寬度,然後用一層迴圈及算法來解決排列及顯示座位的文字;這邊還需要先去撈出已被訂走的座位,我的做法是先宣告一個長度20填滿0的陣列,然後再從訂單資料表中撈出該場次的訂票紀錄,用迴圈的方式把每個被訂走的索引位置改成1,最後在畫座位表時,每個位子都檢查一下對應的陣列位置是不是1,如果是1的話,我會把class換成另外一個有不同背景的class,並把checkbox隱藏;最後這頁還需要處理劃位選擇的問題,劃位的判斷我是用jQuery來處理的,這一頁要處理的事不少,要解得順手,就是多練幾次,把程式碼背熟來應對。

劃位紀錄的部份我是採用陣列的方式來處理

劃位檢查使用jQuery來處理

後台的部份比較簡單,使用表格來處理版面會簡單許多,但現在市場上己經不太建議使用表格來做版面配置了,只是應付解題,表格是比較快的做法,其中資料排序的問題我是採用ajax的方式來處理,把排序資料送到 API去交換兩筆資料的排序編號,處理完後再刷新頁面,就可以看到排序完的結果,預告片及院線片的兩個後台我都用同樣的一支API來處理,而排序的資料我是採用在新增資料時去取排序欄位的最大值+1的方式,這樣可以確認每筆資料的排序關係是相連的,這比起老師用的先放一個定值再去加加減減要來得有保障一些,不過如果是實務上的話,會再另外判斷如果排序中有間隔時要如何補上(比如有資料被刪除,造成該位置為空),在解題時不需要考慮這些額外的狀況,只要在展示時小心點就好。

資料排序有往上和往下兩個功能,分別以不同的type來識別。

在檔案結構上,第三題並不建議整合在單檔,怕程式碼太亂,不好管理,所以每個功能都單一個檔來處理就好,首頁的部份可以都寫在一個檔案中,也可以拆成兩個檔再include進來,api會是比較吃重的部份,需要練熟的地方也是api比較重要;第三題的另一個麻煩的地方是所附的版型檔案中的CSS,它設定的字型大小及按鈕間距,絕對不適合在1024×768的版面中呈現,具體來說二,三,四題附的css檔都不在1024×768的規範內,到底要不要去改這部份的設定讓人很糾結,在實際考過後,考場的實際狀況是監評委員並沒有去看前三項動作的內容,也就是包含版面大小及版面結構,而是直接從第四項的細部動作開始看,但我們也不確定是不是所有的監評都會這樣評分,這部份只能等命題委員自己發現後做修正了,在我自己的解題上,我是會花個十來分鐘,把附上的 CSS做些修改,讓字型和間距可以在原本的版型檔案中比較好看一些。

整體來說,第三題要做的麻煩事都是前端的部份,所以jQuery和css的部份一定要很熟,時間上才會來得及,克服熟練度,第三題就還好了,畢竟我們班這次就有一位同學是第三題及格的,已經驗證了第三題不是鐵板一塊。




第二題解題心得-健康促進網社群平台

第二題開始的題目描述就有些不清楚了這部份感覺是要自由發揮的感覺,根據考過的同學表示,監評委員在看的時候並不見得會照著題目一字一句的去檢查,所以真的在評測時,自己要掌握好展示的流程,不要把題目沒有的或交代不清的內容也展示,自找麻煩而已,當然也有可能會遇到很嚴格的委員字字計較,要你一直重覆做功能展示,這時就只能靠真功夫來展現了。

第二題的題目設計上,後台比較簡單,前台要做的事略多,沒有完整的後台功能,所以像文章或會員帳號都是可以先手動增加到資料庫的,所以在解題流程上會先處理登入註冊及後台的部份,再去處理問卷調查的部份,接著是首頁頁籤的功能用DreamWeaver拉一拉就好,但如果不是為了考試或時間足夠的狀況下,我比較建議頁籤功能自己寫會比較乾淨一些,DreamWeaver會另外增加一些CSS和JS的檔案進來,在操作時要確認檔案的連結是正確的,免得展示出錯,最後再去處理分類網誌,人氣文章和最新文章的顯示,其中分頁功能後台一個,前台兩個,所以分頁功能一定要做出來,然後複製貼上兩次,改一下路徑就有15分了,cp值不錯,最最後有時間再來做按讚和點擊後顯示詳細內容的功能,這樣的流程可以確保穩定拿到分數,而不會因為麻煩的地方卡住了而影響整體的解題步調;另外,第二題強烈建議使用大量的jQuery ajax功能來做資料庫的存取及前端的顯示功能,會非常省事及有效率。

jQuery的使用,可以簡化文件的程式碼邏輯,讓api集中在一個檔案來處理

在解題架構上,除api.php及login.php之外,其他功能我還是以單檔的方式來處理,這是為了解題順手的考量,如果真的很熟練了,把檔案都整合在一個檔案也是可以的,因為參照原本版型提供的線索,大概可以推測出來,原本的題目設計要不就是整合在一個檔案中來呈現,要不就是使用framework來處理所有的頁面構成,所以才會頁面連結幾乎都是用參數來處理的狀況。

資料表的部份,如果沒有要做按讚的功能,就不用開log資料表,而文章相關功能因為題目沒有說明,所以有看把分類網誌的文章和最新文章分兩張表的解題法,這種解題法明顯只是為了把結果弄得和題目的示意圖一樣而已,不過因為題目沒講清楚,評委也扣不了分數就是了,我是只開一張post的表,然後手動新增八筆文章資料進去,多一個分類的欄位,所以分類網誌,最新文章和人氣文章我都用一張表來處理;而問卷調查的資料表我也只開了一張表,一樣用parent欄位來表達題目和選項的關係,這樣的結構用來應用解題是足了,大型問卷系統才需要考慮是不是要拆成兩張表來管理。

只以一張資料表來處理問卷的題目和選項

整體來說第二題是比起第一題簡單的題目,因為比較麻煩的按讚這項功能只佔了十分,不做也影響不大,而問卷功能並沒有要求做會員資格的限制,比如一位會員只能投一票之類的要求,這讓問卷調查的功能只剩下要花時間做頁面而已。




第一題解題心得-卓越科技大學校園資訊系統

第一題是四個題目中,題目設計比較完整,而且附的版型檔案及CSS也是最不需要去改動的,甚至一些前端的動態效果的Javascript都先寫好了,所以在解題上,就只要專注在後端的管理功能及前端的資料顯示即可。

第一題也幾乎是唯一可以單純使用傳統PHP+MySQL就可以一路順順的解完的題目,因此老師當時還有建議直接安裝舊版的PHP,然後用DreamWeaver拉一拉就可以了,聽說之前的幾次檢定,大多也都是抽中第一題的考生可以做完題目,並且也是透過DreamWeaver來完成的;不過我個人是覺得,為了考證照去使用市場上已經不太使用的解題方式,那麼這張證照考到了又能代表什麼?所以很慶幸的是,這次參加考試的十五位同學,最終大家都還是使用Notepad++或PsPad之類的純文字軟體來進行解題。

第一題主要測試的重點是資料庫的新增/修改/刪除的功能,以及圖片上傳和分頁的功能,雖然要求的動作項目很多,但都是基於CRUD(Create,Read,Update,Delete)而來,因此,九個後台的功能項目中,有五個功能項目是可以用同一套語法來處理的,而真正會花到時間去單獨處理的,只有選單管理的功能而已,因為選單管理還有次選單的部份,而題目中的次選單功能設計的不是很好,只是為了符合題目要求,要另外花時間去處理。

在檔案結構上,除了素材附的四個檔案外,我只另外新增了三個檔案來處理所有的功能;

api.php-所有實際對資料庫進行請求的程式碼都在這個檔案中處理,以switch case的方式來整合多個功能項目。

內容幾乎都是PHP和SQL語法 ,只負責接收和回傳資料,很少處理顯示的部份

view.php-所有利用原本附的彈出視窗進行的新增功能的畫面元件都放在這個檔案中,包括圖片更換的功能也是集中在這個檔案,一樣是以switch case的方式來整合。

main.php-和view.php很類似,只是這個檔案是用來顯示後台管理頁面中的各個功能項目的畫面,只有包含讀取資料的Sql語法,大多數內容還是以HTML為主。

所有的顯示語法都集中在一個檔案中,利用switch case來做切換顯示

另外,由於素材提供的版型檔案都各自有一個目錄,第一題雖然沒影響,但後面幾題會去動到CSS時就很麻煩,所以我會在考試一開始時,花個幾分鐘把CSS和JS另外拉出來放在對應的目錄,然後再去修改版型檔案及CSS檔中的相關路徑,這樣如果有需要改css時就不需要每個目錄都開起來改了。

我的解法讓我在檔案管理上會比較輕鬆,就算是同質性的功能要複製貼上也是在同一個檔案內複製貼上,所以我幾乎可以在兩小時內處理完第一題的所有畫面元素並準備好資料表。

  在資料表的設計上,有同學提出了一個神奇的解決方案,就是把所有解題會用到的欄位都開在同一張table上,這樣就只需要專注在處理一張表就好了,這理論上是行得通的,但是實際執行上,會需要在SQL語法上加入一些額外的判斷才能確保沒有撈錯資料,我不認為對程式及資料庫新手來說,這會是個好辦法,所以我後來是自己做了一些調整,把功能相同的五個項目的資料表欄位開一樣的,比如校園映象只有圖片上傳沒有文字描述,而動態廣告只有文字沒有圖片,我資料表都開成是有檔案和文字的欄位,我只需要在新增和更新資料時,判斷一下欄位是否空值,再決定怎麼處理就好了,這樣我在SQL語法上只需要代入變數,就可以一支程式給五個項目去使用了,這比起在那複製五次然後再去改欄位名稱來說還是快很多的。

利用相同結構的資料表設計,來簡化程式撰寫時在SQL語法上的調整

然後說一下選單的部份,第一題和第四題都有針對選單的動作要求,老師的解法是分成兩張表,一張負責主選單,一張負責子選單,但這個做法在第四題需要額外去撈取每個分類的產品數時會遇到多表查詢的困難,最後老師還用上了子查詢,但我覺得這對同學來說是真的有難到,針對解題的部份,我是只用了一張表,然後多了一個’parent’的欄位,parent=0時就是主選單,parent=x時就是次選單,而x就是其上層的主選單,這樣我只需要操作一張表就可以了,簡單許多。

只用一張資料表來同時處理主選單及次選單

最後是版型檔案的部份,第一題的版型檔案是最完整的,連Javascript的部份都有附上,只要資料叫出來放在對應的地方就可以了,不過要求完美的人一定會發現這幾支js都有點小bug,如果時間夠,稍微調整一下就可以了,比如選單的js在一開始時不會先自動隱藏子選單,校園映象區的圖片換頁張數計算有問題,新聞的彈出詳細內容的javascript冒泡機制沒有處理好,動畫輪播的JS程式碼區段放錯位置等,如果解題時間有多個十分鐘的話,可以把這些小BUG修整一下。




重新整理網頁設計乙級檢定的試題

結訓後一周了,目前丟出去的履歷約十五份,只有一份有通知面試,還要再努力。

這一周除了寄履歷表外,比較重要的工作就是把四題乙級術科的題目重新整理一下解法,把自己認為可以簡化或好記的解法定版下來,這花了我不少時間,和練習解題比起來,練習時求速度,有些解法並不會去考慮效率或邏輯,只是先用自己想得到的做法先撐過去,所以事後發現其實沒有省到時間,只是當時的腦子能想到的也就只有這解法了;重新整理後,有些比較囉嗦的流程做了簡化,比如我會用大量的一行式指令來取代之前老師教的三行指令,這在實際應考時,可以省下不少時間。

各題的解法心得過陣子我會一題一題的再寫出來,原則上,一二題是比較簡單的,而且我也把要編寫的檔案數做了相當程度的縮減,在準備上已經沒有難度了,第三題前端的部份比較麻煩,但其實jQuery的部份說穿了就是背熟就好,倒是素材提供的版型CSS實在很醜,到底應考時要不要去改CSS這我還要思考一下,第四題其實每個動作要求的都不難,但第四題的麻煩在於要串的頁面很多,也很難用一二題的做法拚在一個檔案去處理,所以第四題的簡化我還是很傷腦筋,不過第四題是可以選擇性放棄幾個麻煩的動作,先以及格為目標;總的來說,一,二題我覺得用傳統的PHP解法老老實實做就可以在時間內做完了,但三四題可能要用framework的方式來解題才會快一些,這也是我接下來要自己進修的方向,因為很多職缺也都要求要會使用framework,而乙檢的素材中是有附上cakephp,codeiginter兩個framework,我前幾天也有試了一下,感覺在資料庫的取用上,可以省下不少工夫,這對第四題的解題來說是有幫助的。

乙檢成果展示網站

最後我也把這周重新整理的四題解題重新上傳到網站去,目前這個分站只有放上四個題目的解題成果,未來希望能把完整的解題邏輯,方法也都放上去。




[訓後心得]PHP語言與資料庫程式設計應用

這次的課程期間長達五個半月,中間還分別跨了國曆新年和農曆新年,一共149天,上課日100天。

這次的課程內容涵蓋範圍也很廣,因為班導一開始的課程設計是針對網頁乙級國家技術士,所以在PHP的部份有上了不少和題目有關的實例,透過實例來帶出一些程式流程和編碼的學習也算是不錯的一個教法,這比起之前在委外的補習班的教法更可以啟發學員的能力。

這次甄選進來的學員也是態度比較正面的一群,雖然程度的落差是目前職訓班一直都有的問題,但我的觀察是,如果學習態度好,那至少整個上課的氣氛不會太差,之前遇過那種只是想來混時間領津貼的,上課睡覺打呼就算了,偶爾還會干擾到其他學員,或是態度不佳,和老師對嗆之類的。

整體來說,我這次學到的東西比起之前東一塊西一塊的學,這次是紮實多了,之前的補習班教學的確都是從基礎開始教,什麼九九乘法表,印出星星排成三角形之類的,雖然好象什麼都有教到,但最終無法整合成一個完整的作品;而這次的教學採用的做法都是一次一個完整的實務案例,這周可能先講解其中一個部份來教迴圈或陣列,下次換另一個部份來講解資料表如何連線,如何取值等等,至少每個主題都可以看到完整的成果,而不只是看到一個單一指令執行的結果而己,即便是Phtoshop和Illustrtor的課程,班導的教法也是只花一天把基本操作講完後,然後就丟了大量的練習題和實例題給我們去做大量操作的練習,在民間補習班則是光操作就教了一周,然後也沒有太多實例可以練習應用,學完我也忘光了。

講師素質的部份,我覺得僅是恰如其份的程度,畢竟職訓班因為政府政策的關係,不像很久以前的職訓聽說可以嚴格挑選學員的背景條件,因此當很多學員是非本科系的時候,講師在速度和教材的取捨上自然無法滿足所有人的需求,這點倒是我上過的五個職訓班都有一樣的問題,講得再簡單也還是有人就是不懂,所以我到後來都是上課聽重點,然後自己去補強自己想額外學的;另外這次的PHP和MySQL都是用純文字編輯器在上課,我覺得比之前用Dreamweaver來教要實際的多了,這對於了解程式的運作及資料庫的語法會比較有幫助,真的都把基礎打穩了,再去考慮使用工具來簡化操作。

在訓練目標上,因為這次的目標是訂在國家技術士網頁設計乙級上,所以課堂氣氛是比較活絡一些,畢竟大家有一個共同的短期目標在努力,話題的重心就會比較集中,也比較有可以交流的內容,先前的職訓班大多有一兩周的專題製作來做為課程的目標,但是因為專題製作容易發散,最後往往都不了了之。

環境的部份,公家單位提供的上課環境真的沒話說,山上空氣清新,往山下挑望的景觀也不差,上課用的電腦設備也是一等一的,可以參考我網誌前幾篇的介紹。

整體來說,這次的受訓體驗是正面的,舒服的,而且也有確實學到東西,因為時間長,學員間也有不錯的革命情感在,受訓後期還特別辦了一場徵才會也是很讓人感動的,據說也是場區第一次這樣辦;

結訓後兩天,己經開始在丟履歷等面試了,這過四十歲的年紀才要來轉程式設計,我也知道困難度不是一般般,這兩天有打電話來主動給工作的都是房仲和保全,實在很令人不甘心,希望再拚拚看,不過學程式的另一個保障也是我昨天在面試時和某公司提到的:”就算最後真的沒找到程式設計的工作,我也可以自己轉接案或純創作,這是程式設計可以不依賴特定公司或行業的優勢",我大不了就當個會寫程式的社區保全,干!




[代發]網頁設計乙級術科解題心得

這是幫班上的同學代發的心得文,這次抽中第三題還能堅持到最後並取得證照,實在優秀,更優秀的是100天的課程沒有請過假,全勤到底,從純文組的背景在一百天的課程中成為可以熟悉並靈活運用程式語言的工程師,下的工夫絕對是超出想象且值得學習的。

——————————————————————–以下正文—————————————————————————–

乙級術科解題心得
一、 總論
        大致上,我自己做每一題都至少會做三遍以上,而且每次練習我都會盡力去做並且”計時”,因為這樣才能知道自己有沒有進步,自己嘗試的方法有沒有效果,我覺得這是很重要的,而且盡量同一個時間專注在一題就好,雖然同一題做很多遍
    可能會有點煩躁,但是我會專注在可以提升速度的改變上,專注去思考可以更快的方法上,如果能夠想出來,那就是有很成就感的一件事。
    每一題做三遍的過程中,第一遍通常是熟悉題目的要求和功能,也熟悉網站的架構和流程,所以第一遍通常會花比較多的時間(像是第一題我花了8小時、第三題花了3天…),但這是一切的基礎,所以不要怕麻煩,要去了解每一個細節;再寫第二遍之前,我會在第一遍的基礎上,按照自己的想法來精簡流程和架構,想出自己覺得更快的作法,然後一樣進行第二次的計時練習。第二次練習的目的,就在於驗證自己的想法,確認自己想出來的解決方案是符合要求和時間。
        同樣的,再第三遍開始以前,我會把第二遍做的過程和最後的結果,進行一個檢視和調整的作業,把過程當中不夠順暢、不夠簡潔的地方都再一次修改,最後同樣是抱著通過4小時的心情來驗證自己的程式碼…。不用害怕做很多遍,第一題我不熟悉的時候做了5遍,但是有時候想不到好方法的時候,也不用一直鑽牛角尖,可以嘗試看看別人的東西,多接觸不同的想法,或許就會有更好的靈感產生,所以交流真的是很重要的!!
        最後要提醒的是,練習的過程其實不是無腦的練習,對我來說,除了熟悉流程架構、驗證自己想法以外,我還會不斷思考有沒有重複出現的形式(pattern),如果有,那就是可以簡化的部分,像是第一題,第一次做的時候覺得東西很多、很繁雜,所以直覺就是需要一個SOP來簡化流程、確保過程不要遺漏;後來不斷練習之後,覺得第一題後台的東西,也不過就是簡單的增刪改查,(這就是一種pattern,要掌握相同、反覆出現的部分來加以簡化),會變化的也只是樣式或類型而已,再更進一步說,其實後台就兩種類型,一種是檔案上傳的類型,另一種是一般文字的類型,所以我的流程規劃就會是相同類型的檔案一起做(先做檔案上傳類型,再做文字類型的),這樣可以避免腦袋打結和混淆;再來又發現,其實他們的欄位都很相似,所以我就從欄位的設計下手,把他們的欄位做相同的命名,有變化的只是他們的前綴,所以像是圖片就會是:pic_name、pic_text;文字就會是:word_name等等,這樣命名的好處就是,後台各功能的增刪改查的語法其實都差不多,有差別的也只是table名稱和欄位名稱不同而已,所以我就想如果要更快的話,就可以利用「搜尋和取代」的功能,來迅速地替換程式碼不同的地方,只是這有個前提,那就是命名一定要有個規則來處理他,這樣在取代的過程中,才不會自亂陣腳,不會不清楚自己到底有沒有取代成功,或是不清楚自己取代到了什麼…。
        以上分享就是在說明我發現pattern、簡化程式碼、簡化流程的一個過程,這當中其實需要很多的思考和設計的,這都是息息相關的,所以我很能體會林老師上課提到的,跟客戶要先確認架構和功能,還有修改的範圍和次數,否則我架構、db都設計好了,客戶來個大修,那我豈不是要全部從頭思考一遍?
        總之,我想說明的就是,大家在練習的時候,不要只是無腦的練習,其實要注意有哪些地方是反覆出現的,那就是可以簡化的部分,如果自己對於程式語法、相關技術有一定了解,那能夠運用的技巧或技術又更多了,所以不管是劉大哥或解題影片的方法,都是把增刪改查的方法包裝成一個api或function,然後透過傳值、傳參數的方法來實現功能,這也是很棒的方式,同樣都是把相同的過程提煉出來,但是每個人可以有不同的解決方式,我覺得這是很棒的地方,大家相互交流就能學到新東西!!
        其實我鼓勵大家跳脫考試的框框,對我來說,我自己也很討厭重複做一樣的題目,但是大部分的時候我沒有把他當成考試題目,我把它當成一個挑戰,因為考試是一時的,但是我學到的技術就是跟著我的,所以當我能夠把學到的技術整合應用在考試上,然後真的把流程更簡化,那開心的感覺是不可言喻的,心裡會更踏實,因為知道自己又成長了。老實說,我覺得考試要能提升速度,關鍵不在打字速度,關鍵在自己的思維能力、邏輯能力,程式碼的架構和流程更簡單了、更直覺了,那自然寫程式的速度也就快了,大家不要覺得自己不行,其實這是可以透過訓練來達成的,還記得我說過我第三題花了三天嗎?!那時的我也覺得第三題很難啊,我也覺得自己才能不夠用啊,但是當我慢慢消化、一點一點理出頭緒,雖然很緩慢,但是我慢慢就看到希望了。其實碰到這種問題才是好的,難的題目才能學到東西,因此當我第三題多做幾遍之後,再回過頭來看第一第二題,怎麼看都覺得變得很簡單,因為第一二題跟第三題的速度是不一樣的,雖然都是增刪改查,但是在經歷第三題操過幾遍之後,就會深深覺得第一二題東西真的少很多,這時候就會知道自己的能力提升了。
        當然,有時候我也深深自覺自己的能力不足,所以除了上課以外,我自己也會在網路上找更多的影片或資源來學習,因為我想學到更多的技術,想解決更多的問題。勉勵大家一起努力,真的想走這條路,就要下一定的決心,付出一定的真功夫。

二、 第一題
        其實第一題上面已經講了差不多了…。這邊大概補充一下就好,基本上,第一題後台的部分我大概會花2.5小時,前台的部分大概1小時。後台的部分如上所述,我會分成兩個部分,一個是檔案上傳的類型(包括標題圖片、動畫圖片、校園映像圖片等),另一個是文字類型(就是其他的功能了)。基本上,不管哪個類型,其實只要把各類型第一個樣板做好,之後就只是複製取代而已。我覺得需要注意的就是命名要清楚,這樣取代的時候才不會有問題。(這邊是以複製取代的作法而言,如果有其他方法請自行掌握)
        至於前台的部分,其實素材檔把前台控制的js或樣式都寫得滿完整的了,需要做的功課就是要先了解js的功能和設計,這樣才能進行套用,如果了解它運作的架構之後,套用起來就非常容易了,所以我說前台1個小時完成不是說說而已,是絕對可以的。但是!!一定要徹底了解他的js原理和樣式喔!!不要只學怎麼套用,這樣一點幫助也沒有!!

三、 第二題
        第二題感覺沒什麼特別的耶…,我覺得可以用來練習jQuery,把本來可以用js寫的部分用jQuery來操作。然後這題有些地方我會用URL參數來處理,這樣我覺得比較直覺又簡單,像是分類網誌、投票,然後再搭配table欄位的安排,其實就能有效的簡化一些流程了。
        其實有時候方法沒有很難,簡單的技術一樣有功效,只是懂不懂的運用而已,方法沒有高下,只是有沒有效而已。
(我稍微修改了一下register驗證,還有logout的地方)

四、 第三題
        第三題相對其他題目是比較複雜的,這裡我只會以考試方法來說,至於更細節的程式部分,請再自行看我的雲端(點我看連結)。
後台的部分,比較花時間的就是電影的新增和修改,所以在考試的時候我會直接放棄(總共才10分而已),直接建立db和檔案資料夾(movie),把影片(記得要先轉檔,用adobe的media encoder轉成mp4,考試的時候,環境設定的90分鐘就已經有素材檔了,可以在那段時間裡面先轉檔!)和圖片先複製到movie的資料夾,然後我會更名成簡單的數字(像是:1.mp4、2.png,可以利用F2和tab來快速改名),最後再db先鍵入一筆資料,再用phpmyadmin的複製功能讓資料快速增加,最後再修改資料,像是:預告片和圖片、電影名稱等等,目的是讓他們呈現在前台的時候有差異性,至於一些不太重要的導演、簡介等等,我個人覺得沒差,大家自己斟酌。

        後台大部分沒有太多的困難,只是有點雜亂而已,想清楚自己的架構、流程和程式碼,要掌握應該不難。(後台全部差不多要1.5個小時左右)
        前台的部分,動畫其實很好掌握,只要熟悉jQuery的動畫,還有一些相關語法,基本上就不會被扣到分數了,大家仔細看題目就會發現很好拿分。這部分我覺得比較重要的是練習樣式的調整,首先一定要能調整出大小圖的比例和位置,這部分只能靠大家自己練習了。基本上,我考試不會去背這些調整的參數,我都是靠平常練習和臨場反應的,這部分記得要多用F12來檢視和調整(雖然樣式有時候不好理解,但是基本上他都是有邏輯的,只要理解他的邏輯和用法,掌握上就不難了;如果不了解的話,那就自己多嘗試、多實驗!!)。(這部分做的熟悉,應該可以在20分鐘內搞定!!)
        前台訂票的部分,這部分也是前台比較花時間的部分,不過這部分主要還是考驗邏輯,至於前台顯示的部分到還其次。我會說考驗邏輯,主要是在api的部分,這部份是硬功夫,但是只要邏輯能夠通,就會變得很容易。大家可以照著流程來思考,像是:一進畫面電影就會有預設值,這時候就要接續跑出相對應的日期,那日期的部分要怎麼做?日期部分搞定之後,那場次怎麼出來?有了場次之後,如何跳頁、叫出座位表?座位表先不要管有沒有定位的問題,先處理樣式,能夠正確顯示之後再做checkbox的驗證(不超過4筆),最後在處理有無定位的顯示問題;做完之後,要怎麼在table新增資料、跳頁顯示訂單。這部分大家不要著急,一步一步完成就可以了,愈踏實就愈快完成。(詳細的說明可以看我的程式碼)(這部分差不多要花1.5~2小時)

五、 第四題
        這題因為我練習的還不夠熟,所以只能提供一點方向和建議。這題主要會分成三大部分,一是前台購物車,二是後台的商品分類、商品管理和訂單管理,第三就是剩下的其他功能和顯示。因為畢竟這題還是以購物車為主,所以考試的時候,我會很快的解決第三部分,那時候練習的速度大約是需要1.5小時(我的目標是設定在1小時)。
        再來第二部分,因為會放棄商品管理的新增和修改部分,所以後台預計是1.5小時左右;第一部分,前台顯示商品和購物車這部分預計是1.5小時。
        這題其實也挺雜亂的,大家最好花一點時間整理好架構和流程,而且他很多不同型態的表格,所以要訓練自己快速地把表格生出來;還有就是增刪改查的功能也在很多地方出現,像這種資料重複出現、形式重複出現的地方,都是可以思考簡化的地方,大家可以善用api和session。
        後要提醒的就是,他的購物車其實沒有什麼功能,只是顯示用而已,這說明只要好好掌握這部分,其實這裡是可省時間的地方。具體來說就是,只要表格用好、session放對位置、用jQ切換顯示、最後api寫入db,這一連串其實跟第三題的訂票根本大同小異,但是應該更簡單一點,這裡只要熟悉session和陣列就ok了,如果多練一段時間,這部分應該可以節省不少時間。

六、 最後提醒
        以考試來說,我還是覺得最好的程式碼就是自己看得懂的、又最直覺的,因為不用背是最簡單的方式,所以很多函式、樣式設定、參數我都不會刻意去背,因此每次我的樣式都會不太一樣。對我來說,只要掌握關鍵邏輯就好,剩下的就靠平常多練習而已,尤其是樣式的部分,其實平常多調整就會有經驗了,不用還要刻意去背,這樣會太累。
其實考前,我大部分都只是把流程、架構、邏輯順過一遍,像一二題比較簡單,我平常都練了五遍以上,那考前我就只會自己在腦中想一下流程、看一下題目,還有看一下平常容易出現bug的地方或是有不太熟的地方;我會把更多的時間放在第三第四題,如果還有時間的話,我會把網站打開,配合題目和程式碼一起把流程和邏輯順過一遍,也會把關鍵的程式碼印下來,如果有空還可以複習。雖然我到最後還是沒什麼看…。(其實放鬆心情比較重要,保持腦袋清醒和靈活就可以了!!)

 




[DAY-100]結訓/廠商徵才活動

今天是參訓的最後一天了,沒有課程要上,所以預定的活動是打掃環境後等待下午的面試,早上班導一來就先把印製完成的乙級技術士證照發給昨天考到證照的同學;跟同學要了一張來拍照做紀念,應要求把個資部份上馬賽克,總編號的部份加上本班這次過的三位,一共是20位,開辦網頁乙級四年多快五年以來,只有20位拿到證照,這過照率真的有點低啊,希望今年的第二梯次全國檢定及下一班PHP班能多考過一些人。

乙級技術士證照

然後是發放結訓證書及獎狀,有全勤獎,服務奬和學習成績獎,我拿到的是學習成績第一名奬,還有一份鋼筆組當獎品,滿不錯的。

學習成績優秀獎

結訓證書及優秀獎狀獎品

之後是打掃環境及閒聊等下午的徵才活動,我則是把NETFLIX上架的”從零開始的異世界生活”第一季看完了,果然雷姆才是王道啊!中午同學有訂便當,我則是下山到吉米拿吃義大利麵,雖然離家很近,但以後會特別再過來吃東西的機會應該很少吧;下午一點左右大家移動到會場教室集合,這次一共來了五個班級,除了本班的PHP程式外還有圖文影音編輯班,物聯網班,冷凍空調及光纖通訊班,廠商也都是相關廠商,一開場是由新店就業服務站進行活動說明,然後是場長致詞,主要是說這是第一次辦這樣的場內徵才活動,相關單位都很努力的促成,除了鼓勵學員多多面談推銷自己之外,也希望廠商能提供協助,幫助大家就業;

場長致詞

參訓學員

之後是廠商的自介,和我們程式設計有關的有五家,其中三立電視是這次帶來最多職缺的廠商,包含了數位圖文編輯,程式設計及設備維護人員都有職缺,而五福旅行社即將上櫃,則是最有前景的廠商,在就服站介紹完可以提供的就業服務及相關的津貼輔助後,徵才活動就正式開始了,這次是開放一樓的走廊空間,平時這裏很少開燈,這次一口氣要塞進上百人進行活動也是很熱鬧的。

今天難得開燈,全亮,左邊就是我們的上課教室

徵才活動現場

我這次是五家相關廠商都有去面談,不過大多今天來的都是人資主管,難以談到比較深入的技術工作內容,所以感覺是先來看看基本資料,然後再回去請技術主管評估有沒有二次面試的需要,不過我覺得有兩家有談得比較有感覺,應該是很有機會去做二次面試,希望年齡問題可以不要成為限制,大多數同學也是能談都儘量談,爭取該有的工作機會,希望最終都有好消息。

徵才結束後回到教室哈啦等下課,拍了張合照結束這八百小時的歷程,準備開啟另一段新的人生旅程。




[DAY-099]網頁乙級術科考試

今天是重要的考試日,大家果然都沒遲到,因為是團體報名,所以八點十五分時有承辦老師來帶隊上考場,上午的行程是抽崗位號碼及軟體安裝設定,崗位號由一號同學去按,然後會在投影幕上秀出每個人分配到的崗位號碼,然後就進場進行環境設定,環境設定的時間是九十分鐘,但是安裝xampp及設定參數只要十來分鐘就可以搞定了,所以我順便把需要用到的資料夾都先開好,也開了一個檔案把常用的語法先打好,比如do{}while(),<input >的五種type 結果打得正起勁時,監評長拿起了麥克風說:”這九十分鐘是安裝軟體和測試用的,應該和試題無關,請不要做一些和試題有關的預先設定作業”,雖然這麼說了,但是試場規則只有禁止從外面帶東西進來,並沒有禁止我在自己的電腦上產生東西吧,所以我還是多打了十來行的程式片斷才離開;據說這九十分鐘的安裝時間是今年才開始實施的新流程,先前的考生有反映過四小時的解題加軟體安裝要過真的很難,所以今年才多加了這九十分鐘除了安裝xampp之外,如果是使用framwork來解題的,則需要有額外的設定安裝時間考場提供的framework有cakephp,CodeIgniter,如果時間來得及,我滿想學學laravel的然後再建議技檢把一些新的framework也納進來,不然jquery還在1.8.3版,實在是太舊了,這要怎麼去說服外面的市場說這證照出來的技術士是跟得上時代潮流的?

回到教室吃午餐及閒聊,看大家也討論得滿開心的,一直到十點五十分才又上去準備抽試題及正式考試,抽試題是由崗位號最小的人去抽,所以由崗位1號的19號同學去抽,抽中四號題目,然後再按照崗位號碼輪下去,結果我是第四題,當場絕望,打算進去當練習就好,實際下去考,因為有先把程式片斷準備好,其實速度己經是比之前自己的三次練習要來得快了,但是因為還是不夠熟,所以做完幾個後台的部份己經兩個小時,我心中算了一下大概己經是做不完全部了,所以乾脆拿來試試昨天想到的新解法,試了一下的確對於解題是有幫助的,可惜的是我不夠熟這新解法,加上我在做首頁的選單時鬼打牆的卡了半個小時,到三小時我只做好了一半的動作,最後一小時把後台的幾個功能完成,做到沒有負分也剛好時間到了,監評來看時也很乾脆,直接問我有沒有完成,需要評分嗎?如果沒有要評分,直接簽名就可以離開了,離開後我才想到我沒有把資料夾照要求的改名放到桌面,不過反正沒過,算了。

在準備室時和大家討論時己經確定有兩位同學考過拿到證照了,都是抽到第二題,之後抽到第三題的二號同學出來也有及格,就有三張了,第三題能過真的是不簡單,後來聽班導和監評閒聊,據說之前有過的大多是抽到第一題的人,而且是使用DW來做的,這次我們是過第二題和第三題,他們也很驚訝。

下來教室休息時,己經有幾位同學在討論要參加第二梯次的檢定考了,我也打算再考一次,因為我的問題就真的只是熟練而已,反省一下自己,雖然三四題我都練習了至少三次,但每次都有新的解法和流程上的不同,結果就是不夠熟練,針對檢定考試應該是要固定一套解法然後熟練它就好,再來就是之前比較死板的想照著正統的解法來做,依照題目要求的順序來按部就班解題,但這會照成容易拿分的動作反而被壓到最後才做,前面一直在做花時間但做完只有五分的動作,雖然在後兩天有想到針對考試的新解法流程,但己經太晚而來不及熟悉了。

話說,早上在準備室等時,拜班導的推薦所致,場長來看大家時特別把我點出來,說我做的這個網誌有起到了一些推廣的作用,下一個班別有104個人報名,如果我有考到這證照,可以考慮來當外聘教師,講得我很不好意思,而且我最終沒考到這張乙級證照,但下一次一定會考到!

明天是職訓的最後一天,泰山職訓場這也安排一場規模不算小的廠商徵才活動,我報了不少家,希望能儘快找到工作重回職場。




[DAY-098]自習/乙級題目練習

考前最後一個上課日,今天老師讓大家自習及練習乙級的題目,我原本自己的計畫是今天在教室做完一,二題,周六日兩天做三四題,結果第一題做的時間超出預期,主要是因為我的新寫法雖然很精簡,但還不夠熟練,所以一直在出一些小錯,下午三點才開始做第二題,第二題大多是前端的動作,一個小時左右做完登入及基礎API的建置,覺得還行,原本打算晚上留下來繼續拚一下的,但是原定只停一小時的電力維修不知道為什麼停到七點半都沒恢復,結果在暗暗的教室和班導閒聊了一個多小時,最後直接回家了。

周一見真章,希望這班的考證成績不會比上一梯次差,不過如果真的抽中第三四題,也真的只能說是運氣差了。




[DAY-097]第二次上機模擬測試

今天的主軸是第二次的上機模擬測試,不過改成上午兩小時,下午兩小時,及下午四小時的兩種模式給同學選擇,目的是讓不熟的同學可以中午休息一下喘口氣,想挑戰的則維持一口氣衝四小時的方式,我這次抽到第三題,實在是太有挑戰,上午兩小時做完電影海報的後台,覺得還滿順的,但是下午再做電影院線片的後台時就覺得有點遲滯感,雖然沒有什麼真正卡到的地方,但就是速度快不了,最後連正分都沒達到就時間到了,第三四題真的是很有挑戰的。

下來教室後,重新對題目做了檢視,發現雖然第三題的後台部份不難,但分數佔比也不高,而首頁的兩塊顯示和動畫的部份就佔了75分再加上訂票的部份就110分了,後台有些動作花時間,分數卻只有五分的可能要先放棄,專心先衝到及格分數比較重要。

今天留下來自習的人比較多,胡老師也有留下來幫忙指導,我主要是在練習第一題的自創新解法,兩個小時可以把前端的HTML碼及API寫好,剩下的就是開資料和複製貼上的體力活而己,第一,二題看來是穩穩的了。