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

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

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

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

登入畫面

註冊新會員的畫面

註冊完成,帶出資料畫面

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

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

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

登入紀錄資料表




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

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

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

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

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

分頁功能

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

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




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

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

電影列表

場次列表

訂票資訊頁面

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

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

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

回家作業




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

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

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

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

前後端概念圖

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

訂票系統檔案關係圖

電影資訊資料表

場次資訊資料表

訂票記錄資料表

新增電影頁面

電影列表

電影修改頁面

新增場次頁面

場次列表頁面

場次修改頁面

由於來不及做到第三個訂票紀錄的練習,老師建議前兩張資料表做完的同學可以回家先試著做做看訂票記錄的頁面要如何呈現,不需要等老師說明或照著老師的方式來做.




[DAY-025]投票系統

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

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

投票紀錄資料表

投票選項資料表

投票活動資料表

新增投票活動

修改活動內容

後台管理中心

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

前端活動列表




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

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

投票頁面

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

投票結果呈現

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

網站維護系統關係圖

網站維護資料表

網站維護後台

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




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

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

從資料表中叫出圖片

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

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

 

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

修改資料頁面

修改資料及上傳新檔案

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

修改完成後回到列表頁面

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

回家作業題目




[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-017]資料庫語法複習 / 字串串接練習

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

資料庫查詢結合PHP練習

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

字串串接練習

 

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

把資料表欄位結合字串

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

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

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

利用PHP來新增資料

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

複合式資料查詢練習




[DAY-015]PHP-cookie / 登入 / 資料庫連接

今天先介紹了cookie的使用,cookie是使用在本機上的超域變數,cookie的出現是因為網頁本身是一種"無狀態的文件",也就是說當文件轉換或關閉時,所有的狀態和暫存在記憶體中的東西都會清除,但為了實務上的需要,所以才會有cookie和session的出現,用來保留網頁的狀態和資訊,做為其它的應用.

一.cookie的使用比起seesion簡單多了,但限制也比較多,早期cookie有很多安全性上的問題,目前跟安全性有關的都轉往session去處理,cookie則只用來儲存一些比較不重要的資訊或做為標記使用.

二.課堂練習:因為這周的課程比較有難度,所以老師花比較多時間在一對一對的指導上,課堂練習的時間也比較多.

利用cookie或session來製作帳號密碼登入登出

搞懂session和cookie機制的我,覺得功力有所提昇了,所以這題很快就做完了,連太閒才做的登出功能也做完了.

檔案一.用來申請帳號及產生密碼並判斷是否已登入

檔案二.用來輸入帳密確認是否正確並註記是否為登入成功狀態

登入登出的執行畫面

其中,關於印出申請過的帳密,然後要求要新的在最上頭顯示,也就是以遞減的方式來顯示的這一段,我是直接在迴圈起始上以陣列的總數為起始值,然後遞減印出,不過老師說很多人還搞不懂迴圈,直接改變起始值的方式可能會讓大家更混亂,要我挑戰起始值為0的條件下,如何遞減印出,我一時沒會意過來,想了一些奇怪的方式像是用總數的差值去計算,或是先準備好一串陣列的順序去填入之類的,回家後突然靈光一閃,才想到我們是網頁上要顯示成果,最終是字串的方式來呈現,所以只要把顯示的結果改成字串串接就可以達到一樣的效果了:

很多同學不懂超域變數的意義和使用方式,所以在這卡了很久,我自己是用銀行存錢來舉例,如果錢放在家裏,每次要用錢就得回家拿,也只能從家裏拿,如果錢放在銀行,那麼不管我人在那,都可以就近找分行或提款機來領錢,這樣舉例還不懂的話,真的就是沒有放感情在學程式這件事上了.

雖然seesion的部份大家卡了很久,不過最後一小時,老師還是再多上了關於資料庫連線的部份,老師同時介紹了 mysqli_query 和 mysql_query 的兩種連線方式,以因應可能有些系統的PHP還在5.4以前的版本.

如果資料輸入都正確,就可以在瀏灠器上顯示正確撈取的資料

DB正確撈取的資料顯示

回家作業是一個存取資料庫的練習,配合先前的GET/POST,以傳值的方式來要求存取資料

回家作業題目




[DAY-012]PHP-系統變數 / 日期 / SESSION

今天上的內容只有三個,但難度頗高,系統變數的部份主要是介紹IP的取得,在實務上可以用來判斷使用者的IP及安全性的檢查.

日期變數的部份主要是取得系統的時間然後做一些取值的動作,不過PHP的日期函數及變化很多,實務也是用得很頻繁的功能

日期隨堂練題

傳遞日期後比大小

SESSION是我很期待的課程,因為以前自己看書和GOOGLE都似懂非懂,今天老師實際帶著做測試,感覺有懂了.

綜合練習

執行成果




[DAY-010]PHP語法基礎

今天上午的課程主要是接續上周的GET,然後接著說明POST的傳送與接收方式,也提到了如何在單檔內做傳送與接收並改變頁面的呈現方式,這部份需要一些觀念的建立,所以老師說他提前來說這個是為了讓大家有時間去消化,不然之後要做後台時,會亂掉.

課堂練習-傳值到另一個檔案,然後回傳該值長度的英數字亂數組合字串.

下午的課程開始提到陣列的觀念,同時說了一維及二維陣列的做法,然後直接結合早上的GET和POST做課堂練習,內容是要大家建立多個輸入欄位,然後傳檔取值做運算再輸出,中間穿插了亂數函數rand的使用,到這邊,老師幾乎是一個一個同學去指導了,因為這三個東西一次結合起來的確會有點亂,有些同學連變數的觀念都還沒建立完成呢.

今天又有一位同學因為找到工作而退訓了,剩下十八位同學繼續努力,但前兩周的課程進度雖然比我以前上的職訓課程都要來得快,但後面的課程才是決定能不能製作完整作品的關鍵,希望大家能夠跟得上.

回家作業是一個單檔傳值並以亂數計算後呈現結果的練習.

在單一檔案內傳遞POST陣列並運動出隨機密碼配對

我自己利用時間把改過的課表查詢方式做完了,更換了資料表的結構後,後續的查詢和統計工作都簡單許多,但是我回家才發現我忘了把檔案上傳到雲端空間,但我希望下周可以把線上課表公開給同學使用,看來只好自己在家裏利用周末兩天重寫一次了.