[DAY-039]網丙第三題練習/影像編輯練習

今天是網頁編輯的課，老師要大家把上周的網丙第三題練習一遍後截團上傳，然後提供了三張海報給大家做練習，周四的課我都當自習在用的，所以大多時間是在畫AI的三十張動物圖，不過下午時老師講解了幾個AI的功能倒是很實用，像是鏤空字體，底圖的製作，曲線文字等，在AI中做比起PHOTOSHOP實在差太多了。

我做了十張動物圖之後，改做網頁動態的作業，把老師交代的內容做了比較妥善的修改，覺得還滿不錯的，期待後面的JS課程可以學到更多實用的技術

CSS的作業，點擊上方的圖片會在下方放大顯示

[DAY-038]ImageText ~ Portlolio with Filtering

今天老師講解了Image Text ~ Portlolio whit Filtering，十一個範例中因為有些是之前已經說過了，所以只是帶了一下，重點放在Full Page Image、Meet the Team和Portolio Gallery上，因為這三個比較實用．

圖片佔位器

最後在講解Portfolio Gallery時因為時間來不及，老師要大家把這個項目的變化當成作業回家做，主要是希望套上Tap Gallery的點擊功能，點擊作品小圖可以在下方展現大圖及更多的說明．

[DAY-037]會員系統-新增與登入

今天老師講解的是會員系統，帶著大家一步一步從資料庫建表開始說起，會員系統預計會花三周的時間來講解，包含了簡單的檢查，cookie的使用，其它要注意的小細節等等，然後就要正式進入javascript了，因為很多的驗證工作需要靠javascript先做一次才會比較省工．

因為我已經把會員系統的作業做完了，而且我的做法也和老師的幾乎不一樣，這點老師是傾向大家上完課後回家練習時可以做一套自己的東西，而不是只抄他上課教的．同樣的功能，做法往往有很多，多多接觸其他的做法，進步才會快．

這裏要放出來的是我的做法：

登入畫面

註冊新會員的畫面

註冊完成，帶出資料畫面

註冊完成頁面比較簡單，資料寫入資料庫後，再讀出來一次就完成了，不過這裏一般是要再加上直接登入或是請使用者去收驗證信的動作，在這練習中這次就不做了．

登入後的會員中心畫面，顯示會員資料與修改按鈕

資料修改畫面，這裏使用到cookie來讀取會員資料

登入紀錄資料表

[DAY-036]ILLUSTRATOR基本認識

今天開始ILLUSTRATOR的課，這在我五年前第一次上職訓課時有上了大概40小時的課，但當時上完還是畫不出個東西來，所以就沒再碰過了，今天老師先講解點陣圖和向量圖的差別及軟體的定位，然後就先從幾何形狀的操作開始講解，然後是鋼筆工具的使用，接著老師就要我們上一個網站練習貝茲曲線的操作，每個人都要做完每一道題目，

貝茲曲線小遊戲

才上課兩小時，老師就要我們用幾何圖形畫一隻動物出，這真是要了我的命，沒天份，要憑空生出東西來實在很難．

幾何圖形拚圖

之後上網找參考圖，第二隻總算像點樣

用幾何圖形畫出一隻動物

接著老師又介紹了旋轉複製的功能，這功能之前在學的時候也是一開始就教了，很實用．

旋轉複製

最後老師給了三十隻動物的圖檔，都是由圓形拼成的，說是依照黃金比例來繪製的，要我藉此練習形狀的合併，分割，聯集等功能，一周內完成．

三十隻動物練習，含上色

這個職訓班的課程真的很精實．

[DAY-035]訂票紀錄查詢/分頁

今天主要的時間都在講解訂票紀錄查詢的部份，老師的做法和我出入比較大，算是簡單版的，我自己寫的版本有比較多的狀態和檢查，另外老師有額外說了在更新資料的獨立頁面為了防止外人來讀取，都要先用session來檢查，同時也要先對接收值做資料庫的查詢確認後再做更新的動作．

另外也講解了一個新的SQL語法 IN 這是用在條件判斷時，用來尋找欄位中的值，這個功能是用來計算訂票紀錄中的有效票數，以便計算剩餘座位用的．

下午的時間，老師有講了一下關於字串與數字型態的檢查和轉換，這部份我是覺得沒什麼，通常是其它的語言會比較需要處理資料型態，PHP和JAVASCRIPT比較沒有資料型態的問題．

最後老師講解了分頁的做法，這是實務上很常用到的功能，而且也有很多的樣式和做法．

分頁功能

回家作業是會員系統進化版，上次做的會員登入老師後來沒有再提也沒有講解，但是這次的會員系統說是要拿來講解javascript及驗證功能用，估計會花上三周的時間在會員系統上，因此希望同學回家好好練習一番．

回家作業是會員系統進化版

[作業]使用者訂票紀錄查詢

這次的作業算是有點難度的了，也結合了很多先前學的東西，比較麻煩的是邏輯的部份要配合實務來思考，相較先前的一些內容主要是在引導大家學習PHP，但從投票系統開始，已經需要去思考實務上在使用這些系統時，流程該怎麼走，合理性，操作性等問題，程式的技術成分會慢慢減少，但邏輯和操作性會變多，比如如何設計一個容易閱讀的電影列表畫面，會比如何去撈出電影列表資料來得重要．

登入頁

使用者訂票紀錄查詢畫面

因為這只是上課的作業，自己在製作這頁時，也另外發現一些實務上可能會發生的問題要處理，但是老師還沒有提，就暫時先這樣就好．

[DAY-034]PHOTOSHOP測試

今天是PHOTOSHOP小考，老師準備了八張範例，要大家儘可能在今天內做出來，平均一小時要完成一張，

我光第一張海報就花了快四個小時，第二張做到下課只完成90%，有同學做完七張算是厲害了．

老師提供的八張範例題目

[DAY-033]modal和light-box

今天除了把上周最後的輪播再說一次，又多教了modal和light-box兩種效果，modal就是彈出視窗，light-box就是燈箱效果，是滿常見的應用．

燈箱效果

老師的教學算是講得滿詳細的，幾乎把每個標籤的效用及修改方式都說了一輪，所以老師也說，這樣教是教不完的，他只會把常用的說一遍，其他的效果就要大家自己找時間去研究學習了．

彈出視窗

輪播效果

[DAY-032]電影訂票管系統－前台訂票

今天的主要內容是前台的訂票頁面，因為是要給使用者使用的，所以頁面提供的資訊相較後台會少很多，但是需要增加一些驗證的工作，因為還沒教到javascript所以一些頁面的控制單位還沒法實現，因此老師採用一個步驟一個頁面的方式來完成這個前台的訂票作業，

電影列表

場次列表

訂票資訊頁面

錯誤驗證包括了輸入欄位及張數的驗證

訂票完成，新增紀錄到資料庫

最後老師有做了一下前台的訂票紀錄查詢頁面，但是要大家回家當成作業，並且加上了一些條件．

回家作業

[DAY-031]網丙第三題

今天因為調課，所以上的是網頁丙級的題目練習，第三題算滿簡單的，我自己看著題目一下就做完了．

網丙第三題，國家公園

網丙第三題

下午老師給三個素材要來做動態的banner圖，還滿有趣的，很久沒用ps來做gif動畫了.

動態gifbanner製作

空閒時間繼續研究上周的訂票系統，把語法做了一些更新，更簡潔一些

[DAY-030]電影訂票管理系統

今天老師說要來做電影訂票系統，有別於先前的先示範一次，這次老師在說完概略的結構後，就讓大家開始自己動手做了，老師自己也在做，兩個小時後大概給我們看了一下他做出來的樣子，然後說僅供參考，同學可以自己做自己的，接著他就下來幫忙同學debug，找問題了，這教法挑戰性滿大的，但能適應下來的人，進步也會很大，最後今天大家只做了大概50%的進度，下次上課才會再完成另外50%，我自己做的部份，後來和老師的比對，已經有很多不太一樣的地方了，老師的重點在於大家會做，至於用什麼方式做出來，不是重點．

今天的主題是影院訂票系統

因為今天的主題提到很多前台/後台/前端/後端的名詞，很多同學似懂非懂，我最近一直在想著要如何解釋這點來讓沒有程式基礎的人好明白，目前想的方式是以圖說的方式來說明：

前後端概念圖

這四個名詞最大的差異在於對象的不同，前台後台是針對人類的角度來說的，前台是給客戶，使用者使用的，後台是給有權限的管理者或操作者使用的，而前端後端是以資料的可視與否來看的，看的到的部份我們稱為前端，包括了美術視覺，操作流程，排版等，而後端則是指存在但看不到的部份，包括了資料庫，資料傳輸，加密等等，更具體的描述，我們以人來說，前端指的是我們的長相，外貌，後端指的是我們的思考，情緒，前台指的是我們的談吐，與人互動的方式等等，後台指的是我們累積的知識，我們各項行為的動機等等；如上圖所示，不論是前台後台，都會同時具有前端與後端的成份在，比如一個提供給使用者訂票的前台，同時需要有前端的頁面給使用者來查看電影場次的資訊，而電影場次的資訊則是從後端的資料庫撈出來；而在後台的部份也同時需要一個前端的頁面給管理者或售票員來管理電影的上下檔及查看使用者訂票的資訊，而電影的上下檔資訊及使用者訂票的紀錄則需要存在後端的資料庫來提供使用．