项目2 在网页中应用数据库
项目描述
在实际制作网页的过程中,用户可能经常需要制作带有后台数据库的动态网页。所谓动态网页,就是指网页中除含有html标记以外,还含有脚本代码。这种网页文件的扩展名一般根据程序设计语言的不同而不同。ASP采用VBscript或者JavaScript脚本代码,本项目将通过创建数据库和对数据库进行编辑操作,来介绍在Dreamweaver中通过服务器行为创建ASP应用程序的方法。
项目分析
本项目首先制作一个数据列表,其中包括创建数据库连接、创建记录集、添加动态数据、添加重复区域、记录集分页、显示记录计数等,然后通过页面对数据库中的记录进行添加、更新和删除的操作。因此,本项目可分解为以下任务:
任务1 使用Dreamweaver制作数据列表
任务2 在数据库中插入、更新和删除记录
项目目标
●掌握在Dreamweaver中连接数据库的基本方法
●掌握在Dreamweaver中对数据库进行的基本操作
任务1 使用Dreamweaver制作数据列表
操作步骤
打开Dreamweaver CS3 ,执行【文件】→【新建】命令,打开【新建文档】对话框,如图6-17所示;执行【空白页】→【ASP VBscript】→【无】命令。
图6-17 【新建文档】对话框
图6-18 【数据库】面板
单击【创建】按钮,创建一个空白网页文档,然后将文档保存为“book.asp”。
执行【窗口】→【数据库】命令,打开【数据库】面板,如图6-18所示。
在【数据库】面板中单击按钮,在弹出的菜单中执行【自定义连接字符串】命令,打开【自定义连接字符串】对话框;在“连接名称”文本框中输入连接名称“conn”,在“连接字符串”文本框中输入连接字符串“″Provider=Microsoft.Jet.OLEDB.4.0;Data Source=″&Server.MapPath(″/data/book.mdb″)”,选择“使用测试服务器上的驱动程序”,如图6-19所示。
单击【测试】按钮,弹出一个显示“成功创建连接脚本”的消息提示框,说明设置成功。测试成功后,在【自定义连接字符串】对话框中单击【确定】按钮关闭对话框,然后在【数据库】面板中展开创建的连接,会看到数据库中包含的表名及表中的各字段,如图6-20所示。
图6-19 【自定义连接字符串】对话框
图6-20 展开数据库连接
贴心提示
成功创建数据库连接后,系统自动在“站点管理器”的文件列表中创建专门用于存放连接字符串的文档“conn.asp”及其文件夹“Connections”。
在【服务器行为】面板中单击按钮,在弹出的菜单中执行【记录集(查询)】命令,打开【记录集】对话框;在“名称”文本框中输入“RsBook”,在“连接”下拉列表中选择“conn”选项,在“表格”下拉列表中选择“mybooks”选项,在“列”按钮组中选择“全部”单选按钮,将“排序”设置为按照“date”、“降序”排列,如图6-21所示。
图6-21 【记录集】对话框
贴心提示
如果只是用到数据表中的某几个字段,那么最后不要将全部字段都选中,因为字段数越多,应用程序执行起来就越慢。
【记录集】的相关参数包括:
●【名称】:记录集的名称,同一页面的记录集不能重名。
●【连接】:列表中显示成功连接的数据库连接,如果没有则要重新定义。
●【表格】:列表中显示数据库中的数据表。
●【列】:显示选定数据表中的字段名,默认选择全部的字段,也可按Ctrl键来选择特定的某些字段。
●【筛选】:创建记录集的规则和条件。在第一个列表中选择数据表中的字段;在第二个列表中选择运算符,包括“=、<、>、>=、<=、<>、开始于、结束于、包含”9种;第三列表用于设置变量的类型;文本框用于设置变量的名称。
●【排序】:按照某个字段“升序”或者“降序”进行排序。
设置完毕后单击“测试”按钮,在【测试SQL指令】对话框中出现选定表中的记录,如图6-22所示,说明创建记录集成功。
图6-22 【测试SQL指令】对话框
关闭【测试SQL指令】对话框,然后在【记录集】对话框中单击“确定”按钮,完成创建记录集的任务。此时在【服务器行为】面板的列表框中添加【记录集(RsBook)】行为,在【绑定】面板中显示了【记录集(RsBook)】记录集及其中的相应字段,如图6-23所示。
图6-23 【服务器行为】面板和【绑定】面板
如果对创建的记录集不满意,可以在【服务器行为】目标值处双击记录集名称,或在其【属性】面板中单击“编辑”按钮,在打开的【记录集】对话框中对原有设置进行重新编辑,如图6-24所示。
图6-24 记录集的【属性】面板
在文档中输入文本“图书信息浏览”,然后插入一个2行5列的表格,设置表格宽度为600,背景颜色为浅灰色#999999,填充为2,间距为1,如图6-25所示。
图6-25 表格属性设置
在【属性】面板中将文本“图书信息浏览”应用“标题1”格式;将第1行前4个单元格的宽度分别设置为150、100、150、100,设置5个单元格的背景颜色为“#CCCCCC”;设置第2行单元格的背景颜色均为“#FFFFFF”,然后设置表格所有单元格的水平对齐方式均为“居中对齐”;在第1行单元格中依次输入文本“书名”“作者”“出版社”“出版日期”“价格”,然后选中第1行的所有单元格,在【属性】面板中勾选“标题”复选框,效果如图6-26所示。
在【CSS样式】面板中,定义标签“body”的样式:设置文本大小为12像素、文本对齐方式为居中,保存在样式文件css.css中,如图6-27所示。
图6-26 设置单元格属性
图6-27 定义标签“body”的样式
将光标置于“书名”下面的单元格内,并在【绑定】面板中选择【记录(RsBook)】→【bookname】,单击“插入”按钮,将动态文本插入到单元格中。用相同的方法在其他单元格中插入相应的动态文本,如图6-28所示。
选择表格的第2行,在【服务器行为】面板中单击按钮,在弹出的菜单中执行“重复区域”命令,打开【重复区域】对话框;将“记录集”设置为RsBook,将“显示”设置为5,如图6-29所示。
图6-28 插入动态文本
图6-29 【重复区域】对话框
贴心提示
在【重复区域】对话框中,“记录集”下拉列表中将显示在当前网页文档中已定义的记录集名称。如果定义了多个记录集,这里将显示多个记录集的名称;如果只有1个记录集,就不用特意进行选择。在“显示”选项组中,可以在文本框中输入数字定义每页要显示的记录数,也可以选择显示所有记录。
单击“确定”按钮,所选择的数据行被定义为重复区域,如图6-30所示。
图6-30 文档中的重复区域
将光标置于表格下面,执行【插入记录】→【数据对象】→【记录集分页】→【记录集导航条】命令,打开【记录集导航条】对话框;在对话框的【记录集】下拉列表中选择【RsBook】,设置【显示方式】为“文本”,如图6-31所示。
图6-31 【记录集导航条】对话框
贴心提示
在【记录集导航条】对话框中,【记录集】下拉列表中将显示在当前网页文档中也定义的记录集名称。如果定义了多个记录集,这里将显示多个记录集名称;如果只有1个记录集,就不用特意去选择。在【显示方式】选择组中,如果选择【文本】单选按钮,则会添加文字用作翻页指示;如果选择【图像】单选按钮,则会自动添加4幅图像用作翻页指示。
单击“确定”按钮,在文档中插入的记录集导航条如图6-32所示。
图6-32 插入的记录集导航条
在文本“图书信息浏览”的下面插入一个1行1列的表格,如图6-33所示。
图6-33 插入一个1行1列的表格
将光标置于刚插入的表格单元格内,设置其水平对齐方式为“左对齐”;执行【插入记录】→【数据对象】→【显示记录计数】→【记录集导航状态】命令,打开记录集导航状态对话框,在“Recordset”下拉列表中选择记录集,如“RsBook”,如图6-34所示。
图6-34 记录集导航状态对话框
单击“确定”按钮,插入记录集导航状态文本,如图6-35所示
图6-35 记录集导航状态文本
图6-36 浏览效果
任务2 在数据库中插入、更新和删除记录
操作步骤
创建一个名为“insert.asp”的ASP VBScript网页文档,并附加样式表文件“css.css”;在文档中输入文本“图书信息添加”,并通过【属性】面板应用“标题1”格式;执行【插入记录】→【表单】→【表单】命令,在文本下面插入一个表单;在表单中插入一个6行2列的表格,在【属性】面板设置表格宽为600像素,背景色为浅灰#CCCCCC,如图6-37所示。
图6-37 设置表格属性
将表格第1列单元格的宽度和高度分别设置为150和25,水平对齐方式为右对齐,背景颜色为#FFFFFF;将表格第2列单元格的水平对齐方式设置为左对齐,背景颜色为#FFFFFF,最后输入相应的表单对象,如图6-38所示。
图6-38 插入表格并输入文本
按照表6-1所示,在表格第2列依次插入表单对象,如图6-39所示。
表6-1 数据库结构
图6-39 插入表单对象
在【服务器行为】面板中单击按钮,在弹出的下拉菜单中选择【插入记录】命令,打开【插入记录】对话框,如图6-40所示。
图6-40 【插入记录】对话框
在“连接”下拉列表中选择已创建的数据库连接“conn”;在“插入到表格”下拉列表中选择数据表“mybooks”;在“插入后,转到”文本框中定义插入记录后要转到的页面,此处仍为“insert.asp”;在“获取值自”下拉列表中选择表单的名称“form1”;在“表单元素”下拉列表中选择相应的选项;在“列”下拉列表中选择数据表中与之相对应的字段名;在“提交为”下拉列表中选择该表单元素的数据类型。如果表单元素的名称与数据库中的字段名称是一致的,这里将自动对应,不需设置,如图6-41所示。
图6-41 设置参数
单击“确定”按钮,完成向数据表中添加记录的设置,如图6-42所示。
图6-42 “插入记录”服务器行为设置
创建3个ASP VBScript空白网页文档,并附加样式表文件“css.css”,分别保存为“search.asp”“result.asp”“update.asp”。
先设置搜索页“search.asp”。打开文档“search.asp”,然后输入文本“图书信息检索”,并通过【属性】面板应用“标题1”格式;执行【插入记录】→【表单】→【表单】命令,在文本下面输入一个表单,然后在表单中输入提示性文本,并插入一个文本域(名称为“bookname”)和一个提交按钮(名称为“Submit”),如图6-43所示。
图6-43 插入表单对象
单击红色虚线框选中表单,然后在【属性】面板中单击“动作”文本框后面的按钮,打开【选择文件】对话框,在文件列表中选择查询结果文件“result.asp”,如图6-44所示;保存文档。
图6-44 插入【动作】选项
打开文档“result.asp”,然后输入文本“图书信息检索结果”,并通过【属性】面板应用“标题1”格式;在【服务器行为】面板中单击按钮,在弹出的菜单中执行【记录集】命令,打开【记录集】对话框;在“名称”文本框中输入“RsBookResult”;在“连接”下拉列表中选择【conn】选项;在“表格”下拉列表中选择“mybooks”选项;在“列”选项组中选择“选定的”单选按钮,然后按住Ctrl键不放,在列表框中依次选择“author”“bookname”“id”;在“筛选”的前3个下拉列表中依次选择“bookname”“包含”“表单变量”;在文本框中输入“bookname”,如图6-45所示。
单击“确定”按钮,完成创建记录集的任务。此时在【服务器行为】面板的列表框中添加了【记录集(RsBookResult)】行为。将光标置于文本“图书信息检索结果”的后面,执行【插入记录】→【数据对象】→【动态数据】→【动态表格】命令,打开【动态表格】对话框并进行参数设置,如图6-46所示。
图6-45 【记录集】对话框
图6-46 【动态表格】对话框
单击“确定”按钮,则在页面中插入动态表格,如图6-47所示。
图6-47 插入动态表格
将单元格中的字段名改为中文,并调整顺序;在文本“作者”所在列的后面再插入2列,并将第1行中的2个单元格进行合并,然后输入相应的文本,如图6-48所示。
图6-48 修改结果
选中文本“修改记录”,在【属性】面板中单击“链接”后面的按钮,打开【选择文件】对话框,在文件列表中选中文件“update.asp”;单击“URL:”后面的“参数…”按钮,打开【参数】对话框,在“名称”文本框中输入“id”;单击“值”文本框右侧的按钮,打开【动态数据】对话框,选中“RsBookResult”记录集中的“id”选项,如图6-49所示,然后单击“确定”按钮,返回【参数】对话框;在【参数】对话框中,单击“确定”,返回【选择文件】对话框;单击“确定”按钮加以确认。
打开文档“update.asp”,输入文本“图书信息修改”,并通过【属性】面板应用“标题1”格式;创建图书信息记录集“RsBook”,如图6-50所示。
图6-49 【动态数据】对话框
图6-50 创建记录集“RsBook”
将光标置于文档中的适当位置,执行【插入记录】→【数据对象】→【更新记录】→【更新记录表向导】命令,打开【更新记录表单】对话框;在对话框的“连接”下拉列表中选择“conn”选项;在“要更新的表格”下拉列表中选择“mybooks”选项;在“选取记录自”下拉列表中选择“RsBook”选项;在“唯一键列”下拉列表中选择“id”选项;在“表单字段”列表框中将“id”字段删除,同时调整字段的顺序,如图6-51所示。
图6-51 【更新记录表单】对话框
单击“确定”按钮,则在页面中添加了表单和服务器行为,如图6-52所示。
图6-52 更新记录页面
最后将表格第1列中的字段名修改为中文说明文字即可。
贴心提示
在制作更新记录页面时,也可以自己添加表格和表单,然后根据传送参数创建记录集,并在单元格中插入动态数据(这里主要是动态文本域),最后添加更新记录服务器行为。在动态数据中,还有动态复选框、动态单选按钮、动态选择列表,其用法是相似的。
打开网页文档“result.asp”,将文本“删除记录”所在单元格拆分成2个单元格,并将文本“删除记录”移至后一个单元格;在前一个空白单元格中插入一个表单,然后在表单区域中添加一个按钮,如图6-53所示。
图6-53 添加表单
在【服务器行为】面板中单击按钮,在弹出的菜单中执行“删除记录”命令;在弹出的【删除记录】对话框中,在“连接”下拉列表中选择“conn”选项;在【从表格中删除】下拉列表中选择“mybooks”选项;在“选取记录自”下拉列表中选择“RsBookResult”选项;在“唯一键列”下拉列表中选择“id”选项;在“提交此表单以删除”下拉列表中选择“form1”选项,如图6-54所示。
图6-54 【删除记录】对话框
单击“确定”按钮,添加【删除记录】服务器行为,如图6-55所示。
图6-55 添加【删除记录】服务器行为
知识百科
1.IIS的安装与设置
IIS(Internet Information Server,互联网信息服务)是一种Web(网页)服务组件,其中包括Web服务器、FTP服务器、NNTP服务器和SMTP服务器,分别用于网页浏览、文件传输、新闻服务和邮件发送等方面,它使得在网络(包括互联网和局域网)上发布信息成了一件很容易的事。
IIS意味着你能发布网页,并且由ASP(Active Server Pages)、Java、VBscript产生页面。IIS的安装步骤如下:
将Windows安装光盘放入光驱中。
在【控制面板】窗口中选择“添加或删除程序”选项,打开【添加或删除程序】对话框;单击左侧栏中的“添加/删除Windows组件(A)”选项,进入【Windows组件向导】对话框;勾选“Internet信息服务(IIS)”复选框,如图6-56所示
图6-56 安装Internet服务器(IIS)
单击按钮,系统自动安装IIS组件。
安装完后还需要进行IIS服务配置,才能发挥它的作用。
2.IIS的配置
在【控制面板】的“管理工具”类别中双击“Internet信息服务”选项,打开【Internet信息服务】窗口,如图6-57所示。
图6-57 【Internet信息服务】对话框
选择“默认网站”选项,单击鼠标右键,在弹出的快捷菜单中选择“属性”命令,打开【默认网站属性】对话框;切换到“网站”选项卡,在“IP地址”列表框中输入本机的IP地址,如图6-58所示
图6-58 设置IP地址
切换到“主目录”选项卡,在“本地路径”文本框中输入(或单击“浏览”按钮来选择)网页所在的目录,如“C:\mysite”,如图6-59所示。
切换到“文档”选项卡,单击“添加”按钮,打开【添加默认文档】对话框;在【默认文档名】文本框中输入首页文件名“index.htm”,如图6-60所示,单击“确定”按钮关闭该对话框。
图6-59 设置主目录
图6-60 设置首页文件
配置完IIS服务后,打开IE浏览器,在地址栏里输入IP地址后回车,就可以打开网站的首页了。前提是在这个目录下已经放置了包括“index.htm”在内的网页文件。
3.定义可以使用脚本语言的站点
配置好IIS服务器后,还需要在Dreamweaver CS3 中定义好使用脚本语言的站点,此部分已经在前面做过介绍。在这里强调的是在选择服务器技术时,要选择“ASP VBScript”,在本地进行编辑和测试,文件的存储位置和IIS中主目录的位置一致。浏览站点根目录的URL仍为“http://127.0.0.1”(暂时不使用远程服务器),最后测试设置是否成功。如图6-61所示
图6-61 定义脚本语言
ASP(Active Server Pages)是由Microsoft公司推出的专业Web开发语言。ASP可以使用VBScript、JavaScript等语言编写,具有简单易学、功能强大等优点,因此受到广大Web开发人员的青睐。本单元使用的脚本语言为ASP VBScript。
4.创建后台数据库
启动Access 2003,执行【文件】→【新建】命令,转到【新建文件】面板,如图6-62所示。
单击【空数据库】选项,打开【空数据库】对话框,设置文件的保存位置和文件名,这里保存在站点的“data”文件夹下,如图6-63所示。
图6-62 【新建文件】面板
图6-63 保存数据库
单击“创建”按钮,创建一个名字为“book”的数据库文件,窗口中同时出现了一个相应的数据库设计窗口,如图6-64所示。
图6-64 数据库设计窗口
双击【使用设计器创建表】选项,打开表设计器窗口;在第1行的“字段名称”下面输入“id”;在“数据类型”下拉列表中选择“自动编号”选项;在“说明”下面输入对这个字段的说明信息;在“常规”选项卡的“索引”下拉列表中选择“有(无重复)”选项,如图6-65所示。
图6-65 创建字段“id”
运用相同的方法在表中添加其他字段,如图6-66所示。
在第1行单击鼠标右键,在弹出的快捷菜单中选择“主键”命令,将该字段设置为数据表的主键。
执行【文件】→【保存】命令,打开【另存为】对话框;在“表名称”文本框中输入表的名称,如图6-67所示;单击“确定”按钮进行保存。
打开数据表“mybooks”,然后在其中添加记录并保存,如图6-68所示。
图6-66 设置其他字段
图6-67 【另存为】对话框
图6-68 输入数据
运用相同的方法创建“optioner”表,然后添加管理员的数据并保存,如图6-69所示,效果如图6-70所示。
图6-69 创建optioner表
图6-70 optioner表效果
这里创建的数据库“book.mdb”包括mybooks和optioner两个数据表。这些数据表的创建都是与应用程序的实际需要密切相关的,其中“mybooks”表用来保存书目信息,“optio-ner”表用来保存管理员信息。
项目小结
通过本项目的学习,了解了Dreamweaver CS3 与数据库是如何连接的,用户怎么通过Dreamweaver中的组件来对数据库进行添加、更新和删除。用户以后在创建网站时,不但可以做出一个漂亮的网页,还可以利用数据库功能,使设计的网站能够不停地除旧纳新,以满足客户的需要。
知识拓展
ASP简介
ASP是Active Server Page的缩写,意为“动态服务器页面”。ASP是微软公司开发的代替CGI脚本程序的一种应用,它可以与数据库和其他程序进行交互,是一种简单、方便的编程工具。ASP的网页文件的格式是.asp,现在常用于各种动态网站中。
ASP是一种服务器端脚本编写环境,可以用来创建和运行动态网页或Web应用程序。ASP网页可以包含HTML标记、普通文本、脚本命令以及COM组件等。利用ASP可以向网页中添加交互式内容(如在线表单),也可以创建使用HTML网页作为用户界面的Web应用程序。与HTML相比,ASP网页具有以下特点:
(1)利用ASP可以实现突破静态网页的一些功能限制,实现动态网页技术。
(2)ASP文件是包含在HTML代码所组成的文件中的,易于修改和测试。
(3)服务器上的ASP解释程序会在服务器端执行ASP程序,并将结果以HTML格式传送到客户端浏览器上,因此,使用各种浏览器都可以正常浏览ASP所产生的网页。
(4)ASP提供了一些内置对象,使用这些对象可以使服务器端脚本功能更强。例如,可以从Web浏览器中获取用户通过HTML表单提交的信息,并在脚本中对这些信息进行处理,然后向Web浏览器发送信息。
(5)ASP可以使用服务器端ActiveX组件来执行各种各样的任务,例如存取数据库、发送E-mail或访问文件系统等。
(6)由于服务器是将ASP程序执行的结果以HTML格式传回客户端浏览器的,因此,使用者不会看到ASP所编写的原始程序代码,可防止ASP程序代码被窃取。
(7)方便连接Access与SQL数据库。
(8)开发需要有丰富的经验,否则会留出漏洞,让黑客利用进行注入攻击。
ASP也不仅仅局限于与HTML结合制作Web网站,而且还可以与XHTML和WML语言结合制作WAP手机网站。其原理是一样的。
免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。