第15章 MyPetShop综合实例

订单编号 用户名 订单日期 用户地址1 用户地址2 用户所在城市 用户所在省份 城市邮编 用户电话 订单状态
int varchar(80) datetime varchar(80) varchar(80) varchar(80) varchar(80) varchar(5) varchar(40) varchar(10)
Web 程序设计——实用网站开发
27
15.3.4 最新商品列表用户控件
NewProduct.ascx
包 括 一 个 GridView 控 件 ， 用于显示最新商 品信息，包括商 品名称和商品价 格信息，单击商 品名称将进入商 品详细信息页面。
28
Web 程序设计——实用网站开发
主键，自动递增 不允许为空 不允许为空 允许为空 允许为空 允许为空 允许为空 允许为空 允许为空 允许为空
22
Web 程序设计——实用网站开发
15.2.2 数据表联系设计
Web 程序设计——实用网站开发
23
15.3 用户控件设计
商品类别列表 用户状态 站点导航 最新商品列表 商品类别 商品导航 天气预报
9
订单结算模块（续）
Web 程序设计——实用网站开发
10
后台管理功能模块
根据系统数据维护要求而设计的后台管理平台， 只有拥有管理员角色的用户才可进入后台功能 模块实现系统的维护与管理。
Web 程序设计——实用网站开发
11
后台管理功能模块（续）
Web 程序设计——实用网站开发
19
商品信息表 (Product)
字 段 ProductId CategoryId ListPrice 说 明 商品编号 所属商品分类编号 商品单价 int int decimal(10, 2) 类 型 备 注 主键，自动递增 外键，不允许为 空 允许为空
UnitCost
SuppId Name
商品成本
25
15.3.2 用户状态用户控件
Navigation1.ascx 包括LoginView、LoginName和 LoginStatus控 件，实现根据不同角色用户的不同状态显示不 同的用户状态信息和可操作菜单。
Web 程序设计——实用网站开发
26
15.3.3 站点导航用户控件
Navigation2.ascx Web.sitemap 包括一个SiteMapPath控件
系统功能模块设计 用户控件设计 系统数据库总体设计 web.config配置文件的设计
Web 程序设计——实用网站开发
4
15.1.1 系统功能模块设计
Web 程序设计——实用网站开发
5
前台商品浏览模块
Web 程序设计——实用网站开发
6
购物车模块
应用Profile个性化用户配置技术实现购物车模 块，允许匿名用户访问购物车。 购物车中包含了用户决定购买的所有商品信息， 包括商品编号、商品名称、商品价格、购买数 量以及用户应付总价等。 用户在查看商品详细信息时，如果决定购买即 可将商品加入购物车，然后可以继续浏览其他 产品。
Web 程序设计——实用网站开发
35
15.4.2 应用程序首页Default.aspx （续）
使用了5个WebPartZone控件，每个 WebPartZone控件内的WebPart控件分别对应 商品类别列表用户控件、用户状态用户控件、 最新商品列表用户控件、商品类别及商品导航 用户控件和天气预报用户控件。 浏览时，因为天气预报信息通过Web服务方式 从中国气象局获取，因此要求连通Internet。
字 段 SuppId Name Addr1 Addr2 City State Zip Phone 说 明 供应商编号 供应商名称 供应商地址1 供应商地址2 供应商所在城市 供应商所在省份 城市邮编 供应商电话 类 型
int varchar(80)
varchar(80) varchar(80) varchar(80) varchar(80) varchar(5) varchar(40)
Web 程序设计——实用网站开发
7
购物车模块（续）
Web 程序设计——实用网站开发
8
订单结算模块
用户完成购物后即可进入结算中心，系统对用 户的产品及数量进行价格计算，最后生成用户 应付款金额。然后用户向系统下达定单并提供 送货地址和付款方式等信息。
Web 程序设计——实用网站开发
38
15.4.3 商品详细信息浏览页面（续）
Web 程序设计——实用网站开发
39
15.4.3 商品详细信息浏览页面（续）
Web 程序设计——实用网站开发
40
15.4.4 商品搜索页面
Search.aspx 实现模糊查找商品并显示商品详细信息的功能。 PetTree用户控件 GridView控件
Web 程序设计——实用网站开发
30
15.3.6 天气预报用户控件（续）
Web 程序设计——实用网站开发
31
15.4 前台显示页面设计
母版页 应用程序首页 商品详细信息浏览页面 商品搜索页面
Web 程序设计——实用网站开发
32
15.4.1 母版页的设计
Web 程序设计——实用网站开发
15
15.1.4 web.config配置文件
启用了Web部件功能、Profile个性化用户配置、 Forms身份验证和URL授权、成员资格和角色 管理等功能，因此必须对web.config配置文件 进行相应的配置。 源程序： web.config
Web 程序设计——实用网站开发
15.1 15.2 15.3 15.4 15.5 15.6 15.7 15.8 15.9 系统总体设计 MyPetShop数据库设计 用户控件设计 前台显示页面设计 用户注册和登录模块 购物车模块 订单处理 后台管理功能模块 小结
3
Web 程序设计——实用网站开发
15.1 系统总体设计
Web 程序设计——实用网站开发
33
15.4.1 母版页的设计（续）
Web 程序设计——实用网站开发
34
15.4.2 应用程序首页Default.aspx
除了显示母版页中的内容外，还显示最新商品 信息、商品分类信息和天气预报信息等。 AJAX技术。 最新商品列表用户控件、商品类别列表用户控 件和天气预报用户控件。
16
15.2 MyPetShop数据库设计
数据表设计 表与表之间的联系
Web 程序设计——实用网站开发
17
15.2.1 数据表设计
商品分类信息表（Category） 商品信息表（Product） 供应商信息表（Supplier） 订单信息表（Order） 订单详细信息表（OrderItem）
Web 程序设计——实用网站开发
36
15.4.2 应用程序首页Default.aspx（续）
Web 程序设计——实用网站开发
37
15.4.3 商品详细信息浏览页面
ProShow.aspx PetTree用户控件 GridView控件
Web 程序设计——实用网站开发
Web 程序设计——实用网站开发
41
15.4.4 商品搜索页面（续）
Web 程序设计——实用网站开发
42
15.4.4 商品搜索页面（续）
Web 程序设计——实用网站开发
43
15.5 用户注册和登录模块
注册新用户 登录系统 修改用户密码 找回用户密码 退出系统
Web 程序设计——实用网站开发
24
15.3.1 商品类别列表用户控件
Category.ascx
包括一个 GridView控件， 用于显示商品类 别及该类别所有 的商品数量，其 中商品类别显示 为超链接，通过 单击商品类别可 进入该类别的商 品列表页面。
Web 程序设计——实用网站开发
第15章 MyPetShop综合实例
Web 程序设计——实用网站开发
1
本章要点：
了解MyPetShop系统的总体设计 熟悉系统数据库设计 掌握用户控件设计 掌握前台功能模块设计 掌握购物车模块 掌握订单处理模块 掌握后台功能管理模块
2
Web 程序设计——实用网站开发
目录
NewProduct用户控件：实现最新商品显示功 能。 PetTree用户控件：实现商品类别及所有商品 导航功能。 Weather用户控件：实现全国所有省、直辖市 的主要城市天气预报功能。
Web 程序设计——实用网站开发
14
15.1.3 系统数据库总体设计
MyPetShop数据库：包含Category、Product、 Supplier、Order和OrderItem。其中Category 表存储商品类别信息，Product表存储商品详 细信息，Supplier表存储供应商详细信息， OrderItem表存储订单的详细信息，Order表 存储订单信息。 ASPNETDB数据库：存储实现Profile用户个性 化配置功能、Web部件功能、成员资格管理和 角色管理等功能相关的数据。
Web 程序设计——实用网站开发
44
15.5.1 注册新用户
NewUser.aspx CreateUserWizard控件
Web 程序设计——实用网站开发
45
15.5.1 注册新用户（续）
Web 程序设计——实用网站开发
AJAX技术 Web部件功能。 用户状态用户控件和站点导航用户控件。 商品搜索功能使用 AJAX技术，运用 AJAX Control Toolkit组件中的 AutoCompleteExtender控件实现典型的AJAX TextBox自动完成功能，实现商品名称的模糊 查找，并将所有与搜索关键字模糊匹配的商品 以列表的形式显示。
Web 程序设计——实用网站开发
18
商品分类信息表（Category）
字 段 CategoryId
Name Descn
说 明 商品分类编号
商品分Байду номын сангаас名称 商品类别描述
类 型 int
varchar(80) varchar(255)
备 注 主键，自动递 增
允许为空 允许为空
Web 程序设计——实用网站开发
备 注 主键，自动递增 允许为空 允许为空 允许为空 允许为空 允许为空 允许为空 允许为空
21
Web 程序设计——实用网站开发
订单信息表 (Order)
字 段 OrderId UserName OrderDate 说 明 类 型 备 注
Addr1 Addr2 City State Zip Phone Status
webconfigweb程序设计aspnet实用网站开发17152mypetshop数据表设计表与表之间的联系web程序设计aspnet实用网站开发181521商品分类信息表category商品信息表product供应商信息表supplier订单信息表order订单详细信息表orderitemweb程序设计aspnet实用网站开发19categorycategoryid商品分类编号int主键自动递name商品分类名称varchar80允许为空descn商品类别描述varchar255允许为空web程序设计aspnet实用网站开发20productproductid商品编号int主键自动递增categoryid所属商品分类编号int外键不允许为listprice商品单价decimal10允许为空unitcost商品成本decimal10允许为空suppid供应商编号intname商品名称varchar80允许为空descn商品介绍varchar255允许为空image商品图片varchar80存储图片路径qty商品库存int不允许为空web程序设计aspnet实用网站开发21suppliersuppid供应商编号int主键自动递增name供应商名称varchar80允许为空addr1供应商地址1varchar80允许为空addr2供应商地址2varchar80允许为空city供应商所在城市varchar80允许为空state供应商所在省份varchar80允许为空zip城市邮编varchar5允许为空phone供应商电话varchar40允许为空web程序设计aspnet实用网站开发22orderorderid订单编号int主键自动递增username用户名varchar80不允许为空orderdate订单日期datetime不允许为空addr1用户地址1varchar80允许为空addr2用户地址2varchar80允许为空city用户所在城市varchar80允许为空state用户所在省份varchar80允许为空zip城市邮编varchar5允许为空phone用户电话varchar40允许为空status订单状态varchar10允许为空web程序设计aspnet实用网站开发231522web程序设计aspnet实用网站开发24153商品类别列表用户状态站点导航最新商品列表商品类别商品导航天气预报web程序设
15.3.5 商品类别及商品导航用户控件
PetTree.ascx 包含一个TreeView 控件
Web 程序设计——实用网站开发
29
15.3.6 天气预报用户控件
Weather.ascx 通过调用Web服务，显示全国所有省、直辖市 的主要城市最近3天的天气情况。 实现天气预报控件有两个关键步骤：一是添加 天气预报Web服务引用，二是调用天气预报 Web服务的相关方法再显示天气预报信息，如 GetCityWeather(string cityCode)方法用于获取 相应城市的天气预报信息。
12
15.1.2 用户控件
Navigation1用户控件：根据用户的不同角色， 显示不同的登录状态信息。 Navigation2用户控件：根据站点地图实现站点 导航功能。 Category用户控件：实现商品类别显示功能。
Web 程序设计——实用网站开发
13
15.1.2 用户控件（续）
供应商编号 商品名称
decimal(10, 2)
int varchar(80)
允许为空
外键 允许为空
Descn
Image Qty
商品介绍
商品图片 商品库存
varchar(255)
varchar(80) int
允许为空
存储图片路径 不允许为空
20
Web 程序设计——实用网站开发
供应商信息表 (Supplier)