資料庫網站實例 1 - 碁峰資訊epaper.gotop.com.tw/pdf/ael008400.pdf · 13-2 php+mysql...

資料庫網站實例 1 - 影片資料系統

準備工作

檢視資料

點閱詳細資料

新增記錄

更新記錄

刪除記錄

CHAPTER

13-2

PHP+MySQL 與Dreamweaver 互動網站程式設計

當讀者閱讀到這一章，就表示已經進入到本書最精采的實戰篇。恭喜你，距離架設

一個屬於自己的資料庫網站的夢想已經越來越接近了。回顧一下本書從剛開始就對 Dreamweaver 的使用操作環境做過介紹，您已知道怎麼定義一個網站，也知道怎麼

在網頁裡畫一個表格、表單…。接著第二篇－PHP 程式設計篇也用了很多篇幅介紹 PHP 的程式語法，包括不同資料型態變數的宣告與運算式的使用…等。至於資料庫

的部份不但在剛開始就說明了關連式資料庫的觀念和 SQL 語法，也介紹了怎麼用

MySQL 和 phpMyAdmin 來手動查詢或異動資料表格的內容。

綜合前面章節所學到的基本功，相信讀者已經有站穩腳步的能力。從本章開始的

實戰篇，將會由最簡單的例子開始，帶領讀者了解之前花那麼多時間所學到的技

巧，該如何綜合應用，開發出屬於自己的資料庫網站。這一章將以一個簡單的「福

爾摩沙影片出租店」的影片資料查詢與異動為例，先熟悉如何運用 Dreamweaver 的伺服器行為（Server Behavior），來和後台的 MySQL 資料庫的互相搭配。

至於 PHP 的程式碼部份，因為在這一章的案例中，程式碼大都是藉由加入伺服器

行為所產生的，讀者只要能看得懂程式碼的作用，可以自行修改就可以了。而在

接下來一章（第十四章）的實例就會有較多需要自行寫 PHP 程式碼的部份。希

望這樣的安排能循序漸進，帶領讀者培養自己以後開發網站的能力。

13-1 準備工作

在建立任何資料庫網站時，一定要先把下列準備工作先做好：

定義網站架構

心裡要有個藍圖，網站裡要有什麼功能？會有哪些畫面？網頁之間是否需要參

數傳遞？哪些地方要建超連結？例如：假設首頁是所有資料的總覽頁面，從首

頁點下哪個欄位的超連結可以往下層探索（Drill Down），到另一個網頁檢視

詳細的資料。

在確定好整個網站需要哪些網頁之後，再用 Dreamweaver 編輯網頁，也就是

拉好畫面中的表單、表格、文字欄位、影像圖檔…等物件。將網站中所有的網

頁檔案集中放在同一個目錄下，最後在 Dreamweaver 中定義網站，包括網站

描述、網站所會用到的檔案路徑...等設定。

13

13-3

ch13 資料庫網站實例 1-影片資料系統

準備資料庫內容

除非要建立的網站都是內容固定的靜態網頁，否則目前絕大部份網站都是要能

和瀏覽的使用者有所互動的動態網頁。動態網頁能讓使用者可以依自己需求指

定查詢條件以篩選出所需的部份資料，譬如，要查詢書名包括“單車環島”的

書籍。這樣系統裡就必須建置一個資料庫，記錄所有書籍的基本資料，才能做

為查詢時的搜尋資料來源。

在規劃資料庫時，一般是採用關聯式資料庫的資料模式架構。將所有系統裡會

用到的資料欄位，依照正規化的原則，分配在不同表格中。在這一篇有幾個案

例需要將資料分成幾個表格，讀者可以試著練習自己會將資料欄位分配在哪幾

個表格，再和本書的規劃對照看看。如果對於關聯式資料庫的觀念和正規化原

則已經忘得差不多了，建議讀者回頭複習一下。很多東西往往在用到時才會去

動腦思考，也才知道自己還有哪裡不懂。只要跟著練習幾次，就可以很快的為

自己的資料庫網站或一般的資訊系統規劃出資料庫的表格配置。

在分配好資料庫的表格和欄位後，就可以照著本書所介紹的操作方法，利用 MySQL 或 phpMyAdmin 在表格中建立幾筆測試資料記錄。為了節省讀者鍵

入測試資料的時間，也為了方便讀者用同樣的資料與本書的示範結果相對照，

這一章提供匯入資料的文字檔案協助您自動將測試資料建立起來。只要照著 12-9 節所介紹的步驟在 phpMyAdmin 中匯入資料即可。

建立 MySQL 資料庫連線與資料集

在 Dreamweaver 的環境中要讀取 MySQL 資料庫的內容，必須要先建立一個

連到 MySQL 資料庫的資料庫連線（Database Connection)。每個資料庫連線只

會連到一個資料庫，在大部份的情況下，相關的資料表格會放在同一個資料庫

裡，所以一個網站也只需要建立一個 MySQL 資料庫連線來讀取資料庫裡一

個或多個表格資料就可以了。

若要讀取 MySQL 資料庫中的一個或多個表格資料，則是要在前面所說的資

料庫連線基礎上，再建立資料集（Recordset)。而同一個表格的資料可以視需

要建立成不同的資料集，它們分別有不同的篩選條件。譬如，資料集 A 是日

劇的影片清單，而資料集 B 則是韓劇的影片清單，兩個資料集雖然都是讀取

影片資料主檔的表格，但因為篩選的條件不同，所以要將它們定義成不同的資

13-4


料集來區別不同篩選條件所的擷取出來的資料。但這兩個資料集是讀取同一個

資料庫的資料，因此會以相同的資料庫連線來建立這兩個資料集。

現在，就要以「福爾摩沙影片出租店」為例，幫它做一個簡單的影片資料查詢與

維護的網站。透過這個例子，將可學習到如何利用 Dreamweaver 內建的伺服器行

為，輕鬆的完成資料查詢與異動的網頁介面。絕大部份只要動動滑鼠就能完成，

您一定要動手跟著完整做過一次。一旦能熟悉這個例子的操作，在進入下一章網

路相簿的實例時就能倒吃甘蔗。

13-1-1 定義網站架構

先來看看這個網站的首頁和顯示詳細資料的網頁長成什麼樣子：

首頁畫面

13

13-5


詳細資料的網頁

從首頁可以看到全部影片的幾個主要欄位資料，一次最多顯示十筆資料，還可以

經由上一頁、下一頁…等超連結來瀏覽其他頁的資料。當游標點選“片名”欄位

時，就會開啟另一個顯示詳細資料的網頁，將可看到與該部影片相關的所有欄位

資料。而在這個顯示詳細影片資料的頁面中，有“修改”和“刪除”的功能讓使

用者可以調整影片資料內容。

綜合所有網頁之間的關係，這個網站會有下列幾個頁面：

網頁檔案名稱說明

index.php 整個網站的首頁，檢視所有影片的主要欄位資料清單

detail.php 顯示詳細資料的頁面，包含影片的所有詳細資料

add.php 新增一部影片資料

update.php 修改一部影片資料

delete.php 刪除一部影片資料

複製光碟目錄：Example\chap13\1.Initial\movieshop

假設我們在安裝 AppServ 時將網站主目錄設定在 C:\AppServ\www，那麼請在它

下面建立一個子目錄： movieshop ，並將本書光碟目錄 Example\chap13\1.Initial\movieshop 下的所有檔案及子目錄一起複製到 C:\AppServ\www\movieshop 下，並解除檔案的唯讀屬性。我們將以

C:\AppServ\www\movieshop 做為“福爾摩莎影片出租店”的網站主目錄。

13-6


建議讀者每次做不同網站的練習時，可利用複製網站的方式來建立新的網站，再

將設定值做修改，這樣可以節省每次重新定義網站的時間。關於複製網站的操作

可參考「3-4 定義與複製網站」的說明。

網站網站名稱福爾摩莎影片出租店

本機網站資料夾 C:\AppServ\www\movieshop\

伺服器測試伺服器 C:/AppServ/www/movieshop/

進階設定 Web URL http://localhost/ movieshop/

13-1-2 準備資料庫內容

這個影片出租店的資料，若按照正規化的原則，理論上應將影片主檔資料和演員

主檔資料分別放在不同表格，最後再透過 SQL 指令將兩個表格的資料合併起來。

不過，這是我們了解 Dreamweaver 伺服器行為的第一個例子，為了方便讀者起

見，現在我們暫時先把正規化的事抛在一旁，只要先了解如何處理單一表格的資

料查詢與異動就好了。因此，在這個例子當中，資料庫裡只有一個表格，以降低

學習的難度。

13

13-7


"movie"表格的結構

這是網站的功能是維護與查詢錄影帶店內所有影片的資料，顯然在資料庫中要存

放的是與影片相關的描述資料，包括片名、導演、分級、片長…等。所以，我們

將用一個影片資料主檔的表格來儲存這些訊息，讓表格的每一列或每一筆記錄對

應到一部影片。

為了識別每部影片，特別在表格中設置一個值會自動遞增的“id”欄位做為主

鍵。事實上使用者並不需要看到這個欄位，它是我們建立在系統內部做為流水號

之用，這樣每個影片都會有個獨一無二的序號做為識別。這樣當要從首頁 Drill Down 查看某部影片的詳細資料，或要刪除或修改某部影片的資料時，才有可以區

別使用者點選的是哪一個影片的依據。

讀者可能會有疑問，為何不用片名欄位來識別使用者點選的影片就好了。其實使

用片名來區分影片並不適當，因為不同部影片的片名可能相同(例如：“白色巨

塔”有台灣版和日劇版)，所以才要另外設立一個“id”欄位來做表格的主鍵，識

別表格中的不同筆影片資料記錄。

當您從本書光碟匯入 Example\chap13\2.ImportData \movieshop.SQL 的資料後，會

看到“movieshop”資料庫只有一個表格：“movie”。

而“movie”表格內的欄位定義如下：

只有一個表格

13-8


資料已經建好了，全部共有 40筆

“movie”表格裡已事先建好 40 筆影片資料記錄，方便讀者測試資料分頁的效果。

13-1-3 MySQL 資料庫連線

這一章剛開始曾提過為何要建立連到 MySQL 資料庫的資料庫連線(Database Connection)。因為整個網站只會用到一個資料庫：movieshop，所以只要建立一個

連到 movieshop 資料庫的連線就可以了，後面幾章的實例也是一樣。

「資料庫」視窗中，按下鈕，為目前編輯的網站建立一個新的資料庫

連線：

如果面板上的東西太多，可以從「視窗」選單中選取「資料庫」，就可以停

留在「資料庫」分頁上。要顯示其它的分頁也是同樣的作法。

13

13-9


2. 選取要連線的資料庫

按照以下畫面的說明設好資料庫連線，可以按「選取」鈕從伺服器上所有的

資料庫中選取要連線的資料庫。

所謂建立資料庫連線，就是將連上某個資料庫所需的資訊事先定義好，包

括：要連上哪一個 MySQL 伺服器、資料庫名稱，以及 MySQL 資料庫的

使用者名稱和密碼。

在下一章的其他實例中，只要視需要更改連線名稱以及所連結的資料庫名稱

即可，將不再說明設定畫面，而會直接以表格說明資料庫連線的各欄位設定

值，例如這個例子的設定如下：

1. 按選取鈕

13-10


1. 按測試鈕

2. 確定可以連線成功

3. 測試無誤後按確定鈕建立資料庫連線

1. 雙擊滑鼠

2. 可以修改設定

欄位設定值連線名稱 dbconn_movieshop

MySQL 伺服器 localhost

使用者名稱 root 或一般使用者帳號

密碼 root 或一般使用者帳號

資料庫 movieshop

設定完後可以先按「測試」鈕測試看看目前的設定是否可以成功連線到資料

庫。若不成功可能是帳號或密碼輸入錯誤。測試成功後再按「確定」鈕，建

立這個資料庫連線。

一旦完成資料庫連線的建立，就會在「資料庫」和「檔案」分頁上看得到多

出了一個“dbconn_movieshop ”的資料庫連線了。若要修改這個資料庫連

線的設定，只要雙擊滑鼠就可以修改它。

13

13-11


這些都是剛才建立資

料庫連結時的設定

雙擊滑鼠開啟檔案

另外，建立資料庫連線之後，也會自動在網站主目錄下產生一個

“Connections”子目錄，從「檔案」面板中就可以看得到它。“Connections”

子目錄下會產生一個以資料庫連線名稱為主檔名的 .php 檔，例如：

dbconn_movieshop.php。在「檔案」面板中雙擊滑鼠就以開啟這個檔案內容。

按鈕切換到程式碼模式，從程式碼可以看到它定義了幾個以

$hostname_、$database_、$username_、$password_ 為開頭，而後面接著資

料庫連線名稱（dbconn_movieshop）的變數。事實上就是把我們在建立資料

庫連線時所填入的 MySQL 伺服器、資料庫名稱、帳號和密碼…等的設定變

成程式碼的一部份。

如果接下來在這個網站內還有其他網頁也要利用這個資料庫連線來建立資

料集之後，那麼在該網頁的程式碼最開頭將會自動加入下列這一行指令：

<?php require_once ('Connections/dbconn_movieshop.php' ); ?>

也就是說，這個定義資料庫連線的 .php 檔案會自動被引入到用到它的其它

網頁裡，讓該網頁可以透過這個資料庫連線來存取資料。不過要查詢表格裡

的資料，還得要再建立資料集才能夠實際存取表格裡的資料。關於資料集的

建立，將在下一節中介紹。

13-12


13-2 檢視資料

現在請先開啟 index.php，要開始為首頁的表格欄位設定它所要顯示資料的來源。

13-2-1 建立資料集

首先，要先建立一個資料集（Recordset），它就像是下 Select SQL 指令查詢所得

到的結果一樣。可以把資料集想像成和表格一樣，是由許多筆記錄（Record）和

欄位（Field）組成。在定義資料集的時候，也可以指定篩選的條件。譬如：若希

望網頁上只顯示所有的新片，可以將篩選條件設為：“oldnewtype”欄位的是新

片”。另外，定義資料集時也可以指定資料的排序欄位和排序方式（遞增或遞減）。

說穿了，當你在建一個資料集時，就想像成是在下 Select 指令一樣。在 Dreamweaver 上新增資料集時，雖然有介面供使用者設定資料篩選條件和排序方

式，但它最終目的是要兜成一整串 Select 指令供程式執行。而且若遇到比較複雜

的篩選條件，或是需要用到兩個以上的表格合併條件，這個時候還是得靠自己將 Select 指令完成才行。

現在我們要在首頁的表格上，顯示影片的主要幾個欄位內容，包括：片名、導演、

演員、新舊片及發行日期，而顯示時要將最新發行的影片排在最前面。

切換到「繫結」分頁。按下鈕，點選下

方的「資料集（查詢）」，便出現「資料集」

視窗。

在「資料集」視窗中輸入新建資料集的定義：

「名稱」欄位填入新建資料集的名稱：rs_movie。

「連線」欄位設為在前一節中已設好的唯一一個資料庫連線：

dbconn_movieshop。

13

13-13


「表格」欄位中可直接輸入要讀取的資料表格名稱：movie。另外，因為剛

已選擇資料庫連線的名稱，這時按下右邊的鈕會出現 dbconn_movieshop

所連結的資料庫 movieshop 中的所有的表格供直接選取。只是目前資料庫

movieshop 當中只有一個表格：movie，所以表格下拉選單也就只有 movie 一

個表格。如果這時發現顯示出來的表格名稱都不對，很可能是在前一節設定

資料庫連線時就選錯了資料庫名稱，要回頭修改好再繼續。

「欄」的部份是在設定要從表格中擷取的欄位，相當於在 Select 指令中指定

的欄位列表。因為在首頁沒有要將所有欄位都列出來，選擇“選取”，然後

選取 id、title、director、actor、oldnewtype、issuedate、lengthmin 欄位。若

要選取多個欄位，可按下「Ctrl」鍵不放同時再逐一選取欄位。如果要選的

是連續欄位，可以按下「Shift」鍵不放，然後在起始的欄位各按一下滑鼠即

可將範圍內的欄位全部選取。

如果在網頁上有些欄位用不到，在設資料集時選“全選”欄位（相當於下

select * from .... 指令），其實也不會怎麼樣，只是多擷取出來的欄位沒有被

顯示出來而已。但如果表格的資料筆數很多，Select 少數欄位和全部欄位

（Select *）就會影響到執行的速度了。

「篩選器」的部份，相當於在 Select 指令中指定的 where 條件。因首頁要

顯示所有的影片，所以選“無”，也就是不設任何資料記錄的篩選條件。

按「Ctrl」鍵不放選取多個欄位

13-14


按簡單鈕回簡單

設定畫面

這是進階設定畫面

「排序」的地方，相當於在 Select 指令中指定的 order by 子句。因為要將

發行日期較晚的新片顯示在前面，所以選擇“issuedate”欄位，後面再選“遞

減”，表示顯示資料時要依“issuedate”欄位遞減。

在定義好資料集之後，可以按鈕來查看目前根據設定的選項所

產生出來的 Select 指令。對於已經習慣看 Select 語法的讀者來說，這是方

便檢查目前資料集的欄位、篩選條件和排序方式是否正確的很好途徑。

目前它所產生的 Select 指令應該是：

SELECT id, title, director, actor, oldnewtype, issuedate, lengthmin FROM movie ORDER BY issuedate DESC

按鈕可以回到前一個簡單設定資料集的畫面。

13

13-15


測試資料集的結果

最後按鈕，會出現「測試 SQL 指令」的視窗。它顯示的就是

依照目前資料集的定義所執行出來的結果，也就是 Select 指令查詢的結

果。它列出來的欄位就是在定義資料集時有選取到的欄位才會顯示出來。至

於排序方式則是發行日期較晚，也就是較新的片子放在較前面。

讀者可以試試加入別的篩選條件或再加其他的排序欄位。不過，這時要按

鈕才能做這些較複雜的修改。可以直接在 SQL 的地方做修改。

同樣的，修改完後再按鈕，可以檢查自己下的 SQL 指令是否

正確，只要正確就可以看到更改篩選條件後的資料集內容。

在進階的設定畫面修改成

較複雜的條件和排序方式

再看最新的資

料集的結果

13-16


資料集的結果有改變

了，資料筆數變少了!

知道進階模式是怎麼一回事之後，記得將條件和排序方式更改回來再繼續。

確定設的資料集無誤，最後按「確定」鈕，資料集的建立就完成了。這時在

「繫結」分頁上可以看到新建的資料集“rs_movie”和它所包含的幾個欄位

名稱。待會要為首頁中的表格欄位設定它們的資料來源，就會用得到這些在

資料集中的欄位了。

切換到程式碼模式來看看它所產生的程式碼：

資料集的欄位

13

13-17


1. 拖曳資料集的 title欄位到表格中再放開滑

第 1 行也就是引入定義資料庫連線的 dbconn_movieshop.php 程式。

第 34 行 mysql_select_db 是在切換作用的資料庫。

第 35 行 $query_rs_movie 變數的內容是資料集的 SQL 指令。

第 36 行 mysql_query 是對資料庫執行 SQL 指令，結果傳回到 $rs_movie ，

rs_movie 是我們所定義的資料集名稱，屬於資料型態。要取得資料集某個欄

位的值，要用 $row_rs_movie[‘欄位名稱’]的格式。

第 37 行 mysql_fetch_assoc 是將資料集的內容轉換成陣列形式。

第 38 行 mysql_num_rows 是在取得資料集的記錄筆數。

13-2-2 設定顯示欄位的資料來源

在 index.php 網頁中，表格裡有兩列儲存格，第一列是欄位的標題文字，第二列

的內容則是要先擷取資料庫中表格的資料，再顯示於此。現在要為第二列的六個

要顯示資料的欄位設好它的資料來源（資料集裡只有 ID 欄位不需顯示出來）。

在「繫結」分頁上，先選取“title”欄位，然後按住滑鼠不放，拖曳到網頁

表格的“片名”資料欄位再放開滑鼠。放開滑鼠後，會看到“片名”欄位裡

出現了 {rs_movie.title}，這代表這個欄位的資料來源是 rs_movie 資料集裡

的 title 欄位值。

13-18


只會顯示資料集的第一筆記錄

接下來把剩餘的導演、演員、新舊片、發行日期欄位，用同樣的方法將它們

的來源設為 rs_movie 資料集裡的 director、actor、oldnewtype、issuedate、

lengthmin 欄位。設定好之後，欄位裡都會出現 {資料集名稱.資料集欄位名

稱} 的形式，例如：{rs_movie.director}、{rs_movie.actor}…等。

細心的讀者可能發現到為何 id 欄位不需在網頁上顯示出來，卻又加在資料

集內。別擔心，後面會有需要它的地方，即使不顯示出來現在還是必須先將

它加入資料集。

按下鈕瀏覽網頁，可以看到表格的第二列顯示影片的資料了。不過，

因為目前我們還沒設重複區域，所以它只能顯示 rs_movie 資料集的第一筆

記錄而已。

如果你的表格資料呈現亂碼，請在 dbconn_movieshop.php 中加入一行程

式碼：

mysql_query ("SET NAMES 'UTF8'");

2. 放開滑鼠後表格欄位出現 {rs_movie.title}

13

13-19


13-2-3 重複區域

剛才我們已經做到可以在網頁裡顯示第一筆記錄了，不過資料集裡可能並不只有

一筆記錄，事實上大於一筆記錄的情況還是較常發生的。為了將資料集裡每一筆

記錄通通都顯示出來，要將表格裡資料會重複的部份設為重複區域。這個設定一

點也不難！

因為要重複的部份是在表格的第二列，也就是真正顯示資料內容的地方，所

以現在要將表格的第二列整個選取起來。注意若要確認選取的是否是表格的

一列，只要看在工作視窗左下角所顯示的目前所在標籤是不是 <tr> 就可以

了。因為表格的一列是以 <tr> 這個 HTML 標籤開頭，以 </tr> 結尾。

在「伺服器行為」分頁上，按鈕，點選「重複區域」。

選取一整列

注意標籤是 <tr>

13-20


在「重複區域」視窗中，首先將「資料集」設為要重覆顯示資料

的資料集： rs_movie。若之後網頁的頁面上有更多的資料區域，

有可能各自要用到的資料集會不同，選擇資料集時就要特別注意

以免選錯。

至於「顯示」則是在設網頁上一頁最多可顯示幾筆記錄。在這裡

我們先設“10”筆記錄，再按「確定」鈕。「伺服器行為」分頁會

多一個「重複區域」項目，而文件視窗中表格第二列上方也多了

灰底白字“重複”的字樣。

再按下鈕瀏覽網頁，可以看到表格裡顯示 rs_movie 資料集

的前 10 筆記錄了。因為剛才設一次顯示“10”筆記錄，所以就

算資料集裡的記錄超過 10 筆，一次也只會顯示 10 筆記錄因為還

沒有做分頁顯示的處理，也沒辦法看到其他頁的資料，所以目前

只能顯示前 10 筆記錄內容了。

13

13-21


可以顯示 10筆記錄了

讀者可以試試若回頭修改重複區域的設定，改為一次顯示所有記錄結果會怎

樣。要修改已經設好的像「重複區域」這樣的伺服器行為，只要在「伺服器

行為」分頁上，在剛才建立的“重複區域”項目上雙擊滑鼠就會開啟視窗叫

出之前“重複區域”的設定，然後再加以修改。如果改設為“所有記錄”，

就會一次把所有 40 筆的記錄通通顯示在網頁上，可以用瀏覽器的垂直捲軸

往下捲以便看後面的資料。

資料庫網站實例 1 - 碁峰資訊epaper.gotop.com.tw/pdf/ael008400.pdf · 13-2 php+mysql...

Documents