Dreamweaver MX Ultradev探索

今天弄到了Dreamweaver MX，这也是我手头上的第三个MX产品了（先前是Flash MX、ColdFusion MX）,今年可真是个MX年啊！自从过了年后，Macromedia关于MX的好消息一个接着一个，大家等着吧，马上就有第四个了（Fireworks MX）。我现在真的有点为Macromedia担心了：以后这些产品的下一个版本该用什么名字了，呵呵。废话少说，干正事了。

　　现在的MX在后台方面不但可以用Asp、Jsp、Coldfusion还有Asp.net和Php以及Coldfusion MX，大家可选择的余地又多了，开心吧！支持最新的Coldfusion MX tag，调试Coldfusion MX代码, 完全支持Asp.net Datasets,DataGrid,Datalist.

　　启动MX (以后在文章中都叫MX了，Dreamwerver不加了，打字麻烦)，启动界面和Flash MX感觉差的，的确我想别的MX产品可能都是这样的吧！进入界面以后布局和Flash MX很象，面板颜色和位置都是差不多的，这方面的统一使得广大的使用着更加容易上手了。我们在这里主要讨论Application面板(因为和Asp有关的东西都在这里了)，其他面板我们就不在此探讨了，那是老虎的事情，如果是新手，我只能在此向你说抱歉了。

　　告诉大家个好消息，我发现MX中的后台部分和以前的UD好象区别不大。他的功能标签全包含在Application面板中(如图qy-1)，单击Application，看到没，以前在UD中经常看到的东西全部在这里出现了。

图qy-1

　　展开Application面板，（如图qy-2）
　　Database：定义数据库连接
　　Bindings：进行数据绑定
　　Server behaviors：行为（功能最多，最强大的地方）
　　Components：在Asp中，这个面板是用不着的
　　我想这些东西大家一看就很亲切吧。选择Database标签，看到没，还有帮助了，告诉你使用步骤，对于新手来说，可以边做边学。不错，非常不错。

图qy-2

　　还有一个很重要的地方就是工具栏了，东西很多，不过我们主要是讲后台，和我们有关的主要是ASP标签和Application标签（如图qy-3）

图qy-3 

　　好了，今天讲的都是初步的认识，让大家有个概念，因为MX整合的东西太多，功能太强大，先让初学者有点方向。我们今后会讲MX在后台方面的运用，主要是结合Asp+Access。只要大家慢慢看下去，一定可以使用MX组建一个动态的个人网站。

 

    动态页面最主要的就是结合后台数据库，自动更新Web页面，所以我们的教程自始自终都是和数据库是分不开的，离开了数据库也就谈不上什么动态页面了。所以今天我们主要讲在MX中如何设置数据库的连接。

　　建立数据库的连接是Web页面通向数据的桥梁，任何形式的添加、删除、修改、检索都是建立在连接的基础上进行的，可以想象连接的重要性了。因此建立正确的连接是我们学习的第一部。

　　再你认为可以的地方建立一个文件夹，起名为dwmx（当然你有权不用这个名字），在里面建立一个Access数据库，最好是把Office Access的示例数据库northwind.mdb拷进去，因为我们今后都会用到他的。进入MX，象以前在dw或是ud中一样，设置一个站点，目录就是我们刚才建立的目录，默认语言是Asp VBScript。当然你也可在右边的Files面板中设置。

　　新建文件，在弹出的窗口中做（如图1-1）的设置。由于MX加入了很多新的后台开发语言，包含了最新的技术，所以在新建文件时可以选择页面的类型，如果是动态页面，还要选择合适的后台开发语言。在此我们当然选择Dynamic page和Asp VBScript，我想这是大部份朋友的选择吧！按下Creat按钮。

图1-1
　　准备工作都做好了，开始连接数据库了，展开右边的Application 面板，选择Databases标签，按"+"按钮，选择Data Source Name (DSN)（如图1-2）

图1-2 

　　在弹出的Data Source Name (DSN)对话框中继续进行设置。如果你已经在控制面板的ODBC中设置了连接，那么你可以在Data Source Name (DSN)下拉列表中找到你建立的连接，在Connection Name中输入个名字，按Test按钮，如果成功，那么数据库就连接好了。但是，如果我们并没有在ODBC中设置连接怎么办呢？

　　1、 很简单，点击Define…按钮，就可以进入ODBC数据源管理器。（如图1-3，）

图1-3
　　2、 选择系统DSN标签，点击添加按钮（如图1-4）

图1-4

　　3、 选择我们想用的数据驱动程序，在此选择（如图1-5）。

图1-5
　　4、 点击完成按钮，选择数据库的路径，应该是dwmx/northwind.mdb。给数据源起个名字。就叫"testmx"吧！（如图1-6）。

图1-6

　　5、 单击确定就可以看到我们的数据源了"testmx"（如图1-7）。

图1-7

　　6、 单击确定按钮回到MX中的Data Source Name (DSN)对话框。在Connection Name 中输入名字"northwind"测试，如果成功，就OK了。

　　现在我们看Application面板的Databases标签，是不是有我们新建的数据源啊！（如图1-8）

图1-8

　　好了，我们的桥梁已经建成了，接下来就是要通过他到数据库中去取数据了。

 

 

上一讲我们主要讲了设置数据库的连接，今天我们要开始真正的实现后台应用，从数据库中获取数据，前面讲的都是为今天工作做准备的。如今我们看到的网页基本上都是动态的，所谓动态就是结合了数据库，自动更新信息。从数据库中检索数据是其中最基本的，也是我们最常用的一种动态方式。下面我们就要通过查询，在Northwind数据库中的Product表中检索产品信息列表。 

　　注意如果在设置站点时，Testing Server选项中的Access请设置成FTP或者Local/Network，（如图2-1），否则Bindings是不可用的。

图2-1 

　　选择右边的Application面板中的Bindings标签。按加号按钮（如图2-2）

图2-2
　　在Recordset对话框中，进行详细设置，如下：

　　Name：disProduct
　　Connection: northwind（就是我们在上一讲中建立的那个连接，可以选择的）
　　Table：Product（在这里列出了数据库中的所有表，我们选择Product）
　　Columns：里面是Product中的所有字段，如果选择Select单选按钮，那么我们可以对字段进行筛选。（如图2-3）

图2-3

　　设置完毕后，我们可以进行测试，按右边的Test按钮，是不是很惊喜，我们需要的数据已经全部列出来了，工具的力量是伟大的吧！（如图2-4）

图2-4
　　点击OK回到Recordset对话框，再点击OK回到页面，这时我们可以看到Binding标签中出现的变化，我们建立的名为disProduct的查询出现了。我想大家看到了这个就应该很容易的想到对象，很直观吧，比在代码中建立对象容易理解多了吧（如图2-5）点击旁边的"+"号，展开，Product表中的所有字段都出现在你的眼前了。（如图2-6）

图2-5

图2-6

　　我们的目的是要在页面上显示产品列表，下面的工作你将发现，把数据库中的东西显示在页面上是多么的容易，你将再一次的感受到工具的伟大。
　　在页面上建立一个两行四列的表格，在第一行分别填上：产品名称，单位数量，单价，库存量（如图2-7）这些都是我们要在页面上显示的字段。下一部，我们将把字段的内容放进去。

图2-7

　　选择在Bindings中展开的字段，我们先选择"产品名称"字段，然后在表格的第二行第一列点击鼠标，使光标在其中闪动，然后回到Bindings面板，点击insert按钮，（如图2-8）

图2-8
　　依次以同样的方法把"单位数量，单价，库存量"字段插入表格中，（如图2-9），还有个更为简单的方法，就是你可以拖动字段到要放置的地方，效果是一样的，而且更加简单。好了，现在看看原代码，如果你是个Asp的初学者，告诉你一个经验，就是多看看mx生成的原代码，对你学习Asp是有很大帮助的。因为你以后会发现，自己简单的添加几行代码就可以试两个页面合并到一起，比如登录页面，那是后话，慢慢看下去你会知道的。

图2-9

　　好了，现在保存你的页面，然后在在浏览器里看看你的劳动成果。千万别告诉我你不知道怎么调试Asp页面啊！显示的怎样，只有一行结果，是不是很让你失望啊。哈哈，记录指针没有移动，当然只显示第一行了。接着看。

　　我们要开始讲Server Behaviors了，利用她可以实现很多的功能，先不说了，慢慢看吧，我们现在要解决的问题是如何显示所有记录。选中表格第二行的所有单元格（如图2-10），

图2-10
　　点击Server Behaviors标签的"+"号按钮，在下拉菜单中选择Repeat Region，在Repeat Region对话框中选择All单选按钮，如果你不想全部显示也可以选择上面的单选按钮，输入希望显示的数量（如图2-11）

图2-11

　　按OK按钮返回。在Server Behaviors标签中又多出现了一个行为（如图2-12）。查看原代码，你发现他只是加入了一个循环语句。

图2-12

　　保存所做的改动，再次调试，怎么样，你在（图2-11）中设置了多少就出来多少。今天到此位置，大家可以好好复习以下，主要是建立查询，里面还有很多窍门了。

 

好，接上一讲，前一章讲到动态显示数据库内容，相信大家现在的心情已是很激动了吧，呵。。。是不是心里早就在想，应当可以自己在网页上也能手工添加数据呢？当然没问题， DW MX已为我们准备好一切了。一般来说，要通过ASP页面向数据库中添加记录，需要提供用户输入数据的界面，这可以通过创建包含表单和页面来实现。利用Dreamweaver MX的Insert Record（插入记录集）服务器行为，就可以向数据库里添加记录。 

　　废话少说，新建一页面，如图（3-1）

3-1 应当大家都会吧。 

　　<1> 点击后你会发现，出现的页面和以前DW或UD很大的不现，如图（3-2）所示。DW MX在创建不同的动态网页方面显得非常方便，可以随意的选择自己想要的类型，而不用像以前一样还要选保存类型。在这里我们选择创建动态页面（Dynamic Page），选择VBScript作为页面的脚本语言。OK，保存为insert.asp。

3-2 
　　<2> 我们用ACCESS新建一数据库，保存名为“用户表”，如图（3-3）所示。指定ID为主键，同时设置它的数据类型自动编号。

3-3 

　　大家注意到没有，在这里我把字段类型用了中文，要是以前在UD时代，是绝对不能出现中文的，但到了DW MX时代，我们终于可以用了，感动ing...照第二章的介绍，建立系统DSN，同时在DW MX里建好数据库连接，如图（3-4）所示.

3-4 

　　<3> 好，准备工作到这里终于完成了。前面提到要通过ASP页面向数据库中添加记录，需要提供用户输入数据的界面，即我们要在页面上建立表单，提供让用户输入的区域，这样我们才能把用户提交的数据保存进数据库中。设计如下界面，如图（3-5）所示。

3-5 

　　注意到上面的红色数字了吗？不要急，这里还有一点要注意，如图（3-6）所示。要指定这些文本框的名称，第一个“用户名”我把它后面的文本框指定为“用户名”，其它两项雷同，分别指定为“密码”，“邮箱”，只是要注意密码这一项的类型（Type）要指定为Password，这样用户在输入密码的时候看到只是一串*号了。注：以前在UD里给文本框命名不能用中文，但现在在DW MX里也可以用了。 

3-6

4> 我们的重头戏来了，这里才是真正感受到DW MX强大的时候，您可以不书写一行代码就可以实现很多看起来很难的效果。Application--->Server Behaviors---> Insert Record,如图（3-7）所示。

-7 

　　DW MX自带了很多实用的服务器行为，像数据的插入，更新，删除等等，这里我们暂时办介绍数据的插入，其它行为我们会在以后讲到。点击它，出现一个插入数据的对话框，如图（3-8）所示。这个对话框允许使用可在页面上利用的表单元素建立自己的数据库。下面各个域需要填写。

Connection:可在Connection（连接）数据库下拉列表框中选择指定的数据库连接，如果没有指定连接，可单击Define（定义）按钮定义数据库连接。在这里我们选择我们刚才在上面指定好的数据库testmx。 

Insert Into Table:这将是数据库中所有表的一个下拉列表。我们在这里选择刚才我们建立的数据表“用户表”。 

After Inserting, Go To:这充许在完成插入后把用户重定向到另一个页面，即数据成功保存进数据库后显示给用户看的页面，告诉用户数据已插入进数据库里。在这里我们定义为insertok.asp。注：不要忘了建立这个页面呀，如果找不到页面就会报错哦！ 

Get Values From:把这个域设置为form1。它应该是页面上唯一的表单;但如果有多个表单，则交有可能利用表单的一个下拉列表。 

Form Elements:文本域应该全部被列在这里。必须一个一个地设置所有这此条目，包括选取表单元素，选择适应的数据列和文本框下面适当的数据类型。用户名将插入到“用户名”列中，密码将插入到“密码”列中，邮箱将插入到“邮箱”列中。刚才我们在上面定义了文本框的名字和数据库的字段名一置，所以DW MX会自动让它们对应，我们在以后应当尽量让表单名和数据库字段名一置，这是个好习惯。

Column和Submit As:所在文本框提交时的数据类型，一般我们不用选择，DW MX会自动作出选择。 

3-8 
　　<5> 完成这些步骤后，可单击OK按钮，Server Behavior交被应用到这个页面上。Server Behavior将自动把所有的代码写到页上，完成数据库的插入。如图（3-9）所示。DW MX会用不同的颜色来标明这里运用了一个服务器行为。

3-9 

　　最后，测试一下吧！如图（3-10）所示。

3-10 

　　<6> 提交，再打开刚才我们设计的数据库，如图（3-11）所示，我们刚才提交的内容，乖乖的在里面躺着呢，哈。。。Dreamweaver MX,让我们世界更美丽。

3-11 

　　在下一章里，我们将讲如何更新数据库里的数据，DW MX还有更多激动人心的功能等着我们去用呢

 

 

在上一章里我们讲了如何向数据库里添加新的内容。但不知大家注意到这样一种情况没有，如果我一条数据库记录在提交后才发现在出错了呢？怎么办？当然就要修改。这次修改我们可是通过WEB来修改数据库里的内容。听起来好像也不是太容易。没关系，通过前面几章的介绍，大家应当发现，在DW MX里调用数据库非常的简单，只要你点几下鼠标就行了。呵。。。这次更新数据库的内容也一样，非常之简单，let's go!~~!

　　好，让我们大家来理解一下数据库内容更新的基本概念吧。先打个比方，如5D论坛里的用户资料更新用到的就是数据库内容更新。这类页面通常是主页面（前页面）－－子页页（后一页面），主页面让用户选择记录更新（5D论坛里的个人信息便是让用户选择记录更新），然后把一个参数传递到子页面，同时子页面执行了两种不同的操作。首先，它显示已存在的数据，这样能被用户修改，然后，它更新修改了的数据库内容。

　　<1> 首先，我们建立记录集，就如同第二章所讲的那样，再运用重复域行为建立多行记录，在这里我就不复述这些步骤了。实际效果图如（4.1）所示。

4-1 

　　<2> 大家注意到上面那个“编辑”了吗？这就是我们第一步的主角－－跳转到细节页连接（Go To Detail Page）。前面提到在主页面把一个参数提交到子页面。我们这里这个“编辑”便是起这个作用，当点击它的时候便会传递一个参数到下一页。我们先用鼠标选定“编辑”这两个字，再Application-->Server Behaviors-->Go To Detail Page,这也是DW MX自带的一个服务器行为，如图（4-2）所示。

4-2 
　　点击鼠标后会出现一个对话界面，如图（4-3）所示。

Link:你可以在这个下拉列表中选择这个服务器行为要运用在哪个连接上，如果你在文档中选择了动态内容，则会自动选择该内容。
Detail Page:在这个文本框里输入详细页所对应ASP页面的URL地址，也可以单击Browser按钮来选择。这里我们输入edit.asp。
Pass URL Parameter:这个文本框里输入要通过URL传递到细节页中的参数名，记得可要输个好记一点的呀，在后面我们还要用到哦。
Recordset:选择通过URL传递参数所属的记录集。意为从哪个记录集里传递参出去呢？这里选择刚才我们建立的名为testmx的记录集。
Column:选择通过URL传递参数所属的记录集中的字段名称，即设置URL传递参数的值的来源。在这里我们选择ID，你也可以选择别的，但在后面记得要改成想对的。
URL Parameters:表明将主页面中的表单值作为URL参数传递到子页面。在我们这个主页面上我们并没有运用到表单，所以可以不选。
Form Parameters:表明将主页面中的表单值以URL参数的方式传递到子页面。在子页面上可以可以通过request.form读取这里传递过来的参数。同上，并没表单，所以不选。（注：request.form为ASP里一基本的内建对像，详细方法请参见相关资料。）

　　当单击OK按钮后，原先我们所选择的“编辑”将变成一个包含动态内容的超文本连接了。

4-3 

　　<3> 到此为止，我们主页面的参数传递的准备工作已完成，剩下的呢？自然也是本章的重头戏--更新数据库内容。新建一页面，定义为ASP，脚本为VBSscript，保存为edit.asp，即我们在上面所输入的，可不要输错了哦，要不又会出错的。接下来的事就是建立记录集，同主页面，然后建立表单，以方便用户输入更新记录，具体显示如图（4-4）所示。

同第三章所述，同样要记得设置表单里文本框的名称和数据库里的一致。