《网页设计与制作教程与实训》全套ppt电子课件教案-第9章 数据库与动态数据.ppt

,网页制作与设计数据库与动态数据,第9章 数据库与动态数据, 9.1 动态网站技术 9.2 配置Web服务器 9.3 定义动态站点连接远程服务器 9.4 数据库配置与ODBC连接 9.5 创建动态网页 本章习题, 教学目标了解数据库与动态数据的基本知识，明确数据库与动态数据的流程及网站设计的要求与方法，为动态网页的制作打下基础。,第9章 数据库与动态数据, 本章重点 动态网站技术 数据库配置与ODBC连接 动态网页的创建,第9章 数据库与动态数据, 9.1 动态网站执行流程 9.1.1 什么是动态网站动态页面的概念有以下几条规则： “交互性”即网页会根据用户的要求和选择而动态改变和响应，将浏览器作为客户端界面，这将是今后WEB发展的大势所趋。 “自动更新”即无须手动地更新HTML文档，便会自动生成新的页面，可以大大节省工作量。 “因时因人而变”即当不同的时间、不同的人访问同一网址时会产生不同的页面。,第9章 数据库与动态数据, 9.1 动态网站执行流程 9.1.2 动态网站原理及开发流程动态网站的开发需要三个步骤：(1) 架设并配置好Web服务器，构造互动网站的执行环境。(2) 根据需要，设计出数据库。(3) 编写服务器端的执行程序。,第9章 数据库与动态数据,动态网站执行流程图, 9.2 配置Web服务器 9.2.1 选择Web服务器软件由于每个人的工作平台都可以因为需求不同而有所差别，所以我们也就需要学习如何在不同的平台上创造一个执行ASP程序的环境。各种适用于微软Windows系列操作系统的Web服务器软件,第9章 数据库与动态数据, 9.2 配置Web服务器 9.2.2 安装IIS （1）执行【开始】【控制面板】菜单命令,打开【控制面板】窗口，双击其中的【添加或删除程序】图标，打开【添加或删除程序】对话框，单击【添加/删除Windows组件】选项，如图,第9章 数据库与动态数据, 9.2 配置Web服务器 9.2.2 安装IIS 2）出现【Windows组件向导】对话框（这个过程可能要花一段时间），在【组件】列表中详细列出了Windows操作系统的各个组件，其中带有“”勾的表示已经安装了。如果【Internet信息服务（IIS）】选项前没有“”勾，单击选中它；如果该项前已经有了“”勾，那么就不需要进行如下操作了，直接单击【取消】按钮退出安装过程。这里单击选择【Internet信息服务（IIS）】选项，如图,第9章 数据库与动态数据, 9.2 配置Web服务器 9.2.2 安装IIS （3）单击【下一步】按钮，根据提示操作，其间可能会要求插入WindowsXP的安装光盘，插入光盘后安装过程如图,第9章 数据库与动态数据, 9.2 配置Web服务器 9.2.2 安装IIS （4）经过了一段时间等待后，屏幕上出现【完成“Windows组件向导”】对话框，单击【完成】按钮，完成IIS的安装，如图,第9章 数据库与动态数据, 9.2 配置Web服务器 9.2.2 安装IIS 安装好IIS之后，就可以对其进行测试，看看安装是否成功，是否能够作为Web服务器。先让我们打开浏览器（比如我们常用的Internet Explorer），在浏览器的地址中输入http:/localhost或者，并按Enter键。如果IIS安装成功，就可以看到如图,第9章 数据库与动态数据, 9.2.3定义根目录 在安装IIS这样的Web服务器软件之后，要在运行该Web服务器的计算机上为Web应用程序创建一个根文件夹。首先，应确保该文件夹已由Web服务器发布，即Web服务器可以根据Web浏览器的HTTP请求，提供此文件夹中的任何文件或其子文件夹中的任何文件。常用Web服务器的默认根文件夹,第9章 数据库与动态数据, 9.2.3定义根目录 如果要测试Web服务器，应将一个要测试HTML页置于默认根文件中，然后尝试通过在浏览器中输入该页的URL，打开该页。URL由域名和HTML页的文件名组成，如：/testpage.htm如果该Web服务器运行在本地计算机上，则可以使用localhost代替域名。使用Web服务器的不同，本地主机URL也不同。,第9章 数据库与动态数据,常用Web服务器的本地主机URL, 9.2.4 配置IIS IIS安装并测试成功后，接下来的工作是对它进行配置，来满足实际使用的需要。（1）安装在WindowsXP中的是IIS的5.1版本，打开【控制面板】，双击【管理工具】图标，可以在【管理工具】对话框中看到刚才安装的IIS服务器（即Internet信息服务），如图,第9章 数据库与动态数据, 9.2.4 配置IIS （2）双击【Internet信息服务】图标，打开如图所示的【Internet信息服务】对话框。,第9章 数据库与动态数据, 9.2.4 配置IIS （3）从左边窗格中选择【默认网站】，右击，在图中从上下文菜单中选择【属性】命令，打开【默认网站属性】对话框。,第9章 数据库与动态数据, 9.2.4 配置IIS （4）单击对话框中的【主目录】标签，在【连接到资源时的内容来源】选项中选择【此计算机上的目录】单选按钮，然后在【本地路径】文本框中输入本地目录或单击【浏览】按钮定位并选择一个本地目录。如图,第9章 数据库与动态数据, 9.2.4 配置IIS （5）选择【文档】标签，单击【启用默认文档】域中的【添加】按钮，在【添加默认文档】对话框中，按图设定输入默认文档名，单击【确定】按钮关闭该对话框。,第9章 数据库与动态数据, 9.2.4 配置IIS （6）回到【默认网站属性】对话框，单击【上移】按钮，将刚才添加的文（index.asp）移动到最上面。如图 （7）还可以根据需要设置其它标签的属性，设置完成后单击【确定】按钮时，设置生效并关闭对话框。,第9章 数据库与动态数据, 9.3定义动态站点连接远程服务器 在配置完用来开发Web应用程序的Web服务器后，需要定义一个Dreamweaver站点管理文件。在定义站点开始之前，应满足以下基本要求： 具有访问Web服务器的权限。Web服务器可以在本地计算机上运行，或者在远程服务器上运行。 应用程序服务器安装并运行在运行的Web服务器的系统上。 已经运行Web服务器的系统上为Web应用程序创建了根文件夹。,第9章 数据库与动态数据, 9.3定义动态站点连接远程服务器 为Web应用程序定义Dreamweaver站点需要执行以下三个步骤：（1）将位于硬盘上的文件夹定义为用来存储站点文件工作副本的Dreamweaver本地文件夹。（2）将位于正运行Web服务器的计算机上的文件夹定义为Dreamweaver远程文件夹。（3）指定好Dreamweaver在工作时要处理的动态页所发送到的具体路径。在定义了Dreamweaver站点后，就可以开始生成Web应用程序了。,第9章 数据库与动态数据, 9.3定义动态站点连接远程服务器 9.3.1 定义本地和远程站点 定义Dreamweaver本地文件夹和远程文件夹的操作过程见“2.5.1 定义站点”一节中的内容，此处 “本地文件夹”的设置见图【本地信息】类别设置 ，“远程文件夹”的设置见图【远端文件夹】设置 。,第9章 数据库与动态数据,第9章 数据库与动态数据,【本地信息】类别设置 【远端文件夹】设置, 9.3定义动态站点连接远程服务器 9.3.2指定测试服务器 定义好远程文件夹后，需要指定测试服务器，即在其中处理动态页的文件夹。Dreamweawer使用此文件夹生成动态内容并连接到数据库。通常情况下，可以指定在Web服务器上创建的根文件夹，因此该服务器可能还运行处理动态页的应用程序服务器。,第9章 数据库与动态数据, 9.3定义动态站点连接远程服务器 9.3.3连接远程服务器 连接远程服务器，执行如下操作：（1）单击【确定】按钮，关闭【站点定义】对话框。如果【文件】面板没有打开，执行【窗口】【文件】命令（快捷键为F8）打开【文件】面板，单击面板中的【扩展/折叠】按钮，将【文件】面板切换到扩展模式（站点窗口），如图,第9章 数据库与动态数据,第9章 数据库与动态数据,【文件】面板扩展模式, 9.3定义动态站点连接远程服务器 9.3.3连接远程服务器 （2）因为是第一次连接服务器，单击工具栏中的【与远程主机链接】按钮，系统会自动与远程服务器连接，当 键变为绿色时，表示登陆成功。再次单击这个按钮，可以与远程服务器断开。,第9章 数据库与动态数据, 9.4数据库配置与ODBC连接从左面开始，动态网页中的ASP程序通过ADO组件来调用ODBC驱动程序或者OLEDB（嵌入式数据库）提供程序。,第9章 数据库与动态数据, 9.4数据库配置与ODBC连接 9.4.1创建数据库要创建数据库，需在Microsoft Access中进行以下操作：（1）打开Access软件，选择菜单【文件】【新建】【空数据库】命令，打开【文件新建数据库】对话框，在对话框中选择路径和文件名，如图所示。然后单击【创建】按钮，新建数据库。,第9章 数据库与动态数据, 9.4数据库配置与ODBC连接 9.4.1创建数据库（2）在弹出的如图所示的【Access：数据库】对话框中双击【使用设计器创建表】。,第9章 数据库与动态数据, 9.4数据库配置与ODBC连接 9.4.1创建数据库（3）在表设计框中输入各个字段。注意在建好第一个ID字段后，单击工具栏中的【主键】按钮，将ID设置为主键值，【数据类型】一栏选择“自动编号”，按照如图所示填好。,第9章 数据库与动态数据, 9.4数据库配置与ODBC连接 9.4.1创建数据库（4）单击工具栏中的【保存】按钮保存表单，在弹出的【另存为】对话框指定表名称，如图所示。这样，一个可以记录人员档案的数据库就建好了。,第9章 数据库与动态数据, 9.4数据库配置与ODBC连接 9.4.2创建数据源 添加ODBC数据源 （1）选择【开始】【控制面板】命令打开【控制面板】对话框，双击其中的【管理工具】图标，如图,第9章 数据库与动态数据, 9.4数据库配置与ODBC连接 9.4.2创建数据源 添加ODBC数据源 （2）在打开【管理工具】对话框中双击【数据源（ODBC）】图标，如图,第9章 数据库与动态数据, 9.4数据库配置与ODBC连接 9.4.2创建数据源 添加ODBC数据源 （3）在打开的【ODBC数据源管理器】对话框中，单击【系统DSN】标签，如图,第9章 数据库与动态数据, 9.4数据库配置与ODBC连接 9.4.2创建数据源 添加ODBC数据源 （4）单击【添加】按钮，选择驱动程序Driver do Microsoft Access（*.mdb），添加系统数据源，如图,第9章 数据库与动态数据, 9.4数据库配置与ODBC连接 9.4.2创建数据源 添加ODBC数据源 （5）单击【完成】按钮，弹出的【安装】对话框，在【数据源名】文本框中输入数据源的名称；在【说明】文本框中输入数据库相关的说明性文字；然后单击【数据库】域中的【选择】按钮，选择前面创建的数据库，如图,第9章 数据库与动态数据, 9.4数据库配置与ODBC连接 9.4.2创建数据源 添加ODBC数据源 （6）单击【确定】按钮，回到【ODBC数据源管理器】对话框，可以看到刚才新建的数据源，如图 （7）单击【确定】按钮，完成数据源的创建。,第9章 数据库与动态数据, 9.4数据库配置与ODBC连接 9.4.3连接数据库在Dreamweaver中创建数据库连接的步骤如下：（1）Dreamweaver中，使用【文件】【新建】命令打开【新建文档】对话框，按图所示选择建立一个动态网页。比如在【类别】列表中选择【动态页】选项，然后在【动态页】列表框中选择ASP VBScript。,第9章 数据库与动态数据, 9.4数据库配置与ODBC连接 9.4.3连接数据库在Dreamweaver中创建数据库连接的步骤如下：（2）单击【创建】按钮，Dreamweaver将创建一个动态网页。选择【窗口】【数据库】菜单命令（快捷键为Ctrl+Shift+F10），打开【数据库】面板，如图,第9章 数据库与动态数据, 9.4数据库配置与ODBC连接 9.4.3连接数据库在Dreamweaver中创建数据库连接的步骤如下：（3）单击按钮，从下拉菜单中选择【数据源名称（DSN）】对话框。在【连接名称】文本框中为连接起一个名字，然后从【数据源名称（DSN）】弹出菜单中选择在前面创建的数据源userinfo，如图,第9章 数据库与动态数据, 9.4数据库配置与ODBC连接 9.4.3连接数据库在Dreamweaver中创建数据库连接的步骤如下：（4）单击【测试】按钮，Dreamweaver尝试连接到数据库。如果连接失败，应复查该DSN。如果连接仍失败，应检查Dreamweaver用来处理动态页的文件夹的设置。如果连接成功，会出现如图,第9章 数据库与动态数据, 9.4数据库配置与ODBC连接 9.4.3连接数据库在Dreamweaver中创建数据库连接的步骤如下：（5）单击【确定】按钮，回到【数据源名称（DSN）】对话框，在单击【确定】按钮，完成数据源的连接。此时新连接出现在【数据库】面板上，如图,第9章 数据库与动态数据, 9.5创建动态网页 9.5.1创建记录集（1）在【应用程序】面板中单击【绑定】标签，切换到【绑定】类别；或者选择【窗口】【绑定】菜单命令（快捷键为Ctrl +F10）切换到【绑定】类别。单击按钮，从弹出菜单中选择【记录集（查询）】命令，如图,第9章 数据库与动态数据, 9.5创建动态网页 9.5.1创建记录集（2）在弹出的【记录集】对话框中，在【连续】弹出菜单中选择刚才新建的连接testdata；在【表格】弹出菜单中将出现该连接中的表格；在【列】选项中如果选择【全部】单选按钮，则会在列表中显示表中所有的列，如图,第9章 数据库与动态数据, 9.5创建动态网页 9.5.1创建记录集（3）如果对SQL语言比较熟悉，单击对话框中【高级】按钮，出现对话框如图所示。在SQL列表中可以输入SQL语言进行记录集查询。,第9章 数据库与动态数据, 9.5创建动态网页 9.5.1创建记录集（4）单击【确定】按钮回到【绑定】面板，面板中列出了所有绑定的记录集，如图,第9章 数据库与动态数据, 9.5创建动态网页 9.5.2添加记录集 （1）新建一个HTML网页，并将其保存在IIS的根文件夹C：Inetpubwwwroot中，命名为index.asp。因为在9.1.4小节中已经将index.asp设置为IIS的默认文档，所以当在浏览器的地址栏中输入http：/localhost或 时应该打开该页面。,第9章 数据库与动态数据, 9.5创建动态网页 9.5.2添加记录集 （2）单击输入栏【应用程序】类别中的【插入记录】按钮右侧的箭头，从弹出菜单中选择【插入记录表单向导】命令，打开【插入记录表单记录】对话框，选择正确的连接与表格，如图,第9章 数据库与动态数据, 9.5创建动态网页 9.5.2添加记录集 （3）在列表中选择ID字段，单击按钮，这个字段将不显示；依次修改每个字段的【标签】设置；在【插入后，转到】文本框中输入ASP脚本文件的名称，或者单击【浏览】按钮定位并选择脚本文件，如图,第9章 数据库与动态数据, 9.5创建动态网页 9.5.2添加记录集 （4）单击【确定】按钮，这时可以看到在网页中出现了一个表单，按F12预览可以看到效果。通过这个表单，填写相应的信息，按“插入记录”按钮就可以将一组数据提交到与之相连的userinfo数据库了。如图,第9章 数据库与动态数据, 9.5创建动态网页 9.5.3显示记录 （1）在刚才生成的菜单前面单击鼠标，将插入点定位，然后单击插入栏【应用程序】类别中的【动态数据】按钮右边的箭头，从弹出菜单中选择【动态表格】命令，出现【动态表格】对话框，并按图9.40所示进行设置，以生成一个表格。,第9章 数据库与动态数据, 9.5创建动态网页 9.5.3显示记录 （2）将表格中表头的文本都更改为汉字，效果如图 （3）对网页稍加修饰，完成这个示例的操作,第9章 数据库与动态数据, 9.5创建动态网页 9.5.3显示记录 （4）按Ctrl+S键保存文件，然后启动浏览器Internet Explorer，然后在【地址】栏中输入，按Enter键，出现的结果如图,第9章 数据库与动态数据, 9.5创建动态网页 9.5.3显示记录 （5）在“添加人员档案”的各个文本框中输入向关信息，单击【插入记录】即可将记录添加到上边的“人员档案”中，如图,第9章 数据库与动态数据, 9.5创建动态网页 9.5.4分页显示多条记录 （1）将插入点移动到刚才我们编辑的页面的最下方，也就是整个显示文本框的下方，然后单击插入栏【应用程序】类别中的【记录导航条】按钮 来插入记录导航条,如图,第9章 数据库与动态数据, 9.5创建动态网页 9.5.4分页显示多条记录 （2）在弹出的【记录导航条】对话框中【记录集】设定要加入导航的记录集，其中导航条的形式我们可以选择文本或是图像模式。在这里我们选择【文本】，按【确定】提交，如图,第9章 数据库与动态数据, 9.5创建动态网页 9.5.4分页显示多条记录 （3）在编辑页面的下方出现了记录集导航条，如图所示，这就是Dreamweaver MX 2004预置好的分页显示方案,第9章 数据库与动态数据, 9.5创建动态网页 9.5.4分页显示多条记录 预览执行这个页面，如图所示，单击相应的链接，就可以翻页查看数据库中的大量记录了,第9章 数据库与动态数据, 9.6 习题 9.6.1.判断题1. 所谓“动态网页”，就是指那在网页上有动态图片。2. ASP不能在Windows98的环境下使用，一定要架设专业的服务器才能执行。3. 如果