《动态网页技术》期末大作业课程设计-农村信息吧.doc

t编号动态网页技术期末大作业课 程 设 计设 计 题 目 : 农村信息吧年 级 : 2008级学 号 :姓 名 :联 系 电 话 :电 子 信 箱 :学 年 : 20092010指 导 教 师 ： 红 河 学 院 工 学 院目录1.绪论41.1选题背景41.2相关技术基础介绍41.2.1动态网页概述41.2.2 Dreamweaver cs451.2.3HTML文档的基本结构51.3开发工具，服务器环境61.3.1开发工具61.3.2服务器环境 Java环境变量 Java系统变量Tomcat系统变量测试安装成功与否72.系统分析82.1功能分析82.2流程分析82.3可行性分析83.系统总体功能设计93.1总体设计93.2业务流程分析93.3功能模块设计114.数据库设计124.1数据库系统设计124.2数据表、结构设计124.3 SQL语句基础134.3.1 SQL简介134.3.2 SQL功能介绍144.3.3 SQL常用语句介绍INSERT 语句 UPDATE 语句 DELETE 语句 SELECT 语句155、系统实现155.1模块名称155.2功能说明155.3程序描述与实现166系统测试与运行196.1首页196.2村民信息页面206.3农信通产品页面206.4村官工作交流页面216.5信息公告页面216.6管理员入口xinshou.jsp页面227总结221.绪论1.1选题背景 起初想到这个题目是因为想到自己的家乡，希望家乡能有一个自己的网站，能在第一时间了解到相关信息，可以查阅自己想要知道的信息，这样根据自己在这个学期所学到的有关网页的知识，依据老师的课程要求，我试着做了这个网站。1.2相关技术基础介绍 1.2.1动态网页概述 动态网页的特征：动态网页和静态网页有许多相似之处，它们都是无格式的ASCII码文件，都包含有HTML标记，但动态网页有许多静态网页所部具有的特征。动态网页主要有以下几个特征：a. 网页的显示内容可以实时动态更新。b. 用户和网站可以进行交互式信息交流。c. 提供对数据库的管理和使用。d. 提供对文件的管理操作。e. 支持对“组件“的使用。 动态网页的运行环境：使用不同技术编写的动态网页面被保存在Web服务器内，当客户端用户向Web服务器发出访问动态页面的请求时，Web服务器将根据用户所访问页面的扩展名确定该页面所使用的网络编程技术，然后把该页面提交给相应的解释引擎。因此，动态网页要求在Web服务器中必须安装相应的服务器软件，由服务器软件来完成动态网页的解释工作以及网站应用程序服务工作。 动态网页的工作过程：使用不同的脚本编程技术，可以形成不同扩展名的动态网页文件，这些文件被存储在Web服务器中，首先在运行动态网页之前必须保证在Web服务器上已经安装了相应的Web服务器软件。（1） 用户在浏览器的地址看中输入扩展名.jsp的文件，并按回车键发送JSP文件的申请。（2） 浏览器将这个JSP文件的请求发送给IIS。（3） Web服务器接受这个申请要求并根据其扩展名辨识其属于JSP文件。（4） Web服务器从硬盘或者内存中读取所需要的JSP文件。（5） Web服务器将这个文件发送到一个叫做JSP.dII的特定文件中。（6） JSP文件将会从头至尾被执行并根据脚本命令要求生成相应的静态页面结果。（7） 将脚本输出结果和原来的静态HTML代码进行合并，最终以HTML代码形式回送给用户浏览器。（8） 回送的HTML文档将会被用户浏览器解释执行并显示结果在用户浏览器上。 具体实现过称如下： 执行SQL查询返回查询结果SQL查询运行脚本程序产生HTML文件超链接URL查询结果HTML文件客户端浏览器数据库服务器Web服务器1.2.2 Dreamweaver cs4 功能简介 Dreamweaver CS4即为Dreamweaver的CS4版本，Dreamweaver是美国MACROMEDIA公司开发（后被Adobe公司收购）的集网页制作和管理网站于一身的所见即所得网页编辑器。CS4版的特点是界面设计有了很大的变化。文本：Dreamweaver CS4对文本的管理做到了更精确、更高级、更全面，不但可以改变文本的大小、字体、颜色、还可以运用css技术对文本进行更高级的处理。图像：在Dreamweaver CS4中可以方便地插入图片、GIF动画和Flash二维动画，并且可以方便地改变图像的大小、位置。表格：在网页中加入表格不但可以格式化文本，还可以准确定位网页中的元素，这对于美化页面是不可少的。框架：框架可以将浏览器分割成几个部分，每部分都包含不同的网页。各个部分相互独立，各自的变化并不影响其他部分。表单：网页的交互性体现在表单功能上。用户只要在网页中的表单内填入信息，单击【提交】按钮，信息就被传送到服务器上，使网站管理者及时取得用户的反馈信息。站点管理：站点管理是用在本计算机上创建网站及将文件上传到网络服务器的工具。它可以统一管理网站中的所有文件，如改变文件夹、文件更名等。1.2.3HTML文档的基本结构启动Dreamweaver 后，切换到代码浏览视图窗口，此时可看到HTML代码：无标题文档 标记和标记是整个Web的开始 和结束的标记，全部标记都要被放在这对标记之间，HTML文档一般是又文档头和文档体两大部分组成，它们分别对应的标记为标记和标记。 下面对所用到的标记简单说明一下：（1） 文档的开始与结束标记（2） 文档头部标记.（3） 主体标记.（4） 标题格式标记.（5） 字体控制标记文本内容（6） 控制字体的特殊效果：字体加粗标记.；斜体文字.；下划线文字；（7） 段落标记.（8） 换行标记（9） 超链接标记.（10） 图像标记（11） 表格标记、（12） 格式标记（13） 滚动字幕1.3开发工具，服务器环境1.3.1开发工具Dreamweaver cs4、photoshop cs2 、Java相关控件、Apache Tomcat7、windows 7、Acces1.3.2服务器环境 HTML安装JRE、JDKHTML配置Java环境安装配置TomcatJSP网络应用程序环境安装图1 JSp网络应用程序环境安装步骤 Java环境变量变量名：classpath 变量值：.;C:Program FilesJavajdk1.6.0_10libtools.jar;C:Program FilesJavajdk1.6.0_10libdt.jar变量名：java_home 变量值：C:Program FilesJavajdk1.6.0_10 变量名：path变量值：C:Program FilesJavajdk1.6.0_10bin;C:Program FilesJavajdk1.6.0_ Java系统变量变量名：classpath变量值：.;C:Program FilesJavajdk1.6.0_10libtools.jar;C:Program FilesJavajdk1.6.0_10libdt.jar变量名：JAVA_HOME变量值：C:Program FilesJavajdk1.6.0_10变量名：Path变量值：C:Program FilesJavajdk1.6.0_10bin;C:Program FilesJavajdk1.6.0_10;C:ProgramFilesCommonFilesThunder NetworkKanKanCodecs;C:Program FilesAutodeskBackburner;C:Program FilesCommon FilesAutodesk SharedTomcat系统变量变量名：TOMCAT_HOME 变量值：C:Program FilesApache Software FoundationTomcat 7.0变量名：CATALINA_HOME变量值：C:Program FilesApache Software FoundationTomcat 7.0测试安装成功与否打开浏览器，在地址栏输入 http:/localhost:8080 :8080图2 Tomcat测试成功环境2.系统分析2.1功能分析 关于这个网站，有七个模块：首页，村民信息、农信通产品、村官工作交流、活动贴吧、信息公告。首页：用户可以登录网站，进入相关网页。站点导航设有无线音乐、手机游戏、飞信、139邮箱、139说客、积分商城、手机支付等，用户可以单击相关信息链接到相关网页获取相关信息。农信通动态链接到农信通网页，用户可以浏览首页显示的内容。网友服务设有新手入门和站务公告，用户可以单击打开。客户服务是希望用户对于网站存在的问题提出相关的问题，以便我们能进一步改进。村民信息：用户将自己的相关信息填入表单中，相关信息在当页显示，其中单击姓名可以显示当前的内容。村镇录显示的各个地方的特色，单击可连接到相关网页继续了解。农信通产品：有农业百科、集市、农业病害虫。打击可进入相关页面。村官工作交流：表单设有：发布人、标题、类别、内容。用户填入信息后在当页显示，在显示出来的内容中，打击标题可显示全部内容。活动贴吧：设有添加公告、管理公告和村官家园、贴吧热图四个功能，单击其中一个有超链接的文字，均可以进入到相关页面。浏览信息。网友服务：有新手入门和站务公告，以及表单。将信息填入表单在当页显示。单击站务公告标题显示全部内容。信息公告：添加公告和管理公告，填入信息提交到活动贴吧。单击娱乐休闲和生活百科进入相关页面浏览信息。将网页中的需要后台数据的表单和数据库进行连接2.2流程分析建立数据库系统建立网页2.3可行性分析技术可行性：主要是根据自己所学相关的知识，合理设计技术方案。财务可行性：因为是期末课程设计，没有财务的支出。组织可行性：从老师把作业布置下来后，我就一步步的开始实施，对于进度的安排没有详细的计划。3.系统总体功能设计3.1总体设计管理员入口农信通动态用户登录 客户服务网友服务农村信息吧首页村官工作交流活动贴吧村民信息农信通产品信息公告网友服务村民信息集市提交村民信息村镇录添加公告管理公告农业病害虫站内公告新手入门贴吧内容贴吧标题内容标题信息发布首页3.2业务流程分析集市管理员入口用户登录 农业病害虫农信通产品农信通新手入门网友服务网友服务站务公告客户服务姓名文化程度出生日期村民信息村民信息 提交个人爱好收入来源 Jishi页面集市农信通产品 农业病害虫 单击 单击Haicong页面发布人内容Xinxi页面标题村官工作交流 信息发布 单击贴吧标题活动贴吧贴吧内容Shangwushows页面网友服务新手入门Zhangwu页面标题站内公告网友服务内容发布信息日期信息公告添加公告信息公告信息公告管理公告首页管理员入口贴吧农业病害虫集市村官工作交流站内公告新手入门信息公告村名信息3.3功能模块设计 首页：用户登录，注册（由于所学知识有限，时间紧迫，故此功能没有设置） 站点导航，此处直接链接到相关网，帮助用户快捷的找到自己需要的网站。 农信通动态：链接到农信通产品模块。 网友服务：新手入门、站务公告 村民信息：村民基本信息：姓名，密码，文化程度，出生日期，个人爱好，收入来源，提交到本页面，单击姓名显示个人信息。此模块的设计在于方便用户快速查找信息。 村镇录：由于各个村有自己的特色，故此处直接链接到相关网站，方便用户能了解到大量信息。农信通产品：在后台已经设置好的，用户点击浏览就可以，设置的，集市，农业病害虫两个模块，有相关的内容，但是由于时间紧迫，里面的内容寥寥无几，不足之处希望谅解。村官工作交流：这个模块是用于用户进行交流的平台，用户将自己的信息发布出来显示在当前页面，到下次有用户想要查看全部内容时，只需单击标题就可以显示全部内容。活动贴吧：主要内容是管理员发布的信息的标题和内容。网友服务：新手入门是管理员发布的一些信息，帮助新手遇到的一些问题。站内公告相当于留言板，将信息发布出来，通知用户近期发生的事。4.数据库设计4.1数据库系统设计 这个系统用的是Access数据库，建了一个xian数据库里面有五个表cunmingxinxi，jiayuan，xian，xinshou，以及zhangwu。4.2数据表、结构设计 数据表有：baike，cunmingxinxi，jiayuan，jishi，tieba，xian，xinshou， zhangwu九个。 其结构设计如下：表1 Baike表、jishi表、tieba表：字段名称数据类型说明Id自动编号Id号（主键）Title文本（50）标题Content备注内容 表2 Cunminxinxi表：字段名称数据类型说明Id自动编号Id号（主键）Xm文本（50）姓名Whcd文本（50）文化程度Csrq数字出生日期Srly数字0水稻1甘蔗2麦子3洋芋4玉米Aihao文本个人爱好Pwd文本密码表3 Jiayuan表：字段名称数据类型说明Id自动编号Id号（主键）Name文本（50）用户名Biaoti文本（50）标题Leibie文本（50）内容的类别Content备注内容Time日期/时间发布内容人的日期表4 Xian表：字段名称数据类型说明Id自动编号通知公告id号（主键）Title文本（50）通知公告标题Leib数字0表示公告1表示通知Content备注公告内容Dt日期/时间发布时间表5 Xinshou表和zhangwu表：字段名称数据类型说明Id自动编号发布内容id号Bt文本（50）标题Leibie文本（50）发布内容的类别Content备注发布内容Dt日期/时间发布时间4.3 SQL语句基础 4.3.1 SQL简介SQL是高级的非过程化编程语言，允许用户在高层数据上工作。它不要求用户指定对数据的存放方法，也不需要用户了解具体的数据存放方式，所以具有完全不同底层结构的不同数据库系统，可以使用相同的SQL语言作为数据输入与管理的接口。它以记录集合作为操作对象，所有SQL语句接受集合作为输入，返回集合作为输出，这种集合特性允许一条SQL语句的输出作为另一条SQL语句的输入，所以SQL语句可以嵌套，这使他具有极大的灵活性和强大的功能，在多数情况下，在其他语言中需要一大段程序实现的功能只需要一个SQL语句就可以达到目的，这也意味着用SQL语言可以写出非常复杂的语句。 结构化查询语言(Structured Query Language)最早是IBM的圣约瑟研究实验室为其关系数据库管理系统SYSTEM R开发的一种查询语言，它的前身是SQUARE语言。SQL语言结构简洁，功能强大，简单易学，所以自从IBM公司1981年推出以来，SQL语言得到了广泛的应用。如今无论是像Oracle、Sybase、DB2、Informix、SQL Server这些大型的数据库管理系统，还是像Visual Foxpro、PowerBuilder这些PC上常用的数据库开发系统，都支持SQL语言作为查询语言。SQL语言包含4个部分： 数据定义语言(DDL)，例如：CREATE、DROP、ALTER等语句。 数据操作语言(DML)，例如：INSERT（插入）、UPDATE（修改）、DELETE（删除）语句。 数据查询语言(DQL)，例如：SELECT语句。 数据控制语言(DCL)，例如：GRANT、REVOKE、COMMIT、ROLLBACK等语句。 SQL语言包括三种主要程序设计语言类别的语句：数据定义语言(DDL)，数据操作语言(DML)及数据控制语言(DCL)。4.3.2 SQL功能介绍SQL 面向数据库执行查询；SQL 可从数据库取回数据；SQL 可在数据库中插入新的记录；SQL 可更新数据库中的数据；SQL 可从数据库删除记录；SQL 可创建新数据库；SQL 可在数据库中创建新表；SQL 可在数据库中创建存储过程；SQL 可在数据库中创建视图；SQL 可以设置表、存储过程和视图的权限。 SQL 是一种标准， 是一门 ANSI 的标准计算机语言，用来访问和操作数据库系统。SQL 语句用于取回和更新数据库中的数据。SQL 可与数据库程序协同工作，比如 MS Access、DB2、Informix、MS SQL Server、Oracle、Sybase 以及其他数据库系统。不幸地是，存在着很多不同版本的 SQL 语言，但是为了与 ANSI 标准相兼容，它们必须以相似的方式共同地来支持一些主要的关键词（比如 SELECT、UPDATE、DELETE、INSERT、WHERE 等等）。 注释：除了 SQL 标准之外，大部分 SQL 数据库程序都拥有它们自己的私有扩展！ 在网站中使用 SQL要创建发布数据库中数据的网站，需要以下要素： RDBMS 数据库程序（比如 MS Access, SQL Server, MySQL）；服务器端脚本语言（比如 PHP 或 ASP）；SQL；HTML / CSS。 4.3.3 SQL常用语句介绍INSERT 语句INSERT 语句用来在数据表或视图中插入一行数据。例如，如果要在Customer_Data 数据表中新增一个客户，可使用类似以下的 INSERT 语句： INSERT INTO Customer_Data (customer_id, first_name, last_name, phone) VALUES (777, Frankie, Stein, 4895873900) 请注意 SQL 语句中第二行的数据列名称列表，列表上数据行名称的次序决定了数据数值将被放在哪个数据列。举例来说，第一个数据数值将被放在列表列出的第一个数据列customer_id、第二个数据数值放在第二个数据列 ，依此类推。由于我们在建立数据表时，定义数据行填入数值的次序与现在相同，因此我们不必特意指定列名称。我们可以用以下的 INSERT 语句代替：INSERT INTO Customer_Data ；VALUES (777, Frankie, Stein, 4895873900) 注意：如果使用这种形式的 INSERT 语句，但被插入的数值次序上与建立数据表时不同，数值将被放入错误的数据列。如果数据的类型与定义不符，则会收到一个错误讯息。 UPDATE 语句 UPDATE 语句用来更新或修改一行或多行中的值。例如，一位名称为 Frankie Stein 的客户想要在记录中改变他的姓氏为 Franklin，可使用以下 UPDATE 陈述式： UPDATE Customer_Data SET first_name = Franklin WHERE last_name = Stein and customer_id= 777 我们在 WHERE 子句中加入 customer_id 的项目来确定其他名称不为 Stein 的客户不会被影响-只有customer_id为777的客户，姓氏会有所改变。 说明：当您使用 UPDATE 语句时，要确定在 WHERE 子句提供充分的筛选条件，如此才不会不经意地改变了一些不该改变的数据。 DELETE 语句DELETE 语句用来删除数据表中一行或多行的数据，您也可以删除资料表中的所有数据行。要从 Customer_Data 数据表中删除所有的行，您可以利用下列语句： DELETE FROM Customer_Data 或 DELETE Customer_Data ，数据表名称前的 FROM 关键字在 DELETE 语句中是选择性的。除此之外，这两个语句完全相同。要从 Customer_Data 数据表中删除 customer_id 数据行的值小于100的行，可利用下语句： DELETE FROM Customer_Data WHERE customer_id 100 SELECT 语句SELECT 语句用来检索数据表中的数据，而哪些数据被检索由列出的数据行与语句中的 WHERE 子句决定。例如，要从之前建立的 Customer_Data数据表中检索 customer_id 以及 first_name 数据行的数据，并且只想取出每行中 first_name 数据值为 Frankie 的数据，那麼可以利用以下的 SELECT 语句： SELECT customer_id, first_name FROM Customer_Data WHERE first_name = Frankie 如果有一行符合 SELECT 语句中的标准，则结果将显示如下： customer_id first_name5、系统实现5.1模块名称 网页基础模块、网页制作模块、版式设计模块、数据库设计模块5.2功能说明网页基础模块：这个模块是根据基本的设计的，这个模块是整个网页的基础，将其搭建好是最重要的。其功能是实现超链接，字体大小颜色的设计。 网页制作模块：此模块先是在photoshop cs2先设计好的，将其划分成7个板块，此模块的设计使用户可以随意单击自己想要获取的信息，快捷获取。版式设计模块：这个模块是在Dreamweaver cs4设计的，背景颜色风格，表格边框线条颜色的样式粗细均在这设计成型。数据库设计模块：这个模块的设计功能如下：数据库必须是连接成功的前提下才可将表单的数据添加到相关数据库中，才能获取表单中的数据并将其显示在相关页面上。管理员设计模块：这个模块主要用于管理员添加删除信息。5.3程序描述与实现以下代码是实现将页面中用户填写的信息添加到数据库中的相关表中，代码如下：首页面：用户登录表单的建立 xxx.jsp /将表单提交到本页面 用户名： 密码：         管理员入口 /连接到guanli.jsp页面村民信息页面： 将用户填写的信息添加到cunminxinxi表中： 0) out.print(添加成功！); elseout.print(添加失败！); %获取cunminxinxi表中的id号：查询cunminxinxi表中的数据，并返回到网页中来：             % ResultSet rs=stmt.executeQuery(SELECT * FROM cunminxinxi); /创建查询结果对象rs。执行查询，并将结果赋给rs对象while(rs.next()int id=rs.getInt(id);out.print();out.print();out.print(rs.getObject(xm)+);out.print();out.print(rs.getObject(whcd)+);out.print();out.print(rs.getObject(csrq)+);out.print();out.print(rs.getObject(aihao)+);out.print();out.print(rs.getObject(srly)+);out.print(); /显示地关闭对象rs.close(); stmt.close(); mycon.close(); %村官工作交流页面： 查询jiayuan数据，以表格的形式返回到页面中来 % ResultSet rs=stmt.executeQuery(SELECT * FROM jiayuan); /创建查询结果对象rs。执行查询，并将结果赋给rs对象while(rs.next()int id=rs.getInt(id);out.print();out.print();out.print(rs.getObject(biaoti)+);out.print();out.print(rs.getObject(content)+);out.print();out.print(rs.getObject(name)+); out.print(); /显示地关闭对象rs.close(); stmt.close(); mycon.close(); %信息公告页面： 查询xian表中的数据，以表格的形式返回到页面中来，并能修改删除 % ResultSet rs=stmt.executeQuery(SELECT * FROM xian); /创建查询结果对象rs。执行查询，并将结果赋给rs对象while(rs.next()int id=rs.getInt(id);ou