毕业设计（论文）

题目班级网站

系 (院) 电子信息系

专业软件技术

【摘要】: 本文主要介绍通过管理员维护基础信息，维护使用系统角色。实现了班级信息的交流和发布，班级网站是一个班级和外界交流的窗口，也是本班同学相互交流的平台。随着Internet的飞速发展与进步，及时的信息交流是非常必要的。为了加强师生间、学校和学生及时的信息交流与沟通，班级网站的出现实现了这一交流平台。管理员通过后台登录，可发布重要的班级信息新闻等消息；学生能在主页查看最新的班级信息，也可以通过注册登录在留言板块进行留言，拥有评论他人留言的权限。实现了学生之间的信息交流。本网站采用http://技术作为创建应用程序的方式，以C#作为编程语言，采用SQL Server数据库作为后台数据库。它是基于Browser/Server结构下形成的数据驱动的Web应用程序。

关键词：C#；Visual Studio 2010；SQL Server；http://；Ajax；班级网站

[Abstract]: This paper describes the basis of the information through the maintenance manager, maintenance and use system roles. Class implements the exchange of information and publishing, class website is a window class and the outside world, but also a platform for mutual exchange bumban students. With the rapid development and progress of the Internet, and timely exchange of information is essential. In order to strengthen between teachers and students, school and student information exchange and communication, appears timely implementation of this class website platform. Manage administrators can publish news and other important class information messages; class students can view the latest information on the home page, you can also leave a message in the message carried Register Login plates, others have permission to comment message. Achieve the exchange of information between students.This site uses http:// technology as a way to create applications to C# as a programming language, using the SQL Server database as the backend database. It is based on the data under the Browser / Server structure formation driven Web applications.

Keywords: C#；Visual Studio 2010；SQL Server；http://；Ajax；Class website

第1页

目录

1、绪论 (1)

1.1 课题研究背景综述 (1)

1.2 课题研究目的和意义 (1)

1.3 可行性分析 (1)

1.3.1 经济可行性 (1)

1.3.2 技术可行性 (1)

1.3.3操作可行性 (2)

1.3.4 管理可行性 (2)

2、系统需求分析 (2)

2.1系统需求功能分析 (2)

2.1.1 网站前台页面模块 (2)

2.1.2 后台管理系统模块 (3)

2.2 前台模块功能图 (3)

2.3 后台系统模块功能图 (3)

3、数据库设计 (4)

3.1 用户管理表(TB_User） (4)

3.2 评论管理表(TB_Reply） (4)

3.3 公告管理表(TB_Notice） (5)

3.4 留言管理表(TB_Message） (5)

3.5 图片管理表(TB_Images） (5)

3.6 管理员表(TB_Admin） (6)

4、功能实现 (6)

4.1 前台界面及布局代码 (6)

4.1.1首页设计（Index.aspx） (6)

4.1.2用户注册（UserRegister.aspx） (6)

4.1.3用户登陆（UserLogin.aspx） (11)

4.1.4用户信息修改（UserInfo.aspx） (15)

4.1.5留言板（MessageBoard.aspx） (16)

4.1.6公告板（NoticeList.aspx） (21)

4.1.7相册板（Photo.aspx） (23)

4.2 后台布局界面和管理员权限功能 (25)

4.2.1 后台管理员登录页面（AdminLogin.aspx） (25)

4.2.2公告管理 (27)

4.2.3留言管理 (33)

第2页

4.2.4相册管理 (35)

5、结论 (40)

6、鸣谢 (40)

参考文献 (40)

第3页

1、绪论

1.1 课题研究背景综述

随着进入新的学校环境，对新班级的不熟悉，造成了对新学校新事物的无知。许多时候都没及时获取到班级的最新通知而错过了处理时间，学校有专门的学校网站，却没有专门的班级网站，造成了班级消息不能及时传达到各个学生。因此班级网站由此诞生了，专门的班级网站，方便便捷的信息管理，弥补了传统班级的管理方式的缺陷，提供了一个师生之间的交流平台。学生可快捷直达的通过班级网站了解自己的班级信息；学生之间的交流也通过网络得到了实现。

1.2 课题研究目的和意义

班级网站涉及到学生班级管理，例如通知一项班级紧急通知，如果通过老师一个一个学生联系，那将会浪费大量的时间和人力，而且容易造成处理时间的不及时，学生方面容易得不到完整的通知。为了满足老师和学生对班级信息的交流的需求，急需建设一个班级网站来完善传统班级管理的缺陷。Internet的快速发展，许多信息都是通过网络得到快速的传递，这些都是传统班级管理方式所无法比拟的优点。例如：通知信息的更新及时性、查找方便、可靠性高、历史记录的完善性、实现了学生之间的交流平台等。这些优点极大地帮助了老师对班级的管理，也是班级管理的科学化、正规化管理的重要条件。

1.3 可行性分析

班级网站是使用对班级生活以及以后方便联系而开发的系统。通过使用计算机技术、信息技术、数据库技术，来实现远程网络联系，资源共享为目标，利用先进的硬件设备，对班级网站进行一定的错误的调试和纠正以及网站完整性的规划。

在该项目的可行性研究与计划工作中，对网络工作环境新型的实地调查和自己掌握的知识的程度，通过对资料的整体网站的构思和实现程度进行的全面分析得出了结论，开发网站的任务是完全可以达到的。主要分析如下所述。

1.3.1 经济可行性

主要是对项目的经济效益进行评价，本系统开发经费在经济上是可以接受的，并且本系统实施后可以显著提高老师的工作效率和信息管理。所以本系统在经济上是可行的。

1.3.2 技术可行性

本系统开发的网站前台页面采用HTML语言编写，CSS+HTML进行样式布局的

第1页

设定，进行前台静态页面的设计，后台采用现在流行的http://开发技术，实现后台管理的多个模块。实现系统的主要涉及技术及工具如下：

开发技术：http://，SQL Server2008,AJAX,jQuery,DIV+CSS（兼容

CSS+HTML）

开发工具： Visual Studio 2010，SQL Server2008 R2。

因此，在技术上，开发班级网站在技术上是可行的。

1.3.3操作可行性

无论是一般访问者还是系统管理员只要可以连接互联网都可以通过浏览器、对班级网站进行浏览，对每个不同的角色都有不同的操作权限。有明确的后台管理员对网站进行管理操作，所以班级网站在操作上是可行的。

1.3.4 管理可行性

随着时代的发展，人员素质己逐步提高，不论是对于电脑系统的基本操作还是对于系统的维护都有了一定的基础。同时还可以配置专业的电脑维护人员来维护电脑，不必担心电脑故障问题。

综上所述，班级网站开发目标已明确，在经济、技术、操作和管理等方面都可行，并且投入少、见效快、易管理性。因此班级网站的开发是完全可行的。

2、系统需求分析

2.1系统需求功能分析

需求分析是软件定义时期的最后阶段，它回答了“系统必须做什么？”这个问题。

网站的构成主要分为：

网站系统前台页面

后台管理系统

2.1.1 网站前台页面模块

●首页模块：

班级网站主要是提供老师发布班级消息，提供师生交流的一个平台。展示班级网站的公告模块、留言模块、班级相册、网站的LOGO等。

●留言模块：

学生可通过注册登录班级网站，在本模块进行留言进行交流，也可以回复评论他人的留言。

第2页

●公告模块：

可通过公告模块查看最新的班级公告，查看最新的公告消息。

●相册模块：

可查看班级相册的图片，由后台管理员对相册的图片进行管理。

2.1.2 后台管理系统模块

●公告管理模块

该模块管理员可以对公告的信息进行发布、修改、删除功能。

●留言管理模块

该模块管理员可以对留言进行删除管理，同时会把该评论的回复一起进行删除。

●相册管理模块

该模块管理员可以对相册的图片进行删除管理、添加上传和查看功能。

2.2 前台模块功能图

根据班级网站的需求，得出以下网站前台的结构组织图，如图2-1所示：

图2-1 网站前台结构组织图

2.3 后台系统模块功能图

根据班级网站的需求，得出以下网站后台的结构组织图,如图2-2所示：

第3页

图2-2班级网站后台结构组织图

3、数据库设计

3.1 用户管理表(TB_User）

表3-1-1 用户管理表

3.2 评论管理表(TB_Reply）

表3-1-2 评论管理表

第4页

3.3 公告管理表(TB_Notice）

表3-1-3公告管理表

3.4 留言管理表(TB_Message）

表3-1-4留言管理表

3.5 图片管理表(TB_Images）

表3-1-5图片管理表

第5页

3.6 管理员表(TB_Admin）

表3-1-6管理员表

4、功能实现

4.1 前台界面及布局代码

4.1.1首页设计（Index.aspx）

在IE里运行本系统，出现系统的主界面，首页包括左侧的功能导航栏，后台管理的相册图片，右侧显示最新公告、以及最新的留言内容，用户的登陆和注册按钮功能。如图4-1-1所示：

图4-1-1 班级网站的首页

4.1.2用户注册（UserRegister.aspx）

点击注册按钮，进入注册页面。按照提示进行注册操作，包括用户名、密码、确定密码和邮箱。注册的内容会验证是否正确符合注册要求，否则注册失败。如

图4-1-2所示：

第6页

图4-1-2班级注册页面

注册验证代码如下，主要通过JSRegister.js实现效果：

var canregister = true;

function yzaccount() {

var username = $("#text_Register_UserName").val();

var datastr = "AjaxType=FindAccount&account=" + username;

if (username != "" && username != null && username != undefined) {//验证用户名是否为空。

$.ajax({

type: "POST",

url: "UserAjax.ashx",

data: datastr,

dataType: 'json',

success: function (Json) {

if (Json.data == true) {//未被占用返回true

$("#msg_Register_UserName").html("<div

class='success'>OK!</div>"); //添加html，绿色提示框框

}

else {

第7页

$("#msg_Register_UserName").html("<div class='error'>此帐号不可用!</div>"); //添加html，红色警告框框

canregister = false;

}

}

});

}

else {

$("#msg_Register_UserName").html("<div class='error'>请输入用户名!</div>"); //红色警告提示框

canregister = false;

}

}

function yzpassword() {

var password = $("#text_Register_Password").val();

if (password != "" && password != null && password != undefined) {

$("#msg_Register_Password").html("<div class='success'>OK!</div>"); //绿色提示框框

yzaffirmpassword(); //调用验证确认密码；

}

else {

$("#msg_Register_Password").html("<div class='error'>请输入密码!</div>"); //红色警告提示框

canregister = false;

}

}

function yzaffirmpassword() {

var password = $("#text_Register_Password").val();

var affirmpassword = $("#text_Register_AffirmPassword").val();

if (password != "" && password != undefined && affirmpassword != "" && affirmpassword != undefined) {//判断密码，确认密码不为空

if (password == affirmpassword) {//将两个密码进行比较

$("#msg_Register_AffirmPassword").html("<div

class='success'>OK!</div>"); //绿色提示框框

第8页

}

else {

$("#msg_Register_AffirmPassword").html("<div class='error'>两次输入的密码不一致!</div>"); //红色警告提示框

canregister = false;

}

}

else {

$("#msg_Register_AffirmPassword").html("<div class='error'>请输入确认密码!</div>"); //红色警告提示框

canregister = false;

}

}

function yzmail() {

var temp = $("#text_Register_Mail").val();

if (temp == undefined)

temp = "";

//对电子邮件的验证

var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z] {2,3}$/;//验证电子邮件的正则。百度的

if (temp != "") {

if (!myreg.test(temp)) {

$("#msg_Register_Mail").html("<div class='error'>请输入有效的E_mail!</div>"); //红色警告提示框

canregister = false;

}

else {

//ok

$("#msg_Register_Mail").html("<div class='success'>OK!</div>");//绿色提示框框

}

}

else {

//emial空

第9页

$("#msg_Register_Mail").html("<div class='error'>请输入E_mail!</div>"); //红色警告提示框

canregister = false;

}

}

function register() {

var username = $("#text_Register_UserName").val();

var password = $("#text_Register_AffirmPassword").val();

var mail = $("#text_Register_Mail").val();

var datastr = "AjaxType=regedit&account=" + username + "&password=" + password + "&mail=" + mail;

//获取各个输入框中的内容，拼接成指定格式的字符串

$.ajax({

type: "POST",//请求方式，post

url: "UserAjax.ashx",//请求位置

data: datastr,//传递的数据

dataType: 'json',//类型

success: function (Json) {//成功后回调的方法

if (Json.data == true) {

alert("注册成功");//提示注册成功

window.location.href = "UserLogin.aspx";//跳转到用户登录页面

}

else

alert("注册失败");//提示注册失败

}

});

}

$(function () {

$("#text_Register_UserName").blur(yzaccount); //失去焦点的时候。验证用户名是否被占用。

$("#text_Register_Password").blur(yzpassword); //失去焦点的时候。验证密码是否为空

$("#text_Register_AffirmPassword").blur(yzaffirmpassword); //失去焦点的时候。验证两次输入的密码是否一致

$("#text_Register_Mail").blur(yzmail); //失去焦点的时候。验证邮箱是否合法

第10页

$("#button_register").click(function () {

//当单击注册按钮，会触发下面的方法。对输入的信息进行验证。

canregister = true;

yzaccount();

yzpassword();

yzaffirmpassword();

yzmail();

if (canregister == true)

register();

else

alert("注册失败，请核对注册信息。");

}); //注册新用户

$("#button_reset").click(function () {

window.location.reload();

});

});

function closeregisterdiv() {

document.getElementById("UserRegister_div").style.display = "none";

}

function showregisterdiv() {

document.getElementById("UserRegister_div").style.display = "block";

document.getElementById("UserLogin_div").style.display = "none";

}

4.1.3用户登陆（UserLogin.aspx）

注册成功后，进入登陆页面。按照提示进行登陆操作，包括用户名、密码。登陆的用户名和密码会从数据库验证是否正确，否则登陆失败。如图4-1-3所示：

第11页

图4-1-3班级登陆页面

登陆验证代码如下：

var canLogin = true;

function yzLoginName() {

var username = $("#text_Login_UserName").val();

if (username == "" || username == null) {

$("#msg_Login_UserName").html("<div class='error'>请输入用户名</div>");//红色警告框

canLogin = false;

}

else {

$("#msg_Login_UserName").html("<div class='success'>OK!</div>");//绿色提示框

}

}

function yzLoginPassword() {

var password = $("#text_Login_PassWord").val();

if (password == "" || password == null) {

$("#msg_Login_PassWord").html("<div class='error'>请输入密码</div>"); //红色警告框

canLogin = false;

}

第12页