<4D F736F F D20B766B074B8EAAEC6AE77A4A7BAF4ADB6466C617368B0CAB565B35DAD702E646F63>

Size: px

Start display at page:

Download "<4D F736F F D20B766B074B8EAAEC6AE77A4A7BAF4ADB6466C617368B0CAB565B35DAD702E646F63>"

议江阙
7 years ago
Views:

搭配資料庫之網頁 Flash 動畫設計師大附中李啟龍除了網頁與美工設計等基礎設計外, 在目前 Web2.0 盛行的情況下, 大部分的網頁都會希望有互動的功能存在, 也就是使用者可以在線上輸入您的資料或是可以在線上查詢各種相關資訊等等如何設計 Flash CS4 動畫來存取資料庫的資料呢?

1 搭配資料庫之網頁 Flash 動畫設計師大附中李啟龍除了網頁與美工設計等基礎設計外, 在目前 Web2.0 盛行的情況下, 大部分的網頁都會希望有互動的功能存在, 也就是使用者可以在線上輸入您的資料或是可以在線上查詢各種相關資訊等等如何設計 Flash CS4 動畫來存取資料庫的資料呢? 本文將會跟您提到如何使用 Dreamweaver 以 PHP 為設計基礎, 搭配 MySQL 資料庫使用, 並且會利用 Flash 來示範如何將資料庫的資訊放到動畫當中, 也就是在 Flash 動畫中, 去呼叫 MySQL 資料庫的內容, 並將之顯示到 Flash 動畫中若您之前沒有學過任何程式語言的話, 別擔心! 在本文中, 您絕對不會碰到任何互動網頁語言的撰寫, 一切的事情將會由 Dreamweaver 和 Flash 來為您完成安裝 AppServ 在此我們使用網路上已經包裝好的套件 AppServ 來當作示範,AppServ 套件將相關的資料庫軟體整合在一起 ; 若您想要自行安裝相關軟體的話, 請您必須要安裝 Apache HTTP Server MySQL PHP 與 phpmyadmin 等四套軟體首先, 請您先使用搜尋引擎, 以關鍵字 appserv 找到下載網頁, 或是直接到此網址 : 來下載 AppServ Open Project 的網頁如下所示 : 下載 AppServ 版套件或版套件都可以, 在此我們以版本做範例, 下載完畢後請您執行該檔案, 會出現如下安裝介面請您點選 Next 按鈕, 進入設定頁面 1

2 設定頁面如下, 在此選擇您欲安裝的位置, 選擇好後點選 Next 按鈕以進行下一步安裝在此選擇你想要安裝哪些軟體, 您可以依照自己的習慣來安裝在此我們選擇全部都安裝, 因為每一套軟體隨後都會使用到, 選取好後點選 Next 按鈕以進行下一步設定 2

此處需輸入您的 Server Name 與 Email, 您可以依照自己的需求來輸入比較該注意的是 Apache HTTP Port 部分, 系統初始設定值為 80, 但是為了防止這個 port, 已經被作業系統或是其他軟體所使用, 導致日後您的 Apache 網頁伺服器開不起來, 建議您使用超過

3 此處需輸入您的 Server Name 與 , 您可以依照自己的需求來輸入比較該注意的是 Apache HTTP Port 部分, 系統初始設定值為 80, 但是為了防止這個 port, 已經被作業系統或是其他軟體所使用, 導致日後您的 Apache 網頁伺服器開不起來, 建議您使用超過 1024 以上的 port 數值來設定, 在此我們使用 8080 做為預設 port, 確定後點選 Next 按鈕以進行下一步接著您需要輸入 MySQL 資料庫的 root 密碼, 即資料庫最大權限管理員的密碼, 請您不要使用過於簡單的密碼 ( 如 :1234), 當作您的 root 密碼, 因為這 3

4 對您的資料安全將非常沒有保障 ; 其他部分的設定就維持原狀, 點選 Install 按鈕以進行安裝安裝過程如下安裝好後程式會問您是否要啟動 Apache 與 MySQL 軟體, 在此我們選擇都要啟動, 然下按下 Finish 按鈕, 以完成安裝 4

5 接著我們來檢查一下 Apache 是否有安裝成功, 請您開啟瀏覽器, 並且在網址列輸入或是若您出現以下畫面, 則表示 AppServ 安裝成功並且啟動了! 5

3 連結以進入操作介面點選後系統會要求您輸入帳號密碼, 請您在帳號部分輸入 root, 密碼輸入您在安裝時設定的密碼帳號與密碼輸入正確後, 會出現如下畫面, 即表示您成功登入

6 基本資料庫操作在此我們使用 AppServ 內建的 phpmyadmin 來當作我們的 MySQL 資料庫操作介面, 請您移到在上一節我們測試是否安裝成功的頁面當中, 點選上方的 phpmyadmin Database Manager Version 連結以進入操作介面點選後系統會要求您輸入帳號密碼, 請您在帳號部分輸入 root, 密碼輸入您在安裝時設定的密碼帳號與密碼輸入正確後, 會出現如下畫面, 即表示您成功登入 phpmyadmin 資料庫管理介面了 PS: 在正式運作的資料庫當中, 我們不建議您經常使用 root 帳號登入建議您在所有設定皆完成後, 開啟一個您自己專屬的帳號來登入, 以及開啟一個帳號供日後網頁程式使用因為我們為教學示範使用, 為了減少您的困擾, 我們通通使用 root 以做為登入帳號 6

輸入資料表名稱 testtable 與欄位數目 3, 然後點選執行按鈕在此您可以輸入您要的欄位與型態等等資訊, 建議您新增資料表時, 欄位請填您欲申請的欄位數 +1,

7 您可以看看左邊的下拉式選單, 可以見到目前已經開啟的資料庫或者您可以在主畫面當中, 自行建立一個資料庫在此我們使用 test 資料庫做為示範, 請您在左邊下拉式選單當中, 選擇 test 資料庫, 接著會出現如下畫面這表示在這個資料庫當中, 您並沒有建立任何一個資料表, 因此我們需要建立一個資料表, 才能存放資料, 請您在主畫面當中找到建立新資料表的區塊, 輸入資料表名稱 testtable 與欄位數目 3, 然後點選執行按鈕在此您可以輸入您要的欄位與型態等等資訊, 建議您新增資料表時, 欄位請填您欲申請的欄位數 +1, 因為要多一個欄位做為主索引, 提供資料庫做搜尋使用 ( 即您希望開通 3 個欄位, 則請您輸入 4 個欄位 ) 在第一個資料欄位當中請您將型態選為 INT, 並且在附加部分選擇 auto_increment, 7

8 並且勾選起主索引選項, 資料表在有資料新增時會自動處理新資料的編號, 輸入好資料後請您點選儲存按鈕完成資料表的設定後, 會跳到以下畫面這表示您的資料表已經建立完成了, 您可以選擇上方的結構選項, 來觀看資料表狀態或者可以點選瀏覽選項, 來觀看這個資料表的資料這時您會發現如下畫面, 這是因為您的資料表當中, 目前並沒有任何資料, 所以我們現在來為這個資料表新增資料吧! 8

9 請您點選上方的新增選項接著會出現如下畫面在此請您填入適當的資料, 並且保持主索引空白, 確定後點選執行按鈕看到如下畫面就表示您這筆資料已經新增成功了! 您可以使用上方選項的瀏覽選項, 來看看我們剛剛新增的資料是否正確此時可以發現到我們剛剛新增的資料已經正確地加入資料表中, 並且已經自動編號為 1 號若您發現資料有誤的話, 可以在資料筆數的前面找到一個小的筆狀工具, 點選筆狀工具可以進行編輯, 修改此筆資料的內容 9

10 我們可以依照上面的方法多新增幾筆資料, 您會發現每一筆資料, 資料庫都會自動幫您把編號完成 10

11 利用 Dreamweaver 製作動態網頁資料庫與資料都建立完成之後, 我們可以利用 Dreamweaver 來擷取這些資料到我們所設計的網頁當中! 現在請您開啟 Dreamweaver 並且新增一個網站記得將您的網站設定到 Apache 預設擷取網頁的地方, 然後再新增一個您自己擺網頁的資料夾並且將測試伺服器中的伺服器模式, 修改為 PHP MySQL 模式 11

12 接著我們開啟一個新的檔案, 將頁面類型選擇為 PHP 模式檔案開啟後, 現在我們要叫出可以連線資料庫的浮動視窗出來, 請您選取上方工具列的, 並且選擇資料庫選項 12

$這表示我們剛剛並未完成相關設定請您在此視窗當中, 將存取部分選擇到本機 / 區域網路選項, 因為目前我們的測試伺服器是架設在電腦本機端的, 並且將測試伺服器資料夾設定到 Apache 預設的連結位置 : X:\AppServ\www (X 表示您當初安裝 AppServ$

13 這時您會在右邊的浮動視窗區塊, 發現一個剛開啟好的視窗如下在這視窗當中,Dreamweaver 很貼心的以條列式的方式, 列出我們還需要做哪些事情才可以正確連線, 目前我們已經完成前兩項了, 現在我們點選第三項測試伺服器來做處理點選後會出現剛剛調整伺服器模式一樣的視窗是的! 這表示我們剛剛並未完成相關設定請您在此視窗當中, 將存取部分選擇到本機 / 區域網路選項, 因為目前我們的測試伺服器是架設在電腦本機端的, 並且將測試伺服器資料夾設定到 Apache 預設的連結位置 : X:\AppServ\www (X 表示您當初安裝 AppServ 的磁碟位置 ) 13

14 完成後會看到如下畫面, 會發現在第三項的部分, 因為完成各項設定, Dreamweaver 也已經幫我們打勾了好了! 在完成基本的連線設定後, 我們可以開始跟 MySQL 資料庫做連線了, 請您選取上方的加號並且選取 MySQL 連線 14

15 開啟後會見到如下視窗, 請您在這邊輸入您剛剛安裝好的 MySQL 資料庫相關設定, 並且在資料庫選項中按下選取按鈕資料輸入正確的話, 您將會看到如下的選取視窗, 若輸入錯誤,Dreamweaver 將會跟您提示哪邊需要修正資料現在我們選取剛剛設定好的 test 資料庫, 並且按下確定按鈕您也可以試著在連線視窗中點選測試鈕, 來測試看看連線是否正確, 若資料庫連線正確, 將會出現如下的彈出視窗所有設定都完成之後, 請點選 15

16 確定按鈕, 此時在資料庫的部分已經可以看到我們剛剛所設定的資料庫內容了, 您也可以在這邊對資料庫做修正, 這些都是 Dreamweaver 內建的功能, 現在我們將畫面切換到伺服器行為頁籤在伺服器行為部分, 請您點選上方的加號, 並且選擇資料集選項資料集是擷取資料庫一筆資料的接收器, 我們後面將會教您如何使用資料集功能來顯示資料內容點選後會出現如下的新增視窗, 您可以在這邊編寫任何的擷取條件我們在 16

17 此將篩選器設定為自動編號 (oid) 為 1 的資料, 即第一筆資料, 然後按下確定鈕結束視窗或者您對於 SQL 語法較熟悉的話, 您也可以點選進階選項, 來做更進一步的設定, 不過對於一般的初學者, 我們還是建議您使用簡單選項即可新增好資料集後, 我們就可以使用這些資料集來做資料庫的操作動作了一樣, 請您在伺服器行為上點選加號, 然後選擇動態文字選項 17

18 接著您可以在如下的視窗中, 選擇要顯示資料集中的哪一筆資料, 此次我們選擇 name 選項此時您可以在設計畫面當中, 看到有出現動態文字的顯示位置, 此時表示此動態文字會抓出資料庫中的 name 欄位資料我們使用一樣的設定方法, 也完成存取資料庫之動態文字欄位的部分, 完成後請存檔, 並且將檔名存成 index.php 18

19 最後, 我們使用瀏覽器輸入 : 來觀看網頁之狀況, 您會發現我們剛剛建立的第一筆, 已經出現在網頁上了, 成功地從資料庫中, 讀取出第一筆資料的 name 欄位和欄位! 接著我們如法炮製, 開啟一個新的 Recordset, 準備將第二筆資料庫資料也抓進 Dreamweaver 中 19

20 接著我們再用一樣的方法, 選擇第二筆資料的 name 欄位與欄位再次使用瀏覽器來檢視, 您會看到如下畫面, 成功地將第二筆資料也抓進網頁中了 20

21 剛剛我們所做的操作動作, 您都可以在伺服器行為內看到並且加以修改, 如下圖所示做到這邊, 您已經學會很基礎的動態網頁設計了, 在此我們只介紹動態文字部分其實,Dreamweaver 的預設工具中, 還有不少有趣的工具可以提供您使用, 請讀者自行去測測看當然, 若您希望寫出更專業而且更穩定的 PHP 網頁, 光靠 Dreamweaver 是不夠的, 我們會比較建議您去學習正統的 PHP 語言與 MySQL 資料庫語法, 如此才可以發揮動態網頁的強大威力 21

才可以完成此項動作首先, 我們先在資料庫當中建立一個新的資料表 welcomenote, 並將欄位數目設定為 2 接著我們設定好內部的欄位名稱後, 點選儲存

22 連結 Flash 與資料庫或許您曾經在網路上看過所謂的 Flash 版本的留言版, 這就是使用 Flash 連接資料庫來完成做的在本節中, 我們將會教您如何使用 Flash 來完成最基礎的資料庫連結動作由於 Flash 本身並無法直接與資料庫做連線, 因此我們需要透過 PHP 來幫忙, 傳送變數給 Flash 才可以完成此項動作首先, 我們先在資料庫當中建立一個新的資料表 welcomenote, 並將欄位數目設定為 2 接著我們設定好內部的欄位名稱後, 點選儲存按鈕來存檔在建立好資料表後, 現在我們要來新增資料進入資料表, 請您點選上方的新增選項進入到如下的新增畫面中, 將您的資料寫入資料表之中, 確定後按下執行按鈕來存入資料庫中 22

23 您可以利用上方的瀏覽選項, 來檢查資料是否有新增成功檢視如下, 這就是我們剛剛新增的 Welcome to our site! 資料 OK! 資料新增好後, 我們可以回到 Dreamweaver 當中, 開啟一個新的 PHP 檔案接著在畫面當中輸入 notevar=, 這是屆時要傳給 Flash 接收用的變數名稱, 等 23

24 號表示傳送到 notevar 變數藉由此操作, 我們可以將指定的資料, 傳給指定的變數名稱, 這樣 Flash 在讀取頁面時, 就可以依照它的設定來顯示接著來新增資料集吧! 請您看到右邊浮動視窗中的伺服器行為點選加號, 選擇底下的資料集選項進入如下的資料集新增畫面請您將表格選項更改為我們剛剛新增的 welcomenote 資料表然後依照前一節我們所講的方式, 來設定其他選項, 設定完成後請點選確定按鈕來跳出視窗 24

25 現在您可以在伺服器行為視窗裡面, 看到剛剛所新增的資料集已經出現現在我們來新增動態文字到剛剛所輸入的變數後方請您點選伺服器行為上的加號, 再點選動態文字選項會進入到如下的視窗, 在此請您選取我們要新增的 note 欄位, 完成後請點選確定按鈕 25

26 接著請儲存檔案, 檔名可依照您的喜好加以更改最後, 我們利用瀏覽器來看看剛剛的結果請您在瀏覽器網址列內輸入 : 若資料設定成功的話, 可以看到如下畫面 26

0 的語法來完成, 在程式碼的編輯上, 可以簡化許多首先, 新增一個文字方塊, 文字類型選擇動態文字, 字元選擇 Arial, 在下

27 現在, 開始製作 Flash 端的介面, 我們將讀取 notevar 變數, 然後顯示在 FLASH 的舞台上, 當作開啟 Flash 的歡迎文字這個部份, 我們使用 AS2.0 的語法來完成, 在程式碼的編輯上, 可以簡化許多首先, 新增一個文字方塊, 文字類型選擇動態文字, 字元選擇 Arial, 在下面的變數欄位上, 輸入 notevar 接著, 點選剛才的文字方塊, 從功能表選擇修改 / 轉換成元件選項, 將文字方塊轉換成一個影片片段元件點選影片片段元件, 然後開啟動作面板, 在編輯區輸入以下程式碼 : onclipevent (load) { 27

} loadvariables("http://127.0.0.1:8080/test/welcome.

28 } loadvariables(" this, "GET"); 在執行程式碼時, 會先讀取資料庫裡的 notevar 變數, 然後儲存在影片片段內的動態文字裡頭其執行效果如下 : 至此, 我們就順利地完成用 Flash 去讀取資料庫資料的操作, 將資料庫中的 Welcome to our site! 字串, 用 Flash 動畫去讀取出來 28

Outlook 2007 設定說明 Offic 企業郵件 / 虛擬主機郵件 / Office 365

Outlook 2007 設定說明 Offic 企業郵件 / 虛擬主機郵件 / Office 365 Outlook 2007 設定說明 OfficeMail 企業郵件 / 虛擬主機郵件 / Office 365 版權及商標聲明 Cloudmax 匯智提供用戶商務用郵件服務, 本文件由 Cloudmax 匯智製作, 用於教導用戶進行郵件服務相關設定, 內容中所使用的郵件工具非為 Cloudamx 匯智設計及擁有, 若對程式資訊有疑問, 請洽程式提供商本文件所引用之各商標及商品名稱分屬其合法註冊公司所有,