河西学院美术学院网站毕业设计

1、编号： 0813113 毕 业 设 计（2012届本科）题 目： 河西学院美术学院网站 系(部)院： 信息技术与传媒学院 专 业： 计算机科学与技术 作者姓名： 李技 指导教师： 吴建军 职称：副教授 完成日期： 2012 年 5 月 20 日 iv河西学院本科生毕业设计诚信声明本人郑重声明：所呈交的本科毕业设计，是本人在指导老师的指导下，独立进行设计开发工作所取得的成果，成果不存在知识产权争议，除文中已经注明引用的内容外，本论文不含任何其他个人或集体已经发表或撰写过的作品成果。对本文的研究做出重要贡献的个人和集体均已在文中以明确方式标明。本人完全意识到本声明的法律结果由本人承担。 本科毕业设

2、计作者签名： 二一二年五月二十日摘 要学院的网站既是师生互相学习和交流的平台，也是学院对外的信息展示。构建开发一个美术学院网站，可以为该学院提供一个与社会沟通的网络桥梁，并为教学和办公服务。本设计实现了一个“河西学院美术学院网站”。网站采用.net技术，在visual studio2005下使用c#编程语言基于b/s模式进行开发。网站的后台数据库使用microsoft access2003。网站前台实现了新闻公告显示、文件下载、站内搜索、学院概况介绍、作品展示、留言交流等，后台则实现了动态添加、更新、管理新闻公告、学院概况、组织机构、课程建设、师资队伍、党团工作、相关下载等功能。 关键词：网站

3、；asp.net；access ；c#；b/s abstractschool website is not only a exchange platform for teachers and students learning from each other , but also is the college's external information display. construction of the development of an academy of fine arts web site can provide the college students to comm

4、unicate a social network bridges, and for teaching and office services.the design makes a "hexi university school of fine arts website". the website uses .net technology, c # programming language which is based on b / s mode under visual studio 2005. the site's back-end database using

5、the microsoft access2003. in front of website achieve file downloads, search institute fact sheet, the works display, message exchanges, etc., the background of website is dynamically addition, update, management news, college profiles, organization, curriculum development, faculty caucus work, rela

6、ting downloads and other features.keywords: website；asp.net；access ；c#；b/s目 录第一章 设计概述51.1 设计背景与意义51.2 同类或相关网站的开发现状51.3 设计目标与主要工作71.3.1 设计目标71.3.2 设计主要工作7第二章 网站分析与设计82.1 网站分析82.1.1 用户角色分析82.1.2 需求分析82.2 功能模块设计92.2.1 总体设计92.2.2 详细设计92.3 数据库设计112.3.1 概念设计112.3.2 逻辑设计122.4 界面设计152.4.1 前台界面设计152.4.2 后台界面

7、设计16第三章 网站实现173.1 用户登录功能模块的实现173.2 新闻公告模块的实现183.2.1 新闻显示功能的实现183.2.2 新闻添加的实现193.2.3 新闻删除的实现203.2.4 新闻修改的实现213.2.5 fckeditor在管理新闻中引用的实现223.2.6 新闻管理中显示页面分页的实现223.3 菜单管理功能的实现243.4 新闻搜索功能模块的实现263.5 留言功能的实现263.6 滚动公告功能的实现26第四章 网站安装部署和简要使用说明284.1 网站运行环境说明284.1.1 服务器运行环境284.1.2 客户端运行环境284.2 网站安装部署说明294.3 网

8、站简要使用说明29第五章 设计总结30致谢31参考文献32河西学院信息技术与传媒学院毕业设计第一章 设计概述1.1 设计背景与意义信息技术和网络技术的迅速发展和广泛应用，对社会的经济、政治、军事、文化等领域产生越来越深刻的影响，也正在改变人们的工作、学习、生活、交流方式，以及信息的获取、处理、交流和应用等能力。学院的网站既是师生互相学习和交流的平台，更是学院对外的信息展示。广大考生可以通过此平台了解学院的基本信息和教学信息等，加深了解，帮助考生更好的选择学校。原美术系网站在页面布局、模块设置等方面不够合理，在信息显示方面存在一些不足，缺少师生交流的平台等，这些问题使得学院的网站没有发挥出它应有

9、的功效。设计开发美术学院网站对有效的组织管理本学院的教学工作，同时展现美术学院的动态及广大师生的优秀作品，加强师生交流，推进学院更好的发展具有实际意义。1.2 同类或相关网站的开发现状在实现设计之前，我查阅了同类或相关网站的开发情况。其中对本网站有帮助的网站有北京大学艺术学院网站1、吉林大学艺术学院网站2、兰州大学艺术学院网站3、清华大学美术学院网站4、西北师范大学美术学院网站5。1. 北京大学艺术学院网站北京大学艺术学院网站如图1-1所示：该网站布局整齐合理，操作方便，采用图片新闻展现新闻动态能很好的吸引浏览者的注意力值得借鉴。图 1-1 北京大学艺术学院主页图2. 吉林大学艺术学院网站吉林

10、大学艺术学院网站设计中的背景给人眼前一亮的感觉，此外该网站采用了多种图片浏览方式，网站其中一页截图如图1-2所示图 1-2 吉林大学艺术学院作品锦集页面图3. 兰州大学艺术学院网站该网站界面简洁美观，采用了上左下为图片右边为内容的方式设计，版面和界面设计有新意；具体界面设计如图1-3所示。图 1-3 兰州大学艺术学院主页图4. 清华大学美术学院网站，如图1-4所示：该网站运用菜单、图标、按钮、窗口、热键等，增强人机交互功能，每一页都有明确清晰的导航；具体效果图如下所示：图 1-4 清华大学美术学院主页图5. 西北师范大学美术学院网站该网站采用图片超链接，页面的设计和布局提供了很好的导向作用。同

11、时该网站在界面设计上独特新颖，用错落有致的图片拼凑设计代替传统的整个一大张图片布局，给人以艺术的美感，该网站其中一个页面截图如图1-5所示。图 1-5 西北师范大学美术学院网站图以上网站都是前台展示，后台可以通过管理页面管理的动态网站。从栏目来看，主要包括学院简介、师资队伍、机构设置、党团工作、资料下载、新闻浏览、成果简介和作品展示等。1.3 设计目标与主要工作1.3.1 设计目标本设计的目标是构建一个河西学院美术学院网站, 要求该系统包括前台和后台两部分，并且通过系统的后台能动态管理前台的相关内容。1.3.2 设计主要工作在充分了解网站需求的基础上，本设计的主要工作如下：1系统功能模块划分2

12、数据库设计3编码实现第二章 网站分析与设计2.1 网站分析2.1.1 用户角色分析本网站用户分为普通用户和管理员用户两类。普通用户包括老师和学生，不需要登录即可访问该网站，管理员用户需登录才可进行管理。2.1.2 需求分析 普通用户需求普通用户需求具体可以分为浏览网站新闻公告需求、下载相关文件需求、了解学院概况介绍需求、查看党团动态需求、了解组织机构需求、查看美术作品需求、签写并查看留言需求等。普通用户功能需求如图2-1所示。查看课程信息需求普通用户需求浏览新闻公告需求留言需求签写留言需求查看留言需求下载相关文件需求查看党团动态需求查看展示作品需求了解学院概况需求了解组织机构需求

13、查看师资队伍需求用户浏览信息需求图2-1 普通用户需求 管理员用户需求管理员用户需求具体可分为新闻公告管理需求、课程信息管理需求、师资队伍管理需求、学院组织机构管理需求、学院概况管理需求、下载管理需求等。管理员用户功能需求如图2-2所示。增删改师资队伍需求增删改下载文件需求管理员用户需求新闻管理需求添加新闻需求编辑新闻需求组织机构管理需求删除新闻需求公告管理需求添加公告需求编辑公告需求删除公告需求课程管理需求添加课程需求删除课程需求编辑课程需求编辑组织机构需求学院概况管理需求师资队伍管理需求下载管理管理需求留言内容管理需求删除回复留言需求编辑学院概况需求图2-2 管理员用户需求2

14、.2 功能模块设计2.2.1 总体设计本网站主要包括前台展示和后台管理两大部分。前台用于各栏目相关信息的展示以及显示搜索结果。后台实现了超级管理员对普通管理员的管理和对所有前台信息管理，普通管理员只能根据其所拥有的权限添加、修改、管理部分相关信息。如图2-3所示：河西学院美术学院网站网站后台管理网站前台展示 图2-3 网站总体结构图2.2.2 详细设计前台用于各栏目的信息浏览，栏目划分如下：1.本站首页包括：图片新闻、新闻公告、学院介绍、超链接资源、管理员登录和站内搜索。2.学院概况包括：美术学院成立情况，教学资源以及师资配备。3.师资队伍包括：美术学院教师的详细信息。4.课程建设包括：美术学

15、院所开设的每门课程的详细信息及参考书。5.组织机构包括：美术学院领导组织机构详细信息。6.相关下载包括：美术学院常用到的软件以及相关附件下载。7.党团工作包括：组织机构、党员工作、团员工作、学生会工作、活动要闻。8.作品展示包括：最新作品、教师作品、学生作品、其他作品以及最新公告。9.建议留言包括：浏览者留言、管理员回复。网站前台模块划分如下图2-4所示：学 院 概 况师 资 队 伍党 团 工 作组 织 机 构课 程 建 设作 品 展 示相 关 下 载管 理 登 陆本 站 首 页留 言 建 议 站 内 搜 索前 台 图2-4 网站前台模块后台主要为管理员提供一个管理平台，主要包括各功能模块的添

16、加、编辑与删除工作，实现前台信息的动态更新。后 台 管 理组 织 机 构 管 理建 议 留 言 管 理相 关 下 载 管 理课 程 建 设 管 理菜 单 管 理公 告 管 理新 闻 公 告 管 理师 资 队 伍 管 理学 院 概 况 管 理图2-5 网站后台模块2.3 数据库设计2.3.1 概念设计概念结构设计：概念结构设计将需求分析得到的用户需求抽象为信息结构即设计概念模型的过程就是概念结构设计。概念结构设计阶段，先根据要求，画出能反映每个应用需求的e-r图，然后对初始的e-r图进行优化，消除冗余和可能存在的矛盾。概念模型的设计是对用户需求的客观反映，并不涉及具体的计算机软件、硬件环境。通过

17、对本网站的需求进行的分析、综合、归纳与抽象，分析各个实体之间的联系，画出如下e-r图：简介发表者新闻标题管理员用户id用户名用户密码设计新闻教师信息课程简介学院简介内容姓名性别照片学院学院简介组织机构课程名称学院简介教科书课程详细信息信息专业作品作品名称作者名称作品图片添加时间作者类别图片作品名称n1图2-6 网站总体e-r图2.3.2 逻辑设计 管理员表管理员表主要用来对管理员登录系统进行管理时的身份认证，该表的主要字段及其含义如表3-1所示。表2-1 管理员表列名数据类型长度说明idusernameuserpwd自动编号文本文本3030标识种子，自动递增(主键)管理员用户名管

18、理员密码 课程表课程表主要用来对美术学院所开设的课程分别进行详细的介绍，并且提供了所开设课程的参考图书。表2-2 课程表列名数据类型长度说明idcnamespecialtyimagesdescriptionbook自动编号文本文本文本备注文本305050标识种子，自动递增(主键)课程名专业图片课程详细信息所使用的参考教科书 下载表下载表主要用来提供美术学院学生所用到的软件、作品以及相关电子书籍的下载。表2-3 下载表列名数据类型长度说明iddownloadnamepathdescriptionaddtimeimagesclicktimessizeauthor自动编号

19、文本文本备注日期/时间文本数字文本文本50505050标识种子，自动递增(主键)文件名称路径文件详细信息添加日期图片下载次数文件大小版权 导航表导航表是用来对首页导航栏进行动态更新的数据表。管理员登陆以后，可以通过后台添加、删除和编辑导航，并且可以通过menuplace字段控制导航的显示顺序。表2-4 导航表列名数据类型长度说明midmenunameurlsmenuplace自动编号文本文本文本305050标识种子，自动递增(主键)链接名称链接路径连接的顺序 公告表公告表是用来对河西学院美术学院公告进行管理的表格。用户可以通过网站前台查看学院的公告信息，管理员可以通

20、过后台管理公告。表2-5 公告表列名数据类型长度说明idtitlecontentauthoradddateclicktimes自动编号文本备注文本日期/时间数字5020标识种子，自动递增(主键)标题内容发布者添加日期浏览次数 新闻表公告表是用来对河西学院美术学院新闻进行管理的表格。用户可以通过网站前台查看学院的新闻信息，管理员可以通过后台管理新闻。表2-6 新闻表列名数据类型长度说明idtitlecontentauthoradddateclicktimes自动编号文本备注文本日期/时间数字3020标识种子，自动递增(主键)标题内容发布者添加日期浏览次数 作品表作品表

21、是用来对美术学院师生美术作品展示操作的表。用户可以通过前台浏览师生的展示作品，管理员可以登陆后台，并能够对作品进行添加、删除等相关的操作。表2-7 作品表列名数据类型长度说明idsnametitledescriptionpicturesorttime自动编号文本文本备注文本文本日期/时间30505030标识种子，自动递增(主键)作者名作品名称信详细息作品图片类别添加时间 教师表教师表是用来对河西学院美术学院师资队伍情况操作的表。表2-8 教师表列名数据类型长度说明idtnametsexdegreedescriptiontidphotointeresttlepruduction自动

22、编号文本文本文本备注文本文本文本文本备注20102050508050标识种子，自动递增(主键)姓名性别学历详细信息照片兴趣电话作品 学院表学院表主要用来对学院组织机构以及学院简介进行管理，该表的主要字段及其含义如表2-9所示。表2-9 学院表列名数据类型长度说明iddepartmentinstuctionzuzhijigou数字文本备注备注50标识种子，自动递增(主键)学院学院简介组织机构0 党团工作表党团工作表主要用来对学院党员工作、团员工作以及学生会工作的工作章程、成员分工新闻动态以及通知公告进行管理，该表的主要字段及其含义如表2-10所示。表2-10 党团工作

23、表列名数据类型长度说明idnewstitlenewscontentmassagetitlemessagecontentaddtimetypepartyrulestitlepartyrulescontentstudentuniontitlestudentunioncontentaddpersontuantitletuancontent自动编号文本备注文本备注日期/时间文本文本备注文本备注文本文件备注255255255255255255255标识种子，自动递增(主键)新闻标题新闻内容公告标题公告内容添加日期类型（标识党、团、学）规章制度标题规章制度内容学生会信息标题学生会信息内容发布者团标题团内容

24、0 图片表图片表是用来对师生作品图片进行相关操作的表。表2-11 图片表列名数据类型长度说明idauthorpicturesort数字文本文本文本50标识种子，自动递增(主键)作者图片路径类别（标识学生、教师、其他）2.4 界面设计2.4.1 前台界面设计网站前台除了提供信息浏览、文件下载及其他功能外，还是一种对外形象的体现，所以网站前台页面在设计上既要考虑浏览快速实用，而且更要达到美观大方的效果，整个网站的界面设计都是在这个设计思想下进行的。图2-7 网站首页界面设计2.4.2 后台界面设计后台的页面跟前台页面则不同，前台是对外的宣传与体现，后台则是管理的平台，它不像前台那样需

25、要做得美观，它只要求实用、速度与效率，所以后台尽量不使用影响速度的体积大的图片及flash等。后台基本都采用框架的浏览方式，左边比较窄，管理分类链接放在左框架，在管理浏览过程中保持不变，这样可以快速在管理页面之间进行切换，提高管理效率；框架右则为主框架，比较宽，管理页面在点击之后会出现在主框架内，在上面可以对不同的管理页面进行操作。图2-8 网站后台界面设计17河西学院信息技术与传媒学院毕业设计第三章 网站实现3.1 用户登录功能模块的实现用户身份认证是通过对比登录用户的输入和用户表中的实际用户名和密码字段是否一致来实现的，具体代码入如下：protected void button1_clic

26、k(object sender, eventargs e) if (textbox3.text = "" && textbox4.text = "") response.write("<script>alert('密码或用户名不能为空！')</script>"); else string username = textbox3.text; string password = textbox4.text; if (validateuser(username, password) s

27、tring connstr = "provider= microsoft.jet.oledb.4.0; data source =" + server.mappath("dbnews.mdb"); oledbconnection conn = new oledbconnection(connstr); conn.open(); oledbcommand cmd = new oledbcommand(); cmd.connection = conn; cmd.commandtype = commandtype.text; cmd.commandtext =

28、 "select username from admin where username='" + username + "'" oledbdatareader dr; dr = cmd.executereader(); while (dr.read() session"admin" = dr.getvalue(0); conn.close(); response.redirect("newsmanage.aspx"); else response.write("<script>

29、alert('用户名或密码错误！请重新填写！')</script>"); public static bool validateuser(string username, string password) string connstr = "provider= microsoft.jet.oledb.4.0; data source =" + httpcontext.current.server.mappath("dbnews.mdb"); oledbconnection conn = new oledbconnec

30、tion(connstr); conn.open(); oledbcommand cmd = new oledbcommand(); cmd.connection = conn; cmd.commandtype = commandtype.text; cmd.commandtext = "select count(*) from admin where username='" + username + "'and userpwd ='" + password + "'" oledbdatareader

31、dr = cmd.executereader(); dr.read(); int num = dr.getint32(0); conn.close(); if (num > 0) return true; else return false; 3.2 新闻公告模块的实现3.2.1 新闻显示功能的实现新闻显示功能的实现主要用label控件来显示新闻的详细内容。由于标题绑定了新闻的id，id唯一标识了每一条新闻，当单机首页新闻标题时，完成了页面的跳转和参数的传递。从而通过数据库查询语句查询特定id的记录，并通过label将其显示出来。具体实现代码如下：static string connst

32、r = "provider=microsoft.jet.oledb.4.0;data source =" + httpcontext.current.server.mappath("dbnews.mdb");/数据库连接protected void page_load(object sender, eventargs e) if (!ispostback) dataset ds = db.getnewsbyid(request.querystring"id"); label1.text = ds.tables0.rows01.tost

33、ring(); label2.text = ds.tables0.rows02.tostring(); label3.text = ds.tables0.rows04.tostring().substring(0, 10); label4.text = ds.tables0.rows05.tostring(); label5.text = ds.tables0.rows03.tostring(); db.updatenewsclicktimes(request.querystring"id"); public static dataset getnewsbyid(strin

34、g id) oledbconnection conn = new oledbconnection(connstr); conn.open(); oledbcommand comm = new oledbcommand(); comm.connection = conn; comm.commandtext = "select * from news where id=" + id; oledbdataadapter adapter = new oledbdataadapter(comm); dataset ds = new dataset(); adapter.fill(ds

35、); conn.close(); return ds; public static void updatenewsclicktimes(string id) oledbconnection conn = new oledbconnection(connstr); conn.open(); oledbcommand comm = new oledbcommand(); comm.connection = conn; comm.commandtext = "update news set clicktimes = clicktimes + 1 where id=" + id;

36、comm.executenonquery(); conn.close(); 3.2.2 新闻添加的实现添加新闻的实现主要用到了textbox控件以及fckeditor网页编辑器，其中添加时间通过now（）函数自动获取，具体代码如下：protected void button1_click(object sender, eventargs e) bclick3(); savedata(); response.redirect("newsmanage.aspx"); protected void bclick3() string name = fileupload1.filen

37、ame; if (name = "") response.write("<script>alert('请选择上传文件!')</script>"); return; int num = name.lastindexof('.'); string type = name.substring(num, 4); string uppath = server.mappath("/news_images") + "/" + name; string dbpath = &q

38、uot;/news_images/" + name; fileupload1.saveas(uppath); public void savedata() oledbconnection conn = new oledbconnection("provider=microsoft.jet.oledb.4.0;datasource="+ server.mappath("dbnews.mdb"); conn.open(); oledbcommand comm = new oledbcommand(); comm.connection = conn;

39、 comm.commandtext = "insert into news (title,content,author) values('" + textbox1.text + "','" + fckeditor1.value + "','" + textbox3.text + "')" comm.executenonquery(); conn.close(); protected void button2_click(object sender, eventargs

40、 e) textbox1.text = "" fckeditor1.value = "" textbox3.text = "" 3.2.3 新闻删除的实现删除新闻通过按钮绑定新闻的id，再单击事件中通过按钮唯一确定所要删除的记录，再通过数据库操作中的删除语句将此记录删除，最后重新绑定gridview1，将删除后的结果显示出来。具体实现主要代码如下：public void deletedata(string id) oledbconnection conn = new oledbconnection("provider=mic

41、rosoft.jet.oledb.4.0;data source=" + server.mappath("dbnews.mdb"); conn.open(); oledbcommand comm = new oledbcommand(); comm.connection = conn; comm.commandtext = "delete from news where id=" + id; comm.executenonquery(); conn.close(); protected void button1_click(object sen

42、der, eventargs e) string id = (button)sender).commandargument; deletedata(id); gridview1.databind(); 3.2.4 新闻修改的实现新闻更新功能通过按钮单击选中的新闻id来实现参数的传递，并运用数据库操作利用update语句实现编辑特定的一则新闻的目的。具体是代码如下：protected void page_load(object sender, eventargs e) if (!ispostback) dataset ds = db.getnewsbyid(request.querystring

43、"id"); textbox1.text = ds.tables0.rows01.tostring(); fckeditor1.value = ds.tables0.rows02.tostring(); textbox3.text = ds.tables0.rows03.tostring(); protected void button1_click(object sender, eventargs e) savedata(textbox1.text, fckeditor1.value, textbox3.text); response.redirect("new

44、smanage.aspx"); public void savedata(string title,string content,string author) string id = request.querystring"id" oledbconnection conn = new oledbconnection("provider=microsoft.jet.oledb.4.0;data source=" + server.mappath("dbnews.mdb"); conn.open(); oledbcommand

45、comm = new oledbcommand(); comm.connection = conn; comm.commandtext = "update news set title='" + title +"',content='" + content + "',author='" + author + "' where id = "+id ; comm.executenonquery(); conn.close(); protected void button2

46、_click(object sender, eventargs e) textbox1.text = "" fckeditor1.value = "" textbox3.text = "" 3.2.5 fckeditor在管理新闻中引用的实现注册控件代码如下：<%registerassembly="fredck.fckeditorv2"namespace="fredck.fckeditorv2" tagprefix="fckeditorv2" %> 调用控件并引用

47、编辑器时的代码为：<fckeditorv2:fckeditor id="fckeditor1" runat="server" height="400px"></fckeditorv2:fckeditor> fckeditor1.value在web.config配置文件中添加如下代码：<appsettings><!- fckeditor 配置 -><add key="fckeditor:basepath" value="/fckeditor/"

48、/><add key="fckeditor:userfilespath" value="/files/image"/><!-access为0,sql为1-><add key="conmode" value="0"/><add key="watermark:temp" value="temp"/><add key="watermark" value="/files/image/wmark.

49、png"/></appsettings>3.2.6 新闻管理中显示页面分页的实现页面显示中主要用到了label控件、textbox控件、linkbutton控件以及button控件具体代码如下：<td style="vertical-align: top; text-align:center; width: 690px; height: 38px">总共<asp:label id="label4" runat="server" text="label"></

50、asp:label>页 当前第<asp:label id="label3" runat="server" text="label"></asp:label>页<asp:linkbutton id="linkbutton1" runat="server" font-underline="false" onclick="linkbutton1_click">首页</asp:linkbutton><as

51、p:linkbutton id="linkbutton2" runat="server" font-underline="false">尾页</asp:linkbutton><asp:linkbutton id="linkbutton3" runat="server" font-underline="false">上一页</asp:linkbutton><asp:linkbutton id="linkbutton4" runat="server" font-underline="false">下一页</asp:linkbutton>转到<asp:textbox id="textbox1" runat="server" width="27px"></asp:textbox><asp:button id="button3" runat="