排球電商網站 個人練習

職訓局的專題作品

2024年在職訓局上課時，用老師的教學範本「藥妝電商網站」為底層代碼，再以自己的設計，修改前端畫面的網站(當時的技術力，還不足以改後端)。具備會員帳號的創建與登入驗證，購物車及下訂單功能。後端使用PHP跟Mysql，Jquery跟AJAX處理後端資料更新。前端是純CSS跟Bootstrap。有使用過Bootstrap的人應該知道，這屬於快速開發套用的模板，速度快，外觀也不錯。但客製化調整非常麻煩，必須一個一個去覆蓋，不如從頭寫樣式。但老師當時引用太多Bootstrap了，全部從頭寫不實際，只好硬著頭皮改。後續完成後，為了練習，有把部分頁面的AJAX改成fetch打自己寫的API用JS渲染內容。另外，產品的圖除了免費圖庫，也有借用實際業者的產品圖，跟一些明星選手的比賽圖。

製作流程

老師一開始會先展示學長姐的作品，給大家兩張A4紙畫槁圖，作為期末專題的設計。印象很深的是，老師曾講過：「以後去面試，只要給他們看草稿跟實際的作品，一定找你去上班！」讓我當時充滿了決心。現在回想起來，這應該只能證明一點點的設計規劃能力，跟最基本的切版執行力而已。因為喜歡打排球，就順勢以此為主題。完成稿圖，老師會把紙本收走，直到期末評分完才會交還(如果差異太大也會扣分)。之後幾個月的課程，老師會一頁一頁，一個組件一個組件開始教大家寫，當時是一個指令一個動作，照著螢幕上的畫面敲出代碼，無法複製貼上。老師的寫法，習慣用php直接渲染HTML結構/SQL字串，再用點跟PHP變數拼起來，碰到邏輯複雜的地方，常常少一個點、多一個空白、迴圈包的地方不小心包錯...之類的，非常容易寫錯。比較厲害的同學可能一次就完成，會被其他同學抓去當小幫手，協力除錯。順帶一提，首頁Hero的透明球員圖檔、商品列表頁背景圖的插畫，是我用Photoshop製作/畫出來的。

可以改善的地方

商品圖片沒有顧慮到比例的問題，應該固定容器比例，圖片填滿位置置中；首頁的啟動畫面應該只有首次進入才顯示，而不是每次重新整理都跳；圖檔都太大了，沒有輕量化；版面設計太醜(雖然當時很滿意)；Class的路由頁面沒做；不應該擅自用別人的圖，應該全部改用免費素材庫或固定的範本圖；現在網站還放在沒有SSL簽證的免費空間，速度也慢，要找時間移主機...太多地方了。目前應該就維持原樣，未來有空另外做一個2.0的版本，可以自己比對Before跟After的差異。