当前位置:文档之家› 实训四__设计用户系统的注册及登录

实训四__设计用户系统的注册及登录

实训四设计用户系统的注册及登录一、实训目的1.能正确设计用户注册程序。

2.能正确设计用户登录程序。

3.能正确设计用户的管理程序。

二、工作任务任务1:将静态注册页面转换成动态ASP文件页面,设置表单对象。

任务2:为网页设置引用文件。

任务3:为注册页面编程,实现对填写的注册信息进行判断的功能,并将注册信息写入数据库。

任务4:为登录页面编程,实现登录功能,并出现欢迎用户登录的界面。

三、实训步骤(一)编程实现用户注册功能首先创建注册界面图1注册界面任务1操作方法:1)用dreamweaver打开前面我们所创建的动态网站,将项目三中所设计的静态注册页面reguser.html复制一份并改名为reguser.asp,其中注册部分页面如图2如所。

图2注册界面3)选择标签<form>,将其属性按图3修改,将表单名称命名为fom1,动作右侧的文本框中输入reguser.asp?act=reg,其含义为此表单提交到本页处理,并附加参数act=reg,此参数含义为表单填写完成后提交表单进行注册的参数传递,方法右侧的列表中选择post,其它方面可以忽略。

图3表单属性4)依照表1修改各个表单元素的名称,以方便程序的编写。

表1注册表单中各表单元素的名称文本名称表单元素名称文本名称表单元素名称用户名f_user固定电话f_tel1f_tel2密码f_code手机号码f_mtel姓名f_name其他联系f_contact性别f_sex提交submit 详细地址f_addr 重置reset设计思想:当用户输入注册信息时,如果用户名或密码没有填写时系统出现提示信息“用户名或密码不能为空!”,并将重新注册;如果用户名在数据库中已经存在通过判断语句系统会有弹出提示信息“用户名已经存在,请重新注册!”,本教材的其他信息并不要求必须输入,读者可以自己设计;将用户信息写入到数据库的tbl_user表中保存,注册成功时会有弹出信息“注册成功!”,单击“确定”按钮将跳转到登录页面可供用户登录,如果注册失败弹出提示信息,并说明注册失败的原因。

任务2操作方法:1)先创建一个数据库连接文件db.asp,代码:<%dim conn,dbpathset conn=Server.CreateObject("adodb.connection")DBPath = Server.MapPath("db/tygasp.mdb")conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="& DBPath%>2)打开网页的代码视图,我们在网页的最上部添加代码如下的代码如图4所示,由于数据库连接文件我们在项目五中已经完成,本项目只要使用<!--#include file="db.asp"-->语句将其引用到本页面中即可,以后的网页中也是一样:图4引用文件部分代码讲解:3)注册网页参考代码:在<body>标签后面加入如下代码,以实现注册数据的处理代码,我们编程处理参数时总是在网页的开始进行,这样如果数据有改变马上就会在下面的代码上表示出来。

至此,注册页面的功能已经完成,按F12浏览网页并进行注册测试,如按图5进行注<%@language="vbscript"%> '声明使用vbscript脚本<%option explicit%> '限制本页面引用的变量都需要定义<!--前台用户注册--> '前台用户注册注释<!--#include file="db.asp"--> '引用数据库连接文件判断用户名和密码是否为空判断是否有同名用户设置固定电话格式将表单注册信息存入tbl_user表注册是否成功的提示信息!出错后继续执行关闭记录集和清空记录集册,单击“提交”按钮,将出来图6注册成功的提示信息,单击“确定”按钮将跳转到登录界面,如果最用相同的用户名进行注册,将来出现图7的对话框,单击“确定”按钮返回注册界面,如果我们没有输入用户名或密码时将会出现图8对话框,单击“确定”按钮返回注册界面。

图5用户注册图6注册成功图7用户名存在图8用户名或密码为空设计思想:当用户提交输入注册信息也就是提交表单动作参数act=”reg”时,如果用户名或密码没有填写时系统出现提示信息“用户名或密码不能为空!”,并将重新注册,否则进行用户名的判断,如果用户名在数据库中已经存在,判断语句会弹出提示信息“用户名已经存在,请重新注册!”,所有判断合法之后将注册信息写入数据库,注册成功时会有弹出信息“注册成功!”,单击“确定”按钮将跳转到登录页面可供用户登录,如果注册失败弹出提示信息。

(二)实现用户登录功能用户登录参考代码:1)将公司主页index.html更名为index.asp,并将登录表单动作改为"index.asp?act=login",表单元素用户名改为f_user,密码改为f_code。

2)将引用文件添加到网页上方,如图9所示。

图9 index.asp引用文件部分3)用户登录部分,登录前是一个表单,如图10所示,登录后要显示用户登录的信息,如图11所示。

图10登录界面图11用户登录信息以下代码实现了此功能,代码及说明如下:4)在标签<body>后面添加用户登录和及用户注销信息的处理代码,代码及说明如下:如果session变量为空表示未登录显示登录表单如果session变量不空显示用户登录信息及退出登5)在</body>前面加下以下代码:至此登录功能设计完成,按F12进浏览测试,输入我们上次注册的数据,登录后将出现如图11所示的欢迎信息,如果用户名或密码有错,将会出现图12所示的弹出信息,单击“确定”按钮,返回登录页面。

图12登录失败弹出信息设计思想:1.在主页中用户登录前将出现登录界面,登录后由欢迎用户的界面代替原来的表单界面,如“欢迎您,某某”,并具有退出登录的功能; 2.登录数据必须是已经注册过的信息,否则会出现“登录失败,用户名或者密码错误!”的提示信息。

(三) 设计用户系统的后台管理1.显示用户的网页及编程 显示用户部分操作方法:1)制作如图13所示显示用户的表格网页,可以显示用户的注册信息,取名为admin_user.asp 。

判断用户提交表单登陆信息注销登录后,用户名和密码的session 变量赋值为空查询成功后,用户名和密码分别赋值给session 变量查询数据库中是否有相应的用户名和密码判断用户注销登陆信息关闭对象清空对象 关闭记录集 清空记录集图6.12显示用户界面2)切换到代码视图,在网页的顶部输入代码,以引用前面的数据库连接、自编函数及定义变量等,方法如模块1的任务,如图6.13所示。

图13引用文件及自定义变量3)在<body></body>中添加显示用户信息的功能代码,如下:定义recordset对象rst变量,降序排列显示用户列表,并将查询结果存入rst变量里循环读取rst变量里的用户信息,并显示在相应表格的单元格中。

Rst对象指针下移读取下条记录关闭、清空记录集添加代码和的网页设计视图如图14所示。

图14添加代码后的设计视图4)如果我们要对用户进行修改或删除,首先设计修改和删除网页,然后设计参数的提交即可,我们放到后面进行。

按F12浏览即得到用户的资料以倒序显示,如图15所示。

图15用户资料显示5)要完成用户的修改及删除,需将“修改”和“删除”的文本超链接到处理修改的文件上。

代码如下:(一) 修改用户的网页及编程 修改用户操作方法:1)如图16所示制作一张显示表单网页,用来修改用户的注册信息,取名为admin_user_modify.asp 。

图16修改用户表单网页超链接文件,指定传递参数,修改和删除具体的id 号用户2)选择标签<form>,将表单属性按图17设置,将表单名称命名为form1,动作右侧的文本框中输入“admin_user_modify.asp?act=update&id=<%=request.querystring("id")%>”,其含义为此表单提交到本页处理,并通过用户id进行修改,方法右侧的列表中选择post。

图17修改表单属性的设置3)设置表单属性,表单及表单元素的命名与我们前面的注册网页基本相同,见表2所示。

文本名称表单元素名称文本名称表单元素名称用户名f_user 固定电话f_tel密码f_code 手机号码f_mtel姓名f_name 其他联系f_contact性别f_sex 提交submit详细地址f_addr 重置reset4)考虑到用户名不能修改,直接显示就行,输入代码后的网页结构视图如图18如示。

图18添加代码后的修改表单当点击“修改”超链接里,传递参数act=modify运行admin _user_modify.asp中显示修改用户资料的表单,此表单的实现代码如下:判断参数act是否与modify相等判断数据的合法性,查询记录表单处理方法读取用户信息将密码赋为初始值5)当提交修改用户表单后,传递参数act=update 表示需要运行admin _user_modify.asp 中的修改用户信息代码,代码加入到<bod y>后“显示需要修改用户信息表单”之前,代码如下:(三)删除用户的网页及编程 任务3操作方法:1)新建一张删除网页命名为admin_user_del.asp,此网页通过用户id 删除其用户信息。

引用文件添加到网页上方,切换到代码视图,代码如下。

将表单注册信息更新存入tbl_user 表判断参数是否正确错误处理判断参数是否合法删除信息错误处理2)按F12浏览测试。

注意,为了删除安全,我们应该在删除用户信息时弹出一条提示信息,这儿可以采用一条js的代码来完成,如"targer="_blank" onClick="javascript:return confirm('您确定要删除此用户吗?');"。

(四)查询用户的网页及编程任务4操作方法:1.如图6.18所示制作一张查询用户的表单网页,取名为admin_user_ask.asp,并设计表单属性,表单名为form1,文本框命名为f_user,动作右侧的文本框中输入“admin_user_ask.asp”,其它为默认。

相关主题