中职Web数据库与动态网页设计第5单元教学课件

1、(中职）Web数据库与动态网页设计第5单元ppt课件Web数据库及动态网络设计单元五 创建网络聊天室 引言 本单元从创建一个最简单的聊天室开始，由浅入深地讲述制作网络聊天室的过程。本单元的网络聊天室后台数据库采用SQL Server数据库。能力目标 能制作简单的聊天室网页 能设置表单的隐含域 能设置站点 能创建数据表 能设置数据源 能应用ASP主要的内置对象 能使用简单的SQL语句 单元五 创建网络聊天室 任务一 创建一个最简单的聊天室 任务二 为网站建立数据库和数据表 任务三 制作聊天室的用户注册和登录页面 任务四 制作聊天页面 任务五 运行和调试聊天室任务六 美化聊天页面 项目实训 制作网

2、上书店聊天室 单元五 创建网络聊天室任务一 创建一个最简单的聊天室 现在，家中拥有两台以上的计算机已是一件很平常的事情，一般家中都可建立一个小型的局域网。家庭成员为了不互相打扰，即便是在家中也是在不同的房间，通过各自的计算机做着自己的事情，这时如果在家中建立一个简单的聊天室页面，那么处于不同房间的人交流起来就会很方便。 返 回关 闭 任务描述 设计一个典型的网络聊天室其实不难，只需要一些常用的HTML标记加上ASP程序即可。下面就从“创建一个最简单的聊天室”开始，来介绍网络聊天室的制作方法。 在这个聊天室中只用一个页面就能完成用户的登录和发言，用户的登录信息和发言信息分别通过该页面上的两个表单

3、来实现。 任务分析 返 回关 闭任务一 创建一个最简单的聊天室 方法与步骤 创建文件夹 返 回关 闭任务一 创建一个最简单的聊天室 在D盘的aspexp文件夹下建立一个名为Ch03的站点文件夹，在该目录下分别再建立名为css、image和database的三个文件夹，将素材放到D:aspexpch03image中，如图所示。 方法与步骤 设置虚拟目录 返 回关 闭任务一 创建一个最简单的聊天室将D:aspexpch03设置为虚拟目录，具体操作步骤参见单元一中的介绍。 设置站点 返 回关 闭任务一 创建一个最简单的聊天室 打开网页制作软件Dreamweaver，选择“站点”“管理站点”命令，建立

4、一个名为chatroom的站点，如右图所示。 对“分类”列表框中的“远程信息”和“测试服务器”选项进行设置，具体操作步骤参见单元一中的介绍。 方法与步骤 返 回关 闭任务一 创建一个最简单的聊天室 设置聊天室页面 选择“文件”“新建”命令，新建动态页ASP VBScript文件，如图所示，单击“创建”按钮。在站点下建立一个名为chat.asp动态文件，如下图所示。返 回关 闭 在网页文件chat.asp中，设计聊天室页面如图所示。在文档窗口的设计视图中，可以看到用户登录信息是由页面中的第一个表单及其中的表单元素构成，而用户发言的信息是由第二个表单及其中的表单元素构成的。 关 闭返 回 设计好聊

5、天室页面之后，接下来开始添加程序代码。首先，将chat.asp文档窗口从设计视图切换到的代码视图，仔细查看设计好的页面的HTML程序代码。然后，在原来的HTML程序代码中添加一些必需的ASP程序代码，使得页面中的两个表单分别能够在满足相应的条件下出现和起作用。添加ASP程序后的完整程序代码见教材。关 闭返 回 编写好程序后，通过按【F12】键预览，可以看到如下图所示的结果，即所做页面中的第一个表单。关 闭返 回 在“昵称”文本框内输入“阳光灿烂”后，单击页面上的“进入聊天室”按钮，可以看到如下图所示的结果，即所做页面中的第二个表单。关 闭返 回 在客户说话的文本框内输入“大家好，初次见面请多关

6、照！”后，再单击页面上的“提交”按钮，客户将会看见自己的发言，如下图所示。关 闭返 回 相关知识与技能 返 回关 闭任务一 创建一个最简单的聊天室 Session对象及使用 Session对象有两个属性： SessionID、 Timeout Session对象只有一个方法：Abandon 对象有两个事件（Session_OnStart Session_OnEnd ），且必须和Global.asa结合使用 利用Session存储信息 思考与练习 建立站点目录mychat，并将站点指定至站点目录。 返 回关 闭任务一 创建一个最简单的聊天室进行IIS设置，将站点目录mychat设置为Web发布站

7、点，并启用默认文档为index.asp 。任务二 为网站建立数据库和数据表 返 回关 闭 任务描述 聊天室是网络中交流信息的方式之一，由于它具有实时性的特点，所以很受用户的欢迎。用户登录到聊天室后，可各抒己见，系统将用户发表的信息显示在页面上，让每个用户都可以看到。聊天室系统不仅要保存每个用户的个人信息，而且还要保存用户的发言内容，以便管理员可以进行管理。因此在聊天室系统中首先必须有一个数据库来存放这些信息。返 回关 闭 任务分析 系统中应有一个存放信息内容的数据库chat，在此使用SQL Server 2000数据库来实现。其内部包括聊天室必须的两个数据表，第一个是用户信息表userinfo

8、，它存放的是用户的基本信息；第二个是聊天记录表，它存放的是此聊天室的所有聊天记录。任务二 为网站建立数据库和数据表返 回关 闭 方法与步骤 任务二 为网站建立数据库和数据表 安装SQL Server 2000数据库 建立数据库和数据表 返 回关 闭 相关知识与技能 Microsoft SQL Server 2000 的特性 SQL Server 2000的工具和实用程序 任务二 为网站建立数据库和数据表返 回关 闭 思考与练习 在SQL Server 2000下新建职工档案数据库，文件名为“职工档案”。 在“职工档案”数据库中创建一个表，表的名称为“职工基本情况”，如表所示。首先，定义表的结构

9、（字段），然后将职工号作为主关键字，保存表。 任务二 为网站建立数据库和数据表职 工 号姓 名出 生 日 期职 称月 薪备 注01赵克明60-01-10工程师150002钱端江59-02-19高工200003汪小红70-02-19工程师120004李农平71-10-30工程师100005吴建民76-11-01工程师80006张法建75-11-01工程师800任务二 为网站建立数据库和数据表返 回关 闭返 回关 闭 思考与练习 向“职工档案”数据库中的“职工基本情况”表输入6条记录，保存记录。 修改表的结构，删除字段“备注”，增加字段“性别”。 任务二 为网站建立数据库和数据表任务三 制作聊天室

10、的用户注册和登录页面 返 回关 闭 任务描述 大型网站的聊天室一般都采用会员制的管理方式，即使用聊天室的用户必须要先注册一个账号，且必须通过登录系统才能进入聊天室，这样可以方便网站管理员对使用网站聊天室的用户进行管理。 会员制网络聊天室的组成主要包括：注册页面regin.asp、登录页面enter.asp、处理发言页面updata.asp、聊天室页面chatroom.asp（由用户发言页面talk.asp、用户在线页面online.asp 和信息显示页面show.asp组成的框架页面）、离开聊天室页面leave.asp、存放信息的数据库chat（包含用户信息表userinfo和聊天记录表cha

11、tinfo）。 任务三 制作聊天室的用户注册和登录页面 返 回关 闭 任务描述 各组成部分之间的关系如下图所示，用户首先从登录页面进入。 返 回关 闭 任务分析 要进入会员制网络聊天室，需先进入注册页面进行注册，填写完页面中需要用户填写的注册信息后，提交页面，此时用户输入的所有数据将和chat数据库的userinfo数据表中的数据进行比较，如果没有发现相同的“昵称”，则将输入数据新增到userinfo数据表中，并且可转到聊天室登录页面，否则将在regin.asp输出错误提示信息，要求用户重新注册。而在聊天室登录页面中，已注册者在该页面中输入要在聊天室中使用的昵称，并选择好代表自己的头像后，提交

12、页面即可进入聊天室聊天。任务三 制作聊天室的用户注册和登录页面返 回关 闭 方法与步骤 任务三 制作聊天室的用户注册和登录页面 制作用户注册页面 打开网页制作软件Dreamweaver，选择“窗口”“文件”命令，在打开的文件面板下拉列表中选择站点chatroom，如图所示。 返 回关 闭任务三 制作聊天室的用户注册和登录页面 在chatroom站点中新建一个ASP VBScript动态页面regin.asp，如图所示。返 回关 闭任务三 制作聊天室的用户注册和登录页面 在网页文件regin.asp的文档工具栏中输入网页标题“用户注册”，然后设计聊天室的用户注册页面如图所示。返 回关 闭任务三

13、制作聊天室的用户注册和登录页面 设计好聊天室用户注册页面后，接下来开始添加程序代码。将regin.asp文档窗口从设计视图切换到的代码视图，仔细查看页面的HTML程序代码后，在原来的HTML程序代码中添加ASP程序代码，见教材。返 回关 闭任务三 制作聊天室的用户注册和登录页面 按【F12】键预览页面，用户即可在regin.asp页面中填写必要的注册信息进行注册，如图所示。单击“提交”按钮后，页面将用户的注册信息存入用户信息数据表userinfo的同时，即可进入聊天室用户登录页面enter.asp。返 回关 闭 方法与步骤 任务三 制作聊天室的用户注册和登录页面 制作用户登录页面 在chatr

14、oom站点中新建一个新的ASP VBScript动态页面文件enter.asp，在其文档工具栏中输入网页标题“用户登录”，然后再设计聊天室的登录页面如图所示。 返 回关 闭任务三 制作聊天室的用户注册和登录页面 设计好聊天室用户注册页面后，接下来开始添加程序代码。将enter.asp文档窗口从设计视图切换到的代码视图，仔细查看页面的HTML程序代码后，首先在原来的HTML程序代码的开头终结标记后添加ASP程序代码，见教材。返 回关 闭任务三 制作聊天室的用户注册和登录页面 按【F12】键预览，出现如图所示页面，在该页面中用户输入要在聊天室中使用的昵称，并选择代表自己的头像后。单击“进入聊天室”

15、按钮后，用户登录enter.asp会根据用户是否输入了昵称和是否为注册会员，出现下列三种不同的响应情况： 返 回关 闭任务三 制作聊天室的用户注册和登录页面 用户没有在聊天室登录区中填写“昵称”，直接按下了“进入聊天室”按钮，这是画面停留在enter.asp，并在聊天室登录区的下方显示下图所示的错误提示。返 回关 闭任务三 制作聊天室的用户注册和登录页面 使用户填写“昵称”后单击“进入聊天室”按钮，用户还不是注册会员，这时画面停留在enter.asp，并在聊天登录区的下方显示如下图所示的错误提示。返 回关 闭任务三 制作聊天室的用户注册和登录页面 若用户已是注册会员，并填写了“昵称”，选择了代

16、表自己的头像后单击“进入聊天室”按钮，即可进入到聊天室页面chatroom.asp。返 回关 闭 思考与练习 在SQL Server中创建一个数据库regin，再建立一个新表yhxx，其中包含字段名分别为：username、password、usersex，并且在yhxx表内填写一些记录，然后保存。 任务三 制作聊天室的用户注册和登录页面返 回关 闭 思考与练习 任务三 制作聊天室的用户注册和登录页面 编写一个带有表单的动态页面denglu.asp，包括文本框、密码框、单选按钮和提交表单的按钮，要求达到如图所示效果。 任务四 制作聊天页面 返 回关 闭 任务描述 在会员制聊天室中，用户首先要注

17、册用户名，然后在登录页面中使用自己的用户名或昵称进行登录后，进入到真正的聊天室页面。 返 回关 闭 任务分析 本系统中用户注册信息和用户聊天内容需进行保存，而后台数据库采用SQL Server，所以本任务中先要创建数据库的链接，进行ODBC的创建。然后制作基本页面，聊天室主页面是一个由三个网页所组成的框架网页文件，其中包含了用户发言页面talk.asp、信息显示页面show.asp和在线用户列表页面online.asp。左上部框架为显示页面show.asp，主要用来显示每个用户所说的话，显示的内容为：用户发言的时间、用户的头像、任务四 制作论坛显示页面返 回关 闭 任务分析 用户的昵称、用户发

18、言的对象、用户发言时的表情以及用户发言的内容。右上部框架为在线用户列表页面online.asp，主要是显示使用此聊天室的用户人数和用户名，使每个用户知道他们在和谁聊天。下部框架为用户发言页面talk.asp，用来输入聊天的内容，可以选择字体的颜色、说话的语气和聊天的对象。 任务四 制作论坛显示页面返 回关 闭 方法与步骤 任务四 制作论坛显示页面 创建ODBC数据源 “创建新数据源”对话框 选择服务器和设置数据源 返 回关 闭选择身份验证模式 选择数据库 设置其他属性 创建的ODBC数据源的设置 返 回关 闭“测试结果”对话框 “ODBC数据源管理器”对话框 返 回关 闭 方法与步骤 任务四

19、制作论坛显示页面 制作聊天室大厅页面 添加框架 生成的框架页面 返 回关 闭保存好的框架页面 “数据源名称（DSN）”对话框 测试连接对话框 “数据库”面板 返 回关 闭 方法与步骤 任务四 制作论坛显示页面 制作在线用户列表页面 在线用户页面online.asp的设计 “记录集”对话框 返 回关 闭设置记录集Rsonline1 完成设置的在线用户页面 设置online.asp的动态文本 “重复区域”对话框 返 回关 闭 方法与步骤 任务四 制作论坛显示页面 制作用户发言页面 双击打开框架页面chatroom.asp，并将光标移到框架页面的下部框架页talk.asp中，按如图所示对用户发言页面

20、talk.asp进行设计。返 回关 闭任务四 制作论坛显示页面 在talk.asp页面中，单击“绑定”面板左上角的（）按钮，在弹出的菜单中选择“记录集（查询）”命令，在弹出的“记录集”对话框中建立如图所示的记录集内容。返 回关 闭任务四 制作论坛显示页面 选中列表框（selto），在“服务器行为”面板上单击左上角的（）按钮，在弹出的菜单中选择“动态表单元素”“动态列表/菜单”命令，弹出“动态列表/菜单”对话框，如图所示。返 回关 闭任务四 制作论坛显示页面 在此对话框中的“静态选项”下的“值”栏和“标签”栏都输入“大家”，设置一个静态选项，然后在“来自记录集的选项”下拉列表框中选择记录集Rst

21、alk1，在“值”和“标签”下拉列表框中都选择字段name2，如图所示，最后单击“确定”按钮。 返 回关 闭任务四 制作论坛显示页面 选中字体颜色列表框（selcolor），单击“属性”面板中的“列表值”按钮，打开“列表值”对话框，如图所示。返 回关 闭任务四 制作论坛显示页面 在此对话框中的“项目标签”栏和“值”栏输入如下表所示的内容，然后单击“确定”按钮。项 目 标 签值项 目 标 签值黑色沉静#000000紫色拘谨#990099红色热情#FF0000深蓝忧郁#000099蓝色开朗#0000FF镏金岁月#FF9900桃色浪漫#FF00FF发亮蓝紫#9900FF绿色青春#009900墨绿深沉

22、#006600青色清爽#009999灰色轨迹#333333返 回关 闭任务四 制作论坛显示页面 选中语气列表框（selspeak），单击“属性”面板中的“列表值”按钮，在打开的“列表值”对话框的“项目标签”栏中输入如下表所示的内容，然后单击“确定”按钮。这样，就完成了用户发言页面的设计。 项 目 标 签值项 目 标 签值轻声细语轻声细语兴高采烈兴高采烈不好意思不好意思幸灾乐祸幸灾乐祸得意洋洋得意洋洋哭笑不得哭笑不得慢条斯理慢条斯理开怀大笑开怀大笑无精打采无精打采欲哭无泪欲哭无泪返 回关 闭 方法与步骤 任务四 制作论坛显示页面 制作信息显示页面 将光标移到框架页面的左上部框架页show.asp

23、中，插入一个1行3列的表格，并按图所示对信息显示页面show.asp进行设计。它主要用来显示最新的聊天记录。返 回关 闭任务四 制作论坛显示页面 单击“绑定”面板左上角的（）按钮，在弹出的菜单中选择“记录集（查询）”命令，在弹出的“记录集”对话框中建立如图5-4-28所示的记录集。在对话框的“名称”文本框中输入记录集的名称Rsshow1，在“连接”下拉列表框中选择数据库连接connchat，在“表格”下拉列表框中选择数据表dbo.chatinfo，并且选择“全部”列，最后在“排序”下拉列表框中选择time字段，按“降序”排列，完成所有设置后单击“确定”按钮。返 回关 闭任务四 制作论坛显示页面

24、 展开“绑定”面板中的“记录集Rsshow1”树结构，将time字段拖动到show.asp页面的表格第一个单元格中，将name2字段拖动到页面的第一个中括号“ ”中，将sayto字段拖动到页面的第二个中括号“ ”中，将speak字段拖动到页面的第二个中括号“ ”后，将word字段拖动到页面的“说：”文本后，如图所示。 返 回关 闭任务四 制作论坛显示页面 将光标移到show.asp页面内表格的第二个单元格内，选择“插入”“图像对象”“图像占位符”命令，打开“图像占位符”对话框，按图所示进行设置。在“名称”文本框中输入faceimage，将“高度”和“宽度”都设置为20。返 回关 闭任务四 制作

25、论坛显示页面 将“记录集Rsshow1”中的face字段拖动到show.asp页面的图像占位符中，并在“属性”面板中将“高度”和“宽度”都设置为20，如图所示。 这样，就完成了显示信息页面的设计。返 回关 闭任务四 制作论坛显示页面 选中show.asp页面中的表格，单击“服务器行为”面板左上角的加号（）按钮，在弹出的菜单中选择“重复区域”命令，将弹出“重复区域”对话框，对其按图所示进行设置。返 回关 闭任务四 制作论坛显示页面 单击“重复区域”对话框中的“确定”按钮，将看到show.asp页面发生如图所示的变化。这样，就完成了用户发言页面的设计。返 回关 闭 相关知识与技能 设计页面 创建动

26、态数据源 任务四 制作论坛显示页面 向Web页添加动态内容 向页面添加服务器行为 测试和调试页面 返 回关 闭 思考与练习 在SQL server中创建一个数据库Chengji，再建立一个新表CJ，其中包含列名分别为：xh、bj、xm、xb、nl、yw、sx、yy，数据类型为nvarchar，长度等自定，然后保存。任务四 制作论坛显示页面 制作一个框架页面ff.asp，分为上下两个窗口，分别起名为f1.asp、f2.asp 。返 回关 闭 思考与练习 任务四 制作论坛显示页面 设计ff.asp框架页面的窗口布局效果如图所示。 任务五 运行和调试聊天室 返 回关 闭 任务描述 在基本页面制作完后

27、还要对页面进行正确的设置才能使聊天室正常运行，本任务主要是对页面进行设置和调试，另外还有制作离开聊天室页面。只要用户单击“离开聊天室”超链接，即可转到离开聊天室页面leave.asp，如图所示。返 回关 闭 任务分析 为使聊天室能正常运行，就要正确设置页面属性。在用户发言页面talk.asp，当用户输入聊天内容后，单击“我说完了”按钮即可；而当用户想要离开聊天室主页面时，只要单击“离开聊天室”超链接，即可转到离开聊天室页面leave.asp。最后要对这个聊天室的各个文件进行调试，完成这个聊天室系统。另外，聊天室是一个公共平台，聊天的时间长了，数据库的内容就会很多，所以聊天的内容需要及时刷新，并

28、要求显示的内容是最新的前几条内容。任务五 运行和调试聊天室返 回关 闭 方法与步骤 任务五 运行和调试聊天室 制作处理发言页面 在chatroom站点中新建一个ASP VBScript动态页面文件updata.asp，如图所示。该页面主要用于处理发言内容，故页面上无需任何设置。 返 回关 闭任务五 运行和调试聊天室 将updata.asp文档窗口从设计视图切换到代码视图，仔细检查页面的HTML程序代码后，在原来的HTML程序代码中添加ASP程序代码，完整的程序代码见教材。返 回关 闭 方法与步骤 任务五 运行和调试聊天室 设置用户发言页面的属性 选中talk.asp页面中的表单（sendfor

29、m），打开“属性”面板，在“动作”文本框内输入updata.asp，在“目标”下拉列表框中选择mainframe选项，如图所示。返 回关 闭 方法与步骤 任务五 运行和调试聊天室 设置信息显示页面 双击打开show.asp页面，在设计视图窗口中选中表格内第一个单元格中的Rsshow1.time动态文本，如图所示，然后切换到代码视图窗口。 以下步骤见教材。 返 回关 闭 方法与步骤 任务五 运行和调试聊天室 制作离开聊天室页面 新建一个ASP VBScript动态页面文件leave.asp，然后按如图所示进行设置。返 回关 闭任务五 运行和调试聊天室 将leave.asp文档窗口从设计视图切换到

30、的代码视图，仔细检查页面的HTML程序代码后，在原来的HTML程序代码中添加ASP程序代码。完整的程序代码见教材。返 回关 闭 方法与步骤 任务五 运行和调试聊天室 调试 打开站点中的enter.asp文件，按【F12】键，打开IE浏览器进行测试，如图所示。在此页面的“输入昵称”文本框中输入“阳光灿烂”，选择第三个女孩头像。 返 回关 闭任务五 运行和调试聊天室 单击enter.asp页面中的“进入聊天室”按钮，则会转到chatroom.asp聊天大厅页面，如图所示。返 回关 闭任务五 运行和调试聊天室 在此页面中的右方显示了当前正在聊天室的用户名列表；用户可以在下方的发言区选择说话的对象、字

31、体的颜色、说话的语气，在文本框中输入想要说的话，单击“我说完了”按钮，则输入的文字会显示在上方的信息显示页面中，如图所示。 返 回关 闭任务五 运行和调试聊天室 单击“离开聊天室”链接，则会转到leave.asp页面，如图所示。返 回关 闭 相关知识与技能 Cookies基本知识 使用Response对象设置Cookies 任务五 运行和调试聊天室 使用Request对象设置Cookies 返 回关 闭 思考与练习 把离开聊天室页面Leave.asp做成非动态页面，用一般的html页面实现现有的效果。 任务五 运行和调试聊天室 试开发一个页面，当客户第一次访问时，需在线注册姓名、性别、密码等信

32、息，然后把信息保存到Cookies中。下一次如该客户再访问时，则显示“某某，您好，您是第几次光临本站”的欢迎信息。 任务六 美化聊天页面 返 回关 闭 任务描述 通过各种色彩丰富的背景，可爱的图片、多变的字体等的装置和点缀，让网络用户能在聊天的同时，有一种温馨的感觉及美的享受。本任务完成后聊天页面将美化成如图所示的界面。返 回关 闭 任务分析 为了让聊天室页面看起来生动活泼、有美感，可为页面添加背景图案或是颜色，通过对网页文档“页面属性”的设置可实现各种各样的效果；为了让网页拥有统一风格的标题，还可通过“CSS样式”表的设置来制作相同格式的标题，简单又快捷；另外，还可在页面加上插入一些生动可爱

33、的图片或者GIF动画来增加网页的趣味性。任务六 美化聊天页面返 回关 闭 方法与步骤 任务六 美化聊天页面 添加背景 “页面属性”对话框之一 show.asp的背景效果之一 返 回关 闭“页面属性”对话框之二 online.asp的背景效果之二 “页面属性”对话框之三 talk.asp的背景效果之三 返 回关 闭 方法与步骤 任务六 美化聊天页面 添加统一的标题 “css样式”面板 “新建CSS规则”对话框 返 回关 闭“.biaoti的CSS样式定义（在我的样式.css中）”对话框 样式.biaoti 使用biaoti样式 “链接外部样式表”对话框 返 回关 闭“CSS样式”面板 使用bia

34、oti样式 返 回关 闭 方法与步骤 任务六 美化聊天页面 插入图片 “选择图像源文件”对话框 返 回关 闭任务六 美化聊天页面插入图像的页面 离开聊天室页面 返 回关 闭 相关知识与技能 Application简介 Application对象有两个事件：Application_OnStart 、Application_OnEnd （要与Global.asa结合使用） 任务六 美化聊天页面 利用Application存储信息 实例 返 回关 闭 思考与练习 试用Application对象创建一个计数器 任务六 美化聊天页面 请编写两个页面，在第一个页面中客户要输入姓名，然后保存到Session中，在第二页面中读取该Session 信息，并显示欢迎信息。如果客户没有在第一页登录就直接访问第二页，则将客户重定向回第一页。 项目实训 制作网上书店聊天室 返 回关 闭 项目描述 为了在注册用户中能更好地实时进行信息的传递和交流，同时为了使网站管理员能很好地与用户进行实时沟通和信息的传达，还可建立网站内部的聊天室系统。项目实训 创建网上书店论坛返 回关 闭 项目要求 为网上书店创建一个简单的聊天室，使每位用户在通