[習題]ASP.NET的 簡易投票區 #1 -- 長條圖(繪製圖表)

滿多人在問統計圖表的作法,
事實上,ASP.NET 3.5近來也有提供相關工具

但各位有沒有想過:「以前,在沒有MS Chart controls 之前,以前的ASP、PHP、JSP的網頁程式,是怎麼繪製圖表的?」

現在我就以投票區為例,介紹「長條圖」的設計方法。

你可以學最新的方法,也可以學一套老方法(但可以跨到PHP、JSP還是能用的老方法!)
老酒好喝、老鞋子好穿、老朋友值得信賴。






滿多人在問統計圖表的作法,

事實上,ASP.NET 3.5近來也有提供了 MS Chart Controls for .net 3.5

但各位有沒有想過:在沒有MS Chart controls 之前,以前的ASP、PHP、JSP的網頁程式,是怎麼繪製圖表的?

 

這個問題就跟以前的習題一樣( [習題]會員登入、會員專屬網頁、會員修改私人資料,怎麼寫?(#2 範例篇)),還沒有ASP.NET Login控制項的時候,我們用 Session一樣把會員的權限控制得很好。

 

老話重提:「你可以學最新的方法,也可以學一套老方法(但可以跨到PHP、JSP還是能用的老方法!)」

老酒好喝、老鞋子好穿、老朋友值得信賴。

 

現在我就以投票區為例,介紹「長條圖」的設計方法。

 

以下是給本書讀者的課後補充,會應用到一些 ADO.NET的手寫程式。可以放在本書第十四章當成課後習題。

如果是毫無基礎的初學者,突然看這一篇,可能會消化不良。請三思~.

 

 

 

本範例與完整說明,已經改寫成書本內的文章,

並集結出書,收錄 在「[新 書上市]ASP.NET專題實務II(下集):範例應用與4.0新功能

=================================================

 

先來看看程式的執行結果吧。  

首先就是一個簡單的投票畫面~

     

 

投票完成後,立刻會看見「得票數」。我用「長條圖」來展示之,這是本文的重點所在~~

     

以下就開始實作囉~

=================================================

第一、先設計投票區的 [資料表]。

投票區的資料表有很多種設計方法,一開始的規劃不同,後續的程式寫法會差距很大。

沒有什麼方法是最好的,要依照實際需求與自己的能力來規劃才行。

又是老話重提「不是你(初學者)不會寫程式。.....而是經驗不夠,你還不會自己規劃流程、設計資料表」。這要靠一點經驗。

我設計的這個資料表比較簡單,後續有機會介紹其他案例,我會規劃不同的資料表,來寫同一個投票的範例。

   資料存放的樣子如下圖。

我的設計方法,是「每舉辦一次投票」當作一列記錄!

當User投票給一位候選人,就會撈出原本的票數,然後加一。     再回寫資料庫(以Update指令)

題外話,您也可以設計不同的資料表,讓每一次User投票,都是一筆記錄。然後透過 Select Count()的方式去統計得票數。

這也有好處,就是每一個人的投票,都可以記錄更多資訊起來(如:投票時間、IP來源、投票者的會員編號...等等)

下一篇文章會用這種方式設計Table,您可以比較一下程式將會有哪些變化?

不講了,快離題了!!.....Table Schema的設計,是一門大學問。

設計得好,程式就很好寫。      設計偏差了,寫程式的時候就會哭出來~

上述兩種Table設計方法各有優缺點.... 後續有機會介紹其他案例,我會規劃不同的資料表,來寫同一個投票的範例。

請看下一篇文章的說明。

 

 

=================================================

第二、投票畫面----HTML畫面設計  與  後置程式碼

很簡單,沒啥好說的!只有一個 RadioButtonList控制項與按鈕

後置程式碼也不難

 

後置程式碼也很簡單,就是一個 ADO.NET小程式而已,拿現成的範本改一下就搞定了(請看:DataReader的標準範例 for ASP.NET 2.0 / 3.5

沒啥學問啦,因為一開始的資料表已經規劃成那樣,所以,寫程式要配合他

    我的設計方法,是「每舉辦一次投票」當作一列記錄!

    當User投票給一位候選人,就會撈出原本的票數(請看下圖的綠色框框),

    然後加一。     再回寫資料庫(以Update指令。如下圖的藍色框框)。

    藍色框框裡面的SQL指令有錯,請改成--Dim Update_SQLstr As String = "Update Vote_1 set vote_" & (i + 1) & " = " & (vote_no + 1)

     

    至於最外圍的紅色框框是什麼意思呢?

    那是因為我用 RadioButtonList 來作為投票選項,所以一定會用到這段固定的 For迴圈,講過N次囉。

    如果您看不懂的話,請看以前的範例(是相同的作法):

=================================================

 

重點來囉!!!

第三、投票完成後,會立即看見「得票數」。

我們要用「長條圖」來展現他。這該怎麼作呢?.......遠比您想像的要簡單很多、很多.........別擔心~安啦!

HTML畫面上,只有一個 Label控制項而已。沒啥難度~

後置程式碼如下:

一樣是自己手寫一小段 ADO.NET的 DataReader程式就完成了。

不是蓋你的, ADO.NET程式真的很好用,自己修改一下就能完成很多功能。

只會拉一拉 SqlDataSource、AccessDataSource的人,雖然好用,但一下子就會遇見瓶頸!就會碰壁!

    [廣告]市面上的 ASP.NET書籍,只有我的書介紹完 ADO.NET的觀念後,補一大章 ADO.NET的各種手寫範例

    不快快買來看,那損失大了

所謂的「長條圖」,不過是把HTML語法裡面的圖片(<img>)拿來改一下而已。

得票越多,那張圖片就越長,所以這張圖片的寬度(width)隨隨得票數而變長。

圖片本身的大小是 1(寬) x 10(高)......透過 Width寬度的設定,來把它拉長而已~

 

很簡單!對吧!

     學會這一招 + ADO.NET手寫程式,你以後要轉型到ASP、PHP、JSP都OK啦。

     因為PHP、JSP在存取資料庫時,用法跟 ADO.NET也差不多,

     就是那四大流程啊~....請看我以前的文章:初探ADO.NET #1,程式與資料庫互動的四大步驟

 

 

 

老話重提:「你可以學最新的方法,也可以學一套老方法(但可以跨到PHP、JSP還是能用的老方法!)」

老酒好喝、老鞋子好穿、老朋友值得信賴。

=================================================

 

 這個範例很淺!

說穿了,只有一個重點,就是「長條圖」是怎麼變出來的?

其他的東西呢?都是以前學過的範例,拿出來重新組合一遍而已。

 

可見得把自己基礎打好,後來千變萬化絕對不是問題!

如果不打好基礎,只想四處蒐集範例來修修改改。

老話一句,程式碼送你,別說會改了。連安裝上去都不會運作勒!

 

P.S.  本範例日後如果收錄在書籍裡面,會解釋的更細緻。設定的步驟,也會一步一步,逐一抓圖詳解!

         網路上的文章,圖片太多既佔流量、速度也慢。   請見諒~~

 

下面這本書,一定可以幫你打好基礎!

不然的話,沒辦法在上市四個月內(2008/8月至11月底為止),

仍然是天瓏書局裡面,唯一「一本」還停留在 排行榜20名以內 的 ASP.NET書籍!

ASP.NET專題實務ASP.NET專題實務(文魁出版 / P8187)

 

 後續補充:

 

 

 

 

 

本範例與完整說明,已經改寫成書本內的文章,

並集結出書,收錄 在「[新 書上市]ASP.NET專題實務II(下集):範例應用與4.0新功能

 

 

 

 

 

 

 

 

 

 

好久沒放今日值班正妹了,松島楓

.....聽說很多男人心目中的女神,好像復出了!   (圖片來源: Google)

           點圖可放大!

此圖出處的 原始網頁forum.coolaler.com/showthread.php?t=124913

 

我將思想傳授他人, 他人之所得,亦無損於我之所有;

猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----Thomas Jefferson

線上課程教學,遠距教學 (Web Form 約 51hr)  https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

線上課程教學,遠距教學 (ASP.NET MVC 約 135hr)  https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

 

寫信給我,不要私訊 --  mis2000lab (at) yahoo.com.tw  或  school (at) mis2000lab.net

 (1) 第一天 ASP.NET MVC5 完整影片(5.5小時 / .NET 4.x版)免費試聽。影片 https://youtu.be/9spaHik87-A 

 (2) 第一天 ASP.NET Core MVC 完整影片(3小時 / .NET Core 6.0~8.0)免費試聽。影片 https://youtu.be/TSmwpT-Bx4I 

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm  。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b  


ASP.NET遠距教學、線上課程(Web Form + MVC)。 第一天課程, "完整" 試聽。 

.........   facebook社團   https://www.facebook.com/mis2000lab   ......................

.........  YouTube (ASP.NET) 線上教學影片  https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/

 

Blog文章 "附的範例" 無法下載,請看 https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍(嚴格認定)。

...................................................................................................................................................... 

ASP.NET MVC  => .NET Core MVC 線上教學  ...... 第一天課程 完整內容 "免費"讓您評估 / 試聽

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講   事先錄好的影片,並非上課側錄!   觀看時,有如「一對一」面對面講課