前兩周的課程大多是針對單一技術在做細部的說明，今天老師則是開始以W3Cschool的內容為教材在做整合性的講解，同時也開始帶到了Javascript的內容；老師預告未來兩三周的教學大綱如下：

主軸:HTML5+CSS3+JAVASCRIPT

利用W3Cschool的內容來講解CSS的應用

利用W3Cschool的TRY IT功能線上實作

利用線上範例再到DW中進行修改，這邊老師講解了媒體查詢的使用方式，可以用來因應各式不同的螢幕大小

這是一個圖象牆的按鈕切換功能，老師利用這個範例來解說JavaScript的語法及套用方式

這是一個在圖像上做Overlay功能的範例，老師用來教大家如何進階的去做修改成自己需要的內容

下課前老師教大家如何用10分鐘快速做一個Banner輪播功能出來，直接套用範例並且快速修改成自己需要的形式

請假一天去澎湖家庭旅遊，這一天的PHP課程是投票系統，這是乙級考試的一個項目，實務上也是滿常用到的系統，老師的做法是拆成多張資料表及檔案來完成，因此這個主題會練習到多表聯查及PHP檔案間互相傳值的技巧．

首先我們建立三張資料表，分別用來儲存投票活動，投票選項及投票紀錄

投票紀錄資料表

投票選項資料表

投票活動資料表

新增投票活動

修改活動內容

後台管理中心

投票選項管理頁面，可以新增/修改/刪除選項

前端活動列表

上周五去澎湖玩，昨天才把周五的進度問清楚，今天剛好可以接上；今天上午的內容主要是把上周五的投票系統做完，上周五只把前置作業做完，今天則是動手把真正的投票行為做完，這部份的邏輯比較複雜，但難度尚可，做法很多，老師教學採用的是比較簡單易懂的語法及呈現方式來處理，網頁乙級要考的也是簡單的投票系統而已；實務上投票系統可以延伸出考題系統，訂便當系統，問卷系統等應用來．

投票頁面

另外，從上周的課程內容來看，老師在PHP課程中已經開始加入愈來愈多的CSS來做前端頁面的呈現了，這部份同學們真的要多花點時間熟悉及應用．

投票結果呈現

下午的課程則是製作了一個網站維護系統，這在實務上是滿常見的應用，主要是讓前端使用者知道目前網站停止使用，而又不用去手動更新通知頁面．老師採用的方式是把判斷是否維護的程式放在兩個include檔中(head.php / head_stop.php)，然後在分別在正常網頁和維護用網頁include進這兩個帶有判斷功能的檔案來進行相應的動作，而後台管理頁面則獨立一個include檔來處理後台的開關站事宜．

網站維護系統關係圖

網站維護資料表

網站維護後台

網頁維護時呈現不同的頁面內容，一是例行維護用的，一是臨時維護用的

今天的課主要是講解圖層的應用，其實也就是綜合應用了，如何利用圖層的特性來有效率的編輯圖像是PHOTOSHOP的重要課題，這當中也提到了圖層的管理，這次的課程結束，老師說下次要先來個小考試，給我們幾個海報範例，要我們在一天內做出八張海報來，然後就是Illustartor的課程了．

圖層的應用一

圖層的應用二

課堂練習一

課堂練習二

回家作業題目

這次的題目算是一次比較完整的綜合練習，也是乙級考試的基本能力，由於需要管控使用者的權限，所以會用cookie或session來紀錄使用者在線期間的行，如果權限不合，則無法使用或讀取相關的頁面及功能，因為也必須有檔案上傳的功能，所以在資料庫資料的更新和檔案的同步上也要小心處理，否則容易發生資料更新沒成功，但檔案已經上傳，或資料新增了，但檔案沒設對檔名無法顯示．

在開始寫程式前我通常會先在腦中對於整個程式的流程有個概略的藍圖，如果是小程式就可以直接動手做，但如果關聯的檔案多或邏輯複雜點的，就會藉畫流程圖或心智圖來幫助自己弄清楚關係，也當成是一個製作上的依據，會員系統剛好可以用畫圖來幫助自己先對程式邏輯做一個預先的規劃．

會員系統流程關係圖

整個程式邏輯大概只花了一個多小時完成，但調整版面和加CSS則花了4個多小時，看來我在前端的部份還要再多加強．

最基本的登入畫面

一般身份的使用者只能查看自己的詳細資料

如果是管理者以上的身份，則上方功能列會多出兩個功能

會員列表可以直接逐個會員進行修改

會員修改頁面會先帶入會員的資料

每個欄位都可供輸入新的資料

新增會員的資料

未登入或權限不足則會提示非法登入

今天教的是網頁丙級術科第二題，但我一開始就沒打算照著上，所以自己看著題目自己試著做，沒想到碰到不少問題，速度也沒比老師教的來得快，主要是在於CSS的部份還不夠熟悉，所以邊做邊查資料，但是總算也是靠著DIV標籤把整個Layout做出來了．

下午開始處理PHP的作業問題，程式邏輯的部份前一天晚就做好了，大概只花了一個小時左右，想花點時間美化一下，沒想到一花就是一個下午，問題還是出在CSS不熟，想要全靠CSS來美化版面目前看來是有難度，但也因此知道自己目前的能力到什麼程度，要加強也才有個方向．

中午時和同學介紹了一下CMS中的WORDPRESS安裝，主要是為了呼應昨天老師下課後說的前後端整合這件事．

下課時有同學提到網頁乙級證照要先考到丙級才能去考，這嚇到我了，因為我原本的打算是跳過丙級直接去考乙級，要交兩次錢的事總是令人不悅，只好請同學明天幫忙問問老師，雖然說要準備丙級也不是什麼難事，但能省一些時間總是儘量省．

今天主要的教學內容是CSS，對我來說是有點悶的內容，因為基本的CSS我已經算熟了，不過老師講解到BOOTSTRAP的CSS操作時我還是有認真的聽一下，上午半天的時間都在差點昏睡的狀況下渡過，然後一直在追我的椅子的送貨進度，快中午時才收到PCHOME客服發來的道歉回答，說會補100元現金積點給我，離下訂時間已經超過100小時了．

想學對岸玩活動促銷，卻掌握不好物流，搞得24小時到貨過了100小時還沒到貨，賠再多現金積點也挽回不了消費者的信任

下午我一邊聽老師逐個講解CSS的語法，一邊開始做PHP的登入系統作業，大概一個小時就把主要的功能都做完了，剩下的是畫面調整得好看一點，打算回家再做，

下課時有同學在問老師CSS和BOOTSTRAP的關係，然後老師又帶到CMS的東西，一問一答之下，變得有點不可收拾，不過同學好學是好事，半年下來如果真的能建立良好的技術基礎也是很值得的．

接續上周的上傳團片介紹，今天先是要大家在網頁上把資料庫裏的圖片資料叫出來在網頁上顯示，順便也介紹了一下<img>這個指令，透過PHP把存在資料表中的檔名及路徑放在<img>標籤中的src屬性中，這樣就可以讓圖片顯示出來了

從資料表中叫出圖片

接著是在網頁的表格後面增加一個欄位，並且要大家嘗試著使用兩種不同的方式來刪除資料，同時也要刪除圖片，和上周教的一次多筆刪除不同，這次老師要我們做的是一次刪一筆就可以了，所以我們採用了超連結和按鈕兩種方式來刪除資料，超連結使用的是GET的方式來傳遞要刪除的資料資訊，而按鈕則是採用POST的方式，並且增加了一個隱藏欄位(type=”hidden”)來放置資料的資訊，並以每筆資料單獨一個<FORM>的方式來確保一次只傳遞一筆資訊．

以兩種不同的方式來刪除資料

再來是修改的功能，老師的例子是接在刪除後面來做，但為了方便自己看，所以我獨立一個檔案來處理，這裏的流程是當按下”修改”時，會帶著要修改的資料資訊到修改頁面去，然後在修改或重新上傳圖片完成後，會再回到列表頁面來．這裏比較麻煩的是圖檔的操作，老師的做法是把原本資料庫中儲存的檔名取出來直接取代上傳的新圖檔的檔名，所以在更新資料表的語法中就不需要去更新圖檔的檔名，只需要更新圖檔的文字標題就可以了，這個地方的程式邏輯需要花點時間想一下才能理解，因為之前都是一個語法完成修改的動作，但這裏的修改是分成圖檔的操作和資料庫的更新分開進行．

修改資料頁面

修改資料及上傳新檔案

不過這裏有個小問題是，修改完後，列表的標題雖然馬上更新了，但是圖片並沒有跟著更新，需要用ctrl+f5來強制刷新頁面才會看到新的圖，上網查了一下，這是因為檔名相同，所以瀏灠器會先抓緩衝區中暫存的圖片來使用，PHP沒有什麼好的解決方式，但是用javascript可以強制更新，之後有教到js的時候再說了．

修改完成後回到列表頁面

最後是複習之前教過的登入功能及SESSION，但這次老師要我們做的不只是登入這麼簡單，還加上了把密碼做md5加密的功能，真正意義上的會員登入功能，然後老師就出了作業給大家回家練習，這是一個會員系統的雛型，有等級管理及權限區分的功能在裏頭，算是滿有難度的挑戰題．

回家作業題目

課程進入第五周，其實基本的東西都教得差不多了，但是影像處理這門學問還是要有一定的天份及更多的練習才能略有成績．

今天的課程內容主要是先講解了筆型工具及路徑的應用，這在之前的課程中就多多少少有提過了，所以這次感覺比較像複習．

筆型工具練習

之後老師快速的把課本的例子說完後就要大家馬上自己找個類似的素材來做一個海報

縮合練習－飲料

下午的課是一個綜合練習的講解，看似簡單的設計，有一些眉角要注意，然後剩下的純粹是體力活，慢慢刻或慢慢TRY，沒什麼難度，但是花時間而已

綜合練習－年曆

老師說PHOTOSHOP的課差不多要結束了，到時會有個小考，然後就要準備進入以拉的學習了．

接續上周的聯表查詢結果，今天先介紹了LIKE語法的模糊查詢，要求大家建立一個查詢的功能，可以查詢產品名稱，同時也介紹了mysqli_num_rows的指令，用來返回查詢結果的筆數．

然後課堂的練習，改為另一張table，並且查詢的條件增加為兩個欄位．

接著是大量修改資料練習，需要把所有撈出來的資料放入表單中，然後再一次送出多筆修改資料的sql語法給資料庫，
這邊開始我們試著加入一些CSS來讓頁面美觀一些，同學們也要開始在日後的練習裏試著把HTML的標籤和CSS加入頁面中，這樣之後在面對乙術的題目時才會比較從容應對．

大量修改功能實作

接著是講解核取方塊和選單按鈕，然後利用選單按鈕來製作一個刪除資料的功能，在這裏我們需要去偵測那個按鈕有被選取，有被選取的按鈕會送出一個我們設定的資料序號值，我們再利用這個值來決定要刪那一筆，要注意到sql語句的寫法要正確，不然會刪錯筆或全刪光．

刪除功能實作

最後是新增的練習，新增就簡單多了．

新增資料功能實作

在最後一小時，老師補充了檔案上傳的功能，今天只有教了最基本的上傳及檔案移動，命名，下周會再補充一些功能；

上傳功能實作

在這個範例中，老師使用的判斷上傳大小的功能是無效的，因為PHP的作業方式是先把檔案上傳後才會取得檔案的size資訊，但是如果檔案大小超過php.ini或apache伺服器的設定值時，檔案根本不會上傳，自然無法取得檔案大小的資訊來做判斷，因此這部份日後應該是要搭配前端的javascript來做判斷；

不過我自己上網找到了另一個變通的做法，這個方式是利用$_FILES[‘file’][‘error’]這個參數，當上傳的檔案超過大小時，會返回錯誤訊息存入error中，有兩個相關的值分別是；

UPLOAD_ERR_INI_SIZE

Value: 1; The uploaded file exceeds the upload_max_filesize directive in php.ini.

UPLOAD_ERR_FORM_SIZE

Value: 2; The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form.

因為$_FILES[‘p_pic’][‘error’]會在檔案的header執行，因此會比其它參數還早拿到值，因此可以用來做為判斷，所以偵測檔案是否超過大小的判斷要改成；

if ($_FILES['p_pic']['error'] == UPLOAD_ERR_INI_SIZE){
echo "檔案超過2MB,無法上傳!";

exit();
}

要用UPLOAD_ERR_INI_SIZE還是UPLOAD_ERR_FORM_SIZE來做判斷要視設定檔是否有正確設定來決定．

因為調課，所以今天不是上網丙術科，而是視覺影像處理，老師預告了下午要教繪圖板的操作，上午則是先教了文字的處理，只是單純的操作倒是不難，不過老師有額外講解了一些實務上比較快速的做法，上午比較有收獲的部份是智慧型物件的解說，這部份書本也沒教，以前在電腦補習班上課時也是跳過，今天老師實際講解一次，才了解原來有這麼強大的功能存在．以前都不知道這東西要怎麼玩，原來可以像是一個範本的東西，在置換元件上可以快速的應用．

利用智慧型物件來快速更換圖片直接套用彎曲及明暗變化

下午的課，老師搬來繪圖板發給大家，一人一塊wacom intuos pro來練習真的是很大手筆，民間補習班最多是配台廠的繪圖板而已，第一次用這麼高檔的東西，才發現自己的手原來如此不聽使喚，一個描圖的練習，就耗掉大家兩個多小時的時間，雖然還滿好玩的，但缺乏藝術天份，只能點到為止，這繪圖板的練習會提供同學到結訓為止，因為後面有些作品會需要大家利用繪圖板來完成．

價值近一萬五的wacom繪圖板

手殘到不知道自己在畫什麼，加上了瀘鏡及相片後製，勉強還行

有些同學已經了解了聯表查詢的語法結構，也能跑出結果來了，至少到了這一步，硬著頭皮也是要把東西弄出來的精神是值得肯定的，完整的資料庫查詢語法及背後的原理很複雜，不是一時半刻可以說得清的，大多數的人也都是摸著石頭過河走過來的，先會做再來懂是不得不的學習過程，因為我們是為了求職而來的，不是在學校求學，狀況不太一樣．

這篇是自己的一個筆記，也希望幫助到同學大略的了解為什麼查詢的語法會這樣下．

老師給出的資料表有三張，分別是訂單資料表，產品資料表，客戶資料表，我們的最終目的是把三張表的資訊整合成一份人類比較看得懂的報表；

我們先來測試如果單純的合併兩張資料表，不下任何條件，也不指定欄位，會發生什麼事，非常建議大家平時的練習就這樣一個指令一個指令慢慢測，在過程中就會熟記語法和結果．

下圖是不下WHERE條件的結果，我們會發現資料一供是64筆，這是訂單資料16筆乘以產品4筆的總數，所以很明顯的，資料庫的結合方式是把訂單的每一筆資料都複製一筆去對應產品資料表的每一筆資料，所以變成了64筆資料的結果，

因此，我們也發現到每四筆(紅框)資料中，只有一筆是和產品名稱有對上的(藍框)，這兩張表的關聯性是建立在產品資料表的編號和訂單資料表中的訂購物代碼是一樣的，所以我們如果希望可以撈取到正確對應到產品的資料，只需要留下 o_product=p_no 的紀錄就可以了，這就是為什麼WHERE後面會需要下 o_product=p_no的原因了．

下圖是我們在查詢語句中加上了過濾條件後的結果，可以看到的是資料總筆數變成16筆，而且每一筆紀錄中的訂購物代碼和產品編號也都一致了．

現在回到我們原本的目的，整合三張表，如果我們不下條件，會得到如下的一張大表，可以看到的是總共有192筆紀錄，這是訂單16筆，產品4筆，客戶3筆乘起來的結果(16x4x3)，然後訂單編號1的資料複製了12筆分配給產品和客戶，而產品則各複製了3筆給客戶，所以如果資料庫不好好的做好規劃，未來在查詢和管理上都會很麻煩的．

在下圖中，每12筆資料中只有一筆是我們需要，分別是客戶姓名對應(o_name=c_name)及產品名稱對應(o_product=p_no)的欄位，因此，我們需要過濾同時符合兩個條件的紀錄才是我們最終要留下的．

為了讓大家了解資料查詢的變化，所以我們先來測試一下，如果只先下一個條件會有什麼結果？

下圖是我們只針對產品來下WHERE條件的結果，可以看到的是產品編號和訂單中的訂購物代碼相同的資料被留下來了，而總筆數剩下48筆，這是訂單16筆乘以客戶3筆的數目，所以我們只要再增加對客戶資料的判斷，就可以撈取出正確對應到產品及客戶的資料了．

下圖是我們同時過濾了產品編號和客戶編號後所留下來的紀錄，此時的總筆數只剩下16筆，剛好是訂單的筆數，而且產品編號和客戶編號也都是正確的，這樣的結果已經夠我們拿來做為其它的應用了．

但是實務上，這樣的結果有一個問題是資料表的欄位太多，這裏一共有12個欄位，其中訂單資料表中的資料和產品資料及客戶資料是相同意義的內容，除了增加在網路傳輸時的資料量之外，並沒有其它意義，因此我們最終希望只要撈出我們在PHP應用程式中會使用到的欄位和資料內容就可以了，這樣才可以簡省資料流量，也可以讓最終的資料表的呈現是有意義的，因此我們可以把一開始的SELECT *　語法中增加指定的欄位，只留下我們要的最終欄位即可．

下圖就是我們最終希望呈現的訂單資料表的資料了，雖然我沒有把o_quantity*p_price的總價欄位給顯示出來，但這裏主要是希望讓大家可以透過實際的圖表呈現來看到語法的變化及結果，藉此加深印象．