第三題相較一、二題,難度直接提升了兩倍以上的難度,這難度的來源是因為在整個職訓期間,並沒有對前端的動態效果做太多的學習導致的,後台的部份大多數都是簡單的存取控制,不難但會花時間,前端的兩個難點一個是轉場效果的製作及訂位功能中的關聯選單功能需要透過較複雜的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的部份一定要很熟,時間上才會來得及,克服熟練度,第三題就還好了,畢竟我們班這次就有一位同學是第三題及格的,已經驗證了第三題不是鐵板一塊。
留言