PHP+MySQL互動式網頁程式設計班 範例實作-電子相簿 講師：林業峻 CSIE, NTU 7 / 4, 2010

課程大綱 電子相簿簡介 建立相簿 列出相簿 上傳照片 列出相簿中的照片 作業

電子相簿 電子相簿為目前最流行的網頁應用之一，主要功 能為給予使用者一個空間提供建立相簿與上傳照 片與人分享。 電子相簿主要由許多不同主題的相簿組成，其中 各個相簿又由許多照片所組成。主要功能： 建立相簿 建立一個相簿或活動主題，提供使用者瀏覽相關照片。 上傳照片 在已建立的相簿中，提供介面讓使用者將照片上傳到該相簿。 瀏覽照片 提供介面給使用者點選相簿並觀看其中的照片。

電子相簿設計的挑戰 相簿與照片資料表的規劃 相簿與照片檔案的規劃 相簿與照片資料表欄位的設計 相簿與照片檔案的規劃 資料夾與檔案的建立 上傳照片檔案存在的後續處理 以下實作範例將使用兩個資料表來區分相簿與照 片的描述並使用資料夾代表相簿，來存放相關照 片(不使用ＭySQL存放照片檔)。

課程大綱 電子相簿簡介 建立相簿 列出相簿 上傳照片 列出相簿中的照片 作業

建立相簿 建立步驟與設計考量： 在MySQL資料庫中建立資料表 (gallery_album) 需要有拍攝者、主題、拍攝日期等欄位 提供表單讓使用者填寫資料的HTML網頁 (gallery_album_add.php) 需要能填寫拍攝者、主題、拍攝日期 接收表單的PHP程式 (gallery_album_add_action.php) 確任是否填寫拍攝者、主題、拍攝日期 將使用者輸入日期轉為 "西元年-月-日" 插入到MySQL資料表gallery_album 跳出新增相簿成功並自動跳回相簿首頁: gallery.php

相簿主題資料表 在MySQL中，建立一個gallery_album資料表， 其中欄位包括： sn: 資料序號 name: 拍攝者 title: 主題 date: 拍攝日期 (date格式：西元年-月-日) (其他你想要記錄的資訊…)

練習 請完成下列範例程式chap08中PHP程式之功能 gallery_album_add_action.php

課程大綱 電子相簿簡介 建立相簿 列出相簿 上傳照片 列出相簿中的照片 作業

列出相簿 建立步驟與設計考量： 列出所有相簿主題的PHP程式 (gallery.php) 建立一個超連結名為[新增相簿]，連結到: gallery_add.php 建立一個表格，表格欄位包括主題、拍攝者、拍攝日期 選擇MySQL資料表gallery_album中所有資料 使用重複控制(迴圈)，將資料表中所有資料顯示在表格的每一列中。 上一步的過程中，印出主題時要加入超連結連到觀看相簿內容頁面，並 使用GET方式將要看的相簿主題之序號傳到該頁面: gallery_album.php

練習 請完成下列範例程式chap08中PHP程式之功能 gallery.php

課程大綱 電子相簿簡介 建立相簿 列出相簿 上傳照片 列出相簿中的照片 作業

上傳照片 建立步驟與設計考量： 在MySQL資料庫中建立資料表 (gallery_photo) 需要有相簿主題序號、照片主題說明、照片檔名等欄位 提供表單讓使用者填寫資料的HTML網頁 (gallery_photo_add.php) 使用GET方式接收要上傳的相簿序號 確任是否有收到序號 需能填寫照片主題說明、上傳檔案來源 將要上傳的相簿序號再用POST方式傳遞給接收表單的程式 接收表單的PHP程式 (gallery_photo_add_action.php) 確任是否收到要上傳的相簿序號與主題說明、上傳檔案來源 判斷相簿資料夾是否存在，不存在則建立資料夾(名稱為相簿序號) 判斷照片檔名是否存在，存在則改變檔名 (參考第五章檔案上傳) 將照片檔由暫存檔用新指定的檔名搬到相簿資料夾 插入到MySQL資料表gallery_photo 跳出上傳成功並自動跳回顯示相簿內容頁面: gallery_album.php ，並使 用GET方式相簿序號傳到該頁面

上傳照片資料表 在MySQL中，建立一個gallery_photo資料表， 其中欄位包括： sn: 資料序號 album_sn: 相簿主題序號 (資料夾名稱) title: 照片主題說明 file_name: 照片檔名 (檔案名稱) (其他你想要記錄的資訊…)

判斷資料夾存在與建立資料夾 當我們想使用PHP來建立資料夾時，第一個步驟 要先檢查該資料夾名稱是否存在。可使用PHP的 is_dir函式來判斷，再使用mkdir建立資料夾。 PHP的判斷資料夾名稱存在函式 is_dir("資料夾名稱"); 資料夾不存在則回傳 " "。 PHP的建立資料夾函式 mkdir("資料夾名稱"); 建立一個使用者自訂名稱的資料夾。 範例： if(is_dir("資料夾名稱") == "") { }

練習 請完成下列範例程式chap08中PHP程式之功能 gallery_photo_add_action.php

課程大綱 電子相簿簡介 建立相簿 列出相簿 上傳照片 列出相簿中的照片 作業

列出相簿中的照片 建立步驟與設計考量： 修改觀看相簿內照片的PHP程式 (gallery_album.php) 使用GET方式接收要觀看的相簿主題序號 確任是否有收到序號 建立一個超連結名為[新增照片]，並使用GET方式將要新增的相簿主題之 序號傳到該頁面: gallery_photo_add.php 選擇MySQL資料表gallery_photo中相簿主題序號欄位與GET方式取得 之序號一致的資料 使用重複控制(迴圈)，將資料表中所有資料列在表格中，(表格每列有四 個欄位放四張照片與照片主題說明。

練習 請完成下列範例程式chap08中PHP程式之功能 gallery_album.php

課程大綱 電子相簿簡介 建立相簿 列出相簿 上傳照片 列出相簿中的照片 作業

作業－電子相簿 使用PHP+MySQL製作一個電子相簿程式 延續chap08/gallery.php功能 建立一個電子相簿程式，新增設定相簿封面功能： 列出相簿： 在gallery.php中每列相簿主題前新增一個相簿封面欄位並顯示該相簿封面照 片。(若尚未設定封面則不顯示照片) 列出相簿中的照片： 在gallery_album.php中所有列出之照片後加入一個[設為封面]連結，按下該 連結後，設該照片為將此相簿之封面，並自動跳回gallery.php 範例請參考：hw4/gallery.php

繳交 使用FTP上傳 請使用FileZilla上傳作業至指定FTP主機 繳交期限：2010. 7/11(日) 主機： 使用者名稱： 密碼： 連接埠： 將程式存到自己學號之hw4資料夾 檔名: gallery.php 請使用FileZilla上傳作業至指定FTP主機 繳交期限：2010. 7/11(日) 公佈解答後,不再收繳交作業