当前位置:文档之家› 动态网页课程设计期末大作业

动态网页课程设计期末大作业

《动态网页技术》期末大作业

课程设计

设计题目 :农村信息吧

年级 : 2008级

学号: 200803050853

姓名 : 线世清

联系电话 : 159********

电子信箱 : 651565699@https://www.doczj.com/doc/d36303733.html,

学年 : 2009~2010

指导教师:肖天庆

红河学院工学院

目录

1.绪论 (4)

1.1选题背景 (4)

1.2相关技术基础介绍 (4)

1.2.1动态网页概述 (4)

1.2.2 Dreamweaver cs4 (5)

1.2.3HTML文档的基本结构 (5)

1.3开发工具,服务器环境 (6)

1.3.1开发工具 (6)

1.3.2服务器环境 (6)

1.3.2.1 Java环境变量 (6)

1.3.2.2 Java系统变量 (7)

1.3.2.3Tomcat系统变量 (7)

1.3.2.4测试安装成功与否 (7)

2.系统分析 (8)

2.1功能分析 (8)

2.2流程分析 (8)

2.3可行性分析 (8)

3.系统总体功能设计 (9)

3.1总体设计 (9)

3.2业务流程分析 (9)

3.3功能模块设计 (11)

4.数据库设计 (12)

4.1数据库系统设计 (12)

4.2数据表、结构设计 (12)

4.3 SQL语句基础 (13)

4.3.1 SQL简介 (13)

4.3.2 SQL功能介绍 (14)

4.3.3 SQL常用语句介绍 (14)

4.3.3.1INSERT 语句 (14)

4.3.3.2 UPDATE 语句 (14)

4.3.3.3 DELETE 语句 (15)

4.3.3.4 SELECT 语句 (15)

5、系统实现 (15)

5.1模块名称 (15)

5.2功能说明 (15)

5.3程序描述与实现 (16)

6.系统测试与运行 (19)

6.1首页 (19)

6.2村民信息页面 (20)

6.3农信通产品页面 (20)

6.4村官工作交流页面 (21)

6.5信息公告页面 (21)

6.6管理员入口——xinshou.jsp页面 (22)

7.总结 (22)

1.绪论

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文档将会被用户浏览器解释执行并显示结果在用户浏览器上。

具体实现过称如下:

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、Acces

1.3.2服务器环境

图1 JSp 网络应用程序环境安装步骤

1.3.

2.1 Java 环境变量

变量名:classpath 变量值:.;C:\Program Files\Java\jdk1.6.0_10\lib\tools.jar;C:\Program Files\Java\jdk1.6.0_10\lib\dt.jar

JSP 网络应用程序环境安装

变量名:java_home 变量值:C:\Program Files\Java\jdk1.6.0_10

变量名:path变量值:C:\Program Files\Java\jdk1.6.0_10\bin;C:\Program Files\Java\jdk1.6.0_10 1.3.2.2 Java系统变量

变量名:classpath变量值:.;C:\Program Files\Java\jdk1.6.0_10\lib\tools.jar;C:\Program

Files\Java\jdk1.6.0_10\lib\dt.jar

变量名:JA V A_HOME变量值:C:\Program Files\Java\jdk1.6.0_10

变量名:Path变量值:C:\Program Files\Java\jdk1.6.0_10\bin;C:\Program Files\Java\jdk1.6.0_10;C:\ProgramFiles\CommonFiles\Thunder

Network\KanKan\Codecs;C:\Program Files\Autodesk\Backburner\;C:\Program Files\Common

Files\Autodesk Shared\

1.3.

2.3Tomcat系统变量

变量名:TOMCAT_HOME 变量值:C:\Program Files\Apache Software Foundation\Tomcat 7.0 变量名:CATALINA_HOME变量值:C:\Program Files\Apache Software Foundation\Tomcat 7.0

1.3.

2.4测试安装成功与否

打开浏览器,在地址栏输入

?http://localhost:8080

?http://127.0.0.1:8080

图2 Tomcat测试成功环境

2.系统分析

2.1功能分析

关于这个网站,有七个模块:首页,村民信息、农信通产品、村官工作交流、活动贴吧、信息公告。

首页:用户可以登录网站,进入相关网页。站点导航设有无线音乐、手机游戏、飞信、139邮箱、139说客、积分商城、手机支付等,用户可以单击相关信息链接到相关网页获取相关信息。农信通动态链接到农信通网页,用户可以浏览首页显示的内容。网友服务设有新手入门和站务公告,用户可以单击打开。客户服务是希望用户对于网站存在的问题提出相关的问题,以便我们能进一步改进。

村民信息:用户将自己的相关信息填入表单中,相关信息在当页显示,其中单击姓名可以显示当前的内容。村镇录显示的各个地方的特色,单击可连接到相关网页继续了解。

农信通产品:有农业百科、集市、农业病害虫。打击可进入相关页面。

村官工作交流:表单设有:发布人、标题、类别、内容。用户填入信息后在当页显示,在显示出来的内容中,打击标题可显示全部内容。

活动贴吧:设有添加公告、管理公告和村官家园、贴吧热图四个功能,单击其中一个有超链接的文字,均可以进入到相关页面。浏览信息。

网友服务:有新手入门和站务公告,以及表单。将信息填入表单在当页显示。单击站务公告标题显示全部内容。

信息公告:添加公告和管理公告,填入信息提交到活动贴吧。单击娱乐休闲和生活百科进入相关页面浏览信息。

2.3可行性分析

技术可行性:主要是根据自己所学相关的知识,合理设计技术方案。

财务可行性:因为是期末课程设计,没有财务的支出。

组织可行性:从老师把作业布置下来后,我就一步步的开始实施,对于进度的安排没有详细的计划。

3.系统总体功能设计3.1总体设计

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表:

表2 Cunminxinxi表:

表3 Jiayuan表:

表4 Xian表:

表5 Xinshou表和zhangwu表:

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常用语句介绍

4.3.3.1INSERT 语句

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 语句,但被插入的数值次序上与建立数据表时不同,数值将被放入错误的数据列。如果数据的类型与定义不符,则会收到一个错误讯息。

4.3.3.2 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 子句提供充分的筛选条件,如此才不会不经意地改变了一些不该改变的数据。

4.3.3.3 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

4.3.3.4 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_name

5、系统实现

5.1模块名称

网页基础模块、网页制作模块、版式设计模块、数据库设计模块

5.2功能说明

网页基础模块:这个模块是根据基本的……设计的,这个模块是整个网页的基础,将其搭建好是最重要的。其功能是实现超链接,字体大小颜色的设计。

网页制作模块:此模块先是在photoshop cs2先设计好的,将其划分成7个板块,此模块的设计使用户可以随意单击自己想要获取的信息,快捷获取。

版式设计模块:这个模块是在Dreamweaver cs4设计的,背景颜色风格,表格边框线条颜色的样式粗细均在这设计成型。

数据库设计模块:这个模块的设计功能如下:数据库必须是连接成功的前提下才可将表单的数据添加到相关数据库中,才能获取表单中的数据并将其显示在相关页面

上。

管理员设计模块:这个模块主要用于管理员添加删除信息。

5.3程序描述与实现

以下代码是实现将页面中用户填写的信息添加到数据库中的相关表中,代码如下:

首页面:用户登录表单的建立 xxx.jsp

//将表单提交到本页面

用户名:
密码:

 

 

 

 

管理员入口

//连接到guanli.jsp页面

村民信息页面:

将用户填写的信息添加到cunminxinxi表中:

<%

request.setCharacterEncoding("gb2312");

if(request.getParameter("button")!=null){

String xm=request.getParameter("xm");

String whcd=request.getParameter("whcd");

String csrq=request.getParameter("csrq");

String aihao=request.getParameter("aihao");

String srly=request.getParameter("srly");

String pwd=request.getParameter("pwd");

String sql="insert into cunminxinxi (xm,whcd,csrq,aihao,srly,pwd) values('"+xm+"','"+whcd+"','"+csrq+"','"+aihao+"','"+srly+"','"+pwd+"')";

int my=stmt.executeUpdate(sql);

if(my>0){

out.print("添加成功!");

}else{out.print("添加失败!");}

}

%>

获取cunminxinxi表中的id号:

<%

if(request.getQueryString()!=null){

request.setCharacterEncoding("gb2312");

String id=request.getQueryString();

String sql="select * from cunminxinxi where id="+id;

ResultSet rs=stmt.executeQuery(sql);

rs.next();

%>

查询cunminxinxi表中的数据,并返回到网页中来:

<%=rs.getObject("xm")%>   <%=rs.getObject("whcd")%> &n bsp; <%=rs.getObject("csrq")%>   <%=rs.getObject("aihao")%>    <%=rs.getObject("srly")%>

<%}%>

<%

ResultSet rs=stmt.executeQuery("SELECT * FROM cunminxinxi"); //创建查询结果对象rs。执行查询,并将结果赋给rs对象

while(rs.next()){

int id=rs.getInt("id");

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("

");

}

//显示地关闭对象

rs.close();

stmt.close();

mycon.close();

%>

信息公告页面:

查询xian表中的数据,以表格的形式返回到页面中来,并能修改删除 <%

ResultSet rs=stmt.executeQuery("SELECT * FROM xian"); //创建查询结果对象rs。执行查询,并将结果赋给rs对象

while(rs.next()){

int id=rs.getInt("id");

out.print("

");

out.print("

");

out.print("

");

}

//显示地关闭对象

rs.close();

stmt.close();

mycon.close();

%>

6.系统测试与运行

本系统的测试与运行均在浏览器中进行,进过多次的测试其运行的部分成果如下:

6.1首页

图1 default.jsp页面

图2 default.jsp页面

6.2村民信息页面

图3 cunminxinxi.jsp页面

图4 cunminxinxi.jsp页面6.3农信通产品页面

相关主题
文本预览
");

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("

");

out.print("");

out.print(rs.getObject("biaoti")+"");

out.print("

");

out.print(rs.getObject("content")+"

");

out.print("

");

out.print(rs.getObject("name")+"

");

out.print("

");

out.print("");

out.print(rs.getObject("title")+"");

out.print("

");

out.print(rs.getObject("dt")+"

");

out.print("

修改删除