[教學] (實戰專題) 線上票選 上篇

小誌

台灣的民主進步是世界有目共睹的，連總統都是採取民選的了，所謂少數服從多數；多數尊重少數，現在的校園當然也跟著民主開放，班級幹部如班長、副班長等等，都嘛是由班級同學們選出來的，不過選舉人少還無所謂，相對的，如果選舉人多那花費的時間與相關費用也跟著增加，現在網路科技發達，我們何不利用電腦網路來做線上票選呢？

線上票選，既省時間又操作方便，最重要的是能馬上開票，投票後票選結果就能馬上呈現在眼前！所以現在就來為各位老師們示範一個線上票選的ASP程式機制，本範例是以票選模範生為例，示範如何製作線上票選程式，程式中除了基本的票選機制外，還有得票數的長條圖喔！


票選機制的組成
線上票選機制的組成在本範例中共分為三個部分！

• vote.asp：用來顯示目前的票選結果以及進行投票動作的程式機制。
  
• votesave.asp：進行儲存新投票結果的程式機制。
  
• vote.mdb：紀錄投票結果的資料庫。
  

小誌

線上投票程式網頁vote.asp：
當投票者第一次連結此程式網頁時將出現如下的畫面：

下載 (18.05 KB)

2010-5-23 22:35

當我們選擇好理想的人選，按下『投下神聖的一票』按鈕後，投票的表單就會將投票資料送交votesave.asp程式進行處理，然後又自動轉向連結回到投票網頁程式vote.asp的程式網頁畫面，但此時您可以發現畫面中：我們投票的人選票數增加了，但是原本顯示『你的一票選模範生』的字句變成了『你已經投過票了!只能觀看投票結果!』，同時那個『投下神聖的一票』的按鈕也不見了，沒錯，這就是我們防止重複投票的過濾機制，如下圖所示：

下載 (17.33 KB)

2010-5-23 22:35

小誌

儲存投票結果程式votesave.asp：
本程式是負責將投票程式網頁vote.asp中表單所傳送過來的投票資料更新儲存到資料庫中，但是並沒有顯示任何網頁內容，而在新的投票資料更新到資料庫後就直接轉向連結回投票程式網頁vote.asp去顯示最新的投票結果。


投票結果資料庫vote.mdb：
在資料庫我們製作了一個名稱為『student』的資料表，用來儲存相關的票數資料，其資料表的結構如下：

下載 (11.61 KB)

2010-5-23 22:37

小誌

投票程式網頁
首先，我們先來看一下如何建立票選資料庫的連結與資料表的開啟，如下圖：

下載 (8.24 KB)

2010-5-23 22:39

關於建立資料庫連結物件、連結資料庫與建立資料庫存取的資料錄物件，這三個部分想必各位網友們看過前面的章節後應該是非常熟悉才對，小誌現在將針對打開資料表進行資料錄存取的部分做個說明。

Recordset物件的open方法

RS.Open 參數1,參數2,參數3,參數4

• 參數1：欲開啟的資料表名稱或Select指令，若指定Select，則我們建立的資料錄物件將是Select指令篩選資料錄後的結果，如果指定為資料表名稱，則開啟整個資料表，在本例中我們採用Select指令的方法。
• 參數2：指定一個已經連結開啟的資料庫物件，本例中我們已建立連結開啟的為Conobject物件。
• 參數3：指定資料物Recordset的開啟類型，此參數有下列四種類型。
  

  設定值	類型
  ０	唯讀模式且資料錄只能往下移動
  １	可讀寫模式且資料錄可自由移動
  ２	可讀寫模式且資料錄可自由移動
  ３	唯讀模式但資料錄可自由移動

注意：
在多人存取資料庫的情形下，將設定值設為１，則他人若新增資料錄的時候，我們將無法立即看到他人新增的資料錄，若設定值為２，他人若新增資料錄的時候，我們將可以看到他人新增的資料錄。
在本投票程式網頁中，因為我們只需要讀取資料庫錄的內容來做顯示的處理，因此小誌就將此參數設定為０。

• 參數４：指定鎖定類型，此參數有下列四種類型

  設定值	類型
  １	預設值，開啟唯讀資料錄
  ２	悲觀鎖定
  ３	樂觀鎖定
  ４	批次鎖定

  
  
  • 設定值１：Recordset物件的AddNew、Delete與Update方法都不可以使用。
  • 設定值２：若有兩位連線者同時執行程式而進行同一筆資料錄更新作業的時候將產生錯誤，因此只要有一個連線者的程式進行資料欄位更動時就將資料錄鎖定，直到此程式呼叫Update方法時才將資料錄解除鎖定。
  • 設定值３：樂觀鎖定，是認為不可能有兩位連線者同時執行程式而進行同一筆資料錄更新作業，因此只在Update方法被呼叫時才將資料錄鎖定，資料錄一寫入資料庫後立即解除鎖定。
  • 設定值４：在資料錄欄位進行變動時，並不會將更動的資料寫入資料庫，在UpdateBatch方法被呼叫時才將全部有更動的資料寫入資料庫，而且在更動的資料寫入資料庫時才會鎖定資料錄。
  
  
  
  注意:
  在本投票程式網頁中，我們只需要讀取資料庫錄的內容並不會做任何的資料變更動作，因此選擇設定值為１，但是在儲存投票結果程式votesave.asp中就不能選此設定值，後續小誌將再做說明。
  
  

小誌

如何設定票數長條圖？

下載 (7.5 KB)

2010-5-23 22:48

如何顯示票數的長條圖，當然不是用程式畫出來的！在HTML網頁標籤中有一個影像標籤，其格式如下：在

1. <IMG SRC=”圖片名稱” Width=圖片寬度設定值 Height=圖片高度設定值>

複製代碼

　

我們的長條圖就是利用HTML影像標籤的圖片寬度屬性Width與圖片高度屬性Height變化出來的，首先，筆者準備了一個寬度５個像素，高度１５個像素的圖片『

下載 (811 Bytes)

2010-5-23 22:50

』，圖片高度屬性Height設定值維持１５個像素不變，但是圖片寬度屬性Width設定值則隨著得票數的比例來變化，我們先來看圖片寬度屬性Width設定值的產生方式：

下載 (7.32 KB)

2010-5-23 22:48

第一個步驟就是先計算總投票數(上圖綠色部分程式敘述)，很簡單，將個別候選人的得票數加起來就是總投票數了，接著，開始計算各個候選人的得票圖片寬度屬性Width設定值(上圖藍色部分程式敘述)，我們要先利用IF敘述判斷候選人的票數是不是０喔！因為除法中分子不能是零嘛！


提示
您一定覺得很奇怪，按比例顯示應該是候選人的得票數除以總投票數乘１００啊！怎麼會是乘5００？因為怕圖形顯示的太短不好看啊！想想，如果單純按照百分比來顯示圖形，那即使是得票率百分之百，那圖形的顯示寬度不就只有１００個像素？所以筆者就將圖形的顯示寬度乘以５倍嘍！也就說得票率百分之百，圖形的顯示寬度就有５００個像素，這並不是硬性規定，您可依您的版面配置來設定喔！

小誌

如何顯示票數長條圖？
在計算好各個候選人的得票圖片寬度屬性Width設定值後，該如何將圖形顯示出來？詳見下圖。

下載 (5.08 KB)

2010-5-23 22:51

小誌準備的基礎圖形５＊１５像素圖片『 』檔名為vote.gif，所以HTML影像標籤的圖片檔名為vote.gif，圖片高度屬性Height設定值維持１５個像素不變，所以省略不設定，圖片寬度屬性Width設定值則隨著我們程式計算好的各個候選人的得票圖片寬度來變動。


目前候選人得票數
　要在票數圖形後方加上目前候選人的的票數，只要在HTML影像標籤後方加上『<%=RS("候選人")%>票』就行了，『票』字要加上去喔！如下圖，要不然網頁中顯示出來的只是數字，根本不知道是什麼意義。

下載 (5.17 KB)

2010-5-23 22:52

圈票處選擇鈕設定
　圈票處的選擇鈕在設定時要特別小心，所有的選擇鈕元件名稱都必須是相同的(Name屬性，本例名稱為vote)，只有元件在表單資料送出時的值不同而已(Value屬性)：

下載 (11.93 KB)

2010-5-23 22:52

提示
選擇鈕只有單選的功能，也就是說表單中全部的選擇鈕欄位(本利為圈票處)只有一個能生效，不能複選，雖然名稱都相同，但是表單傳送出去的選擇鈕『值』卻是不同的，因此就可依不同的值來來決定得票者是哪位候選人。