动态网页设计与制作

1、动态网页设计与制作,西藏职业技术学院,第四部分：动态页面设计,任务七：用户登录,项目简介,任务七： 用户登录,本任务将通过制作博客网站中的注册登录功能，学习设计的分析，具体功能的制作。为以后留言板和通讯录的制作做好准备。具体包括注册用户、用户登录、修改密码等。,理解表单在数据提交中的作用 理解客户端数据验证的代码 掌握服务器行为：插入记录、更新记录、登录用户、检查新用户名 Session语句的学习,知识目标,任务七： 用户登录,培养学生解决问题的能力 正确应用服务器行为解决问题 培养学生的沟通协调能力,能力目标,任务七：登录用户,效果图,任务七：登录用户,知识点,任务七：登录用户,分析设计,新

2、用户注册,用户登录,修改用户密码,注销用户,分析设计,任务七： 登录用户,任务功能结构,新用户注册,任务七： 登录用户,创建新用户注册页面文件Register.asp。通过首页用户登 录栏的“新用户注册”按钮进入Register.asp页面。注册是要求 用户输入用户名、密码和确认密码，客户端负责验证用户输入 的信息，服务器端负责读取用户提交的用户名和密码并保存于 serLogin数据表中。注册成功后转入网站首页index.sap。,制作向导,任务七 ：登录用户,创建新用户注册界面： 在“文件”窗口中，右击站点blog，在弹出的快捷菜单中选择 “新建文件”创建。 打开regester.asp文件

3、，在设计视图中插入表单。 将光标定位在表单中，插入一个行列的表格，完成新用 户注册界面设计。修改用户名、密码和确认密码的文本框名称， 分别设置为Uname,Upass和UpassOK。,制作向导,任务七 ：登录用户,添加插入记录服务器行为： 打开“服务器行为”控制面板，单击面板上的按钮，在弹 出的下拉菜单中选择“插入记录”对话框，设置相关参数。单击 “确定”按钮，将信息保存于数据表中。,制作向导,任务七 ：登录用户,添加插入记录服务器行为： 打开“服务器行为”控制面板，单击面板上的按钮，在弹 出的下拉菜单中选择“插入记录”对话框，设置相关参数。单击 “确定”按钮，将信息保存于数据表中。,制作向

4、导,任务七 ：登录用户,添加插入记录服务器行为： 打开“服务器行为”控制面板，单击面板上的按钮，在弹 出的下拉菜单中选择“插入记录”对话框，设置相关参数。单击 “确定”按钮，将信息保存于数据表中。,制作向导,任务七 ：登录用户,完善页面： 基本页面创建后，可以发现某些数据提交的不完整行和重 叠性，例如用户密码为空、出现相同的用户昵称等，因此，这 里有必要在用户提交数据之前，对其操作行为进行合理性检查。 在检查过程中，如果数据非法，则限制其提交；反之，则允许 提交数据。,用户登录,任务七： 登录用户,用户在首页的“登录区域“输入用户名和密码后，服务器负责 读取用户提交的用户名和密码。通过在数据表

5、UserLogin中查找 是否符合条件的记录，验证该登录用户的身份是否合法，登录成 功后转入index.asp，在“登录区域”显示“欢迎界面”，若登录失败 将弹出非法用户对话框，并转入index.asp提供再次登录的机会。,制作向导,任务七 ：登录用户,客户端输入信息验证： 要求用户在登录时，用户与密码文本框均不能为 空。该功能与“新用户注册”中的客户端用户输入信息 验证方法相同。,制作向导,任务七 ：登录用户,服务端登录用户身份验证 、选择首页文件index.asp“登录区域”所在的表单。 、打开“服务器行为”面板，选择“用户身份验证”“登录用户” 命令。 、打开登录用户对话框，如图所示。设

6、置完毕，单击“确 定”按钮,制作向导,任务七 ：登录用户,读取登录用户的用户名： 为了在登录成功的页面上显示用户名，所以我们还需要保存 登录用户的用户名信息。 、打开index.asp，代码视图如下图所示。注意其中已经生 成了用户的局部变量Session(“MM_Username”),该变量可以整 站通用。,制作向导,任务七 ：登录用户,、在“绑定”面板中，单击按钮，并从弹出的菜单中选择“阶段 变量”对话框中输入名称MM_Username，如图所示。单击 “确定”按钮，进入“绑定”面板，如下图所示。生成的阶段变量将随 用随调，非常方便。,修改用户密码,任务七： 登录用户,创建修改用户密码页面u

7、pdate.asp。要求显示登录用户的用 户名，提示用户输入新密码与确认密码，并将数据表UserLogin 中登录用户密码字段的值改为新密码的值，修改成功后转 入index.asp。,制作向导,任务七 ：登录用户,创建修改用户密码界面 、创建update.asp页面。打开文件，在设计视图中插入表单， 表单名为form1。 、插入一个行列的表格，完成修改用户密码界面，如效果 展示图。从“绑定”面板中拖入Session变量。,制作向导,任务七 ：登录用户,客户端用户输入信息验证： 要求新密码和确认密码的文本框值非空且相等。其操作方法 类似于新用户注册客户端信息验证。,制作向导,任务七 ：登录用户,

8、修改登录用户密码： 选择“服务器行为”“记录集查询”命令，弹出“记录集” 对话框。设置各参数,制作向导,任务七 ：登录用户,修改登录用户密码： 选择“服务器行为”“更新记录”命令，弹出“更新记录” 对话框，设置其参数,制作向导,任务七 ：登录用户,添加“设置对页的访问”的服务器行为： 为了禁止直接浏览修改登录用户密码页面update.asp， 需要添加“限制对页的访问”的服务器行为。选择“用户身份 验证”“限制对页的访问”命令，打开“限制对页的访问”的 对话框，单击“确定”按钮。,注销用户,任务七： 登录用户,在用户登录成功后，我们可以选择首页的 “index.asp”中的“注销”超链接，注销session (“MM_Username”)变量，然后当前面返回值首 页的初始状态。,制作向导,任务七 ：登录用户,（）打开index.asp文件，进入设计视图，选中文字“注销“。 （）在“服务器行为”面板中，选择“用户身份验证”“注销 用户”命令然后弹出“注销用户”对话框，单击“确定”。,程序分析,任务七： 登录用户,密码和确认密码的正确性判断： if(document.form1.Upass