毕业答辩论文基于Web的网上花店网站设计终稿样本.doc

毕业答辩论文基于Web的网上花店网站设计终稿

1 绪论
开发背景
近年来，随着Internet的迅速崛起，互联网已日益成为收集提供信息的最佳渠道并逐步进入传统的流通领域。于是电子商务开始流行起来，越来越多的商家在网上建起在线商店，向消费者展示出一种新颖的购物理念[1]。
促进Internet高速发展的原因之一就是Web技术。现如今的Web已经不再局限于仅仅提供大量的信息服务，Web技术的发展，使得那些具有交互式的动态页面，有条理的数据库查询，丰富信息内容的页面成为最吸引人的网页。浏览Web有着执行Windows程序一样的感觉和操作性。随着Internet技术的发展，已经成为一种操作平台，为用户提供强大的服务。
网络的应用越来越广泛，单纯的提供信息只是其中的一部分。未来的Web将是一套虚拟的信息平台，其中包括在线购物，远程医疗，视频点播，语音聊天等功能。功能的扩展意味着数据量的增加，如果仍然用静态页面的生成模式，则会生成过多的超文本文件，不仅降低了浏览速度，也给维护造成了不便。静态文档的Web技术无法满足人们进一步的要求。随着高版本HTML的出现和浏览器对Form表单的支持使Web技术进入了动态交互页面阶段[2]。
作为计算机领域发展最迅速之一的数据库技术，已经完成了一套独有的理论，并广泛的应用于人们的生产和生活中。数据库技术与网站的结合是当今Web技术的一个热点。有了数据库的支持，可以扩展网页的功能，可以方便的设计出交互式页面，可以构造功能强大的后台管理系统，为网站的更新，维护提供极大的方便[3]。因此作为网络开发者或者管理者，数据库是必不可少的。
当前的页面正在向两个方向发展，一是多媒体，另一个是交互式。交互式的实现意味着网站个性化，意味着用户将有权决定要查看哪些内容[4]。所以网站必须提供一个给用户的界面，让用户对内容进行分类筛选，最后得到用户需要的内容。这点是传统静态网页无法实现的。
天簌之心网上花店的设计解决了以上的弊端，将数据库和页面结合。利用HTML语言，JSP语言语法，SQL Server数据库知识和网络安全知识等制作。
基于Web的天簌之心网上花店就是这样一个采用交互式动态网页的网站。网站主要使用了JSP技术，采用SOL Server 2000数据库。使用JDBC技术把数据库和动态网页相关联。
天簌之心网上花店需要达到以下目标：
1）支持用户注册和登录。
2）用户登录后可以根据价格、类型和其他关键词进行查询。
3）用户可以购买商品，但是可以在提交之前取消购买这些商品。
4）支持用户在线留言。
5）支持管理员通过后台登录，并对型同种的各种信息进行维护。
系统流程及模块划分：
1）用户登录模块：负责验证系统中用户的登录信息。
2）商品查询模块:负责根据用户输入的各种查询条件快速查询符合用户要求的鲜花商品。
3）购物车模块：负责记录并保存用户选购的商品信息，然后生成订单。
4）用户留言模块：负责接受并记录用户的留言信息。
5）管理员管理模块：负责商品、订单、用户和厂商信息的查看、添加和删除等维护操作。
使用工具和技术的介绍
天簌之心网上花店使用到的技术有：JSP、SQL Server 2000和Dreamweaver。以下对各种工具做一个简单介绍。
JSP简介
JSP概述
JSP(Java Server Pages)是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件(*.jsp)。 用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行[5]。
JSP技术使用Java编程语言编写类XML的tags和scriptlets，来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计和显示分离，支持可重用的基于组件的设计，使基于Web的应用程序的开发变得迅速和容易[6]。以下罗列了JSP所独具的一些特点：
1）将内容的生成和显示进行分离 使用JSP技术，Web页面开发人员可以使用HTML或者XML标识来设计和格式化最终页面。使用JSP标识或者小脚本来生成页面上的动态内容。生成内容的逻辑被封装在标识和JavaBeans组件中，并且捆绑在小脚本中，所有的脚本在服务器端运行。如果核心逻辑被封装在标识和Beans中，那么其他人，如Web管理人员和页面设计者，能够编辑和使用JSP页面，而不影响内容的生成。 在服务器端，JSP引擎解释JSP标识和小脚本，生成所请求的内容（例如，通过访问JavaBeans组件，使用JDBCTM技术访问数据库，或者包含文件），并且将结果以HTML（或者XML）页面的形式发送回浏览器。这有助于作者保护自己的代码，而又保证任何基于HTML的Web浏览器的完全可用性。
2）强调可重用的组件 绝大多数JSP页面依赖于可重用的，跨平台的组件（JavaBeans或者Enterprise JavaBeansTM组件）来执行应用程序所要求的更为复杂的处理。开发人员能够共享和交换执 行普通操作的组件，或者使得这些组件为更多的使用者或者客户团体所使用。基于组件的方法加速了总体开发过程，并且使得各种组织在他们现有的技能和优化结果的开发努力中得到平衡。
3）采用标识简化页面开发 Web页面开发人员不会都是熟悉脚本语言的编程人员。JavaServer Page技术封装了许多功能，这些功能是在易用的、与JSP相关的XML标识中进行动态内容生成所需要的。 标准的JSP标识能够访问和实例化JavaBeans组件，设置或者检索组件属性，下载Applet，以及执行用其他方法更难于编码和耗时的功能。通过开发定制化标识库，JSP技术是可以扩展的。今后，第三方开发人员和其他人员可以为常用功能创建自己的标识库。这使得Web页面开发人员能够使用熟悉的工具和如同标识一样的执行特定功能的构件来工作。 JSP技术很容易整合到多种应用体系结构中，以利用现存的工具和技巧，并且扩展到能够支持企业级的分布式应用。作为采用Java技术家族的一部分，以及Java 2（企业版体系结构）的一个组成部分，JSP技术能够支持高度复杂的基于Web的应用。 由于JSP页面的内置脚本语言是基于Java编程语言的，而且所有的JSP页面都被编译成为Java Servlet，JSP页面就具有Java技术的所有好处，包括健壮的存储管理和安全性。 作为Java平台的一部分，JSP拥有Java编程语言“一次编写，各处运行”的特点。随着越来越多的供应商将JSP支持添加到他们的产品中，您可以使用自己所选择的服务器和工具，更改工具或服务器并不影响当前的应用[7]。
合理的选择开发技术，对于网站开发的完成情况有着非常重要的影响。要开发一个网站，首先要选择一个动态网页开发技术。当前比较流行的动态网页开发技术有JSP、ASP、PHP。[8]：
asp/jsp/php比较表
技术名称
ASP
JSP
PHP
对数据库的支持
好
好
好
开发难易度
容易
容易
较难
使用平台
Windows9X/NT
Windows/UNIX
UNIX
安全性
不好
好
不好
对组件的支持
支持
支持
不支持
执行方式
解释执行
编译之后执行
解释执行
跨平台
不好
好
好
这三种都是在传统的HTML代码中，利用HTML标签的扩展，构成页面。不难看出，JSP的综合实力是最强的，尤其是在安全性和跨平台性两个方面，比其他的两种技术都要好，因此，最后选择基于Java的JSP技术作为动态网页的开发技术。
JSP的工作原理
：
1）客户端通过浏览器发送请求；
2）Web服务器接收这个请求，然后转给应用服务器；
3）应用服务器会查找客户要访问的文件，；分两种情况：第一次访问：应用服务器把JSP文件转换成Java文件；然后编译成class文件；然后加载类；实例化对象并初始化；后续访问：JSP文件对应的页面对象已经存在，直接查找到这个对象；
4）应用服务器封装请求信息，然后调用相应的方法；
5）应用服务器把方法执行结果（响应客户的内容）传递给Web服务器；
6）Web服务器把这个结果发给客户端；
7）客户端浏览器把接收到的html代码解析成网页。这个就是我们看到的结果。

Dreamweaver简介
Macromedia Dreamweaver MX 2004是一款专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。
利用Dreamweaver中的可视化编辑功能，可以快速地创建页面而无需编写任何代码。可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。可以在Macromedia Fireworks 或其他图形应用程序中创建和编辑图像，然后将它们直接导入 Dreamweaver，或者添加Macromedia Flash 对象，从而优化开发工作流程[11]。
Dreamweaver还提供了功能全面的编码环境，其中包括代码编辑工具（例如代码颜色和标签完成）。有关 HTML、层叠样式表（CSS）、JavaScript、ColdFusion标记语言 （CFML）、Microsoft Active Server Pages（ASP）和JavaServer Pages（JSP）的参考资料。Macromedia的可自由导入导出HTML技术，可导入手工编码的HTML文档而不会重新设置代码的格式，可以随后用首选的格式设置样式来重新设置代码的格式[12]。
Dreamweaver还可以使用服务器技术（例如 CFML、、ASP、JSP 和 PHP）生成由动态数据库支持的Web应用程序。
Dreamweaver可以完全自定义。可以创建对象和命令，修改快捷键，甚至编写JavaScript代码，用新的行为、属性检查器和站点报告来扩展Dreamweaver的功能。
Dreamweaver是在多媒体方面颇有建树的Macromedia公司推出的可视化网页制作工具，它与Flash、Fireworks合在一起被称为网页制作三剑客，这三个软件相辅相承，是制作网页的最佳选择。其中，Dreamweaver主要用来制作网页文件，制作出来的网页兼容性比较好，制作效率也很高，Flash用来制作精美的网页动画，而Fireworks用来处理网页中的图形[13]。
SQL Server简介
SQL Server是设计用到的另一个工具，它由微软开发，是一个常见的客户/服务器关系数据库软件。在中小型软件开发中的应用尤为广泛。
SQL Server 2000与Windows 2000紧密集成。SQL Server 2000不仅与Windows 2000 Server的活动目录集成，当运行于Windows 2000之上时，SQL Server 2000还提供了增强的安全性、性能监视以及管理特性。SQL Server 2000能够利用Windows 2000中Kerberos安全的代理能力，把本地客户端的验证信息传递给远程服务器。数据库的性能监视能够在微软管理控制台（MMC）中和其它发监视任务一起运行。为了更进一步减少多语言环境下用户的拥有的成本以及简化管理任务，SQL Server 2000支持多语言特性，包括在Windows 2000多语言版下改变SQL Server用户界面语言环境的能力。
Microsoft SQL Server 2000大大增进了现今流行的SQL产品的许多功能。在产品的定义上已经做了许多变化，其中包括关系性引擎（Relational Engine）、管理和工具、复制、分析服务（OLAP服务和数据采集）、全文查找、与Windows 2000集成化等等。相对与SQL ，SQL Server 2000主要与Internet的集成、可伸缩性及易用性方面做了增强，同时SQL Server 2000还增加了一些新的特性，从而使其成为在大规模在线事物处理（OLPA）、数据仓库和电子商务应用程序方面极佳的数据平台。在与Internet的集成方面，SQL Server 2000通过对XML的支持、对数据的Web访问和支持Web的分析等方面增强了其作为电子商务数据平台的竞争实力[16]。
在可伸缩性方面，SQL Server 2000通过同一产品的跨平台使用、对64G大内存的访问、多达32个CPU的服务器的支持以及分布式视图和索引视图的使用充分保证了该产品的可伸缩性与执行性能。
在易用性方面，SQL Server 2000在自动动态管理方面比前一版本又有了更大的进步，多种任务的向导工具使其使用起来得心应手，增强的数据转换服务（DTS）大大改善了可用性和可编程性，而集成的分析服务可以让用户对大量数据进行分析而花费很少的数据检索执行时间。
总而言之，Microsoft SQL Server 2000是一个面向21世纪的高性能的数据库管理系统。作为Windows家族中一个出类拔萃的成员，SQL Server 2000可以满足各种类型的企业客户和独立软件供应商构建商业应用程序的需要。

2 系统需求分析
这一章将对天簌之心网上花店做一个总体的需求分析，明确所要实现的功能，确定研究的深度。
开发系统的基本情况介绍
设计题目为“天簌之心网上花店的设计与实现”，其开发主要包括后台数据库的建立和维护以及前台界面的设计开发两个方面。后台数据库的建立要求数据一致性和完整性强、数据安全性好；前端应用程序的建立要求界面合理、美观，功能完备，吸引用户。注册用户登录前台后，可以浏览和购买网上花店的所有商品，并且可以在网站中留言。管理员通过后台登录后可以对系统中的商品以及注册的用户和用户的留言进行管理。该系统的用户模块和管理员模块是分离的，即用户通过用户模块登录到自己的模块，管理员通过管理员模块登录到自己的模块。用户和管理员不在一起登录。
功能需求
天簌之心网上花店主要满足两个功能需求：用户需求、管理员需求。分析其需求主要完成的功能如下。
用户功能需求
a）首页功能设计
首页集成了商品信息，商品搜索，友情链接和用户登录注册。用户点击某一商品，查看有关商品的详细信息、花语、价格和适用场合等详细信息；用户也可以通过快速查询和高级查询直接查找需要的商品信息。友情连接方便用户访问其他相关网站。只有登录的用户才有权限购买花束。所以用户要想购买商品必须先登录，而如果是新用户就要注册成为网站的会员再进行登录，然后来使用网站提供的功能。网站管理员可以从首页登录，进入到管理页面，对网站的内容进行设置。
b）站内查询搜索功能设计
用户可以通过快速查询和高级查询来实现对站内花束信息的查找，通过直接填写关键字词和选择查询分类进行快速查询；通过直接输入关键字和选择查找方式、价格范围、商品分类，可进行高级查询。通过从数据库中提取相关数据，在页面中显示有关的花束信息供用户浏览查看。首页上还专门设置了查询方式较多的按适用场合分类查询和按价格分类查询。
c）查看商家的有关信息
用户可以点击首页导航栏中的企业商务来查看该网站的合作商家，以便使用户知道商品来源。
d）发表评论
用户可以在首页的在线留言发表自己意见和建议，供其他用户参考和借鉴。
管理员功能需求
a）管理员信息管理
网站的管理员可以在登录后查看和添加管理员账号。
b）前台信息管理
管理员在登录后可以对前台页面进行管理，查看、添加或删除前台页面显示的商品信息，厂商信息等信息。管理员还可以查看和删除网站用户及订单信息等。
系统功能模块图
在平台功能的分析基础上，：

平台购物模块图
用户进入网上花店平台，用户可以注册，然后登录后可以进行修改资料，用户可以通过商品搜索，找到自己想要产品。管理员可以通过后台登录进去进行用户管理，订单信息管理，商品信息管理，厂商信息管理，网站系统管理。在用户管理中，可以对用户进行添加删除。
3 概要设计
概述
随着Web技术的发展和电子商务时代的到来，人们不再满足于建立各种静态地发布信息的网站，更多的时候需要能与用户进行交互，并能提供后台数据库的管理和控制等服务的动态网站。天簌之心网上花店的设计与实现不光通过用户页面能使使用户能方便的，随时随地的在网上购买花束，并且还拥有强大的后台处理功能，使管理者可以方便的及时的更新网站的内容。
网页设计原理
当在Web站点中融入JSP功能后，将发生以下事情：
1）客户端通过浏览器发送请求；
2）Web服务器接收这个请求，然后转给应用服务器；
3）应用服务器会查找客户要访问的文件，；分两种情况：第一次访问：应用服务器把JSP文件转换成Java文件；然后编译成class文件；然后加载类；实例化对象并初始化；后续访问：JSP文件对应的页面对象已经存在，直接查找到这个对象；
4）应用服务器封装请求信息，然后调用相应的方法；
5）应用服务器把方法执行结果（响应客户的内容）传递给Web服务器；
6）Web服务器把这个结果发给客户端；
7）客户端浏览器把接收到的html代码解析成网页。这个就是我们看到的结果。
系统概要流程设计
该系统网站主要分前台管理和后台管理员管理两大模块。
前台模块设计
普通用户只有浏览页面的功能，只有注册为会员后，才可以购物。
1） 所示
浏览商品
选择商品
订购商品
去购物车
确定订单
提交订单
未注册用户
已登录注册用户
未登录注册用户
注册
登录
前台购物流程图
用户再前台可以浏览商品，看到自己喜欢的商品可以选择商品，然后订购商品，如果是没有注册的用户需要注册，如果是注册了没有登录的用户，则跳转到登录页面，已经登录的用户则跳转到购物车页面，然后提交订单。
2）

注册功能流程图
注册的具体实现为：
点击主页面的用户注册选项后，会弹出一个注册信息页面，用户需要如实填写用户名，密码，E_mail,地址，电话，真实，姓名等各项信息，提交后，系统进行检测判断该用户名是否已经注册过，如果已经存在则弹出新页面，提示用户该用户名已经注册过，如果没有则进行下一步判断，用户输入的两次密码是否一致，然后依次往后判断用户所填写的各项信息是否符合要求，直到所有信息均正确无误，系统将该用户注册信息写入会员表并提示用户注册成功，用户登陆后，就可以进行有效的购物了。
3）
开始搜索
输入条件
搜索结果
查看商品
购物车
下订单
续搜索
是
否

商品搜索流程图
商品的搜索功能使用户更加方便的进行自己所需要的商品的查询，节省时间，提高效率。用户搜索时只要输入商品的关键字就能搜索到所有相关的商品。并且能列出通过搜索得到的商品的详细信息。

4）。

5）
购物车
查看商品
满意吗
下订单
调整商品
结束

否

是

购物车流程图
购物车具体的实现可采用这种形式：定义一个购物车的类(Class)。
1）列出商品的列表，使用户能够自由选择所需要的商品。
2）当用户在点击“添加到购物车”的链接时，执行如下功能：
检查用户购物车类是否存在。如不存在，则建立，并注册Session变量；在有用户购物车类存在的情况下，检查该类中是否有该商品。如存在，则商品数量相应加1；如没有该商品，则将该商品添加到该类中。
后台模块设计
管理员模块各个模块的约束比较少，只要是有管理员登录到管理员模块中就可以
使用管理员模块各个功能模块的功能。

后台管理模块图
数据库设计
在建设网站系统之前，我们必须对系统所用到的数据进行大致的分类和具体的结构设计，既要做到清晰明了，又要能适应系统各项功能的调用，而不至于产生结构上的逻辑混乱，保证关键数据在意外情况下不会被破坏，可以说数据库是系统的重中之重。
数据库设计要遵循一些规则，一个好的数据库满足一些严格的约束和要求。尽量分离各实体对应的表，一个实体对应一个表，搞清楚该实体有哪些属性，对应有些什么字段，以及各实体之间有何种联系。实体、属性与联系是进行概念设计时要考虑的三个元素，也是一个好的数据库设计的核心。
从实际出发，经过仔细地设计，得到各表的设计，它们分别是表5-1管理员信息表 admin，表5-2 商品信息表goods，表5-3留言表leaveLanguage，表5-4订单表orders，图5-5订单详细信息表ordersDetails，表5-6商家信息表produce，表5-7 商家详细信息表produceDetails，表5-8 商品类别表sort，表5-9 用户信息表users。
天簌之心网上花店的数据库设计共涉及到9个表，在此对每个表做详细说明。
a）admin（管理员信息表）用来记录管理员信息，对于此表， adminId为主键。admin（管理员信息表）。
admin（管理员信息表）
表项
数据类型
说明
adminId
Int
自动编号
adminName
Varchar
用户名
adminPass
Varchar
密码
b）orders（订单表）用来记录订单信息，对于此表ordersId为主键。orders（订单表）。
orders（订单表）
表项
数据类型
说明
ordersId
Int
自动编号
usersName
Varchar
用户名
ordersPrice
Varchar
订单价格
ordersDatetime
Varchar
订单时间
c）goods（商品信息表）用来记录商品信息，对于此表，goodsId为主键。goods（商品信息表）。
表3. 3 goods（商品信息表）
表项
数据类型
说明
goodsId
Int
自动编号
goodsName
Varchar
商品名称
goodsmaterial
Varchar
花束材料
goodsPackage
Varchar
花束包装
goodsLanguage
Varchar
话语
goodsPrice
Float
价钱
goodsCent
Varchar
积分
goodsScope
Varchar
销售方向
goodsPlace
Varchar
适用场合
goodsHabitus
Varchar
是否上架
sortName
Varchar
分组名称

d）leaveLanguage（留言表）用来记录用户留言信息，对于此表， leaveLanguageId为主键。leaveLanguage（留言表）。
leaveLanguage（留言表）
表项
数据类型
说明
leaveLanguageId
Int
自动编号
name
Varchar
用户名称
qq
Varchar
qq号
email
Varchar
Email地址
leaveLanguage
Varchar
留言内容
dateTime
Varchar
留言时间

e）ordersDetails（订单详细信息表）用来记录订单详细信息，对于此表，ordersId为主键。ordersDetails（订单详细信息表）。
ordersDetails（订单详细信息表）
表项
数据类型
说明
ordersId
Int
自动编号
goodsName
Varchar
商品名
goodsPrice
Varchar
商品价格
goodsCount
Int
商品数量

f）produce（商家信息表）用来记录商家信息，对于此表，produceId为主键。produce（商家信息表）。
produce（商家信息表）
表项
数据类型
说明
produceId
Int
自动编号
produceName
Varchar
商家名称

g）produceDetails（商家详细信息表）用来记录商家详细信息。produceDetails（商家详细信息表）。
produceDetails（商家详细信息表）
表项
数据类型
说明
produceId
Int
自动编号
produceName
Varchar
商家名称
sortId
Int
分类编号
goodsId
Int
商品编号

h）sort（商品类别表）用来记录商品类别。sort（商品类别表）。
sort（商品类别表）
表项
数据类型
说明
sortId
Int
自动编号
sortName
Varchar
类别名称
i） users（用户信息表）用来记录用户信息，对于此表usersId为主键。users（用户信息表）。
users（用户信息表）
表项
数据类型
说明
usersId
Int
自动编号
usersName
Varchar
用户名
usersPass
Varchar
密码
usersRepass
Varchar
重复密码
usersPassQuestion
Varchar
提问问题
usersPassReply
Varchar
答案
usersTrueName
Varchar
真实姓名
usersAddress
Varchar
用户地址
usersPhone
Varchar
电话
usersE_mail
Varchar
Email

4 详细设计
这一章介绍各个功能模块的详细设计。
站点的建立
首先打开Dreamweaver开发工具，点击菜单栏的站点，点击管理站点选项在弹出的对话框中点击新建－站点，新建一个站点，命名为“flowershop”。然后就可以在站点中新建网页文件。
页面的设计
网站首页页面设计
在刚建立的站点中新建一个文件，命名为“”，作为网站首页，为了让网站不管是在800*600还是1024*768的显示分辨率的时候都能很好的显示，可以将所有设计的布局和界面的控件都放在表格里。
在Dreamweaver开发工具中选择其设计视图点击菜单栏上的插入，选择表格，插入一个表格。在下面的属性栏里将其宽度设置成812将其对其方式选择为居中对齐，将其边框宽度设置为0。通过拆分合并单元格，调整单元格的高度，把网页拆分成不同的模块，将其布局调整成提前设计的布局的样子。
接下来对首页的内容进行设计。网站首页的顶部主要是显示网站logo，及常用的购物车等功能的图标，通过超级链接使用户可以方便的跳转到相应的页面。另外还有网站的banner及导航栏。接下来就是会员注册及登录模块，会员通过这里登录网站然后购买商品。这里还有商品导购功能，将鲜花按用途或价格等不同关键词分类，用户可通过这里的导航直接找到自己想要的类型的商品。另外用户还可以通过商品搜索直接寻找感兴趣的内容。在此还设置了最新公告功能，显示网站的一些新的公告。首页上显示的主要内容是一些网站最新推荐的特价商品，还有一些最新上架的商品。在首页的底部显示和其他各个网站的友情链接，通过链接，用户可以很方便的浏览其他网站。首页的foot部分还有管理员登录后台的链接，以便管理员登录。
设计中发现页面的样式并不理想中的样式，可以通过来添加样式来使的页面的样式效果更漂亮。<HEAD>…</HEAD>中添加如下的语句：
<STYLE>
TD { FONT-SIZE: 9pt; COLOR: #353535; LINE-HEIGHT: 120%}//表格字体的大小、颜色、行距
BODY {FONT-SIZE: 9pt; LINE-HEIGHT: 120%} //网站字体属性
A:link {COLOR: #000000; TEXT-DECORATION: none} //链接字体的样式
A:visited {COLOR: #000000; text-deration: none} //访问过的链接颜色
A:hover {RIGHT: 0px; COLOR: #336699; POSITION: relative; TOP: 1px; TEXT-DECORATION: none} //鼠标经过链接的颜色
A:active {COLOR: #000000; TEXT-DECORATION: none} //鼠标点击时的颜色
</STYLE>
这样用户界面的首页就设计完成了。
商品的详细页面设计
商品信息的显示页面左侧显示花束的图案。右边显示鲜花的详细信息，包括编号、名称。话语等。这些详细信息都是管理员传进数据库的。在页面的下部是添加至购物车按钮，登录的会员可以点击这里将鲜花添加至购物车。
通过在<HEAD>……</HEAD>中插入<LINK href=”” type=text/css rel=stylesheet>来控制页面样式。
通过从其他页面传过来的goodsId的值，通过SQL语句操作数据库，从数据库中提取需要的该商品号对应的商品的数据显示在网页中。
会员注册页面设计
如果用户还不是会员则提示用户进行注册，用户提交信息之后，系统开始判断用户的注册信息是否有效，首先是用户名是否为空，用户输入的两次密码是否一致，然后依次往后判断用户所填写的各项信息是否符合要求，直到所有信息均正确无误，系统将该用户注册信息写入会员表并提示用户注册成功，用户登陆后，就可以进行有效的购物了。
注册页面要实现对所填写的内容进行验证，只有完全符合条件后才能注册成功。
部分验证代码如下：
function checkuserinfo()
{ ……
if(checkspace() || < 6 || >20) { ();
alert("密码长度不能不能这空，在6位到20位之间，请重新输入！");
return false; }
if( != ) {
();
= '';
= '';
alert("两次输入的密码不同，请重新输入！");
return false; }
if(!=0)
{ if ((0)=="." ||
(0)=="@"||
('@', 0) == -1 ||
('.', 0) == -1 || ("@")== || (".")==)
{ alert("Email地址格式不正确！");
();
return false; } }
else
{ alert("Email不能为空！");
();
return false; } }
用户登陆模块的实现
用户登陆模块是防止非法用户登陆的第一道防线，通过它可以保护后台数据库的安全性，当用户要进行定购时，首先要进入的就是身份验证界面，只有在密码正确的情况下才能进行以后的购物，如果输入的密码不正确，则不能进行定购。如果用户以浏览者的身份进入网站，则只能进行一般的商品浏览和搜索，而不能进行选购，如果是第一次登陆，请先注册。
网站管理员页面设计
管理员界面的页面设计采用了嵌入框架页的形式，所以和用户界面的页面设计有一些不同，在HTML视图中写下如下代码：
<FRAMESET border=0 frameSpacing=0 rows=98,* frameBorder=NO>
<FRAME name=topFrame src="images/" noResize scrolling=no>
<FRAMESET border=0 name=content frameSpacing=0 frameBorder=0 cols=166,*>
<FRAME name=BoardMenu marginWidth=0 marginHeight=0 src="images/" noResize scrolling=no target="main">
<FRAME name=main marginWidth=0 marginHeight=0 src="" noResize>
</FRAMESET>
</FRAMESET>在所用到的Web页面的HTML里设置如下<target="main">，来保证点击链接时在iframe框架中显示其内容。
连接数据库
网站中的大部分内容都是通过连接数据库，从数据库中提取数据显示到页面的，管理员对网站的管理也主要是对数据库中数据的管理。。其主要代码如下：
String driver="";
String url="jdbc:odbc:buyFlowers";
String user="sa";
String password="";
try {(driver);
return (url,user,password);} catch(Exception e) {();
return null; }
在需要用连接数据库的页面直接引入<%@ import=””%>就可以对数据库进行访问了，可以从数据库提取数据在页面上显示，也可以通过SQL语句实现对数据库中数据的增删改。
前台主要功能模块详细设计
前台总体架构
前台主要功能模块介绍。
网站导航：方便用户浏览网页，留言等。
会员登录：主要用于会员登录购买商品。
会员注册： 存储的注册信息有助于商家和购买商品的用户联系。
商品导购：按不同的内容分类，方便用户按不同的分类查询自己所需商品。
最新公告：显示网站最新推出的信息。
商品搜索：实现用户对网站内容的搜索。
最新推荐特价商品：显示网站最新推荐的部分商品基本信息。
最新上架商品：显示网站最新上架的部分商品，以供用户选购。
友情链接：显示友情链接的logo。
后台登录入口：为管理员进入后台提供一个入口。
前台首页模块的详细设计
首页模块主要是供用户浏览信息，给用户提供最新商品信息。本模块主要是一些静态供用户浏览的信息，所以该页面做成了纯静态的。
会员注册设计
如果用户没有注册要先进行注册才能登录，用户的注册相对复杂，在用户提交时要验证用户输入的内容是否完整正确，它的作用是确保用户不跳过输入，像注册的用户名和密码等信息都是不能跳过的必须要输入内容。为了保证用户的密码正确无误，在这里要求用户输入密码和确认的密码，两次输入的值保持一致才能正确注册。该验证类型检查可预知的字符序列，如电子邮件地址中的字符序列。
有了这些验证就可以是用户输入必要的和有效的信息，也便于后台对数据库的管理。
，该页面添加了若干的文本框用来输入用户名，密码等信息。
注册的代码比较简单就是用SQL语句向数据库中添加一条数据记录。。

会员注册模块示意图
会员登录设计
会员在首页直接登录，登录成功后会自动跳转到网站首页，在首页登部将显示出会员的名称，普通用户只可以查看商品信息、在线留言等，会员登录后可以选购商品到购物车，然后生成订单。
商品导购
商品导购通过将商品按适用场合分类（例如：生日，