互动留言版的制作课件

1、準備互動網站的執行環境將電腦架設為網站伺服器定義一個互動網站建立一個資料庫在網頁中連結資料庫張貼留言的網頁製作瀏覽留言的網頁製作瀏覽留言版成品將完成的作品套入範本15互動留言版的製作第1页，共39页。15-1-1 選擇 ASP 的原因本書選擇 ASP 為執行網站程式的互動環境，原因如下：只要作業系統是 Windows 2000、Windows XP Professional、Windwos Vista 或 Windows Server.等平台，即可使用內建的網站伺服器 IIS 執行程式。ASP 的程式在目前的發展上資源最為成熟，可以獲得的資訊也最充足。Dreamweaver 的擴充功能，對於

2、ASP 的支援極為豐富，可以在撰寫程式的過程享受這樣便利。如果只安裝了 Dreamweaver，沒有安裝任何的伺服器軟體，那麼所能達到的效果，只能製作靜態的網頁。因為沒有網站伺服器環境，是無法發揮 Dreamweaver 編輯互動網頁的強大功效。15-1 準備互動網站的執行環境第2页，共39页。15-1-2 選擇網站伺服器軟體ASP 程式必須要在支援 ASP 的網站伺服器上才能運作，不能直接選按網頁執行瀏覽。所以在開發程式前，可以將自己的電腦架設成一個網站伺服器以利編輯。下面表格內是各種適用於微軟視窗作業平台的伺服器軟體，它們可以將電腦模擬為網站伺服器：第3页，共39页。15-1-3 如何取得

3、這些伺服器軟體？許多讀者感覺最痛苦的事，就是不知從何取得這些伺服器軟體。其實這些軟體可能就在手上，只是大家不知道而已！Windows 2000 Professional / Server 作業系統內建 IIS 5.0，Windwos 2003 Server 作業系統內建 IIS 6，可以透過 控制台 新增移除程式 進行安裝。Windwos XP Professional 作業系統內建 IIS 5.1，可以透過 控制台 新增移除程式 進行安裝。Windwos Vista Business、Ultimate 及 Enterprise 作業系統內建 IIS 7，可以透過 控制台 程式集 進行安裝。第

4、4页，共39页。15-2-1 在 Windows XP 中安裝及管理 IIS其實如果使用的是 Windows 2000 Server 的話，IIS 的安裝是預設選項，所以並不需要重新安裝。但是如果使用的系統是 Windows 2000 Professional、Windows XP Professional 或 Windows Server 2003 的話，IIS 就並非預設選項了。無論有沒有安裝 IIS，以下將介紹如何在 Windows XP Professional 的系統中安裝 IIS，這個步驟在上述其他的作業系統中除了 Vista 之外，是大致相同的。取得網站伺服器軟體之後，接著就要將

5、電腦上架設，如此一來才能在本機模擬網站空間的環境，進行互動程式的開發。以下將針對不同系統的環境，介紹如何安裝設定網站伺服器的環境15-2 將電腦架設為網站伺服器第5页，共39页。新增安裝 IIS請選按 開始 控制台 進入 控制台 視窗，於 新增移除程式 圖示連按二下滑鼠左鍵進入設定。使用及管理 IIS在系統安裝完 IIS 之後，要如何使用及管理呢？請選按 開始 控制台 進入 控制台 視窗進行設定。第6页，共39页。15-2-2 在 Windows Vista 中安裝及管理 IIS在 Windows Vista 作業系統中只有 Windwos Vista Business、Ultimate 及

6、Enterprise 三個版本內建 IIS 7。IIS 並不是預設的安裝項目，如果要在上述三個版本中使用就必須要自行安裝。其安裝的步驟及流程如下 ：新增安裝 IIS 7請選按 開始 控制台 進入 控制台 視窗：使用及管理 IIS7在系統安裝完 IIS7 之後，要如何使用及管理呢？請選按 開始 控制台 進入 控制台 視窗設定：第7页，共39页。15-2-3 測試網站伺服器在安裝了伺服器軟體後，系統會替電腦啟動一個網站伺服器的服務，只要有其他主機藉由瀏覽器來查詢這台電腦時，主機會藉由這個服務，將本機設定的網頁送到對方的瀏覽器上供人瀏覽。製作一個簡單的網頁這裡將要實際製作一個網頁，放置在本機的預設目

7、錄上，試試看有沒有辦法使用瀏覽器來瀏覽。請選按 開始 所有程式 附屬應用程式 記事本，先使用記事本製作一個單純的網頁來測試，然後請依右圖將 HTML 碼一一輸入。第8页，共39页。將網頁儲存在網站目錄中瀏覽完成了網頁的製作後，接下來只要將這個檔案儲存在本機的網站根目錄中，即可使用瀏覽器瀏覽網頁。但是關鍵的問題來了，本機的網站根目錄在什麼地方呢？在 IIS 裡設定網站的實際磁碟路徑，預設是放置在 中，而目前這個路徑，就是本機的網站根目錄。第9页，共39页。15-3-1 定義動態網站的重要性在本書前面的部份所製作的網頁是沒有互動功能，所以在定義網站時並不需要針對伺服器與程式搭配傷腦筋。但是現在要為

8、原來的網站加上互動的功能，就必須要對網站重新定義，讓 Dreamweaver 所產生的程式碼可以與伺服器配合。所以可要注意以下的每一個細節，它可是建立互動網站的基本功夫，也是最重要的環節喔！在邁向互動網頁之前能夠先熟悉 Dreamweaver 製作互動網頁的流程，那麼在往後遇到更複雜的情況也不會手忙腳亂、無所適從。定義互動網站是開發動作的開始，很基礎也很重要。15-3 定義一個互動網站第10页，共39页。在 Dreamweaver 中不是一開啟軟體，就開始做網頁，寫程式。其實第一個動作是要定義所製作的網站，為什要那麼麻煩呢？簡單的分析原因有以下三點：將整個網站視為一個單位來定義，清楚整理出整個

9、網站的架構，檔案的配置與使用的資源，可以很清楚的掌握所有網頁之間的關聯。使用這樣的觀念定義多個網站，在同一個環境中，建置多個不同的網站。在 Dreamweaver 中定義網站的動作更為重要，因為多了一項測試伺服器的設定。 在製作網站前先設定該網站所使用的程式語言及資料庫，並測試所安裝的環境與程式之間的搭配情形；如此一來即可以讓網頁連結到測試伺服器裡的資料庫，除了可以在編輯的畫面中預覽資料庫中的資料，並且可以開啟瀏覽器來執行。第11页，共39页。15-3-2 設定網站伺服器設定網站伺服器是所有互動網頁撰寫前的第一個動作，因為動態的資料必須要經由網站伺服器的服務才能運作，許多人都會忽略這個動作，以

10、致於程式無法執行或是出現惱人的錯誤。整理製作範例的網站資訊在開始操作之前，請先養成一個習慣，將所要製作的網站資訊以表格列示，再按表施工，如此不僅可以讓網站內的資料井井有條，也讓未來在維護時能夠更快的掌握網站內的情況，詳細資訊如下：第12页，共39页。複製本章範例檔安裝完 IIS 後系統預設網站伺服器根目錄在 ，所以製作本章範例之前，必須先將整個網站資料夾複製到網站伺服器根目錄中。目前範例的規劃與原來不同：要將互動交流的單元 更換為留言版程式 。目前只剩下本章要製作的程式檔 與 是未完成檔。除此之外，因為互動程式必須使用到資料庫，所以會有一個 資料夾放置資料庫檔案：。複製好檔案後，即可進行網站定

11、義的動作。第13页，共39页。重新定義網站請準備好先前的網站程式基本資料表重新定義網站，首先請進入 Dreamweaver 後選按功能表列 網站 管理網站 開啟對話方塊。選按 映象東京 後按 編輯 鈕進行重新定義網站。第14页，共39页。15-4-1 資料庫的原理在 Dreamweaver 中可以連結的資料庫類型相當多，舉凡資料庫的老祖宗 dBase，到目前市場上的主流 Access、SQLserver、MySQL、Oracle.等都能夠使用。在這裡挑選使用最簡單、最普遍的資料庫 Access 說明，或許 Access 不適合當作大型資料庫網站的使用，但是對於小型的網站來說應該是綽綽有餘了。以

12、下將以 Access 為範例，製作一個完整的資料庫，再將它連結到網頁當中。要使網站達到互動效果，不是讓網頁充滿動畫、音樂，而是當瀏覽者對網頁提出要求時能出現回應結果。而這樣的效果，大多必須搭配資料庫使用。15-4 建立一個資料庫第15页，共39页。15-4-2 檢視資料庫的內容這裡將使用範例的資料庫檔案 進行說明：檢視資料表欄位內容進入資料庫之後，目前已經建立好資料表 board，這裡資料表即是要儲存留言版中的留言資料。第16页，共39页。關於資料類型的選擇每個資料欄位都要考量儲存資料的特性，選擇適當的資料類型。以下是常見的資料欄位類型與說明：第17页，共39页。資料欄位的命名原則這是一個相當

13、重要的問題，在撰寫程式時常會出現一些找不出原因的錯誤，最後查出結果都是因為資料庫欄位命名影響的結果！以下將分享幾項資料欄位命名的注意事項與原則，請千萬要遵守喔！利用中文為欄位命名，往往會造成資料庫連結時的錯誤，也影響程式的撰寫，使用英文的資料表欄位才是建議的命名原則。如果使用英文當作資料庫欄位的名稱，也要注意不可以使用到程式碼的內建函數名稱及保留字！例如有許多人常會利用 VBScript 的內建函數：time、date 當作欄位的名稱，就會讓程式在連接資料庫時發生錯誤。在資料庫欄位中不可以使用一些特殊符號，如 ?、!、% 或是空白字元.等。第18页，共39页。資料表欄位資訊整理這裡將 boar

14、d 資料表內的欄位設定值整理下：第19页，共39页。其中有幾個重點要注意：在所有欄位中，務必要設定一欄來作為 主索引欄位，所謂主索引欄位就是每一筆資料都不能重複的欄位，通常就設這個欄位類別為 自動編號。例如：預設 boardid 為 主索引欄位，請先選按這個欄位，選按工具列上的 主索引 鈕在欄位前會出現一個鑰匙符號，這個欄位就被設定為主索引欄位。自動編號 類型的欄位是不允許修改或是新增該欄位中的值，當新增資料時該欄位會自動為資料以流水號編入。如果其中有刪除某一筆資料，該資料所使用的編號也不會再被系統提出再用，這是較重要的地方。在文字類型的欄位中，有 必須有資料 及 允許零長度字串 的選項，如果

15、這個欄位並不一定會存入資料，例如 boardmail 這個欄位可能並不是每個人都有，那麼就應該將 必須有資料 設定為 否，允許零長度字串 設定為 是。第20页，共39页。在 Microsoft Access 中加入資料請選按資料表 board 後按一下滑鼠右鍵，選按 開啟 即可看到目前的資料內容，在原來的範例中已經先加入了一些資料。第21页，共39页。15-5-1 網頁取得資料庫的步驟在撰寫互動程式連結資料庫時，程式開發人員只要依循下列的步驟，即可以順利獲得資料庫中的資源：建立連線 (Connection) 物件設定資料來源。建立資料集 (Recordset) 物件並進行相關的記錄操作。關閉資

16、料庫連線並清除所有物件。一個互動網頁的呈現，說穿了就是將資料庫整理的結果顯示在網頁上，所以如何在網頁中連結到資料庫，並讀出資料顯示，甚至寫入資料來更改，就是一個很大的重點。15-5 在網頁中連結資料庫第22页，共39页。15-5-2 建立資料庫的連線網頁若要使用到資料庫裡的資源，首先便是要建立資料庫連線 (Connection) 物件，方法呢？便是設定資料庫的來源，如此一來便能順利與資料庫取得連繫，建立連線。選擇建立資料庫連線的方式在 Dreamweaver 中 ASP 有二種方式可以與資料庫取得連線：資料來源名稱 (DSN)：DSN (Data Source Name)，就是利用系統中的 O

17、DBC 管理員設定資料來源名稱，即能連結到需要的資料庫。自訂連線字串：一般也稱為 DSN_less，就是設定連結的字串設定驅動程式，直接透過 ODBC 連結到資料庫。第23页，共39页。設定自訂連線字串的資料庫連線方式在設定資料庫連線時，一定要開啟程式頁面，否則無法進行設定。另外，設定連線某個資料庫檔案的動作，整個網站中只要設定一次，其他的程式頁面可以一起使用。請進入映象東京範例網站，開啟 檔案，接著要新增一個連線讓頁面可以使用網站的資料庫 中的資源：最重要的是設定 連線字串 的欄位，可以使用字串的設定直接透過 ADO 的幫助來連結資料庫，它常使用的格式如下：第24页，共39页。以目前範例為例

18、， 放置位置為 ，輸入的連線字串可以為：完成連結設定，即可在 資料庫 面板中看到連結進來的資料庫內容。第25页，共39页。15-6-1 檢查表單的內容請開啟 ，為了製作方便已經先將必要的表單佈置在版面上。其中有些地方是要特別注意的：為了配合資料庫的使用，每個表單欄位都是以英文命名，而且與要插入到資料庫中欄位的名稱相同。如果對於表單的佈置還不熟，可以參考第 10 章的內容。留言版的內容是由瀏覽者由網頁的表單中輸入資料，再送到程式頁面進行資料庫的寫入動作。在本頁的製作中表單的佈置與插入資料的伺服器行為是製作的重點。15-6 張貼留言的網頁製作第26页，共39页。15-6-2 設定插入記錄伺服器行為

19、如果想要在填寫完表單後將資料新增到資料表中，這就必須使用到 伺服器行為 面板。在這個面板中有許多功能，能夠控制資料表中的資料，所以十分重要，先來介紹如何將表單中的記錄插入到資料表中吧！第27页，共39页。15-7-1 資料集的繫結請開啟 ，在這個頁面中已經先將大概的版面都製作完成，以下的動作就是連結資料庫，將要顯示的資料欄位放置到適當的位置即可。首先要將資料表中需要顯示的資料繫結進來形成資料集，這個動作相當的重要，請一定要注意下列的步驟喔！留言完畢當然希望可以看到留言的結果，接下來就要製作瀏覽留言的網頁。繫結資料集、佈置顯示欄位、設定重複區域及加入資料集狀態、導覽列是重要的學習要點。15-7

20、瀏覽留言的網頁製作第28页，共39页。15-7-2 插入顯示的資料欄位以欄位資料顯示文字現在可以把資料集中的欄位拖曳到網頁上顯示：第29页，共39页。以欄位資料顯示圖片留言版中的留言人性別是使用圖示來顯示，在表單中性別欄位所送出的是圖片檔名，表示這裡是要將顯示圖片依資料欄位的值進行變化。第30页，共39页。以欄位資料設定超連結在網頁上最常使用的超連結為網頁超連結及電子郵件超連結，在留言版中分別有二個欄位顯示，希望瀏覽人在按這兩個欄位時可以連結留言人的個人網頁或是寫電子郵件給留言人，現在就要使用這二個欄位配合資料欄位來設定超連結。第31页，共39页。15-7-3 設定重複區域製作到現在，預覽時只能看到一筆資料，如果要看到更多筆資料必須設定重複區域。第32页，共39页。15-7-4 加入資料集導覽狀態及資料集導覽列是否想要知道目前共有幾筆留言，目前頁面上顯示的又是幾筆到第幾筆呢？此時可以在頁面加入 資料集導覽狀態。加入資料集導覽狀