4.2用户登录功能

4.2　用户登录功能

本小节主要介绍用户登录功能的制作，用户管理系统的第一个功能就是要提供一个所有会员进行登录的窗口。

4.2.1　设计登录页面

在用户访问该用户管理系统时，首先要进行身份验证，这个功能是靠登录页面来实现的。所以登录页面中必须有要求用户输入用户名和密码的文本框，以及输入完成后进行登录的“登录”按钮和输入错误后重新设置用户名和密码的“重置”按钮。

详细的制作步骤如下：

01　首先来看一下用户登录的首页设计，如图4-14所示。

图4-14　用户登录系统首页

02　index.php页面是用户登录系统的首页，打开前面创建的index.php页面，输入网页标题“PHP用户管理系统”，然后执行菜单栏“文件”→“保存”命令将网页标题保存。

03　执行菜单栏“修改”→“页面属性”命令，然后在“背景颜色”文本框中输入颜色值为#CCCCCC，在“上边距”文本框中输入0px，这样设置的目的是为了让页面的第一个表格能置顶到上边，并形成一个灰色底纹的页面，设置如图4-15所示。

图4-15　“页面属性”对话框

04　设置完成后单击“确定”按钮，进入“文档”窗口，执行菜单栏“插入”→“表格”命令，打开“表格”对话框，在“行数”文本框中输入需要插入表格的行数为3，在“列数”文本框中输入需要插入表格的列数为3，在“表格宽度”文本框中输入775像素，设置“边框粗细”、“单元格边距”和“间距”都为0，如图4-16所示。

图4-16　设置“表格”属性

05　单击“确定”按钮，这样就在“文档”窗口中插入了一个3行3列的表格。将鼠标放置在第1行表格中，在“属性”面板中单击“合并所选单元格，使用跨度”按钮图标，将第1行表格合并，再执行菜单栏“插入”→“图像”命令，打开“选择图像源文件”对话框，在站点images文件夹中选择图片01.gif，如图4-17所示。

图4-17　“选择图像源文件”对话框

06　单击“确定”按钮，即可在表格中插入此图片。将鼠标指针放置在第3行表格中，在“属性”面板中单击“合并所选单元格，使用跨度”按钮，将第3行所有单元格合并，再执行菜单栏“插入”→“图像”命令，打开“选择文件”对话框，在站点images文件夹中选择图片05.gif，插入一个图片，效果如图4-18所示。

图4-18　插入图片效果图

07　插入图片后，选择插入的整个表格，在“属性”面板的“对齐”下拉列表框中，选择“居中对齐”选项，让插入的表格居中对齐，如图4-19所示。

图4-19　设置“居中对齐”

08　把光标移至创建表格第2行第1列中，在“属性”面板中设置高度为456像素、宽度为179像素，设置高度和宽度根据背景图像而定，从“背景”中选择该站点中images文件夹中的02.gif文件，得到效果如图4-20所示。

图4-20　插入图片的效果图

09　在表格的第2行第2列和第3列中，分别插入同站点images文件夹中的图片03.gif和04.gif，完成网页的结构搭建，如图4-21所示。

图4-21　完成的网页背景效果图

10　单击第2行第1列单元格，然后再单击“文档”窗口上的按钮，在<td>和</td>之间加入valign="top"（表格文字和图片的相对摆放位置，可选值为top，middle，bottom）的命令，表示让鼠标能够自动地贴至该单元格的最顶部，设置如图4-22所示。

图4-22　设置单元格的对齐方式为最上

---

注意

文档工具栏中包含按钮和弹出的菜单，它们提供各种文档“窗口视图”（如“设计”、“拆分”和“代码”视图），各种查看选项和一些常用操作（如在浏览器中预览）。

---

11　单击“文档”窗口上的按钮，返回文档窗口的“设计”窗口模式，在刚创建的表格的单元格中，执行菜单栏“插入”→“表单”→“表单”命令（如图4-23所示），插入一个表单。

图4-23　执行“表单”命令

12　将鼠标指针放置在该表单中，执行菜单栏“插入”→“表格”命令，打开“表格”对话框，在“行数”文本框中输入5，在“列数”文本框中输入2。在“表格宽度”文本框中输入179像素，在该表单中插入5行2列的表格。单击并拖动鼠标分别选择第1行、第2行和第5行表格，并分别在“属性”面板中单击使用“合并所选单元格，使用跨度”按钮，将这几行表格进行合并。然后在表格的第1行输入“会员登录”四个字，在第2行第1列中输入文字说明“用户名”，在第2行第2列中执行菜单栏“插入”→“表单”→“文本域”命令，插入一个单行文本域表单对象，并定义文本域名为“username”，“文本域”属性设置如图4-24所示。

图4-24　“文本域”的设置

设置文本域的属性说明如下：

（1）在“文本域”文本框中为文本域指定一个名称，每个文本域都必须有一个惟一名称。表单对象名称不能包含空格或特殊字符。可以使用字母数字字符和下划线（-）的任意组合。请注意，为文本域指定的标签是存储该域的值（输入的数据）的变量名，这是发送给服务器进行处理的值。

（2）“字符宽度”设置域中最多可显示的字符数。“最多字符数”指定在域中最多可输入的字符数，如果保留为空白，则输入不受限制。“字符宽度”可以小于“最多字符数”，但大于字符宽度的输入则不被显示。

（3）“类型”用于指定文本域是“单行”、“多行”，还是“密码”域。单行文本域只能显示一行文字，多行则可以输入多行文字，达到字符宽度后换行，密码文本域则用于输入密码。

（4）“初始值”指定在首次载入表单时，域中显示的值。例如，通过包含说明或示例值，可以指示用户在域中输入信息。

（5）“类”可以将CSS规则应用于对象。

13　在第3行第1列表格中输入文字说明“密码”，在第3行表格的第2列中执行菜单栏“插入”→“表单”→“文本域”命令，插入密码文本域表单对象，定义“文本域”名为password。“文本域”属性设置及此时的效果如图4-25所示。

图4-25　密码“文本域”的设置

14　选择第4行单元格，执行菜单栏“插入”→“表单”→“按钮”命令两次，插入两个按钮，并分别在“属性”面板中进行属性变更，一个为登录时用的“提交表单”选项，一个为“重设置单”选项，“属性”的设置如图4-26所示。

图4-26　设置按钮名称

15　在第5行输入“注册新用户”文本，并设置一个转到用户注册页面register.php的链接对象，以方便用户注册，如图4-27所示。

图4-27　建立链接

16　如果已经注册的用户忘记了密码，还希望以其他方式能够重新获得密码，可以在表格的第4列中输入“找回密码”文本，并设置一个转到密码查询页面lostpassword.php的链接对象，方便用户取回密码，如图4-28所示。

图4-28　密码查询设置

17　表单编辑完成后，下面来编辑该网页的动态内容，使用户可以通过该网页中表单的提交实现登录功能。打开“服务器行为”面板，单击该面板上按钮，执行菜单栏“用户身份验证”→“登录用户”命令（如图4-29所示），向该网页添加“登录用户”的服务器行为。

图4-29　添加“登录用户”的服务器行为

18　打开“登录用户”对话框，各项参数设置如图4-30所示。

图4-30　“登录用户”对话框

该对话框中各项设置的作用如下：

●　从“从表单获取输入”下拉列表框中选择该服务器行为使用网页中的form1对象，设定该用户登录服务器行为的用户数据来源为表单对象中访问者填写的内容。

●　从“用户名字段”下拉列表框中选择文本域username对象，设定该用户登录服务器行为的用户名数据来源为表单的username文本域中访问者输入的内容。

●　从“密码字段”下拉列表框中选择文本域password对象，设定该用户登录服务器行为的用户名数据来源为表单的password文本域中访问者输入的内容。

●　从“使用连接验证”下拉列表框中，选择用户登录服务器行为使用的数据源连接对象为mymember。

●　从“表格”下拉列表框中，选择该用户登录服务器行为使用到的数据库表对象为member。

●　从“用户名列”下拉列表框中，选择表member存储用户名的字段为username。

●　从“密码列”下拉列表框中，选择表member存储用户密码的字段为password。

●　在“如果登录成功，转到”文本框中输入登录成功后转向welcome.php页面。

●　在“如果登录失败，转到”文本框中输入登录失败后转向loginfail.php页面。

●　选中“基于以下项限制访问”后面的“用户名和密码”单选按钮，设定后面将根据用户的用户名、密码共同决定其访问网页的权限。

19　设置完成后，单击“确定”按钮，关闭该对话框，返回到“文档”窗口。在“服务器行为”面板中就增加了一个“登录用户”行为，如图4-31所示。

图4-31　“服务器行为”面板

20　表单对象对应的“属性”面板的动作属性值为<?php echo $loginFormAction; ?>，如图4-32所示。它的作用就是实现用户登录功能，这是一个Dreamweaver自动生成的动作代码。

图4-32　表单对应的“属性”面板

21　执行菜单栏“文件”→“保存”命令，将该文档保存到本地站点中，完成网站的首页制作。

4.2.2　登录成功和失败

当用户输入的登录信息不正确时，就会转到loginfail.php页面，显示登录失败的信息。如果用户输入的登录信息正确，就会转到welcome.php页面。

（1）执行菜单栏“文件”→“新建”命令，在网站根目录下新建一个名为loginfail.php的网页并保存。

（2）登录失败页面设计如图4-33所示。在“文档”窗口中选中“这里”文本，在其对应的“属性”面板上的“链接”文本框中输入index.php，将其设置为指向index.php页面的链接。

图4-33　登录失败页面loginfail.php

（3）执行菜单栏“文件”→“保存”命令，完成loginfail.php页面的创建。

制作welcome.php页面，详细制作的步骤如下：

01　执行菜单栏“文件”→“新建”命令，在网站根目录下新建一个名为welcome.php的网页并保存。

02　用类似的方法制作登录成功页面的静态部分，如图4-34所示。

图4-34　欢迎界面的效果图

03　执行菜单栏“窗口”→“绑定”命令，打开“绑定”面板，单击该面板上按钮，在弹出的快捷菜单中选择“阶段变量”选项，为网页中定义一个阶段变量，如图4-35所示。

图4-35　添加阶段变量

---

注意

阶段变量提供了一种对象，通过这种对象，用户信息得以存储，并使该信息在用户访问的持续时间中对应用程序的所有页都可用。阶段变量还可以提供一种超时形式的安全对象，这种对象在用户账户长时间不活动的情况下，终止该用户的会话。如果用户忘记从Web站点注销，这种对象还会释放服务器内存和处理资源。

---

04　打开“阶段变量”对话框。在“名称”文本框中输入“阶段变量”的名称MM_username，如图4-36所示。

图4-36　“阶段变量”对话框

05　设置完成后，单击该对话框中的“确定”按钮，在“文档”窗口中通过拖动鼠标选择“XXXXXX”文本，然后在“绑定”面板中选择MM_username变量，再单击“绑定”面板底部的“插入”按钮，将其插入到该“文档”窗口中设定的位置。插入完毕，可以看到“XXXXXX”文本被{Session.MM_username}占位符代替，如图4-37所示。这样，就完成了这个显示登录用户名“阶段变量”的添加工作。

图4-37　插入后的效果

---

注意

设计阶段变量的目的是在用户登录成功后，登录界面中直接显示用户的名字，使网页更有亲切感。

---

06　在“文档”窗口中拖动鼠标选中“注销你的用户”文本。执行菜单栏“窗口”→“服务器行为”→“用户身份验证”→“注销用户”命令，为所选中的文本添加一个“注销用户”的服务器行为，如图4-38所示。

图4-38　“注销用户”命令

07　打开“注销用户”对话框。在该对话框中进行如图4-39所示的设置。

图4-39　设置完成后的“注销用户”对话框

08　设置完成后，单击“确定”按钮，关闭该对话框，返回到“文档”窗口。在“服务器行为”面板中增加了一个“注销用户”行为，同时可以看到“注销用户”链接文本对应的“属性”面板中的“链接”属性值为<?php echo $logoutAction ?>，它是Dreamweaver自动生成的动作对象。

09　logout.php的页面设计比较简单，不作详细说明，在页面中的“这里”处指定一个链接到首页index.php就可以了，效果如图4-40所示。

图4-40　注销用户页面设计效果图

10　执行菜单栏“文件”→“保存”命令，将该文档保存到本地站点中。编辑工作完成后，就可以测试该用户登录系统的执行情况了。文档中的“修改您的注册资料”链接到userupdate.php页面，此页面将在后面的小节中进行介绍。

4.2.3　测试登录功能

制作好一个系统后，需要测试无误，才能上传到服务器使用。下面就对登录系统进行测试，测试的步骤如下：

01　打开IE浏览器，在地址栏中输入http://127.0.0.1/member/，打开index.php页面，如图4-41所示。

图4-41　打开的网站首页

02　在“用户名”和“密码”文本框中输入用户名及密码，输入完毕，单击“登录”按钮。

03　如果在第2步中填写的登录信息是错误的，或者根本就没有输入，则浏览器就会转到登录失败页面loginfail.php，显示登录错误信息，如图4-42所示。

图4-42　登录失败页面loginfail.php效果

04　如果输入的用户名和密码都正确，则显示登录成功页面。这里输入的是前面数据库设置的用户admin，登录成功后的页面如图4-43所示，其中显示了用户名admin。

图4-43　登录成功页面welcome.php效果

05　如果想注销用户，只需要单击“注销你的用户”超链接即可，注销用户后，浏览器就会转到页面logout.php，然后单击“这里”回到首页，如图4-44所示。至此，登录功能就测试完成了。

图4-44　注销用户页面设计