Board logo

標題: [教學] (實戰專題) 線上票選 上篇 [打印本頁]
作者: 小誌    時間: 2010-5-23 22:33     標題: (實戰專題) 線上票選 上篇

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

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


票選機制的組成
線上票選機制的組成在本範例中共分為三個部分！
作者: 小誌    時間: 2010-5-23 22:35

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

[attach]804[/attach]

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

[attach]805[/attach]
作者: 小誌    時間: 2010-5-23 22:37

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


投票結果資料庫vote.mdb：
在資料庫我們製作了一個名稱為『student』的資料表，用來儲存相關的票數資料，其資料表的結構如下：
[attach]806[/attach]
作者: 小誌    時間: 2010-5-23 22:45

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

[attach]807[/attach]

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

Recordset物件的open方法

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




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


作者: 小誌    時間: 2010-5-23 22:49

如何設定票數長條圖？

[attach]808[/attach]

如何顯示票數的長條圖，當然不是用程式畫出來的！在HTML網頁標籤中有一個影像標籤，其格式如下：在
  1. <IMG SRC=”圖片名稱” Width=圖片寬度設定值 Height=圖片高度設定值>
複製代碼
　

我們的長條圖就是利用HTML影像標籤的圖片寬度屬性Width與圖片高度屬性Height變化出來的，首先，筆者準備了一個寬度５個像素，高度１５個像素的圖片『[attach]810[/attach]』，圖片高度屬性Height設定值維持１５個像素不變，但是圖片寬度屬性Width設定值則隨著得票數的比例來變化，我們先來看圖片寬度屬性Width設定值的產生方式：

[attach]809[/attach]

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


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

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

[attach]811[/attach]

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


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

[attach]812[/attach]


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

[attach]813[/attach]


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



歡迎光臨 麻辣家族討論版版 (http://forum.twbts.com/)