幻灯片 1 - 江西信息应用职业技术学院

Download Report

Transcript 幻灯片 1 - 江西信息应用职业技术学院 

模块五 动态网页技术
任务一 表单设计制作
任务二 简单动态的ASP页面制作
任务三 页面与数据库的集成
任务四 添加记录
任务五 查询记录
任务六 电商系统融入网站
任务一 表单设计制作
教学设计
• 教学目标：了解动态网页；表单在动态网
页中的功能；了解表单属性和元素；掌握
表单设计与制作操作。
• 教学重点：掌握表单设计与制作
• 教学难点：动态网页功能
• 教学方法：教、学、做一体；案例教学；
任务驱动
动态交互式网页
• 动态网页不仅含有HTML标记，而且含有程
序代码，这种网页的后缀一般根据Web程
序设计技术来定，如利用ASP技术培训开
发的动态网页文件的后缀为.asp，jsp技术
为.jsp；php技术为.php；.net技术为.aspx。
• 动态网页可以根据用户的即时操作和即时
请求，网页内容发生相应的变化，从而可
以实现功能强大的交互式操作。
• 通常，把信息不经常变换的内容做成静态
页面形式（例如公司概况），而需要经常
变换内容或具有交互功能的页面做成动态
网页形式（例如新闻动态）。
为什么网站要做成动态网站
• 静态网站如果要更新网站内容，必须请网
站制作者更新网页后，再上传至服务器将
原网页覆盖后才能实现，显然这很不方便
网站内容的及时更新。试想，一家贸易公
司请一家网站设计工作室制作公司网站，
如果是静态网站，发条公司动态或公司通
告，还需要通知网站的制作者更新网页，
再上传至服务器，这很麻烦。如果是动态
网站，公司自己就可以随时通过浏览器进
入管理系统发布或更新信息。
• 常用的交互式程序设计技术有PHP、JAVA、
ASP、JSP、ASP.Net等。
• 电子商务网站动态功能：信息动态发布与
管理、会员管理、在线订单、在线购物、
在线咨询与服务等。
表单功能
• 表单面向用户，主要负责数据采集功能。
• 例如：注册、登录表单、发贴、留言、购
物等表单。
打开一个注册
页面和一个登
录页面
表单的组成
• 网站浏览者与网站交互，进行信息在线交
流，而采集用户信息的方式，主要通过表
单形式。
• 文本框、文本区、单选按钮、复选框、下
拉菜单、按钮等，其中的提交按钮是不可
缺少的表单元素。
• 文本区用于采集较多字符，所采集的信息
如果送到数据库存储，相应字段数据类型
应设置为“备注” 。
表单的组成
• 表单标签及属性：包含处理表单数据所用
程序的URL以及数据提交到服务器的方法。
• 表单域：包含了文本框、密码框、隐藏域、
多行文本区、复选框、单选按钮、下拉选
择框和文件上传框等表单元素。
• 表单按钮：包括提交按钮、复位按钮和一
般按钮。
表单元素
隐藏域
文本区
单选按钮
文本框
复选框
文件上传
下列列表框
……
这是学院公体课选课系
统注册表单。图片只显
示该表单一部分。
想一想？少了表单最重
要的哪个元素？
表单代码
<form id="form1" name="form1"
method="post" action="send.asp">
姓名<input type="text" name="textfield" />
<input type="submit" name="Submit"
value="提交" />
</form>
表单设计制作
• 根据需求设计：该表单需求和功能是什么？
由哪些元素组成？表单数据传递方式？传
递目标？等等
• 步骤：布局表格定位
插入表单域
插入表单元素
插入表单按钮
设置表单属性、元素属性
做一个最简单的表单
• 登录表单：输入用户名、密码，登录按钮。
• 在代码视图下，查看生成的表单HTML代码。
课后小结
• 。。。
• 作业
• 想一想？
表单采集的数据传递到哪里？如何处理？
等等
任务二 简单动态的页面制作
---使用ASP技术
• 动态网页技术分为两类。客户端技术：用
于设计在客户机上或是浏览器环境下运行
的Web程序或脚本，例VBScript、
JavaScript等；服务器端技术：用于设计在
服务器环境下运行的Web程序，例ASP、
JSP、 PHP等。
ASP
•
•
•
•
ASP是目前热门的动态网页技术。
ASP功能强大，简单易学。
微软产品，微软强大的技术支持。
资源丰富。技术发展相对成熟，并且有丰
富的ASP资源。
• 软硬件环境要求低。
• 适合中小型动态网站建站。
如何理解ASP运行在服务器端
• 建一个静态页，包含以下VB脚本代码：
<script language="vbscript">
MsgBox now()
</script>
• 建一个ASP页，包含以下ASP代码：
<%=now()%>
由于VB脚本由客户端浏览器解析，
所以，显示的时间是你的电脑的系统时间，
你可以更改你的电脑的系统时间，
可以看到弹出消息框中的时间随之变化。
由于ASP代码由服务器解析，
所以，显示的时间是服务器的系统时间，
更改你的电脑的系统时间，
可以看到页面时间没有随之变化
ASP语法及规则
• 一个简单的ASP页面可以包括：普通的
HTML代码，也就是普通的Web的页面内容；
服务器端的Script程序代码：位于<%...%>
内的程序代码。
• ASP文件的约定：ASP代码均须放在<%与
%>符号之间；ASP代码中，字母不分大小
写；ASP代码中，所有标点符号均为英文
状态下所输入的标点符号。
• 在记事本中，手工输入方式生成以下ASP页面，
试运行并在浏览器端查看解析生成的HTML源代
码。
<html>
<body>
<%For I=3 To 6 %>
<font size=“<%=I%>”>您好！通达欢迎您
~</font><br>
<%Next%>
</body>
</html>
• ASP代码包含在一对定界符中<%... % >
ASP内置对象
• ASP提供了一系列功能强大的内置对象。
Request对象
• Request对象是ASP中常用的对象，用于获
取客户端的信息。
• 包括从HTML表单用POST方法或GET方法
传递的信息、Cookie和用户认证等。
• Request 对象的语法如下：
Request[.数据集合|属性|.方法]("变量或字
符串")
QueryString：查询字符串。
Form：表单元素的值。
案例1 Form
<form method="POST" action=“1.asp">
用户名：<input type="text"
name="username" >
密码：<input type="text" name="password">
<input type="submit" value="提交"
name="B1">
</form>
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
End if
%>
案例2 QueryString
你喜欢的职业：
<a href=“1.asp?fav=教师">教师</a>
<a href=“1.asp?fav=工程师">工程师</a>
<a href=“1.asp?fav=推销员">推销员</a>
包含了多个面向1.asp页面的链接，
每一个链接都含有一个fav查询字符串变量。
当用户点击自己最喜欢的职业时，结果就会送到1.asp页面。
• 1.asp
<%
fav=Request.QueryString("fav")
%>
您最喜欢的职业是：<%=fav%>
观察点击不同链接时切换到的页面，
并注意观察浏览器地址栏，
利用查询字符串所传递信息会出现在浏览器地址栏里
Response对象
• 作用是向客户端浏览器发送信息。
• 语法如下：
Response.数据集合|属性|方法（变量或字符串）
• Write方法：是Response对象最常用的方法，该
方法可以向浏览器输出动态信息。用等号也可以
灵活地向浏览器输出动态信息，<%=变量%>
• Redirect方法：将客户端的浏览器重向到一个新
的网页。
案例1 write
• <%
response.write"您是第1次访问本站点。"
response.write"欢迎您常来~"
%>
改成=输出
案例2 Redirect
<%
Response.Redirect “jxcia.com"
%>
如何把表单数据存储于数据库?这是我们后续课讲
授的内容，请同学们做好预习
用户
表单页
处理表单数据
的程序
后台数据库
用户操作，输
入或选择表单
数据
后台数据库进行
查询、添加、更
新、删除等操作
任务三 页面与数据库的集成
什么是Web数据库
• ASP系统中通常要使用数据库用于信息存
储，比如公司动态信息、客户留言等。
• ASP常用的数据库系统有Access和SQL
Server。
• 前台ASP技术+后台数据库技术才能开发功
能强大的ASP系统。
什么是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条记录。
• 添加Insert语句：用于向数据库添加记录。
语法如下：
• 举例如下：
Insert into users(name,class,age) values("张
三","信息五班","20")
说明：向表users插入一条新记录。
• 删除Delete语句：用于从数据表中删除记录。
举例如下：
Delete from users where name="张三"
说明：从表中删除张三的记录。
任务五 记录添加
Request对象
• Request 对象：可获取信息。
• QueryString方式（常用）：通过
QueryString方法实现在页面之间传递字符。
查询字符串，动态页面文件名后跟随问号，
=号后即为向下一个页面所传递的字符串。
采用这种方式传递字符串，字符串不能多
于255个。
• Form方式（最常用）：从表单获取。
举例说明Form方式的运用
• 表单代码如下:
<form method="post" action="">
标题:
<input name="t1" type="text">
内容:
<textarea name="t2"></textarea>
<input type="submit" value="提交">
</form>
• 通过ASP程序中Request对象的Form方法，把表
单用户输入信息通过SQL语句送往后台数据库存
储。
• <%
dim t1,t2
t1=Request.Form("t1")
t2=Request.Form("t2")
conn.Execute "insert into zb(t1,t2) values ('"& t1
&"','" & t2 & "')"
conn.close
%>
Response对象
• Response 对象：输出信息至客户端浏览
器。
• Write方法：用于向浏览器输出信息。可以
在Response.write语句中加入任何HTML标
记，例如加入br或p标记来换行。可以用=
号省略表示，例如<%=变量%>
ADO技术
• ADO是微软开发的将Web页面与数据库结
合的数据库技术。
• ADO把基本操作封装在7个对象中，在页面
上调用这些对象执行相应的数据库操作。
常用对象有二个：Connection对象，建立
并管理与数据库的连接；Recordset对象，
查询数据库后，由数据库返回查询到的信
息（记录集）。
页面与数据库的连接
<%
set
db=Server.Createobject("ADODB.Connect
ion")
db.Open "DBQ="&Server.Mappath("路径表
示/数据库名.mdb")&";DRIVER={Microsoft
Access Driver (*.mdb)};"
%>
获取信息并添加到数据库
<%
t1=Request("t1")
t2=Request("t2")
t3=Request("REMOTE_ADDR")
db.Execute "insert into 学生基本信息(姓名,学号,ip
地址,发送时间) values ('"& t1 &"','" & t2 & "','" &
t3 & "','" & now() & "')"
db.close
response.write"成功发送"
%>
任务五 查询记录
Recordset记录集对象
• Recordset对象的作用是对数据库进行查询
操作，得到符合查询条件的结果（即记录
集）。
查询并显示数据库记录
<%
set rs=db.execute("select * from 学生基本信息")
%>
<%do while not rs.eof%>
姓名<%=rs("姓名")%><br>
学号<%=rs("学号")%><br>
<%
rs.movenext
loop
%>
• <%
Set conn=Server.CreateObject("ADODB.Connection")
conn.Open"Dbq="&Server.Mappath("zbbbsidjcodsda.mdb
")&";Driver={Microsoft Access Driver (*.mdb)}"
%>
• <%
sql="select * from new"
set rs=Server.CreateObject("ADODB.Recordset")
rs.Open sql,db,1
%>
• < %do while not rs.eof%>
• <%=rs("title")%><br>
• <%
rs.movenext
loop
%>
• <%
Rs.Close
Set rs=nothing
%>
• 利用上述代码，修改完善，制作简单，但
具有基本功能的公司信息发布与管理系统、
客户留言簿、网上订单系统等。
任务六 电商系统融入网站
• 将第三方开发的具备基本功能的电商平台移植入
公司网站。
• 公司网站需要利用Internet网络电子商务技术，采
用 ASP/ADO网络数据库解决方案，实现基于B/S
模式的电子商务管理。凭借web服务器和客户的
浏览器，利用电子工具高效率、低成本的特点，
为客户提供交易平台，在Internet上发布商业信息，
商品广告，使用户可以查阅商品、搜索商品、订
购商品，为客户提供全天候的、更好、更快的商
务活动空间，实现网上交易的基本功能。
• 服务器开通对ASP的支持。
• 将案例包下载到网站文件夹子文件夹中。
• 数据库文件妥善放置。数据库文件夹设置
可读写操作。
• 根据数据库文件位置，相应修改数据库连
接文件中数据库地址。
• ASP页面与网站页面保持风格统一。
• 部分ASP代码需嵌入页面HTML代码中，融
为一体。
• 测试。