1用户管理系统建设.docx

1、1用户管理系统建设用户管理系统建设一、 系统整体规划（一） 页面设计规划在本地站点建立站点文件夹member。其下将创建的文件夹及文件如图所示（二） 网页美工设计本例采用“拐角型”布局结构。美工设计效果如下。素材可自己制作，也可使用我发给大家的。二、 数据库设计与连接（一） 数据库设计通过功能分析发现，数据库应该包括注册的用户名、注册密码以及一些个人信息，如性别、年龄、E-mail、电话等。所以数据库中应该包括上述信息的表，称之为“用户信息表”。本实验中将数据库命名为member，创建的用户信息表member如图所示。数据设计库表user的字段组成结构如下：下面介绍在ACCESS中创建数据库的

2、方法和步骤。1. 新建空白数据库；2. 保存为member.mdb，保存类型中选择“Microsoft office access 2002-2003数据库”，是为了让数据库通用；3. 在空白数据库中建立新的“数据表”，另存为“表名称”为member。4. 按照字段的名称和属性进行设置。5. 打开member数据表，可以再其中预先编辑一些记录对象，其中admin的权限（authority）值为1，其余用户的权限为0，即为一般用户。6. 编辑完成，保存，关闭，数据库和存储用户名和密码等资料的表建立完成。（二） 创建数据库连接具体步骤：1. 依次单击“控制面板”|“管理工具”|“数据源（ODBC）

3、”|“系统DSN”命令；2. 单击添加按钮，在“创建新数据源”对话框中选择Driver do Microsoft Access(*.mdb)选项，如图3. 单击完成按钮，打开“ODBC Microsoft Access安装”对话框，在“数据源名（N）”文本框中输入dsnuser，如图4. 单击选择按钮，找到需要找到的数据库。5. 确定之后，完成系统DSN的设置。6. 启动dreamweaver，在网站根目录下新建一个名为index.asp网页并保存7. 设置好“站点”、“文档类型”、“测试服务器”，在dreamweaver中执行菜单“窗口”|“数据库”命令或者快捷键shift+ctrl+F10

4、，打开“数据库”面板，单击添加按钮，选择“数据源名称（DSN）”。8. 在这个对话框中，在“连接名称”中输入user，单击“数据源名称”，在其中选择dsnuser，其他默认，确定完成。9. 同时在网站根目录下将会自动创建名为Connections的文件夹，该文件夹内有一个名为user.asp的文件，可以用记事本打开。10. 保存文档，完成数据库连接。三、 用户登录模块的设计（一） 登陆界面 在用户访问该用户管理系统时，首先要进行身份验证，这个功能是靠登录界面来实现的。所以登陆页面中必须有要求用户输入用户名和密码的文本框，以及输入完成后进行登录的“登录”按钮和输入错误后重新设置用户名和密码的“重

5、置”按钮。详细制作步骤如下：1. 首先来看一下用户登录的首页设计，如图。2. index.asp页面是用户登录系统的首页，打开前面创建的index.asp页面，输入网页标题“帆云购物中心”，然后执行菜单“文件”|“保存”命令将网页标题保存。3. 执行菜单“修改”|“页面属性”命令，然后在“背景颜色”文本框中输入颜色为#CCCCCC，在“上边距”文本框中输入0像素，这样设置是为了让页面的第一个表格能置顶到上面，并形成一个灰色的底纹的页面，设置如图。4. 设置完成后单击“确定”按钮，进入“文档”窗口，执行菜单“插入”|“表格”命令，在打开的“表格”对话框中，设置3行3列的表格。表格宽度为775像素

6、，边框粗细、单元格边框和间距都为0，如图。5. 单击确定，完成表格插入。将鼠标设置在第1行表格中，在“属性”面板中单击合并单元格，将第一行表格合并，再执行菜单“插入记录”|“图像”，选择图片“01.gif”，如图。6. 单击确定，完成图片插入。鼠标放置在第3行表格中，合并单元格，将第3行表格合并，插入图片“05.gif”，如图。7. 选择整个表格，在“属性”面板中，选择“对齐”为“居中对齐”，如图。8. 把光标移至创建表格第2行第1列中，在“属性”中设置高度为456像素，宽度为179像素，在垂直中选择“顶端”，再将光标移至这一列中，单击“拆分”按钮，在中加入background=”/image

7、s/02.gif”，效果如图。9. 在表格的第2行第2列和第3列中，分别插入同站点images文件夹中的图片03.gif和04.gif10. 单击第2行第1列的单元格，单击“文档”窗口上的拆分按钮，在和之间加入valign=”top”（表格文字和图片的相对摆放位置，可选值为top、middle、bottom）。11. 单击“文档”窗口的“设计”按钮，在刚创建的表格的单元格中，执行菜单插入表单命令12. 将鼠标放置在该表单中，执行菜单“插入记录”|“表格”，打开“表格”对话框，行数5，列为2。表格宽度179像素。单击并拖动鼠标分别选择第1行和第5行表格，单击合并按钮进行合并。在第2行第1列中输入

8、文字说明“用户名”，第2行第2列中执行菜单“插入记录”|“表单”|“文本域”，插入一个单行文本域表单对象，并定义文本域名为“username”，“文本域”设置如图所示13. 第3行第1列表格中输入文字“密码”，在第3行表格的第2列中执行“插入记录”|“表单”|“文本域”，定义文本域名为“password”，“文本域”设置如图所示14. 选择第4行单元格，执行“插入记录”|“表单”|“按钮”命令两次，插入两个按钮，分别更改属性变更，一个是登录时用的“提交表单”选项，一个是“重设置单”，“属性”的设置如图15. 在第5行输入“注册新用户”，并选择这几个字在窗口栏中选择“插入”|“超级链接”，并设置

9、一个转到用户注册页面register.asp，效果如图16. 忘记密码可以找回密码，在表格第5行中输入“找回密码”，并设置一个转到密码查询页面lostpassword.asp的链接对象17. 表单编辑完成之后，来编辑网页的动态内容，使用户可以通过该网页中表单的提交实现登录功能。打开“服务器行为”面板，单击添按钮，执行菜单“用户身份验证”|“登录用户”，如图18. 打开“登录用户”对话框，各项参数设置如图19. 单击确定后，返回“文档”窗口。在“服务器行为”面板中就增加了一个“登录用户”行为，如图20. 表单对象对应的“属性”面板的动作属性值如图所示，为，这是dreamweaver自动生成的动作

10、代码。21. 保存到本地站点，完成首页的制作（二） 登录成功和登录失败页面的制作登录如果不正确，就会转到loginfail.asp页面；如果登录信息正确，就会转到welcome.asp页面。1. 创建新ASP网页并保存为loginfail.asp在网站根目录下，在“布局”下拉菜单中选择“无”，；2. 登录失败页面设计如图所示。在文档中选择“这里”文本，加入超级链接指向index.asp3. 保存，完成创建下面制作welcome.asp页面1. 创建新ASP网页并保存为welcome.asp在网站根目录下；2. 类似的方法制作静态部分，如图3. 执行“窗口”|“绑定”，打开“绑定”面板，单击添加

11、按钮，选择“阶段变量”定义一个阶段变量，如图所示4. 打开“阶段变量”对话框。在名称中输入MM_username，单击确定5. 在文档窗口拖动鼠标选择“XXXXXX”文本，然后在“绑定”面板中选择MM_username变量，再单击“绑定”面板底部的“插入”按钮，将其插入到该“文档”的指定位置。完了就可以看到“XXXXXX”被Session.MM_username代替，如图所示 6. 在文档中选中“注销你的用户”文本。执行“窗口”|“服务器行为”|“用户身份验证”|“注销用户”7. 打开“注销用户”对话框进行设置。 “在以下情况下注销”用于设置注销，在本实验中选中“单击链接”，在右边下拉菜单中选

12、择“注销你的用户” “在完成后，转到”用于设置注销后显示的页面，在右侧文本框输入logoot.asp，如图8. 确定之后返回“文档”窗口。在“服务器行为”中就添加了一个“注销用户”行为，同时可以看到“注销用户”链接文本对应的“属性”面板中的“链接”属性值是，这是dreamweaver自动生成9. logoot.asp的页面设置比较简单，不做详细说明，在页面的“这里”指定一个链接到首页index.asp就可以了，如图10. 保存到本地站点。就可以进行测试该系统的执行情况了。文档中的“修改您的注册资料”链接到userupdate.asp页面，此页面在后面的修改中进行介绍。（三） 用户登录系统功能的

13、测试制作好系统后，需要测试才能上传到服务器使用，步骤如下：1. 打开IE，输入http:/127.0.0.1/index.asp，打开index.asp 2. 在“用户名”和“密码”文本框输入，单击“登录”3. 如果登录信息错误，就会转到loginfail.asp 4. 如果正确，则显示登录成功页面。这里输入的是预设在数据库中的用户admin，成功就会转到welcome.asp5. 如果想注销，只需要单击“注销你的用户”即可，就会转到logoot.asp，然后单击“这里”回到首页。6. 至此登录功能测试完成四、 用户注册模块的设计该模块是实现新用户注册功能（一） 用户注册页面用户注册的操作就是

14、向member.mdb数据库的member表中添加记录的操作，如图1. 创建新ASP网页并保存为register.asp在网站根目录下，在“布局”下拉菜单中选择“无”，2. 在dreamweaver中使用静态页面的工具完成如图所示的静态部分，这里说明的是在注册时需要加入一个“隐藏区域”并命名为authority，设置默认值为0，即所有的用户注册的时候默认是一般访问用户3. 还需要设置一个验证表单的动作，用来检查访问者在表单中填写的内容是否满足数据库中表user中字段的要求。在将用户填写的注册资料提交到服务器之前，就会对用户填写的资料进行验证。如果有不符合要求的信息，可以向访问者显示错误的原因，

15、并让访问者重新输入。4. 执行菜单“窗口”|“行为”，打开行为面板的添加按钮，从打开的行为列表中选择“检查表单”，打开如图本试验中，设置username、password、password1、answer、truename、address文本域为“值：必需的”，“可接受：任何东西”，也就是说这几个文本域必填不能空；tel和QQ文本域验证条件为“值：必需的”，“可接受：数字”，表示这两个必须填写数字不能为空；e-mail文本域的验证条件是“值：必需的”，“可接受：电子邮件”，表示该文本域必须填写电子邮件地址不能为空5. 设置完成，点击确定6. 在文档窗口单击工具栏中的“代码”按钮，在验证表单的动

16、作代码中加入如下：编辑完成后，单击“设计”按钮，返回文档窗口此时，可以测试一下执行的结果7. 在该网页中添加一个“插入记录”的服务器行为。执行“窗口”|“服务器行为”，打开“服务器行为”面板，单击添加按钮，选择“插入记录”。8. 在对话框中设置： 从“连接”下拉列表框选择user作为数据源连接对象 从“插入到表格”下拉列表框选择member作为使用的数据库表对象 在“插入后，转到”文本框中设置记录成功添加到表member后，转到regok.asp 在对话框下半部分，将网页中的表单对象和数据库中表member中的字段一一对应，如图9. 设置完成后，单击确定，返回“文档”窗口，如图10. 设置检查

17、用户名是否重复。单击“服务器行为”上的添加按钮，在弹出的菜单中，执行“用户身份验证”|“检查新用户名”命令，在对话框中设置如下： 在“用户名字段”下拉列表框中选择username字段 在“如果已存在，转到”文本框中输入regfail.asp，该网页将在后面编辑 设置完成如图11. 设置完成后，将该文档保存到本地站点中，完成本页制作。（二） 注册成功和注册失败页面为了方便登录，应该在regok.asp中设置一个转到index.asp的文字链接。同时为了方便访问者重新进行注册，则应该在regfail.asp页面设置一个转到register.asp页面的文字链接。1. 创建新ASP网页并保存为reg

18、ok.asp在网站根目录下2. regok.asp如图所示，制作比较简单，省去，其中“这里”指向index.asp的链接3. 如果输入错误或用户名已经存在，在应该显示注册失败的信息。新建一个regfail.asp页面，设计如图。其中“这里”指向register.asp的链接（三） 用户注册功能的测试1. 打开IE，输入http:/127.0.0.1/register.asp，打开register.asp 2. 输入一些不正确的信息，错填或者少填一些内容，以测试网页中验证表单动作的执行情况。3. 在页面中注册一个已经存在的用户名，如果输入admin。单击“确定”，由于已经存在，浏览器会转到reg

19、fail.asp，如图，告诉访问者用户名已经存在。此时，注册者可以单击“这里”返回register.asp，以重新注册。4. 在该注册页面填写任意注册资料5. 单击“确定”，浏览器会转到regok.asp页面，此时，访问者可以单击“这里”，转到index.asp以便进行登录6. 在Access中打开用户数据库文件member.mdb，查看其中的member表对象的内容，此时可以看到在该表的最后一行多了一条刚提交的注册信息。五、 用户注册资料修改模块的设计（一） 修改资料页面该页面主要把用户所有资料都列出，通过“更新记录”实现资料修改的功能，步骤如下：1. 首先制作用户修改资料页面。由于和用户注

20、册页面相似，可以通过修改register.asp页面来得到所需要的记录更新页面。打开register.asp，“另存为”userupdate.asp2. 打开“服务器面板”，删去全部的服务器行为并修改其相应的文字，修改完成后显示如图3. 打开“绑定”面板，单击添加按钮，选择“记录集（查询）”4. 在该对话框中设置“ 在“名称”输入upuser作为该“记录集”的名称 从“连接”下拉列表框选择“user数据源”连接对象 从“表格”下拉列表框中，选择使用的数据库表对象为member 在“列”单选按钮组中先选中“全部”单选按钮 在“筛选”栏中设置记录集过滤的条件为username=阶段变量/MM_us

21、erName。完成设置后如图5. 设置完成，完成记录集的绑定6. 完成记录集的绑定后将upuser记录集中的字段绑定到页面上相应的位置上，如图7. 对于网页中的单选按钮组sex对象，单击“服务器行为”面板中的添加按钮，执行“动态表单元素”|“动态单选按钮”，设置动态单选按钮组对象。打开“动态单选按钮”，从“单选按钮组”下拉列表框中，选择form1表单中的单选按钮组sex。单击“选取值等于”后按钮，从打开的“动态数据”对话框中选择记录集upuser中的sex字段。并用相同的方法设置“密码提示问题”的列表选项，设置完成如图所示。8. 单击“服务器行为”面板上的添加按钮，选择“更新记录”，为网页添加

22、更新记录的服务器行为9. 打开“更新记录”对话框，该对话框与插入记录的对话框相似，具体设置如图。10. 设置完成，返回“文档”窗口，将文档保存到本地站点中。11. 由于本页的MM_username值是来自上一页注册成功的用户名值，所以单独测试时会提示出错，要先登录，在登录成功的页面单击“修改您的注册资料”超链接到该页面才能产生效果。（二） 更新成功页面用户修改注册资料成功后，就会转到userupdateok.asp。在该页面，应该向用户显示资料修改成功的信息。如果用户要继续修改资料为其提供一个返回到userupdate.asp的链接；如果不需要修改，则为其提供一个转到用户登陆页面index.a

23、sp页面的链接，步骤：1. 创建新ASP网页并保存为userupdateok.asp在网站根目录下2. 为了向用户提供更好的界面，应该在网页中显示用户修改的结果，以供用户检查修改是否正确。应该首先定义一个记录集，然后将绑定的记录集插入到网页中相应的位置，方法与制作页面userupdate.asp中的方法一样。通过在表格中添加记录集中的动态数据对象，把用户修改后的信息显示在表格中，具体操作参照之前的做法（三） 修改资料功能的测试1. 打开IE，输入http:/127.0.0.1/index.asp，打开index.asp，在页面中登录，成功后进入welcome.asp，单击“修改您的资料”，转到

24、userupdate.asp 2. 在该页面进行一些修改，然后单击提交。如果更新成功，浏览器转回到userupdateok.asp3. 在Access中打开用户数据库文件member.mdb，查看其中的member表对象的内容，此时可以看到，对应的记录内容已经修改六、 密码查询模块的设计通过设置的问题和答案找到遗失的密码。方法是判断用户提供的答案和数据库中答案是否一致，来找回密码。（一） 密码查询页面本节主要制作密码查询页面lostpassword.asp，步骤如下：1. 创建新ASP网页并保存为lostpassword.asp在网站根目录下，在“布局”下拉菜单中选择“无”，设计的页面如图所示

25、2. 在“文档”窗口中选中表单对象，在“属性”面板中，在“表单ID”文本框中输入form1，在“动作”文本框中输入showquestion.asp作为该表单提交的对象页面。在“方法”下拉列表框中选择POST作为该表单的提交方式，接下来将输入用户名的文本域命名为inputname，如图3. 新建文档，输入网页标题“查询问题”，另存为showquestion.asp4. 在dreamweaver中制作静态网页，效果如图5. 在“文档”窗口选中表单对象，在“属性”面板中，在“动作”文本框中输入showpassword.asp作为该表单提交的对象页面。在“方法”下拉列表框中选择POST作为该表单的提交

26、方式，如图所示。接下来将输入密码提示问题答案的文本域命名为inputanswer6. 执行“窗口”|“绑定”，打开绑定面板，单击添加按钮，选择“记录集（查询）”7. 在对话框中设置 在“名称”文本框中输入Recordset1作为该记录集的名称 从“连接”下拉列表框选择“user数据源”连接对象 从“表格”下拉列表框中，选择使用的数据库表对象为member 在“列”先选中“选定的”单选按钮，然后在下拉列表框中选择username和question 在“筛选”栏中设置记录集过滤的条件为username：=，表单变量：inputname，表示根据数据库中username字段的内容是否和从上一个网页中

27、的表单中的inputname表单对象传递过来的信息完全一致来过滤记录对象。完成设置后如图8. 设置完成，关闭对话框，返回到“文档”窗口9. 将Recordset1记录集中的question字段绑定到页面上相应的位置，如图10. 执行“插入记录”|“表单”|“隐藏域”，在表单中插入一个表单隐藏域，然后将该隐藏域的名称设置为username11. 选中该隐藏域，转到“绑定”面板，将Recordset1记录集中的username字段绑定到该表单隐藏域中，如图。（当用户输入的用户名不存在，即记录集Recordset1为空时，就会导致该页面不能正常显示，这就需要设置隐藏区域）12. 在“文档”窗口中选中

28、当用户输入用户名存在时显示的内容即整个表单，然后单击“服务器行为”的添加按钮，在弹出的菜单中，执行“显示区域”|“如果记录集不为空则显示区域”，在对话框中选择记录集对象为Recordset1。这样只有当记录集Recordset1不为空，才显示出来。设置完成单击确定关闭对话框，返回到“文档”窗口。13. 在网页中编辑显示用户名不存在时的文本“该用户名不存在！”，并为这些内容设置一个“如果记录集为空则显示区域”隐藏区域服务器行为，这样当记录集Recordset1为空时，显示这些文本，完成后如图所示（二） 完善密码查询功能页面当用户在showquestion.asp输入答案，提交后服务器就会提交到s

29、howpassword.asp。下面就来设计该页面。1. 创建新ASP网页并保存为showpassword.asp在网站根目录下，在“布局”下拉菜单中选择“无”2. 在dreamweaver中制作如图所示的静态部分3. 打开“绑定”面板，单击添加按钮，选择“记录集（查询）”4. 在对话框中设置 在“名称”文本框中输入Recordset1作为该记录集的名称 从“连接”下拉列表框选择“user数据源”连接对象 从“表格”下拉列表框中，选择使用的数据库表对象为member 在“列”先选中“选定的”单选按钮，然后在下拉列表框中选择username、password和answer三个字段 在“筛选”栏中

30、设置记录集过滤的条件为answer为=，表单变量为inputanswer，表示根据数据库中answer字段的内容是否和从上一个网页中的表单中的inputanswer表单对象传递过来的信息完全一致来过滤记录对象。完成设置后如图5. 单击确定，关闭对话框，返回“文档”窗口6. 将记录集中username和password两个字段分别添加到网页中，如图7. 同样需要根据记录集Recordset1是否为空，为该网页中的内容设置隐藏区域的服务器行为。在“文档”窗口，选中当用户输入密码提示问题答案正确时显示的内容，然后单击“服务器行为”的添加按钮，在弹出的菜单，执行“显示区域”|“如果记录集不为空则显示区

31、域”，在对话框中选择记录集对象为Recordset1。这样只有当Recordset1不为空时才显示出来，如图。设置完成，关闭对话框，返回“文档”窗口。8. 在网页中选择当用户输入密码提示问题答案不正确时显示的内容，并为这些内容设置一个“如果记录集为空则显示区域”隐藏区域服务器行为，这样只有当记录集Recordset1为空时，才显示这些文本，如图9. 完成保存到本地站点中（三） 密码查询功能测试1. 打开IE，输入http:/127.0.0.1/index.asp，打开index.asp，在页面中登录，成功后进入welcome.asp，单击“找回密码”，如图2. 当用户进入lostpassword.asp后，输入并向服务器提交自己注册的用户名信息。当输入不存在的用户名，单击提交，会转到showquestion.asp，该页显示出用户名不存在的错误信息，并提供一个转到lostpassword.asp的链接