1用户管理系统建设.docx
《1用户管理系统建设.docx》由会员分享,可在线阅读,更多相关《1用户管理系统建设.docx(39页珍藏版)》请在冰豆网上搜索。
![1用户管理系统建设.docx](https://file1.bdocx.com/fileroot1/2023-2/6/3204cec7-58f6-4f1a-bcb3-c0e6430530ce/3204cec7-58f6-4f1a-bcb3-c0e6430530ce1.gif)
1用户管理系统建设
用户管理系统建设
一、系统整体规划
(一)页面设计规划
在本地站点建立站点文件夹member。
其下将创建的文件夹及文件如图所示
(二)网页美工设计
本例采用“拐角型”布局结构。
美工设计效果如下。
素材可自己制作,也可使用我发给大家的。
二、数据库设计与连接
(一)数据库设计
通过功能分析发现,数据库应该包括注册的用户名、注册密码以及一些个人信息,如性别、年龄、E-mail、电话等。
所以数据库中应该包括上述信息的表,称之为“用户信息表”。
本实验中将数据库命名为member,创建的用户信息表member如图所示。
数据设计库表user的字段组成结构如下:
下面介绍在ACCESS中创建数据库的方法和步骤。
1.新建空白数据库;
2.保存为member.mdb,保存类型中选择“Microsoftofficeaccess2002-2003数据库”,是为了让数据库通用;
3.在空白数据库中建立新的“数据表”,另存为“表名称”为member。
4.按照字段的名称和属性进行设置。
5.打开member数据表,可以再其中预先编辑一些记录对象,其中admin的权限(authority)值为1,其余用户的权限为0,即为一般用户。
6.编辑完成,保存,关闭,数据库和存储用户名和密码等资料的表建立完成。
(二)创建数据库连接
具体步骤:
1.依次单击“控制面板”|“管理工具”|“数据源(ODBC)”|“系统DSN”命令;
2.单击添加按钮,在“创建新数据源”对话框中选择DriverdoMicrosoftAccess(*.mdb)选项,如图
3.单击完成按钮,打开“ODBCMicrosoftAccess安装”对话框,在“数据源名(N)”文本框中输入dsnuser,如图
4.单击选择按钮,找到需要找到的数据库。
5.确定之后,完成系统DSN的设置。
6.启动dreamweaver,在网站根目录下新建一个名为index.asp网页并保存
7.设置好“站点”、“文档类型”、“测试服务器”,在dreamweaver中执行菜单“窗口”|“数据库”命令或者快捷键shift+ctrl+F10,打开“数据库”面板,单击添加按钮,选择“数据源名称(DSN)”。
8.在这个对话框中,在“连接名称”中输入user,单击“数据源名称”,在其中选择dsnuser,其他默认,确定完成。
9.同时在网站根目录下将会自动创建名为Connections的文件夹,该文件夹内有一个名为user.asp的文件,可以用记事本打开。
10.保存文档,完成数据库连接。
三、用户登录模块的设计
(一)登陆界面
在用户访问该用户管理系统时,首先要进行身份验证,这个功能是靠登录界面来实现的。
所以登陆页面中必须有要求用户输入用户名和密码的文本框,以及输入完成后进行登录的“登录”按钮和输入错误后重新设置用户名和密码的“重置”按钮。
详细制作步骤如下:
1.首先来看一下用户登录的首页设计,如图。
2.index.asp页面是用户登录系统的首页,打开前面创建的index.asp页面,输入网页标题“帆云购物中心”,然后执行菜单“文件”|“保存”命令将网页标题保存。
3.执行菜单“修改”|“页面属性”命令,然后在“背景颜色”文本框中输入颜色为#CCCCCC,在“上边距”文本框中输入0像素,这样设置是为了让页面的第一个表格能置顶到上面,并形成一个灰色的底纹的页面,设置如图。
4.设置完成后单击“确定”按钮,进入“文档”窗口,执行菜单“插入”|“表格”命令,在打开的“表格”对话框中,设置3行3列的表格。
表格宽度为775像素,边框粗细、单元格边框和间距都为0,如图。
5.单击确定,完成表格插入。
将鼠标设置在第1行表格中,在“属性”面板中单击合并单元格
,将第一行表格合并,再执行菜单“插入记录”|“图像”,选择图片“01.gif”,如图。
6.单击确定,完成图片插入。
鼠标放置在第3行表格中,合并单元格,将第3行表格合并,插入图片“05.gif”,如图。
7.选择整个表格,在“属性”面板中,选择“对齐”为“居中对齐”,如图。
8.把光标移至创建表格第2行第1列中,在“属性”中设置高度为456像素,宽度为179像素,在垂直中选择“顶端”,再将光标移至这一列中,单击“拆分”按钮,在
中加入background=”/images/02.gif”,效果如图。 9.在表格的第2行第2列和第3列中,分别插入同站点images文件夹中的图片03.gif和04.gif 10.单击第2行第1列的单元格,单击“文档”窗口上的拆分按钮,在 | 和 | 之间加入valign=”top”(表格文字和图片的相对摆放位置,可选值为top、middle、bottom)。
11.单击“文档”窗口的“设计”按钮,在刚创建的表格的单元格中,执行菜单插入表单命令
12.将鼠标放置在该表单中,执行菜单“插入记录”|“表格”,打开“表格”对话框,行数5,列为2。
表格宽度179像素。
单击并拖动鼠标分别选择第1行和第5行表格,单击合并按钮进行合并。
在第2行第1列中输入文字说明“用户名”,第2行第2列中执行菜单“插入记录”|“表单”|“文本域”,插入一个单行文本域表单对象,并定义文本域名为“username”,“文本域”设置如图所示
13.第3行第1列表格中输入文字“密码”,在第3行表格的第2列中执行“插入记录”|“表单”|“文本域”,定义文本域名为“password”,“文本域”设置如图所示
14.选择第4行单元格,执行“插入记录”|“表单”|“按钮”命令两次,插入两个按钮,分别更改属性变更,一个是登录时用的“提交表单”选项,一个是“重设置单”,“属性”的设置如图
15.在第5行输入“注册新用户”,并选择这几个字在窗口栏中选择“插入”|“超级链接”,并设置一个转到用户注册页面register.asp,效果如图
16.忘记密码可以找回密码,在表格第5行中输入“找回密码”,并设置一个转到密码查询页面lostpassword.asp的链接对象
17.表单编辑完成之后,来编辑网页的动态内容,使用户可以通过该网页中表单的提交实现登录功能。
打开“服务器行为”面板,单击添按钮,执行菜单“用户身份验证”|“登录用户”,如图
18.打开“登录用户”对话框,各项参数设置如图
19.单击确定后,返回“文档”窗口。
在“服务器行为”面板中就增加了一个“登录用户”行为,如图
20.表单对象对应的“属性”面板的动作属性值如图所示,为<%=MM_LoginAction%>,这是dreamweaver自动生成的动作代码。
21.保存到本地站点,完成首页的制作
(二)登录成功和登录失败页面的制作
登录如果不正确,就会转到loginfail.asp页面;如果登录信息正确,就会转到welcome.asp页面。
1.创建新ASP网页并保存为loginfail.asp在网站根目录下,在“布局”下拉菜单中选择“无”,;
2.登录失败页面设计如图所示。
在文档中选择“这里”文本,加入超级链接指向index.asp
3.保存,完成创建
下面制作welcome.asp页面
1.创建新ASP网页并保存为welcome.asp在网站根目录下;
2.类似的方法制作静态部分,如图
3.执行“窗口”|“绑定”,打开“绑定”面板,单击添加按钮,选择“阶段变量”定义一个阶段变量,如图所示
4.打开“阶段变量”对话框。
在名称中输入MM_username,单击确定
5.在文档窗口拖动鼠标选择“XXXXXX”文本,然后在“绑定”面板中选择MM_username变量,再单击“绑定”面板底部的“插入”按钮,将其插入到该“文档”的指定位置。
完了就可以看到“XXXXXX”被{Session.MM_username}代替,如图所示
6.在文档中选中“注销你的用户”文本。
执行“窗口”|“服务器行为”|“用户身份验证”|“注销用户”
7.打开“注销用户”对话框进行设置。
●“在以下情况下注销”用于设置注销,在本实验中选中“单击链接”,在右边下拉菜单中选择“注销你的用户”
●“在完成后,转到”用于设置注销后显示的页面,在右侧文本框输入logoot.asp,如图
8.确定之后返回“文档”窗口。
在“服务器行为”中就添加了一个“注销用户”行为,同时可以看到“注销用户”链接文本对应的“属性”面板中的“链接”属性值是<%=MM_Logout%>,这是dreamweaver自动生成
9.logoot.asp的页面设置比较简单,不做详细说明,在页面的“这里”指定一个链接到首页index.asp就可以了,如图
10.保存到本地站点。
就可以进行测试该系统的执行情况了。
文档中的“修改您的注册资料”链接到userupdate.asp页面,此页面在后面的修改中进行介绍。
(三)用户登录系统功能的测试
制作好系统后,需要测试才能上传到服务器使用,步骤如下:
1.打开IE,输入http:
//127.0.0.1/index.asp,打开index.asp
2.在“用户名”和“密码”文本框输入,单击“登录”
3.如果登录信息错误,就会转到loginfail.asp
4.如果正确,则显示登录成功页面。
这里输入的是预设在数据库中的用户admin,成功就会转到welcome.asp
5.如果想注销,只需要单击“注销你的用户”即可,就会转到logoot.asp,然后单击“这里”回到首页。
6.至此登录功能测试完成
四、用户注册模块的设计
该模块是实现新用户注册功能
(一)用户注册页面
用户注册的操作就是向member.mdb数据库的member表中添加记录的操作,如图
1.创建新ASP网页并保存为register.asp在网站根目录下,在“布局”下拉菜单中选择“无”,
2.在dreamweaver中使用静态页面的工具完成如图所示的静态部分,这里说明的是在注册时需要加入一个“隐藏区域”并命名为authority,设置默认值为0,即所有的用户注册的时候默认是一般访问用户
3.还需要设置一个验证表单的动作,用来检查访问者在表单中填写的内容是否满足数据库中表user中字段的要求。
在将用户填写的注册资料提交到服务器之前,就会对用户填写的资料进行验证。
如果有不符合要求的信息,可以向访问者显示错误的原因,并让访问者重新输入。
4.执行菜单“窗口”|“行为”,打开行为面板的添加按钮,从打开的行为列表中选择“检查表单”,打开如图
本试验中,设置username、password、password1、answer、truename、address文本域为“值:
必需的”,“可接受:
任何东西”,也就是说这几个文本域必填不能空;tel和QQ文本域验证条件为“值:
必需的”,“可接受:
数字”,表示这两个必须填写数字不能为空;e-mail文本域的验证条件是“值:
必需的”,“可接受:
电子邮件”,表示该文本域必须填写电子邮件地址不能为空
5.设置完成,点击确定
6.在文档窗口单击工具栏中的“代码”按钮,在验证表单的动作代码中加入如下:
编辑完成后,单击“设计”按钮,返回文档窗口
此时,可以测试一下执行的结果
7.在该网页中添加一个“插入记录”的服务器行为。
执行“窗口”|“服务器行为”,打开“服务器行为”面板,单击添加按钮,选择“插入记录”。
8.在对话框中设置:
●从“连接”下拉列表框选择user作为数据源连接对象
●从“插入到表格”下拉列表框选择member作为使用的数据库表对象
●在“插入后,转到”文本框中设置记录成功添加到表member后,转到regok.asp
●在对话框下半部分,将网页中的表单对象和数据库中表member中的字段一一对应,如图
9.设置完成后,单击确定,返回“文档”窗口,如图
10.设置检查用户名是否重复。
单击“服务器行为”上的添加按钮,在弹出的菜单中,执行“用户身份验证”|“检查新用户名”命令,在对话框中设置如下:
●在“用户名字段”下拉列表框中选择username字段
●在“如果已存在,转到”文本框中输入regfail.asp,该网页将在后面编辑
●设置完成如图
11.设置完成后,将该文档保存到本地站点中,完成本页制作。
(二)注册成功和注册失败页面
为了方便登录,应该在regok.asp中设置一个转到index.asp的文字链接。
同时为了方便访问者重新进行注册,则应该在regfail.asp页面设置一个转到register.asp页面的文字链接。
1.创建新ASP网页并保存为regok.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。
单击“确定”,由于已经存在,浏览器会转到regfail.asp,如图,告诉访问者用户名已经存在。
此时,注册者可以单击“这里”返回register.asp,以重新注册。
4.在该注册页面填写任意注册资料
5.单击“确定”,浏览器会转到regok.asp页面,此时,访问者可以单击“这里”,转到index.asp以便进行登录
6.在Access中打开用户数据库文件member.mdb,查看其中的member表对象的内容,此时可以看到在该表的最后一行多了一条刚提交的注册信息。
五、用户注册资料修改模块的设计
(一)修改资料页面
该页面主要把用户所有资料都列出,通过“更新记录”实现资料修改的功能,步骤如下:
1.首先制作用户修改资料页面。
由于和用户注册页面相似,可以通过修改register.asp页面来得到所需要的记录更新页面。
打开register.asp,“另存为”userupdate.asp
2.打开“服务器面板”,删去全部的服务器行为并修改其相应的文字,修改完成后显示如图
3.打开“绑定”面板,单击添加按钮,选择“记录集(查询)”
4.在该对话框中设置“
●在“名称”输入upuser作为该“记录集”的名称
●从“连接”下拉列表框选择“user数据源”连接对象
●从“表格”下拉列表框中,选择使用的数据库表对象为member
●在“列”单选按钮组中先选中“全部”单选按钮
●在“筛选”栏中设置记录集过滤的条件为username=阶段变量/MM_userName。
完成设置后如图
5.设置完成,完成记录集的绑定
6.完成记录集的绑定后将upuser记录集中的字段绑定到页面上相应的位置上,如图
7.对于网页中的单选按钮组sex对象,单击“服务器行为”面板中的添加按钮,执行“动态表单元素”|“动态单选按钮”,设置动态单选按钮组对象。
打开“动态单选按钮”,从“单选按钮组”下拉列表框中,选择form1表单中的单选按钮组sex。
单击“选取值等于”后
按钮,从打开的“动态数据”对话框中选择记录集upuser中的sex字段。
并用相同的方法设置“密码提示问题”的列表选项,设置完成如图所示。
8.单击“服务器行为”面板上的添加按钮,选择“更新记录”,为网页添加更新记录的服务器行为
9.打开“更新记录”对话框,该对话框与插入记录的对话框相似,具体设置如图。
10.设置完成,返回“文档”窗口,将文档保存到本地站点中。
11.由于本页的MM_username值是来自上一页注册成功的用户名值,所以单独测试时会提示出错,要先登录,在登录成功的页面单击“修改您的注册资料”超链接到该页面才能产生效果。
(二)更新成功页面
用户修改注册资料成功后,就会转到userupdateok.asp。
在该页面,应该向用户显示资料修改成功的信息。
如果用户要继续修改资料为其提供一个返回到userupdate.asp的链接;如果不需要修改,则为其提供一个转到用户登陆页面index.asp页面的链接,步骤:
1.创建新ASP网页并保存为userupdateok.asp在网站根目录下
2.为了向用户提供更好的界面,应该在网页中显示用户修改的结果,以供用户检查修改是否正确。
应该首先定义一个记录集,然后将绑定的记录集插入到网页中相应的位置,方法与制作页面userupdate.asp中的方法一样。
通过在表格中添加记录集中的动态数据对象,把用户修改后的信息显示在表格中,具体操作参照之前的做法
(三)修改资料功能的测试
1.打开IE,输入http:
//127.0.0.1/index.asp,打开index.asp,在页面中登录,成功后进入welcome.asp,单击“修改您的资料”,转到userupdate.asp
2.在该页面进行一些修改,然后单击提交。
如果更新成功,浏览器转回到userupdateok.asp
3.在Access中打开用户数据库文件member.mdb,查看其中的member表对象的内容,此时可以看到,对应的记录内容已经修改
六、密码查询模块的设计
通过设置的问题和答案找到遗失的密码。
方法是判断用户提供的答案和数据库中答案是否一致,来找回密码。
(一)密码查询页面
本节主要制作密码查询页面lostpassword.asp,步骤如下:
1.创建新ASP网页并保存为lostpassword.asp在网站根目录下,在“布局”下拉菜单中选择“无”,设计的页面如图所示
2.在“文档”窗口中选中表单对象,在“属性”面板中,在“表单ID”文本框中输入form1,在“动作”文本框中输入showquestion.asp作为该表单提交的对象页面。
在“方法”下拉列表框中选择POST作为该表单的提交方式,接下来将输入用户名的文本域命名为inputname,如图
3.新建文档,输入网页标题“查询问题”,另存为showquestion.asp
4.在dreamweaver中制作静态网页,效果如图
5.在“文档”窗口选中表单对象,在“属性”面板中,在“动作”文本框中输入showpassword.asp作为该表单提交的对象页面。
在“方法”下拉列表框中选择POST作为该表单的提交方式,如图所示。
接下来将输入密码提示问题答案的文本域命名为inputanswer
6.执行“窗口”|“绑定”,打开绑定面板,单击添加按钮,选择“记录集(查询)”
7.在对话框中设置
●在“名称”文本框中输入Recordset1作为该记录集的名称
●从“连接”下拉列表框选择“user数据源”连接对象
●从“表格”下拉列表框中,选择使用的数据库表对象为member
●在“列”先选中“选定的”单选按钮,然后在下拉列表框中选择username和question
●在“筛选”栏中设置记录集过滤的条件为username:
=,表单变量:
inputname,表示根据数据库中username字段的内容是否和从上一个网页中的表单中的inputname表单对象传递过来的信息完全一致来过滤记录对象。
完成设置后如图
8.设置完成,关闭对话框,返回到“文档”窗口
9.将Recordset1记录集中的question字段绑定到页面上相应的位置,如图
10.执行“插入记录”|“表单”|“隐藏域”,在表单中插入一个表单隐藏域,然后将该隐藏域的名称设置为username
11.选中该隐藏域,转到“绑定”面板,将Recordset1记录集中的username字段绑定到该表单隐藏域中,如图。
(当用户输入的用户名不存在,即记录集Recordset1为空时,就会导致该页面不能正常显示,这就需要设置隐藏区域)
12.在“文档”窗口中选中当用户输入用户名存在时显示的内容即整个表单,然后单击“服务器行为”的添加按钮,在弹出的菜单中,执行“显示区域”|“如果记录集不为空则显示区域”,在对话框中选择记录集对象为Recordset1。
这样只有当记录集Recordset1不为空,才显示出来。
设置完成单击确定关闭对话框,返回到“文档”窗口。
13.在网页中编辑显示用户名不存在时的文本“该用户名不存在!
”,并为这些内容设置一个“如果记录集为空则显示区域”隐藏区域服务器行为,这样当记录集Recordset1为空时,显示这些文本,完成后如图所示
(二)完善密码查询功能页面
当用户在showquestion.asp输入答案,提交后服务器就会提交到showpassword.asp。
下面就来设计该页面。
1.创建新ASP网页并保存为showpassword.asp在网站根目录下,在“布局”下拉菜单中选择“无”
2.在dreamweaver中制作如图所示的静态部分
3.打开“绑定”面板,单击添加按钮,选择“记录集(查询)”
4.在对话框中设置
●在“名称”文本框中输入Recordset1作为该记录集的名称
●从“连接”下拉列表框选择“user数据源”连接对象
●从“表格”下拉列表框中,选择使用的数据库表对象为member
●在“列”先选中“选定的”单选按钮,然后在下拉列表框中选择username、password和answer三个字段
●在“筛选”栏中设置记录集过滤的条件为answer为=,表单变量为inputanswer,表示根据数据库中answer字段的内容是否和从上一个网页中的表单中的inputanswer表单对象传递过来的信息完全一致来过滤记录对象。
完成设置后如图
5.单击确定,关闭对话框,返回“文档”窗口
6.将记录集中username和password两个字段分别添加到网页中,如图
7.同样需要根据记录集Recordset1是否为空,为该网页中的内容设置隐藏区域的服务器行为。
在“文档”窗口,选中当用户输入密码提示问题答案正确时显示的内容,然后单击“服务器行为”的添加按钮,在弹出的菜单,执行“显示区域”|“如果记录集不为空则显示区域”,在对话框中选择记录集对象为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的链接