這邊題目給出的指示需要摸擬一個影廳的座位狀況,然後使用者可以點選座位來訂票,所以會需要一些建置前端頁面的工作;
這邊會先由前端頁面使用ajax來傳送電影id,日期,場次等資訊到api,然後在api程式中使用php來取出已訂位的資料,建置完座位區後,再以js來完成前端劃位的操作,最後再把訂單資料送到後端去儲存,完成整個訂票的功能。
這邊題目給出的指示需要摸擬一個影廳的座位狀況,然後使用者可以點選座位來訂票,所以會需要一些建置前端頁面的工作;
這邊會先由前端頁面使用ajax來傳送電影id,日期,場次等資訊到api,然後在api程式中使用php來取出已訂位的資料,建置完座位區後,再以js來完成前端劃位的操作,最後再把訂單資料送到後端去儲存,完成整個訂票的功能。
線上訂票功能我們分兩部份來製作,一個是電影選擇的功能,一個是劃位及完成訂票的功能,這邊主要都是使用ajax來完成的,所以重點放在如何取得前端的資料並傳送給後端去做處理,相較題組一二的ajax功能,這邊使用到的ajax複雜度提升不少。
動畫的部份我們主要是使用jquery內建的fadeIn()
、slideDown()
、show()
等簡單的動畫方式,較複雜的動畫可以參考jQuery animate()
函式的使用說明。
這邊的js中有多加了幾段額外的程式,用來做按鈕的控制或是避免錯誤,但檢定時,可視作答時間來決定要不要多寫這些內容。
預告片動畫算是有難度的一個製作項目,這邊採用做法是依照示意給出的範例來製作,實際檢定時,可以視時間減少一些功能或檢查的工作,讓解題速度可以快一些,在撰寫javascript的動畫相關功能時,要稍微注意js動畫執行上的一些小問題,確保動畫能依照預期的效果來進行。
院線片詳細資料是經由點擊首頁的院線片圖片或影片簡介按鈕後進來的,由於這頁的版型素材已經有提供了,所以只需把電影資料取出後,在對應位置填上即可完成
題組三的三個前台功能中,院線片清單算是簡單的,主要就是照題意來列出至少六部上映中的院線片再加上分頁功能就可以了;
但是由於素材提供的css樣式和題目的不一樣,所以css的部份,我們會採用自行撰寫來解決,內建的css我們可以先註解掉不使用。
1 | <!--這是預告片動畫的css檔,先註解或刪除不使用--> |
訂單管理功能也算是相對簡單的功能,如果不想等做完訂票功能才來做後台訂單管理的話,可以參考院線片新增假資料的做法,先利用程式的方式來產生數筆訂單資料,這樣就可以先來完成訂單管理功能了。
完成列表功能及部份按鈕功能後,接下來製作新增、編輯、刪除的功能,示意圖中不像預告片那邊有一個確認編輯的按鈕,因此我們可以理解為每部院線片的相關功能操作都是每筆資料獨立的,我們儘可能使用ajax來完成所有按鈕功能的操作,每一次的操作也只針對一筆資料來處理。
院線片的後台功能配分不多,但是刻畫面和做功能滿花時間的,因此在處理這個功能時,要考慮一下解題的策略,安排適合的步驟來進行,才能在有限的時間內完成,避免花太多時在這裏而擔誤了其它功能的製作
預告片海報新增功能雖然只有名稱和上傳圖片兩個欄位,但因為管理功能中還有設定顯示、排序、轉場動畫等資料要處理,因此在後端處理儲存資料時要記得別漏了需要的資料及預設值。