管理班级风采展示网页的设计与测试.docx
《管理班级风采展示网页的设计与测试.docx》由会员分享,可在线阅读,更多相关《管理班级风采展示网页的设计与测试.docx(25页珍藏版)》请在冰点文库上搜索。
管理班级风采展示网页的设计与测试
【关键字】管理
班级风采展示网页的设计与测试
摘要
班级风采网站是为了合理利用网络资源、提供班级学习与交流、有效管理班级事务的网络平台。
本网站基于B/S模式,在ASP.net集成开发环境下采用C#语言开发完成。
本网站由用户模块、在线论坛、风采相册、留言簿模块与管理模块等构成,其中用户模块实现了用户注册、登陆与修改个人资料等功能;在线论坛提供交流平台;风采相册实现图片上载和在线浏览功能;留言簿模块实现网上留言功能;管理模块实现用户管理、论坛管理、相册管理与留言簿管理等功能。
本网站能促进班级内学生交流学习,实现用户自由访问,促进学习相互了解,增强班级凝聚力。
关键字:
网站;B/S模式;ASP.net;C#
TheDesignofClass-StyleWebsiteBasedonASP.net
Abstract
Thewebsiteofclass-styleisusedtorationalizetheuseofnetworkresources,providelearningandcommunication,andeffectivelymanagetheclasses’affairs.ThiswebsiteiscompletedbasedontheB/Smode,withASP.netintegrateddevelopmentenvironmentandC#language.Thiswebsiteisconsistedoftheusermodule,theonlineforum,album-style,guest-bookmoduleandthemanagementmodule.Theusermoduleisconsistedofuser’sregistration,loginandthepersonalinformation.Theonline-forumisusedforthecommunication.Thealbum-stylecontainspictureup-loadingandonlinebrowsing.Theguest-bookmoduleaccomplishestheonlineleavingmessages.Theusermanagementmodulecanaccomplishtheforummanagement,albummanagementandguest-bookmanagement.Thiswebsiteistopromotethecommunicationduringthestudentsinclasslearningandisachievedfreeaccesstousersforlearningmutually,andincreasesclasscohesion.
Keywords:
website;B/Smode;ASP.net;C#
论文总页数:
24页
1.引言
1.1设计背景
随着网络技术不断发展,计算机的普及,越来越多的人拥有了自己的电脑,越来越多的学校和班级通过计算机网络来管理其各项事务。
同时,学生与学生之间通过网络来交流的方式也日趋频繁。
在这种潮流的驱使之下,应该采用什么样的方式来更好的管理学生的各项信息,班级的各项日常事务,以及怎样使学生之间能够更好的交流,成为一个问题。
本系统使用ASP.NET技术的动态网页与SQLServer2000数据库结合设计建立的一个网络班级风采网站。
用户首先通过内部网络访问本网站,进行简单的注册并经管理员审核通过后,即拥有了使用本网站上所提供的除管理模块外的各功能的权力。
功能模块包括在线论坛、留言簿、风采相册等。
在线论坛提供用户之间的主要的交流的平台,用户可以发起自己的帖子,来引起班级其它同学的对本帖的讨论或回复,同时用户也可对自己或别人的帖子提出自己的见解,从而很好地促进了班级内同学的交流。
留言簿提供网上留言功能。
留言可以是老师班长或其它同学的留言,通过网络的迅捷的传输速率达到快速了解及处理班级事务的目的。
风采相册可以将班级内同学的相册传到网站上自由浏览,增加班级的亲和力。
以上的几个功能很好的解决了上面所提出的问题。
1.2系统配置
运行本系统需要满足以下的一些配置要求。
硬件环境
服务器端/客户端:
处理器:
IntelPentium4
内存:
256M
硬盘空间:
20G
软件环境
操作系统:
Windows2000/2003/XP
网络协议:
TCP/IP
浏览器:
InternetExplorer6.0
显示器:
VGA或更高分辨率的显示器
1.3开发工具与平台
(1)ASP.NET技术
ASP.NET是一种建立在通用语言上的程序构架,能被用于一台Web服务器来建立强大的Web应用程序。
与以前的Web开发模型相比,它增强了性能。
ASP.NET是在服务器上运行的编译好的公共语言运行库代码,利用早期绑定、实时编译、本机优化和盒外缓存服务,这相当于在编写代码行之前便显著提高了性能。
另外,由于ASP.NET框架补充了VisualStudio集成开发环,相比ASP,使程序设计相对简化,结构更为清晰。
(2)SQLServer数据库
SQLServer是一个具备完全Web支持的数据库产品,提供了对可扩展标记语言(XML)的核心支持以及在Internet上和防火墙外进行查询的能力,提供了以Web标准为基础的扩展数据库编程功能。
同时提供了高效的数据库解决方案,可处理海量数据,是个大型的数据库系统。
其安全性、稳定性、扩展性、保存数据量都远优于access、mysql这些小型数据库。
(3)VisualStudio.NET2003开发环境
VisualStudio.NET2003是Microsoft推出.NET应用程序开发工具。
与以往的WEB开发环境相比,VS2003使执行常见任务变得容易,从简单的窗体提交和客户端身份验证到部署和站点配置。
采用基于文本的分层配置系统,简化了将设置应用于服务器环境和Web应用程序。
由于配置信息是以纯文本形式存储的,因此可以在没有本地管理工具帮助的情况下应用新设置。
在设计时考虑了可缩放性,增加了专门用于在聚集环境和多处理器环境中提高性能的功能。
另外,进程受到运行库的密切监视和管理,以便当进程行为不正常(泄漏、死锁)时,可就地创建新进程,以帮助保持应用程序始终可用于处理请求。
2.概要设计
2.1功能需求
为了满足班级风采网站的交流的根本目的,根据班级所固有的特点,本网站应包括五大模块:
用户模块、在线论坛、风采相册、留言簿模块与管理模块。
用户模块主要功能就包括角色划分与用户注册,角色主要划分为一般用户和管理员,一般用户可以对自己的信息查询及修改等,管理员通过管理模块来管理整个网站;在线论坛,论坛主要实现注册用户能在此网站平台之上交流,一般用户可以回复别人的发言,亦可提出自己的言论,以获取他人的建议与意见;风采相册,包括用户上传图片以及图片的浏览功能;留言簿模块,实现用户在线留言。
最后是管理模块,主要是管理员对于整个网站的综合性管理,包括用户模块管理、在线论坛管理、相册管理与留言簿管理。
2.2系统流程
根据设计要求,用户登陆本网站首页时,选择用户的角色,管理员选择管理员入口进入管理员登陆页面,验证成功后直接进入网站管理模块,对班级的各模块进行管理,包括用户管理、论坛管理、相册管理与留言簿管理。
一般用户通过普通用户入口进入一般用户登陆界面,在此页面登陆验证成功后即拥有了访问网站各项功能的权力。
包括个人信息、论坛、上载图片、浏览图片、给班级留言等功能。
班级风采网站使用流程如图2-1所示。
成功录
失败录
网站首页
管理员入口
普通用户入口
管理员
用户管理
登录
注册
论坛主页
上载图片页
浏览图片页
个人信息页
错误处理页
成功录
论坛管理
相册管理
留言簿管理
是录
留言簿主页
否录
图2-1网站使用流程图
2.3模块组织
整个班级网站主要包括的模块有:
用户模块、论坛模块、管理员模块、相册模块与留言簿模块。
其中管理员模块可化分为用户管理模块、论坛管理模块、相册管理模块与留言簿管理模块四大块。
模块组织如图2-2所示。
用户模块
论坛模块
管理员模块
相册模块
班级网站
用户管理模块
论坛管理模块
相册管理模块
留言簿模块
留言簿管理模块
图2-2网站模块组织图
3.数据库设计
3.1需求分析
作为一个班级风采网站系统,同其他类型的网站一样,首先应该包括用户表,用户表用来存储已注册用户的各项信息。
在线论坛对应于数据库中两张表:
帖子信息表和帖子回复表。
帖子信息表中存储了论坛中用户发的所有帖子。
同时每一个帖子都应有它的回复,在数据库的存储中,将所有的帖子的回复都放到了帖子回复表中,通过表中帖子的不同编号来区分不同的帖子的回复。
网站还包括相册模块和留言簿模块,因此数据库中还应包含图片信息表与留言表用来存储上载图片的所有信息和留言的各项信息。
3.2数据库表结构
根据需求分析及模块划分,设计数据库表结构如下。
(1)用户信息表
用户信息表中包括有用户编号,用户名,用户密码,用户QQ,用户E-mail,用户自我描述共六个字段,主键为用户编号,具体设计如表3-1所示。
表3-1用户基本信息表Users
编号
字段名称
数据类型
说明
1
ID
Int
用户ID(主键)(自动)
2
UserName
Nvarchar(20)
用户登录名
3
Pass
Nvarchar(20)
用户密码
4
QQ
Int
用户QQ号
5
Mail
Nvarchar(50)
E-mail
6
Sign
Nvarchar(200)
用户自我介绍
(2)帖子信息表
表3-2帖子信息表Threads
编号
字段名称
数据类型
说明
1
ThreadID
Int
帖子编号(主键)
2
Author
Nvarchar(50)
发帖人用户名
3
Subject
Nvarchar(50)
帖子标题
4
Content
Ntext(16)
帖子内容
5
Reply
Int
帖子总回复数
6
TotalView
Int
帖子被浏览数
7
PostTime
Datetime
发帖时间
帖子信息表包括帖子编号,发帖用户名,帖子标题,帖子内容,帖子总回复数,帖子总浏览数,发帖时间共七个字段,主键为帖子编号,具体设计如表3-2所示。
(3)帖子回复表
回复信息表包括回复信息编号,帖子编号,回复标题,回复内容,回复者用户名,回复时间共六个字段。
主键为回复信息编号,帖子编号是此表的外键,用此字段与帖子表的主键帖子编号相联系。
具体设计如表3-3所示。
表3-3回复信息表Messages
编号
字段名称
数据类型
说明
1
MessageID
Int
信息ID(主键)(自动)
2
ThreadID
Int
帖子编号(外键)
3
Subject
Nvarchar(50)
回复信息标题
4
Content
Ntext
回复内容
5
Author
Nvarchar(50)
回复者
6
PostTime
Datetime
回复时间
(4)相册表
相册表包括相片编号,相片名称,相片上载时间共三个字段,主键为相片编号,具体设计如表3-4所示。
表3-4相册表Photos
编号
字段名称
数据类型
说明
1
PhotoID
Int
照片ID(主键)
2
PhotoName
Nvarchar(50)
照片名称
3
uploadtime
Datetime
上传时间
(5)留言表
留言表包括留言编号,留言者姓名,留言标题,留言内容,留言时间共五个字段,主键为留言编号,具体设计如表3-5所示。
表3-5留言表GuestBook
编号
字段名称
数据类型
说明
1
GuestBookID
Int
留言ID(主键)(自动)
2
Subject
Nvarchar(50)
留言标题
3
Content
Ntext
留言内容
4
Username
Nvarchar(50)
留言者姓名
5
Uptime
Datetime
留言时间
4.详细设计
4.1导航栏与登录模块
4.2论坛模块
用户登陆后进入论坛主页ShowThread.aspx。
该页面主要设计目的是显示论坛所有的帖子,点击某一帖子进入该帖子对应的页面。
并可以通过点击发表帖子控件进入发表帖子页面,将发表的帖子即时的显示在帖子主页上。
页面设计如
图4-1所示。
此页面主要控件是myDataList控件,其它为显示控件或超级连接控件。
后台首先通过Page_Load调用相关方法实现myDataList的数据绑定。
绑定之前首先计算当前页面显示的总的帖子数,调用ThreadsDB中的CurrentPageThreads函数,同时对页面分页。
图4-1论坛页面设计视图
(1)Page_Load代码如下所示:
privatevoidPage_Load(objectsender,System.EventArgse)
{
if(!
this.IsPostBack)
{
intTotalPage;
intrecords;
intpage;
if(Request["page"]==null)
{
page=1;
}
else
{
try
{
page=Convert.ToInt32(Request["page"]);
}
catch
{
page=1;
}
}
ThreadsDBthreads=newThreadsDB();
DataSetds;
ds=threads.CurrentPageThreads(page,12,outTotalPage,outrecords);
lblPage.Text=lblPage2.Text=page+"/"+TotalPage;
lblRecord.Text=lblRecord2.Text=records.ToString()
stringsUrl=;
intstart=sUrl.LastIndexOf("&page");
if(start!
=-1)
sUrl=sUrl.Remove(start,sUrl.Length-start);
if(page<=1)
{
hlPrev.NavigateUrl=sUrl+"&page=1";
hlPrev2.NavigateUrl=sUrl+"&page=1";
}
else
{
hlPrev.NavigateUrl=sUrl+"&page="+(page-1);
hlPrev2.NavigateUrl=sUrl+"&page="+(page-1);
}
if(page{
hlNext.NavigateUrl=sUrl+"&page="+(page+1);
hlNext2.NavigateUrl=sUrl+"&page="+(page+1);
}
else
{
hlNext.NavigateUrl=sUrl+"&page="+page;
hlNext2.NavigateUrl=sUrl+"&page="+page;
}
myDataList.DataSource=ds;
myDataList.DataBind();
}
}
(2)上面代码调用到的CurrentPageThreads()的方法代码如下:
publicDataSetCurrentPageThreads(intcurrentPage,intpageSize,outinttotalPage,outintrecords)
{
SqlConnectionmyConnection=newSqlConnection(ConfigurationSettings.AppSettings["ConnectionString"]);
SqlDataAdaptermyCommand=newSqlDataAdapter("GetThreads",myConnection);
=CommandType.StoredProcedure;
DataSetallThreads=newDataSet();
myCommand.Fill(allThreads);
DataSetdsCurrentThreads=newDataSet();
records=allThreads.Tables[0].Rows.Count;
intstartIndex=(currentPage-1)*pageSize;
intendIndex=startIndex+pageSize;
totalPage=records/pageSize;
if(totalPage*pageSize{
totalPage++;
}
if(endIndex>records)
endIndex=records;
dsCurrentThreads=allThreads.Clone();
for(inti=startIndex;i{
DataRowrow=dsCurrentThreads.Tables[0].NewRow();
row.ItemArray=allThreads.Tables[0].Rows[i].ItemArray;
dsCurrentThreads.Tables[0].Rows.Add(row);
}
returndsCurrentThreads;
}
(3)CurrentPageThreads()方法调用存储过程GetThreads,代码如下:
CREATEPROCEDUREGetThreadsas
Select(ThreadID,Subject,Author,Content,TotalView,Reply,PostTime)
FromThreads
GO
(4)最后,在HTML页中对数据列进行具体的绑定,其中需将帖子标题列绑定在超链接中。
具体代码如下:
<%#DataBinder.Eval(Container.DataItem,"ThreadID")%>
href='ShowMessages.aspx?
ID=<%#DataBinder.Eval(Container.DataItem,"ThreadID")%>'>
<%#DataBinder.Eval(Container.DataItem,"Subject")%>
<%#DataBinder.Eval(Container.DataItem,"Author")%>
<%#DataBinder.Eval(Container.DataItem,"TotalView")%>
<%#DataBinder.Eval(Container.DataItem,"Reply")%>
<%#DataBinder.Eval(Container.DataItem,"PostTime")%>
|
4.3班级相册模块
(1)图片上载
图片上载页面主要控件由文件上传控件fileMyFile和Button1后台代码来实现。
按钮Button1首先取得上传文件的文件名与文件扩展名,然后对文件扩展名进行比较,保证上传的为bmp,jpeg,jpg,gif四种图片中的一种,之后用photos类的对象photo调用类中的方法CheckPhotoName(),判断上传图片名在数据库中是否有重名。
若无重名,则将图片写入到固定的文件夹中,同时将此图片的文件名定入数据库中,调用类photos的方法InsertPhoto()。
设计视图如图4-2所示。
Button1代码如下所示:
privatevoidButton1_Click(objectsender,System.EventArgse)
{
Photosphoto=newPhotos();
stringfilename=Path.GetFileName(;
stringfileExt=Path.GetExtension(filename);
if((fileExt==".gif")|(fileExt==".jpeg")|(fileExt==".bmp")|(fileExt==".jpg"))
{
if(photo.CheckPhotoName(filename))
{
Label2.Text="上传文件名已经存在.请更改文件名后重新上传.";
}
else
{
"allphotos\\"+filename));
photo.InsertPhoto(filename);
Label2.Text="上传成功";}
}
else
{
Label2.Text="请上传图片,只支持bmp,jpeg,gif,jpg格式.";
}
图4-2图片上载页设计视图
CheckPh