[DAY-025]投票系統

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

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

投票紀錄資料表

投票選項資料表

投票活動資料表

新增投票活動

修改活動內容

後台管理中心

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

前端活動列表




[DAY-027]投票統計 / 網站維護頁切換管理

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

投票頁面

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

投票結果呈現

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

網站維護系統關係圖

網站維護資料表

網站維護後台

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




[DAY-026]PHOTOSHOP-圖層的應用

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

圖層的應用一

圖層的應用二

課堂練習一

課堂練習二




[作業]PHP會員登入系統

回家作業題目

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

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

會員系統流程關係圖

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

最基本的登入畫面

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

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

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

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

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

新增會員的資料

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




[DAY-024]網頁丙級術科第二題

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

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

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

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




[DAY-023]CSS講解與RWD及BOOTSTRAP的關係

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

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

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

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




[DAY-022]圖片列表 / 刪除 / 修改

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

從資料表中叫出圖片

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

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

 

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

修改資料頁面

修改資料及上傳新檔案

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

修改完成後回到列表頁面

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

回家作業題目




[DAY-021]筆型工具/綜合練習

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

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

筆型工具練習

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

縮合練習-飲料

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

 

綜合練習-年曆

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

 




[DAY-020]資料庫- 查詢 / 新增 / 修改 / 刪除 /上傳

接續上周的聯表查詢結果,今天先介紹了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來做判斷要視設定檔是否有正確設定來決定.




[DAY-019]視覺影象-文字處理 / 智慧型物件 / 繪圖版使用

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

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

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

價值近一萬五的wacom繪圖板

 

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

 

 

 




[DAY-018]前端動態技術-內容的編輯與頁腳的處理/ HTML標籤解說

因為有點小感冒,今天一天頭都暈暈的,再加上外接硬碟不是很穩定,搞到軟體掛了不能用,一怒之下把老師建議的外接作業環境都搬到本機上作業,課程內容主要是接續上周的RWD及BOOTSTRAP雙開的網頁製作教學,同時比較兩種製作方式的差異,今天有比較多的內容是在講述CSS的內容,不過這部份我還算熟,雖然沒有特別去聽,但也還跟得上進度,只是一直很想睡而已,比較有收獲的地方主要是一些老師提到的業界實務的變通方式或處理,比如垂直置或DIV的排列美觀問題.

下午結束了網頁的實習內容後,老師開始講解HTML5的一些標籤特性,這部份對我來說也是有點枯橾,因為七成的標籤我都可以直接使用,倒是標籤的屬性我一直沒有去深入了解,這段期間應該要來好好的摸索一下;中間有提到canvas的時候,老師順帶提了一下adobe animator,也就是flash,我順口就問了老師關於animator是否還在使用actionscript來做動畫還是改成javascript了?結果老師好象沒聽懂我的問題,說了一堆影格之類的東西,我只好自己上網找,大概的狀況就是雖然animator還是有支援actionscript,但是如果是FOR HTML5的製作或輸出,基本上是以js為主了,而且adobe似乎也自己定義了一些動畫製作的js函式庫來使用.

原本想製作一篇關於mysql聯表查詢的文章,但精神狀況不佳最後做罷.




[DAY-017]資料庫語法複習 / 字串串接練習

今天上課先是簡單複習了一下上周提到的資料庫連接的語法,然後出了一題課堂練習;

資料庫查詢結合PHP練習

之後老師出了一題字串串接的練習題,這題除了考眼力外,沒有什麼難度;

字串串接練習

 

這麼麻煩的字串練習是做為在php中常使用的sql語法做預備

把資料表欄位結合字串

課堂練習題就是寫一個表單可以去更新資料表的資料

利用網頁表單來更新資料庫的資料

之後又出了一題課堂練習是新增資料到資料表去,這題也算是簡單的練習

利用PHP來新增資料

最後一個練習是資料表串接的練習,也算是sql語法的練習,只是改成利用php的語法來操作資料庫而已;

複合式資料查詢練習