模块五 动态网页技术 任务五 查询记录 任务一 表单设计制作 任务二 简单动态的 ASP 页面制作任务三 页面与数据库的集成任务四 添加记录 任务六 电商系统融入网站.

Presentation on theme: "模块五 动态网页技术 任务五 查询记录 任务一 表单设计制作 任务二 简单动态的 ASP 页面制作任务三 页面与数据库的集成任务四 添加记录 任务六 电商系统融入网站."— Presentation transcript:

1 模块五 动态网页技术 任务五 查询记录 任务一 表单设计制作 任务二 简单动态的 ASP 页面制作任务三 页面与数据库的集成任务四 添加记录 任务六 电商系统融入网站

2 任务一 表单设计制作

3 教学设计 教学目标：了解动态网页；表单在动态网 页中的功能；了解表单属性和元素；掌握 表单设计与制作操作。 教学重点：掌握表单设计与制作 教学难点：动态网页功能 教学方法：教、学、做一体；案例教学； 任务驱动

4 动态交互式网页 动态网页不仅含有 HTML 标记，而且含有程 序代码，这种网页的后缀一般根据 Web 程 序设计技术来定，如利用 ASP 技术培训开 发的动态网页文件的后缀为.asp ， jsp 技术 为.jsp ； php 技术为.php ；.net 技术为.aspx 。 动态网页可以根据用户的即时操作和即时 请求，网页内容发生相应的变化，从而可 以实现功能强大的交互式操作。

5 通常，把信息不经常变换的内容做成静态 页面形式（例如公司概况），而需要经常 变换内容或具有交互功能的页面做成动态 网页形式（例如新闻动态）。

6 为什么网站要做成动态网站 静态网站如果要更新网站内容，必须请网 站制作者更新网页后，再上传至服务器将 原网页覆盖后才能实现，显然这很不方便 网站内容的及时更新。试想，一家贸易公 司请一家网站设计工作室制作公司网站， 如果是静态网站，发条公司动态或公司通 告，还需要通知网站的制作者更新网页， 再上传至服务器，这很麻烦。如果是动态 网站，公司自己就可以随时通过浏览器进 入管理系统发布或更新信息。

7 常用的交互式程序设计技术有 PHP 、 JAVA 、 ASP 、 JSP 、 ASP.Net 等。 电子商务网站动态功能：信息动态发布与 管理、会员管理、在线订单、在线购物、 在线咨询与服务等。

8 表单功能 表单面向用户，主要负责数据采集功能。 例如：注册、登录表单、发贴、留言、购 物等表单。 打开一个注册 页面和一个登 录页面

9

10 表单的组成 网站浏览者与网站交互，进行信息在线交 流，而采集用户信息的方式，主要通过表 单形式。 文本框、文本区、单选按钮、复选框、下 拉菜单、按钮等，其中的提交按钮是不可 缺少的表单元素。 文本区用于采集较多字符，所采集的信息 如果送到数据库存储，相应字段数据类型 应设置为 “ 备注 ” 。

11 表单的组成 表单标签及属性：包含处理表单数据所用 程序的 URL 以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、 多行文本区、复选框、单选按钮、下拉选 择框和文件上传框等表单元素。 表单按钮：包括提交按钮、复位按钮和一 般按钮。

12 表单元素 文本框 复选框 文件上传 单选按钮 隐藏域 下列列表框 文本区 ……

13

14 这是学院公体课选课系 统注册表单。图片只显 示该表单一部分。 想一想？少了表单最重 要的哪个元素？

15

16

17

18 表单代码 姓名

19 表单设计制作 根据需求设计：该表单需求和功能是什么？ 由哪些元素组成？表单数据传递方式？传 递目标？等等 步骤：布局表格定位 插入表单域 插入表单元素 插入表单按钮 设置表单属性、元素属性

20 做一个最简单的表单 登录表单：输入用户名、密码，登录按钮。 在代码视图下，查看生成的表单 HTML 代码。

21 课后小结 。。。 作业 想一想？ 表单采集的数据传递到哪里？如何处理？ 等等

22 任务二 简单动态的页面制作 --- 使用 ASP 技术

23 动态网页技术分为两类。客户端技术：用 于设计在客户机上或是浏览器环境下运行 的 Web 程序或脚本，例 VBScript 、 JavaScript 等；服务器端技术：用于设计在 服务器环境下运行的 Web 程序，例 ASP 、 JSP 、 PHP 等。

24 ASP ASP 是目前热门的动态网页技术。 ASP 功能强大，简单易学。 微软产品，微软强大的技术支持。 资源丰富。技术发展相对成熟，并且有丰 富的 ASP 资源。 软硬件环境要求低。 适合中小型动态网站建站。

25

26 如何理解 ASP 运行在服务器端 建一个静态页，包含以下 VB 脚本代码： MsgBox now() 建一个 ASP 页，包含以下 ASP 代码：

27 由于 VB 脚本由客户端浏览器解析， 所以，显示的时间是你的电脑的系统时间， 你可以更改你的电脑的系统时间， 可以看到弹出消息框中的时间随之变化。 由于 ASP 代码由服务器解析， 所以，显示的时间是服务器的系统时间， 更改你的电脑的系统时间， 可以看到页面时间没有随之变化

28 ASP 语法及规则 一个简单的 ASP 页面可以包括：普通的 HTML 代码，也就是普通的 Web 的页面内容； 服务器端的 Script 程序代码：位于 内的程序代码。 ASP 文件的约定： ASP 代码均须放在 符号之间； ASP 代码中，字母不分大小 写； ASP 代码中，所有标点符号均为英文 状态下所输入的标点符号。

29 在记事本中，手工输入方式生成以下 ASP 页面， 试运行并在浏览器端查看解析生成的 HTML 源代 码。 ”> 您好！通达欢迎您 ~

30 ASP 代码包含在一对定界符中

31 ASP 内置对象 ASP 提供了一系列功能强大的内置对象。

32 Request 对象 Request 对象是 ASP 中常用的对象，用于获 取客户端的信息。 包括从 HTML 表单用 POST 方法或 GET 方法 传递的信息、 Cookie 和用户认证等。 Request 对象的语法如下： Request[. 数据集合 | 属性 |. 方法 ](" 变量或字 符串 ") QueryString ：查询字符串。 Form ：表单元素的值。

33 案例 1 Form 用户名： 密码：

34 1.asp 代码如下： <% username=Request. Form ("username") password=Request. Form ("password") if username="admin" then if password="admin888" then Response.redirect"admin.asp" Else Response.Write " 输入错误 !" End if %>

35 案例 2 QueryString 你喜欢的职业： 教师 工程师 推销员 包含了多个面向 1.asp 页面的链接， 每一个链接都含有一个 fav 查询字符串变量。 当用户点击自己最喜欢的职业时，结果就会送到 1.asp 页面。

36 1.asp <% fav=Request.QueryString("fav") %> 您最喜欢的职业是： 观察点击不同链接时切换到的页面， 并注意观察浏览器地址栏， 利用查询字符串所传递信息会出现在浏览器地址栏里

37 Response 对象 作用是向客户端浏览器发送信息。 语法如下： Response. 数据集合 | 属性 | 方法（变量或字符串） Write 方法：是 Response 对象最常用的方法，该 方法可以向浏览器输出动态信息。用等号也可以 灵活地向浏览器输出动态信息， Redirect 方法：将客户端的浏览器重向到一个新 的网页。

38 案例 1 write <% response.write" 您是第 1 次访问本站点。 " response.write" 欢迎您常来 ~" %> 改成 = 输出

39 案例 2 Redirect <% Response.Redirect “jxcia.com" %>

40

41 用户 后台数据库 处理表单数据 的程序 表单页 用户操作，输 入或选择表单 数据 后台数据库进行 查询、添加、更 新、删除等操作 如何把表单数据存储于数据库 ? 这是我们后续课讲 授的内容，请同学们做好预习

42 任务三 页面与数据库的集成

43 什么是 Web 数据库 ASP 系统中通常要使用数据库用于信息存 储，比如公司动态信息、客户留言等。 ASP 常用的数据库系统有 Access 和 SQL Server 。 前台 ASP 技术 + 后台数据库技术才能开发功 能强大的 ASP 系统。

44 什么是 SQL 语言 对数据库进行查询、删除、添加、更新记录操作，则是通 过 SQL 语句。 SQL 是专为数据库而建立的标准操作命令集。 查询 Select 语句 Select * from users 说明：从表 users 中选取全部记录。 Select * from users where class="05 网络 4" 说明：根据条件选取记录 Select * from users order by age asc 说明：查询结果排序， asc 表示按升序排，升序是默认的排 序，所以 asc 可省略不写。 Select top 10 * from users 说明：只先选取前 10 条记录。

45 添加 Insert 语句：用于向数据库添加记录。 语法如下： 举例如下： Insert into users(name,class,age) values(" 张 三 "," 信息五班 ","20") 说明：向表 users 插入一条新记录。

46 删除 Delete 语句：用于从数据表中删除记录。 举例如下： Delete from users where name=" 张三 " 说明：从表中删除张三的记录。

47 任务五 记录添加

48 Request 对象 Request 对象：可获取信息。 QueryString 方式（常用）：通过 QueryString 方法实现在页面之间传递字符。 查询字符串，动态页面文件名后跟随问号， = 号后即为向下一个页面所传递的字符串。 采用这种方式传递字符串，字符串不能多 于 255 个。 Form 方式（最常用）：从表单获取。

49 举例说明 Form 方式的运用 表单代码如下 : 标题 : 内容 :

50 通过 ASP 程序中 Request 对象的 Form 方法，把表 单用户输入信息通过 SQL 语句送往后台数据库存 储。

51

52 Response 对象 Response 对象：输出信息至客户端浏览 器。 Write 方法：用于向浏览器输出信息。可以 在 Response.write 语句中加入任何 HTML 标 记，例如加入 br 或 p 标记来换行。可以用 = 号省略表示，例如

53 ADO 技术 ADO 是微软开发的将 Web 页面与数据库结 合的数据库技术。 ADO 把基本操作封装在 7 个对象中，在页面 上调用这些对象执行相应的数据库操作。 常用对象有二个： Connection 对象，建立 并管理与数据库的连接； Recordset 对象， 查询数据库后，由数据库返回查询到的信 息（记录集）。

54 页面与数据库的连接 <% set db=Server.Createobject("ADODB.Connect ion") db.Open "DBQ="&Server.Mappath(" 路径表 示 / 数据库名.mdb")&";DRIVER={Microsoft Access Driver (*.mdb)};" %>

55 获取信息并添加到数据库 <% t1=Request("t1") t2=Request("t2") t3=Request("REMOTE_ADDR") db.Execute "insert into 学生基本信息 ( 姓名, 学号,ip 地址, 发送时间 ) values ('"& t1 &"','" & t2 & "','" & t3 & "','" & now() & "')" db.close response.write" 成功发送 " %>

56 任务五 查询记录

57 Recordset 记录集对象 Recordset 对象的作用是对数据库进行查询 操作，得到符合查询条件的结果（即记录 集）。

58 查询并显示数据库记录 <% set rs=db.execute("select * from 学生基本信息 ") %> 姓名 学号 <% rs.movenext loop %>

59

60 利用上述代码，修改完善，制作简单，但 具有基本功能的公司信息发布与管理系统、 客户留言簿、网上订单系统等。

61 任务六 电商系统融入网站

62 将第三方开发的具备基本功能的电商平台移植入 公司网站。 公司网站需要利用 Internet 网络电子商务技术，采 用 ASP/ADO 网络数据库解决方案，实现基于 B/S 模式的电子商务管理。凭借 web 服务器和客户的 浏览器，利用电子工具高效率、低成本的特点， 为客户提供交易平台，在 Internet 上发布商业信息， 商品广告，使用户可以查阅商品、搜索商品、订 购商品，为客户提供全天候的、更好、更快的商 务活动空间，实现网上交易的基本功能。

63

64 服务器开通对 ASP 的支持。 将案例包下载到网站文件夹子文件夹中。 数据库文件妥善放置。数据库文件夹设置 可读写操作。 根据数据库文件位置，相应修改数据库连 接文件中数据库地址。

65 ASP 页面与网站页面保持风格统一。 部分 ASP 代码需嵌入页面 HTML 代码中，融 为一体。 测试。