第4章 网上投票系统的设计过程
网上投票系统主要由两部分组成:访问者使用界面和系统维护页面。访问者使用页面主要是提供:参与调查、相关操作的界面。系统维护页面为网站的维护人员提供维护网上投票系统的界面,包括管理入口,添加新参与调查,新公告,终止参与调查,解除终止,删除参与调查,设置精华参与调查,用户注册,查看新闻等功能。
4.1 访问者使用页面
访问者使用界面包括参与调查界面和相关操作。
4.1.1参与调查界面
通过表单将选择的信息传递给文件default.asp,default.asp程序判断访问者是否曾经为该参与调查项目投过票,如果未投过票,程序将参与调查信息写入myvote数据库中。网上投票系统实现的关键就是排除重复计票的问题,也就是说一个访问者就一个问题只能投一次票,这样才能保证参与调查的真实性,体现参与调查的价值。要保证不重复计票,可以通过几种不同方法实现。例如,如果要求只有注册会员才能参与调查,可以保存每个参与调查者的会员ID,在每次有新参与调查前检查参与调查者的会员ID是否存在,如果不存在则可以参与调查,否则不能进行参与调查。接下来请浏览网上投票系统的参与调查显示页面:
参与调查显示页面
访问者选择完参与调查选项后,单击【参与调查】按纽,参与调查结束后,该页面中的程序将判断该访问者是否投过票,如果未投过票将把参与调查写入Access数据库中的vote表里,vote表就会显示出各个选项的票数以及总的票数。Web服务器把访问者的选项传递给下一页面,并通过rstemp("lastvote")=now
rstemp("voteid")=rstemp("voteid")&"|"&id
rstemp.update
set rstemp=nothing
set rs=nothing
set conn=nothing
语句显示出“您已经投过票了”的字样,此种情况由参与调查者的ID号来判断。虽然本系统没有单独设置单选按钮,但多选按钮中也具备了单选的功能。
页面中显示的参与调查结果主要是用用图表方式来显示结果的,因此下面着重介绍条形图表的形成过程。
首先,程序定义了记录各参与调查选项的得票数和总参与调查数的变量。当连接数据表vote之后,程序首先保存各参与调查选项的得票数。
在本参与调查系统中采用水平条形图来显示各参与调查选项得票数的相对比例,给访问者直观的结果。条形图采用1×1像素的图片,通过计算各项参与调查结果的相对比例使显示的图片具有不同的宽度,即不同的Width属性,这种采用不同的定制宽度来显示图片的技巧,在Web页面的设计中经常用到,可以有效地降低网络数据的传送量。除了采用图形显示参与调查结果,还可以使用其他的方法。例如可以采用垂直的柱状图,其实现方
法与本例相似,不同的是需要改变图片的高度。也可以采用Microsoft公司的Chart控件,这个控件可以在Web页面上显示条形图、饼状图和折线图等。另外,也可以使用其他公司专门为ASP制作的图形生成组件,这样可以将参与调查结果图片在Web服务器端预先生成,然后传送到访问者的浏览器上直接显示。
系统首页:
用户注册界面:
4.1.2 相关操作
相关操作主要有展开参与调查,紧缩参与调查,热门参与调查,精华参与调查,帮助文件,学院首页,联络作者的页面。下面将把它的用户界面的结构图画出来,以便大家对相关操作有个初步的了解。
(1)展开参与调查和紧缩参与调查
为了给访问者参与调查时带来方便,本系统将设置了展开参与调查和紧缩参与调查两功能。在默认状况下为“紧缩参与调查”,首页只显示最新提交的那条参与调查,点击“展开”进入“展开参与调查”则会显示更多的参与调查。但每页最多只能显示五条参与调查项目。其展开、紧缩的实现代码如下:
<%if mode="contract" then%><a href=default.asp?mode=expand title=点击进入展开模式>展开参与调查</a>
<%elseif mode="expand" then%><a href=default.asp?mode=contract title=点击进入紧缩模式>紧缩参与调查</a><%end if%></td>
如果参与调查项目比较多(大于5条),则展开参与调查时多余的参与调查项目将在下一页显示出来。也就是说这个时候页面最下面一行的【上一页】和【下一页】的按钮将自动
有效。代码如下:
<%if ipage<=1 then%>上一页<%else%>
<a href=default.asp?mode=<%=mode%>&action=<%=action%>&page=<%=ipage-1%>>上一页</a><%end if%>
<%if ipage<voters.pagecount then%>
<a href=default.asp?mode=<%=mode%>&action=<%=action%>&page=<%=ipage+1%>>下一页</a><%else%>下一页<%end if%></td>
(2)热门参与调查
热门参与调查主要是为访问者和系统维护者提供一个了解参与调查项目的平台,知道哪些项目较热门。通过代码<a href=default.asp?mode=expand&action=hot title=热门参与调查>热门参与调查</a>实现,当你点击热门参与调查时,系统将会把那些被访问次数较多的参与调查项目显示出来。对系统维护者来说也是给了他们一个改进页面的机会,可以使自己所设计的网页更受欢迎,被访问的次数更多。
(3) 精华参与调查
精华参与调查主要是给访问者查看哪些参与调查项目被维护者设置成了精华参与调查。如果管理区域中管理员没有对参与调查项目中的参与调查进行精华参与调查设置,那么您单击之后将会显示一个框,上面将有“还没有发布参与调查”的字样。如果设置过系统将会把所有的精华参与调查显示在页面上。<a href=default.asp?mode=expand&action=best title=精华参与调查>精华参与调查</a>
(4) 帮助文件和学院首页
帮助文件是为了给访问者一个初步了解本参与调查系统的设计人员的思路而设置的,同样学院首页则是方便用户直接访问学院首页,在此就不详细加以分析。
(5) 联络作者
利用outlook与作者联系,其图如下:
发送E-mail的图
此项功能将方便访问者与作者联系,提出建议,进行交流。
4.2 系统维护页面
系统维护主页面可以说是整个网上投票系统的核心。在这个页面上分页显示所有参与调查项目的参与调查信息。通过这个页面可以实现系统维护所需要的各种功能。
系统维护页面包括管理入口(即管理员登录)、新参与调查、新公告、终止、解除终止、删除、精华、撤消精华等功能。只有在这部分正确地设置了在线参与调查信息后,访问者使用页面才能正常工作。下面将把系统维护界面的结构图画出来,以便大家对用户界面有个初步的了解。