搭配資料庫之網頁 Flash 動畫設計 師大附中李啟龍 除了網頁與美工設計等基礎設計外, 在目前 Web2.0 盛行的情況下, 大部分的網頁都會希望有互動的功能存在, 也就是使用者可以在線上輸入您的資料或是可以在線上查詢各種相關資訊等等 如何設計 Flash CS4 動畫來存取資料庫的資料呢? 本文將會跟您提到如何使用 Dreamweaver 以 PHP 為設計基礎, 搭配 MySQL 資料庫使用, 並且會利用 Flash 來示範如何將資料庫的資訊放到動畫當中, 也就是在 Flash 動畫中, 去呼叫 MySQL 資料庫的內容, 並將之顯示到 Flash 動畫中若您之前沒有學過任何程式語言的話, 別擔心! 在本文中, 您絕對不會碰到任何互動網頁語言的撰寫, 一切的事情將會由 Dreamweaver 和 Flash 來為您完成 安裝 AppServ 在此我們使用網路上已經包裝好的套件 AppServ 來當作示範,AppServ 套件將相關的資料庫軟體整合在一起 ; 若您想要自行安裝相關軟體的話, 請您必須要安裝 Apache HTTP Server MySQL PHP 與 phpmyadmin 等四套軟體 首先, 請您先使用搜尋引擎, 以關鍵字 appserv 找到下載網頁, 或是直接到 此網址 :http://www.appservnetwork.com/ 來下載 AppServ Open Project 的 網頁如下所示 : 下載 AppServ 2.5.10 版套件或 2.6.0 版套件都可以, 在此我們以 2.5.10 版本 做範例, 下載完畢後請您執行該檔案, 會出現如下安裝介面 請您點選 Next 按鈕, 進入設定頁面 1
設定頁面如下, 在此選擇您欲安裝的位置, 選擇好後點選 Next 按鈕以進 行下一步安裝 在此選擇你想要安裝哪些軟體, 您可以依照自己的習慣來安裝 在此我們選 擇全部都安裝, 因為每一套軟體隨後都會使用到, 選取好後點選 Next 按 鈕以進行下一步設定 2
此處需輸入您的 Server Name 與 Email, 您可以依照自己的需求來輸入 比較該注意的是 Apache HTTP Port 部分, 系統初始設定值為 80, 但是為了防止這個 port, 已經被作業系統或是其他軟體所使用, 導致日後您的 Apache 網頁伺服器開不起來, 建議您使用超過 1024 以上的 port 數值來設定, 在此我們使用 8080 做為預設 port, 確定後點選 Next 按鈕以進行下一步 接著您需要輸入 MySQL 資料庫的 root 密碼, 即資料庫最大權限管理員的密 碼, 請您不要使用過於簡單的密碼 ( 如 :1234), 當作您的 root 密碼, 因為這 3
對您的資料安全將非常沒有保障 ; 其他部分的設定就維持原狀, 點選 Install 按鈕以進行安裝 安裝過程如下 安裝好後程式會問您是否要啟動 Apache 與 MySQL 軟體, 在此我們選擇都要 啟動, 然下按下 Finish 按鈕, 以完成安裝 4
接著我們來檢查一下 Apache 是否有安裝成功, 請您開啟瀏覽器, 並且在網 址列輸入 http://127.0.0.1:8080 或是 http://localhost:8080, 若您出現以下畫 面, 則表示 AppServ 安裝成功並且啟動了! 5
基本資料庫操作 在此我們使用 AppServ 內建的 phpmyadmin 來當作我們的 MySQL 資料庫操作介面, 請您移到在上一節我們測試是否安裝成功的頁面當中, 點選上方的 phpmyadmin Database Manager Version 2.10.3 連結以進入操作介面 點選後系統會要求您輸入帳號密碼, 請您在帳號部分輸入 root, 密碼輸入您 在安裝時設定的密碼 帳號與密碼輸入正確後, 會出現如下畫面, 即表示您成功登入 phpmyadmin 資料庫管理介面了 PS: 在正式運作的資料庫當中, 我們不建議您經常使用 root 帳號登入 建議您在所有設定皆完成後, 開啟一個您自己專屬的帳號來登入, 以及開啟一個帳號供日後網頁程式使用 因為我們為教學示範使用, 為了減少您的困擾, 我們通通使用 root 以做為登入帳號 6
您可以看看左邊的下拉式選單, 可以見到目前已經開啟的資料庫 或者您可以在主畫面當中, 自行建立一個資料庫 在此我們使用 test 資料庫做為示範, 請您在左邊下拉式選單當中, 選擇 test 資料庫, 接著會出現如下畫面 這表示在這個資料庫當中, 您並沒有建立任何一個資料表, 因此我們需要建 立一個資料表, 才能存放資料, 請您在主畫面當中找到建立新資料表的區 塊, 輸入資料表名稱 testtable 與欄位數目 3, 然後點選 執行 按鈕 在此您可以輸入您要的欄位與型態等等資訊, 建議您新增資料表時, 欄位請填您欲申請的欄位數 +1, 因為要多一個欄位做為主索引, 提供資料庫做搜尋使用 ( 即您希望開通 3 個欄位, 則請您輸入 4 個欄位 ) 在第一個資料欄位當中請您將 型態 選為 INT, 並且在 附加 部分選擇 auto_increment, 7
並且勾選起 主索引 選項, 資料表在有資料新增時會自動處理新資料的編 號, 輸入好資料後請您點選 儲存 按鈕 完成資料表的設定後, 會跳到以下畫面 這表示您的資料表已經建立完成了, 您可以選擇上方的 結構 選項, 來觀 看資料表狀態 或者可以點選 瀏覽 選項, 來觀看這個資料表的資料 這時您會發現如下畫面, 這是因為您的資料表當中, 目前並沒有任何資料, 所以我們現在來為這個資料表新增資料吧! 8
請您點選上方的 新增 選項 接著會出現如下畫面 在此請您填入適當的資料, 並且保持主索引空白, 確 定後點選 執行 按鈕 看到如下畫面就表示您這筆資料已經新增成功了! 您可以使用上方選項的 瀏覽 選項, 來看看我們剛剛新增的資料是否正確 此時可以發現到我們剛剛新增的資料已經正確地加入資料表中, 並且已經自 動編號為 1 號 若您發現資料有誤的話, 可以在資料筆數的前面找到一個小的筆狀工具, 點 選筆狀工具可以進行編輯, 修改此筆資料的內容 9
我們可以依照上面的方法多新增幾筆資料, 您會發現每一筆資料, 資料庫都 會自動幫您把編號完成 10
利用 Dreamweaver 製作動態網頁 資料庫與資料都建立完成之後, 我們可以利用 Dreamweaver 來擷取這些資料到我們所設計的網頁當中! 現在請您開啟 Dreamweaver 並且新增一個網站 記得將您的網站設定到 Apache 預設擷取網頁的地方, 然後再新增一個您自己擺網頁的資料夾 並且將 測試伺服器 中的 伺服器模式, 修改為 PHP MySQL 模式 11
接著我們開啟一個新的檔案, 將頁面類型選擇為 PHP 模式 檔案開啟後, 現在我們要叫出可以連線資料庫的浮動視窗出來, 請您選取上 方工具列的, 並且選擇 資料庫 選項 12
這時您會在右邊的浮動視窗區塊, 發現一個剛開啟好的視窗如下 在這視窗當中,Dreamweaver 很貼心的以條列式的方式, 列出我們還需要做哪些事情才可以正確連線, 目前我們已經完成前兩項了, 現在我們點選第三項 測試伺服器 來做處理 點選後會出現剛剛調整伺服器模式一樣的視窗 是的! 這表示我們剛剛並未完成相關設定 請您在此視窗當中, 將 存取 部分選擇到 本機 / 區域網路 選項, 因為目前我們的測試伺服器是架設在電腦本機端的, 並且將 測試伺服器資料夾 設定到 Apache 預設的連結位置 : X:\AppServ\www (X 表示您當初安裝 AppServ 的磁碟位置 ) 13
完成後會看到如下畫面, 會發現在第三項的部分, 因為完成各項設定, Dreamweaver 也已經幫我們打勾了 好了! 在完成基本的連線設定後, 我們可以開始跟 MySQL 資料庫做連線 了, 請您選取上方的加號並且選取 MySQL 連線 14
開啟後會見到如下視窗, 請您在這邊輸入您剛剛安裝好的 MySQL 資料庫相 關設定, 並且在資料庫選項中按下 選取 按鈕 資料輸入正確的話, 您將會看到如下的選取視窗, 若輸入錯誤,Dreamweaver 將會跟您提示哪邊需要修正資料 現在我們選取剛剛設定好的 test 資料庫, 並且按下 確定 按鈕 您也可以試著在連線視窗中點選 測試 鈕, 來測試看看連線是否正確, 若 資料庫連線正確, 將會出現如下的彈出視窗 所有設定都完成之後, 請點選 15
確定 按鈕, 此時在資料庫的部分已經可以看到我們剛剛所設定的資料庫內容了, 您也可 以在這邊對資料庫做修正, 這些都是 Dreamweaver 內建的功能, 現在我們 將畫面切換到 伺服器行為 頁籤 在 伺服器行為 部分, 請您點選上方的加號, 並且選擇 資料集 選項 資料集是擷取資料庫一筆資料的接收器, 我們後面將會教您如何使用資料集 功能來顯示資料內容 點選後會出現如下的新增視窗, 您可以在這邊編寫任何的擷取條件 我們在 16
此將 篩選器 設定為自動編號 (oid) 為 1 的資料, 即第一筆資料, 然後按下 確定 鈕結束視窗 或者您對於 SQL 語法較熟悉的話, 您也可以點選 進階 選項, 來做更進一 步的設定, 不過對於一般的初學者, 我們還是建議您使用 簡單 選項即可 新增好資料集後, 我們就可以使用這些資料集來做資料庫的操作動作了 一 樣, 請您在 伺服器行為 上點選加號, 然後選擇 動態文字 選項 17
接著您可以在如下的視窗中, 選擇要顯示資料集中的哪一筆資料, 此次我們 選擇 name 選項 此時您可以在 設計 畫面當中, 看到有出現動態文字的顯示位置, 此時表 示此動態文字會抓出資料庫中的 name 欄位資料 我們使用一樣的設定方法, 也完成存取資料庫之動態文字 email 欄位的部 分, 完成後請存檔, 並且將檔名存成 index.php 18
最後, 我們使用瀏覽器輸入 : http://127.0.0.1:8080/test/index.php 來觀看 網頁之狀況, 您會發現我們剛剛建立的第一筆, 已經出現在網頁上了, 成功 地從資料庫中, 讀取出第一筆資料的 name 欄位和 email 欄位! 接著我們如法炮製, 開啟一個新的 Recordset, 準備將第二筆資料庫資料也 抓進 Dreamweaver 中 19
接著我們再用一樣的方法, 選擇第二筆資料的 name 欄位與 email 欄位 再次使用瀏覽器來檢視, 您會看到如下畫面, 成功地將第二筆資料也抓進網 頁中了 20
剛剛我們所做的操作動作, 您都可以在 伺服器行為 內看到並且加以修改, 如下圖所示 做到這邊, 您已經學會很基礎的動態網頁設計了, 在此我們只介紹 動態文字 部分 其實,Dreamweaver 的預設工具中, 還有不少有趣的工具可以提供您使用, 請讀者自行去測測看 當然, 若您希望寫出更專業而且更穩定的 PHP 網頁, 光靠 Dreamweaver 是不夠的, 我們會比較建議您去學習正統的 PHP 語言與 MySQL 資料庫語法, 如此才可以發揮動態網頁的強大威力 21
連結 Flash 與資料庫 或許您曾經在網路上看過所謂的 Flash 版本的留言版, 這就是使用 Flash 連接資料庫來完成做的 在本節中, 我們將會教您如何使用 Flash 來完成最基礎的資料庫連結動作 由於 Flash 本身並無法直接與資料庫做連線, 因此我們需要透過 PHP 來幫忙, 傳送變數給 Flash 才可以完成此項動作 首先, 我們先在資料庫當中建立一個新的資料表 welcomenote, 並將欄位數目 設定為 2 接著我們設定好內部的欄位名稱後, 點選 儲存 按鈕來存檔 在建立好資料表後, 現在我們要來新增資料進入資料表, 請您點選上方的 新增 選項 進入到如下的新增畫面中, 將您的資料寫入資料表之中, 確定後按下 執行 按 鈕來存入資料庫中 22
您可以利用上方的 瀏覽 選項, 來檢查資料是否有新增成功 檢視如下, 這就是我們剛剛新增的 Welcome to our site! 資料 OK! 資料新增好後, 我們可以回到 Dreamweaver 當中, 開啟一個新的 PHP 檔 案 接著在畫面當中輸入 notevar=, 這是屆時要傳給 Flash 接收用的變數名稱, 等 23
號表示傳送到 notevar 變數 藉由此操作, 我們可以將指定的資料, 傳給指定的 變數名稱, 這樣 Flash 在讀取頁面時, 就可以依照它的設定來顯示 接著來新增 資料集 吧! 請您看到右邊浮動視窗中的 伺服器行為 點選加號, 選擇底下的 資料集 選項 進入如下的資料集新增畫面 請您將 表格 選項更改為我們剛剛新增的 welcomenote 資料表 然後依照前一節我們所講的方式, 來設定其他選項, 設定完成後請點選 確定 按鈕來跳出視窗 24
現在您可以在 伺服器行為 視窗裡面, 看到剛剛所新增的資料集已經出現 現在我們來新增 動態文字 到剛剛所輸入的變數後方 請您點選 伺服器行為 上的加號, 再點選 動態文字 選項 會進入到如下的視窗, 在此請您選取我們要新增的 note 欄位, 完成後請點選 確 定 按鈕 25
接著請儲存檔案, 檔名可依照您的喜好加以更改 最後, 我們利用瀏覽器來看看剛剛的結果 請您在瀏覽器網址列內輸入 : http://127.0.0.1:8080/test/welcome.php 若資料設定成功的話, 可以看到如下 畫面 26
現在, 開始製作 Flash 端的介面, 我們將讀取 notevar 變數, 然後顯示在 FLASH 的舞台上, 當作開啟 Flash 的歡迎文字 這個部份, 我們使用 AS2.0 的語法來完 成, 在程式碼的編輯上, 可以簡化許多 首先, 新增一個文字方塊, 文字類型選擇 動態文字, 字元選擇 Arial, 在下 面的變數欄位上, 輸入 notevar 接著, 點選剛才的文字方塊, 從功能表選擇 修改 / 轉換成元件 選項, 將文字 方塊轉換成一個影片片段元件 點選影片片段元件, 然後開啟 動作 面板, 在編輯區輸入以下程式碼 : onclipevent (load) { 27
} loadvariables("http://127.0.0.1:8080/test/welcome.php", this, "GET"); 在執行程式碼時, 會先讀取資料庫裡的 notevar 變數, 然後儲存在影片片段內的 動態文字裡頭 其執行效果如下 : 至此, 我們就順利地完成用 Flash 去讀取資料庫資料的操作, 將資料庫中的 Welcome to our site! 字串, 用 Flash 動畫去讀取出來 28