web网站设计综合实验文档.doc

Web 应 用 开 发 技 术实验文档 班级： 小组编号： 小组成员：学号： 姓名： 学号： 姓名： 学号： 姓名： 学号： 姓名： 学号： 姓名： 指导老师： 日期:摘要班级网站，就是班级在互联网上进行网站建设和形像宣传的平台，就相当于一个班级集体的网络名片。互联网真正的内涵在于其内容的丰富性，几乎无所不包。对于一个班级来说，其具有网络沟通能力的标志是班级拥有自己的独立网站。班级网站建设的目的主要有：提升班级形象，使班级具有网络沟通能力；加强班级团结力量，树立班级荣誉感、归属感，全面详细介绍班级及班级活动，实现班级信息交流功能，可以与同学保持密切联系，可以降低通信费用，可以利用网站及时得到同学对于班级各方面的建议和对班级开展活动的反馈信息。本文简述的是我们设计团队在做班级网站建设时所考虑的问题和一些想法。AbstractA classs website, as the network mark, is the platform for advertising the groups construction of website and public figure on Internet whose true cnnotation is cntributed to its various content. It is the classs own independent website that is view -ed as the symbol of the communication ability through network. Here are the teams objectives to coustrute its own website: First, improve the public impression of the class in order to make the class is capable of gaining its comunication on net. Second , strengthen class unity strength, sets up the class pride and belonging, show a detailed introduction about the group and its activities. Last but not least, to achieve the E-B function which have an advantage of keeping in touch with classmate efficiently, saving the cost of communication, and acquiring the feedback information from customs in time. The essay briefly describes the design team is our class website construction in doing that consider problems and some ideas.关键词:互联网；网络名片；网站建设；班级网站Keywords：Internet; Retaggr; Web Design; Class web site目录一、 绪言1l 1.1 绪论4l 1.2 网站开发的意义4二、 网站开发工具5l 2.1 Macromedia Dreamweaver 8简介5l 2.2 JSP简介5l 2.3 MySQL简介5三、 需求分析阶段6l 3.1 班级简介6l 3.2 网站建设目的6l 3.3 网站实现功能7四、 总体设计7 4.1 运行环境7 4.2 数据库设计7 4.3 页面布局设计8 4.4 网站功能模块划分及系统结构图9l 4.5 数据流程分析10l 4.6 各模块的数据结构设计10 4.6.1 数据表110 4.6.2 数据表210 4.6.3 数据表311 4.6.4 数据表411 4.6.5 数据表511 4.6.6 数据表612 4.6.7 数据表712 4.6.8 数据表812l 4.7 用户注册模块13 4.7.1 流程图13 4.7.2 注册页面13 4.7.3 主要代码14l 4.8 用户登录模块14 4.8.1 流程图14 4.8.2 登录界面14 4.8.3 代码15l 4.9 留言模块16 4.6.1 流程图16 4.6.2 留言界面16 4.6.3 代码17l 4.10 文件上传模块18 4.7.1 流程图18 4.7.2 文件上传界面19 4.7.3 代码21l 4.11 投票模块21 4.11.1 流程图21 4.12.2 留言界面22 4.12.3 代码24五、 结束语25六、 致谢25七、 参考文献25一、绪言1.1 绪论本设计的题目08工业工程一班网站建设与开发，它主要是依据08工业工程一班的需求进行设计，结合数据库系统与网站设计的具体工作要求，通过强大的互联网技术，进行班级网站的宣传、介绍以及实现在班级资料管理、活动展示、学习资料共享、实现同学与同学的沟通及班级活动的完成。1.2 网站开发的意义一方面加强了班级同学的信息交流，促进班级团结合作。“团结就是力量!”在大学的四年中，能同在一个班级集体一起学习、工作、生活实在是不容易，都说这是一种难得的缘分，不管我们的未来见会是怎样，但最起码要珍惜好现在的这份缘。这时，作为一个班集体，加强了班级同学的信息交流，促进班级团结合作，对于一个班级的班风、学风建设、班级活动的举办是非常有必要的。而互联网给我们提供了这样的一个交流平台，班级可以通过互联网，对同学进行信息查询、个人建议展示等服务、为同学提供了一个便于查询的服务系统，并且可以把常见的同学反馈信息经过处理后，发布在网上，供更多的同学查阅，通过不断地为同学进行网上的在线留言咨询等方式，达到渐渐提升班级服务品质的目的。网上信息可以供不同需求的同学24小时查询，而且通过电子邮件的形式，大大摆脱了诸多不方便行为。从而加强了对同学与同学间交流的各方面服务。进行专业知识收集及日常学习课件共享，促进了学习的交流。INTERNET在专业信息收集方面是任何媒体所无法比拟的。借助互联网的强大优势，可在网上随时随地查找您所要获得的学习信息、同学的学习发展状况及课件信息，还可在班级的网站上建立起自己的专门空间，收集同学们对提出问题的反馈信息，保证了在较短的时间内获得最新的学习信息。在同学与同学的学习交流中，可充分利用E-mail的费用低、速度快、一信多发等优点。而且距离越远相对费用就越低。更为重要的是，可以很方便地对信件进行二次编辑，避免了文件的重复输入，几乎可以不用传真机，将电子邮件的优越性能发挥的淋漓尽致。另一方面班级网站设计的目的是实验的形式，以锻炼设计网站所学的web开发技术的使用为目的，主要是锻炼HTML的标签的使用，css基本语法的熟悉，用JavaScript验证的使用，Jsp语言的使用，同时还有用jsp连接数据库的代码的书写，通过jsp代码对数据库进行删除、插入、更新、查询等操作。因此，本网站的核心技术就专注在网站的注册、登陆以及验证方面的内容。而对于网站的美化，网站的内容只是略微的带有几步。二、网站开发工具2.1 Macromedia Dreamweaver 8简介Dreamweaver是Macromedia公司推出的可视化网页制作工具,它与Flash、Fireworks合在一起被称为网页制作三剑客,这三个软件相辅相承,是制作网页的最佳选择。首次启动Dreamweaver8时会出现一个“工作区设置”对话框，在对话左侧是Dreamweaver8的设计视图，右侧是Dreamweave 8的代码视图。Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。在Dreamweave 8 中首先将显示一个起始页，新建或打开一个文档，进入Dreamweaver8的标准工作界面。Dreamweaver8的标准工作界面包括：标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。2.2 JSP简介JSP(Java Server Pages)是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，是在传统的网页HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件(*.jsp)。 用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行。Java中连接数据库的技术是JDBC，Java程序通过JDBC驱动程序与数据库相连，执行查询、提取数据等操作。Sun公司还开发了JDBCODBC bridge，利用此技术Java程序可以访问带有ODBC驱动程序的数据库，目前大多数数据库系统都带有ODBC驱动程序，所以Java程序能访问诸如Oracle、Sybase、MS SQL Server和MS Access等数据库。2.3 MySQL简介MySQL是一种开放源代码的关系型数据库管理系统（RDBMS），MySQL数据库系统使用最常用的数据库管理语言-结构化查询语言（SQL）进行数据库管理。 由于MySQL是开放源代码的，因此任何人都可以在General Public License的许可下下载并根据个性化的需要对其进行修改。MySQL因为其速度、可靠性和适应性而备受关注。大多数人都认为在不需要事务化处理的情况下，MySQL是管理内容最好的选择。MySQL是一个真正的多用户、多线程SQL数据可服务器。SQL是世界上最流行的和标准化的数据库语言。MySQL是以一个客户机/服务器结构实现的，是有一个服务器守护程序mysqld和很多不同的客户程序和库组成的。SQL是一种标准化语言，它使得存储、更新和存取信息更容易。如果您想用SQL语言为一个网站检索产品信息及存储顾客信息，那么，MySQL能够以足够快的速度和灵活来允许您存储纪录文件和图像。尽管MySQL还在不断的开发中，但它已经提供了一个丰富的和极其有用的功能集。MySQL可以在很多操作系统上运行，Unix，Win32，Mac. 三、需求分析阶段3.1 班级简介在信息学院下的08级工业工程（1）班是华南农业大学众多班级里的一个非常普通的班级。没有明星学员、非丁颖班，这一切看起来都非常的不足为外人道也。但对班里的每一个同学来说，它是最特殊的。08年，工业工程专业在华南农业大学第一次再设，而我们就是这个专业的第一批学生，不可不说其特殊性。08级工业工程（1）班，班里有30位同学（其中有4名女生），在经历三年的过程中，同学们发展了深刻的友谊，班级参加和举办了许许多多的集体活动，也增在各种活动中获得了众多的奖项和荣誉，班里同学学习刻苦积极，班风学风建设良好，每学年都有超过三分之一的同学获得学校奖学金。在这个班集体里，每个人都是很特殊的一位，因为有了他们，才会有这个特殊的班级。3.2 网站建设目的A. 对外宣传班级网站是班级重要的对外窗口，通过该网站，应能很好地对访问者传达班级的基本情况、曾做出的成功活动、班级的风貌、班级最新动态、班级活动的举办状况。班级资料不仅包含文字资料，也包含一些图片资料，比如班级宿舍图片，班级同学图片，特别是班级活动图片等等，使得班级更逼真，更具有说服力地展现在访问者面前。尽可能让访问者对班级了解的更全面，更细致。B. 建立信息数据库，实现信息共享建立班级完整的信息数据库，一个对内，一个对外。对内，在班级内最大限度的达到对信息资源的利用和共享，进行对信息的保存、搜索、查看、再利用等；对外，让访问者尽可能多的了解班级性质和活动特征，将信息进行分类，便于访客搜索和查看。另外，访问者通过网站了解班级的资料。 C.利用网站的活动、图片、投票等模块，展示班级课外活动，展现班级个性多彩生活。在投票模块中，班级的每个同学都可以对班级是否举行活动、要举行什么活动、通过怎么样的方式举行活动等方面做出自己的选择或提出自己的建议，这不但体现了班级的民主化、开放式的特点，而且加强了班级内部的个性化发展。在留言版模块中，同学可以就某一问题提出自己的见解，也可以对大家发出问题以寻求解答，还可以对班级的活动提出自己的看法。总之，每个都可以再此畅所欲言，无论是学习上的、生活中的、活动中的、工作上的方方面面都可作为讨论的主题。图片的展示更是增加了，班级的风采，无论是活动的、生活的、课堂上的、还是宿舍内的图片都可以展示在大家的面前。D.网站维护和管理 网站建成后，维护人员可以通过网站维护入口更新网站页面，通过网站管理平台，只要会打字，就可以动态的发布，更新等栏目的内容。3.3 网站实现功能A. 前台客户系统功能用户可以浏览网站的一些基本信息用户可以浏览网站的班级状况用户可以浏览网站的服务信息用户可以浏览网站的动态新闻用户可以发表自己的留言信息用户可以实现上传文件功能用户可以实现邮件等便捷联系功能用户可以看到班级的活动情况B. 后台管理系统功能添加、查看班级的基本信息添加、查看班级网站的服务内容添加、查看班级的动态新闻添加、查看班级的活动情况查看班级网站的信息管理，活动类别，用户权限管理，发布公告管理，班级简介，管理员管理，会员管理，最新公告管理等等。三、 总体设计4.1运行环境本软件采用B/S跨平台的设计。所有需求环境要求如下。服务器环境：l 硬件：目前所有服务器的硬件环境都能够很好的支持本软件运行；l 软件：兼容操作系统windows、linux、unix;l WEB服务器：兼容tomcat5.5以上等；l MYSQL：兼容MYSQL4.0以上;客户端：l 浏览器：Internet Explorer，firefox 等。4.2数据库设计我们的系统采用MySQL数据库，是基于以下考虑1. 可靠性和高性能：MySQL AB向公众提供所有数据库服务器软件的早期版本，利用开发源码进行为期几个月的测试，之后才发布作为生产之用。2. 易于使用和部署：MySQL的结构体系易于定制，而且速度极快。其独特的多存储引擎结构为企业客户提供了广泛的灵活性，赋予数据库管理系统以卓越的紧致性和稳定性，并且易于部署，同时具有无与匹敌的速度。3. 平台自由：源代码随时可访问，MySQL策略确保了自由性，以防锁定于某个公司或平台内。4. 跨平台支持：MySQL可用于20多种不同的平台，包括主要的Linux系统、Mac OS X、Unix和Microsoft Windows。本网站的数据库软件使用的是MySQL，建立了一个表来存储用户的注册信息，然后登陆是可以从此表中查询信息与使用者的录入信息相比对，通过比对的结果判断是否能够进入个人空间的主页。其次是用另一各表来存储用户的留言信息。使用jdbc驱动操作数据库本网站的数据库连接用的是纯jdbc驱动的方式，将下载的mysql-connector-java-5.1.12-bin.jar文件放到tomcat下的WEB-INF文件夹下lib文件夹下。代码如下： String jdbcurl=jdbc:mysql:/localhost:3306/; String dbname=student; String user=root; String pass=*;tryClass.forName(com.mysql.jdbc.Driver);catch(ClassNotFoundException e) out.print(e); try Connection con=DriverManager.getConnection(jdbcurl+dbname,user,pass);Statement stmt=con.createStatement();ResultSet ls=stmt.executeQuery(select name from dengluxinxi where name=+logname+); if(ls.next() out.print(此用户名已被占用，请换用其它用户名。返回注册);4.3页面布局设计页面的布局是以休闲的风格来的，符合班级的风格特点。色调淡雅，布局简易，可以很简单的操作全局。1.层叠样式表的应用 在新的HTML4.0标准中，CSS(层叠样式表)被提出来，它能完全精确的定位文本和图片。CSS对于初学者来说显得有点复杂，但它的确是一个好的布局方法。你曾经无法实现的想法利用CSS都能实现。目前在许多站点上，层叠样式表的运用是一个站点优秀的体现。你可以在网上找到许多关于CSS的介绍和使用方法。 2.表格布局 表格布局好像已经成为一个标准，随便浏览一个站点，它们一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响。对于表格布局，你可以随便找一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它(要所见即所得的软件)，你会看到这个页面是如何利用表格的。 3.框架布局 但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。 页面的图片如下：4.4网站功能模块划分及系统结构图本班级网站分为：首页、新闻、活动、投票、相册、留言、搜索、Gift Baskets、Terms & Policies九个大的模块。前台界面新闻活动投票相册留言搜索Gift BasketsTerms&Policies首页4.5数据流程分析顶图：用户：4.6 各模块的数据结构设计4.6.1 数据表1（action）4.6.2 数据表2(file)4.6.3 数据表3(imagefile)4.6.4 数据表4(news)4.6.5 数据表5(tb_temp)4.6.6 数据表6(tb_vote)4.6.7 数据表7(users)4.6.8 数据表8(words)4.7 用户注册模块4.7.1 流程图4.7.2 注册页面说明：通过注册页面，可实现用户在班级网站的注册功能，以方便用户以会员身份了解班级的信息和动态，以及信息方面的联系和沟通。4.7.3 主要代码注册时用JavaScript进行验证，验证的内容是用户名不能为空，密码也不能为空。验证的代码如下：/从注册提交页面获取用户名、密码、昵称、性别和邮箱信息，并创建会话/连接数据库，并将获得的用户名、密码、昵称、性别和邮箱信息插入到数据库内4.8 用户登录模块4.8.1 流程图4.8.2 登录界面或说明：通过此界面，可以实现用户登录，实现用户的上去文件等功能。4.8.3 代码/输入用户名和密码的页面获取输入的信息，并判断数据库中是否有相符信息，若有，则登陆成功，进入订购页面，若无，则登陆失败。String name=request.getParameter(yhm); String code=request.getParameter(mm); Connection conn; Statement stmt; ResultSet result; try Class.forName(sun.jdbc.odbc.JdbcOdbcDriver);conn=DriverManager.getConnection(jdbc:odbc:db);stmt=conn.createStatement();String sql=select *from zcdl where yhm=+name+and mm=+code+;登陆的比对的核心代码是下面的代码，通过查询的成功与否来判断登陆的成功与否。ResultSet rs=stmt.executeQuery(select name from dengluxinxi where name=+logname+ and mima=+password+ );4.9 留言模块4.9.1 流程图4.9.2 留言界面留言查看：说明：制作留言本，就是为了能够让用户发表自己的看法和建议，管理员在后台可以实现对留言的管理，删除，回复等工作。4.9.3 代码/获取留言信息，并插入数据库/从数据库中获取最新输入的20条留言conn=DriverManager.getConnection(jdbc:odbc:db);stmt=conn.createStatement();String strSql=SELECT TOP 20 ly FROM lyb order by time desc ;rs=stmt.executeQuery(strSql);while(rs.next()%4.10 文件上传模块4.10.1 流程图在线浏览是否登录登录上传文件文件格式是否正确确认上传上传成功是否查看文件个人相册主界面是否是否是否4.10.2 文件上传界面图片上传界面资料上传界面选择上传文件上传成功查看文件资料下载说明：在线上传下载功能方便了用户通过互联网来实现信息共享，更加便捷和有效。4.10.3 代码/显示登陆客户的用户名/获取用户上传的文