用Dreamweaver MX 2004製作ASP動態網站（投票系統篇）

dreamweaver|動態|投票

　　投票程式源檔案：點擊這裡下載源檔案

　　一、程式說明及投票系統流程圖

　　總的來說，投票系統可分為３個模組：選票模組，選票處理模組和結果顯示模組！

　　投票系統需要對某一項目的選擇做出記錄，一般情況下是存放在資料庫中然後對投票情況進行統計並顯示投票結果。

　　首先給出選票，即供投票者選擇的表單對象，當投票者按下投票按鈕後，選票處理模組開始啟用，對傳送到伺服器的資料作相應的處理，伺服器端在處理時先判斷使用者選擇的是那一項，然後把相應欄位的值加１。實際上儲存投票結果的資料庫中的表只有一條記錄就可以了，只是需要不斷的對這些資料進行更新。最後則是由結果顯示模組把投票結果顯示出來。

　　這篇教程以對一部電影的評價為例進行投票系統的講解。在這個例子中有３種選擇，很好、一般和很差！並且只能選擇其中一項。

　　檔案說明：

*vote.asp　投票頁
*result.asp顯示投票結果
*add.asp選票處理模組，投票者在投票頁選擇並按下投票按鈕並提交後，資料庫即進行更新，最後轉向Result.asp

　　二、資料庫的設計和建立

　　資料庫檔案tvote.mdb只有一個表tvote，該表只有一條記錄，而記錄對應著３個欄位，每一個欄位保持一種選項的投票數目。建立表的記錄初始值為0，為了方便看效果，所以先對記錄的各個欄位賦了初值！

　　三、建立網站和資料庫連接

1.建立網站！關於建立網站的詳細步驟，偶就不說了。貼張圖看下！！

　　提醒下，建立網站前別忘了建立虛擬目錄！

　　2.資料庫連接，這裡用構建0DBC的方法來串連資料庫！

　　DSN(Data Source Name)，資料來源名稱）表示用於將應用程式和某個資料庫相串連的資訊集合。ODBC資料來源管理器使用該資訊來建立指向資料庫的串連！

　　具體步驟：啟動控制台－管理工具－資料來源(0DBC)－系統DSN－“添加”

　　然後在開啟的建立新資料來源對話方塊中選擇　Microsoft Access Driver (*.mdb)點擊“完成”會出現ODBC　Microsoft Access 安裝對話方塊，給你要建立的資料來源起個名字，然後點擊“選擇”，選擇你建立的資料庫檔案的路徑！單擊確定，就可以看到在ODBC資料來源管理器中多了一個我們剛剛建立立的資料來源。

　　然後到dreamweaver裡面，開啟我們剛剛建立的網站，隨便開啟一個檔案！開啟應用程式面板的資料庫標籤，點“＋”，選擇“資料來源名稱（DSN）”

　　然後在開啟的對話方塊中作如下設定，可點擊測試看資料庫連接是否成功！

　　四、投票系統首頁面製作

　　實際上，投票者只需要作出選擇就可以了，不需要添加任何行為。對投票頁緊需設定表單及表單對象的屬性即可。

　　1.先製作如下的靜態頁面

　　注意，頁面中的表格一定是嵌套在一個form（表單）裡面的（偶剛開始學ａｓｐ的時候，都是直接就弄個表格，結果出了ｎ次錯）

　　2.ｆｏｒｍ設定

　　將游標移到表單區域內，單擊視窗下面的ｆｏｒｍ標籤來選中ｆｏｒｍ。對ｆｏｒｍ屬性進行如下設定

　　單擊表格右列第一行的選項按鈕屬性設定ｆｏｒｍ中的選項按鈕的屬性。在其屬性面板中，在選項按鈕文字框中輸入rbResult，這樣就設定了該選項按鈕的ｎａｍｅ的屬性為rbResult，在選定值文字框中輸入fGood,這樣就設定了該選項按鈕的Ｖａｌｕｅ屬性值。如圖

　　輸入的ｖａｌｕｅ屬性值與資料庫中的表ｔｖｏｔｅ的一個欄位名相同，而表ｔｖｏｔｅ的ｆＧｏｏｄ欄位儲存的是選擇[很好]項的投票者總數，在按下投票按鈕提交後，將ｆＧｏｏｄ作為選項按鈕的值傳出，與資料庫中的欄位名聯絡起來！

　　在初始狀態選項中，選中[已勾選]選項按鈕，即預設情況下被選中！

　　同樣，對下面２個選項按鈕也按以上步驟設定！

　　表格中下面的２個選項按鈕的ｎａｍｅ屬性也設為rbResult,這樣設定可使３個選項按鈕的ｎａｍｅ屬性相同，這樣投票者就只能選擇其中的一項。在[初始狀態]選項中選中[未選中]選項按鈕，在[選定值]文字框中分別輸入ｆＭｉｄ、fBad，與表ｔｖｏｔｅ中的另外二個欄位相同，這樣，ｖｏｔｅ。ａｓｐ就作好了！

　　五、投票結果頁面的製作

　　製作頁面

　　2.定義記錄集

　　開啟資料[綁定]面板，單擊[+]按鈕，選擇[記錄集（查詢）]功能表項目，

　　如果出現簡單[記錄集]對話方塊，則應單擊[進階。。。]按鈕轉到進階記錄集對話方塊！

　　在名稱文字框中輸入rsVote,在串連下拉式清單中選擇connvote,在ＳＱＬ列表框中書寫“SELECT fGood, fMid, fBad, (fGood+fMid+fBad) as VTotal, (fGood/VTotal) as GoodPercent, (fMid/VTotal) as MidpPercent, (fBad/VTotal) as BadPercent
FROM tVote”

　　3.資料繫結

　　將游標放在“有　人蔘加了投票”之間，在綁定面板中選中ｖｔｏｔａｌ欄位，然後單擊“插入”這樣就把投票人的總數動態加入到Ｒｅｓｕｌｔ。ａｓｐ頁面中！用同樣的方法將其他欄位綁定到相應位置

　　最後完成的頁面如圖

　　4.記錄集中的Goodpercent/Midpercent/Badpercent這３個動態資料分別是投票[很好][一般][很差]的人數占投票總人數的比例。而這三項動態資料的值是小數，在瀏覽時，將以小數形式顯示因此，要把他轉換成百分數，並保留２位小數。

　　選中表格第一行中的{rsVote.GoodPercent}，然後在綁定面板中單擊Ｇｏｏｄｐｅｒｃｅｎｔ右邊的下拉三角（即記錄集“格式’框中的下拉三角，）在彈出的菜單中選擇[百分比]－[2個小數位]

　　同樣的方法設定{rsVote.badPercent}{rsVote.midPercent}

　　5.製作表格的動態屬性

　　製作圖示可採用表格嵌套和表格的動態屬性來完成。如果在表格中每一行的第２列的部分嵌套一個只有一行一列的小表格，將這個小表格的背景色設定為紅色，將小表格的寬度度量單位設定為百分比（相對於容納他的儲存格寬度也會根據投票者的數量的變化而變化，這樣就達到了製作圖示的目的。灰色的部分可以看做是投票的總人數，紅色的部分可以看做是各選項的人數。

　　製作投票[很好]項人數佔總人數的比例圖示。把游標放在第一行的第２列上，插入一個表格。

　　把表格的背景設定為紅色 .選中小表格，選擇[視窗]－[標籤檢查器]，開啟[標籤]面板，選擇[屬性].找到[常規]－width屬性，選中他，這時在他旁邊會出現一個閃電按鈕。單擊閃電按鈕，會彈出一個動態資料視窗。在[域]列表框的記錄集中選擇Goodpercent,然後在格式下拉式清單中選擇[百分比－２個小數位]項。單擊確定。

　　重複上面的步驟，分別在第二、三行插入一個小表格。只是在設定動態屬性時，須在動態資料視窗的列表框的記錄集中選擇midpercent。 badpercent項
好了，Ｒｅｓｕｌｔ。ａｓｐ的頁面也到此就製作好了。可以預覽下看看了哦！

　　六、更新頁add.asp

　　我們在投票頁ｖｏｔｅ。ａｓｐ中設定ｆｏｒｍ的動作屬性時，已經設定了相應動作的檔案為ａｄｄ。ａｓｐ！

　　1..建立一個動態網頁ａｓｐ　ＶＢＳｃｒｉｐｔ檔案

　　在這裡可以作一個轉到ｒｅｓｕｌｔ。ａｓｐ的連結！

　　2.　綁定－命令（預存過程）

　　由於投票系統主要記錄各個選項的投票人數，所以這一步並不是對資料庫進行讀操作或者向資料庫插入一條記錄，而是修改資料庫的表ｖｏｔｅ中某一欄位的值。確切的說，是對錶ｖｏｔｅ某一欄位的資料進行累加，所以必須選擇[命令(預存過程）]功能表項目用簡單的ＳＱｌ語言進行定製！

　　單擊綁定面板的“＋”選擇“命令（預存過程）”，設定如圖

　　在ｖｏｔｅ。ａｓｐ頁中設值但選按鈕的屬性時，已將３個選項按鈕Ｖａｌｕｅ屬性的值分別設定為表ｖｏｔｅ中的３個欄位名，所以Request.form("rbResult")值一定是表ｖｏｔｅ的一個欄位名。所以這條ＳＱＬ語句的意思就是使某一欄位加１，即在相應的欄位中記下了一個投票者！

　　*注意：實際操作時，一定要把[SQL]中的where去掉*

　　好了，目前為止，這個投票系統的檔案就全部作好了！

　　發個最終預覽的效果看下！

　　七、製作重點及相關技巧

　　製作投票系統，首先需要瞭解投票系統的機制、投票系統需要建立的各個網頁檔案以及製作這些檔案的步驟！主要製作技術有：投票系統的製作，選項按鈕的命名及ｖａｌｕｅ屬性的設定技巧，選項按鈕的值的儲存技巧，ｓｑｌ中計算欄位的使用，比例圖示的設計技巧及動態資料格式的格式設定等等。

　　但是在測試上面介紹的簡單的投票系統時，我們發現在該投票系統中投票者可以無限制的進行投票，這樣就使作弊很容易發生！那怎麼樣想辦法讓每一位投票者只投一次票以減少發生串票的可能？大家可以先考慮下這個問題，偶過幾天在把這個教程發上來！

　　終於做好了，有不對的地方還請版主大哥幫忙指出！！