PHP 实现用户注册登录功能（四）

栏目: CSS · CSS3 · 发布时间: 5年前

内容简介：本实验将对现有的程序代码进行优化完善，并增加新的功能以及访问权限的控制。你可以通过以下方式获取本项目的全部示例代码：查看

功能完善

一、实验介绍

1.1 实验内容

本实验将对现有的程序代码进行优化完善，并增加新的功能以及访问权限的控制。

1.2 实验知识点

记住我

1.3 实验环境

sublime，一个方便快速的文本编辑器。点击桌面左下角：应用程序菜单/开发/sublime。

MySQL，使用下面的命令开启服务：

$ sudo service mysql start        # 使用上一个实验建立的数据库和数据表

开启服务器：

$ php -S localhost:80 #若不能启动成功，可将端口号换为 8080

1.4 源码下载

你可以通过以下方式获取本项目的全部示例代码：

wget http://labfile.oss.aliyuncs.com/courses/587/web.zip

二、前端优化

2.1 HTML复用

查看 index.php 代码，我们可以把整个网页分为三大区域：头部（header）、导航栏（nav）、主体（container）、底部（footer）。其中头部，导航栏和底部基本是每个页面都需要使用到的部分，只有主体的内容会发生变化。所以我们可以想办法把 header nav 和 footer 提取出来，作为单独的部件，index 页面通过引入文件的方式再把他们引入到自身。这样一来，提取出来的 header nav 和 footer 也可以供其他需要的页面使用而不用单独在每个页面上都手写一份。这种方式类似于模板布局。

首先在 public 目录下建立一个 layouts 的目录，用于存放提取出来的部件。在其下建立 header.php ，nav.php， footer.php。

将 index.php 中的相应代码剪切进来：

header.php

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="public/img/favicon.ico">

    <title>web page</title>

    <!-- Bootstrap core CSS -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href= "public/css/start.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="public/css/footer.css">
  </head>

nav.php

<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">ShiYanLou</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <!-- 这里做了修改 -->
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#Register" data-toggle="modal" data-target="#register">Register</a></li>
            <li><a href="#Register" data-toggle="modal" data-target="#login">Login</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

footer.php

<!-- 网页底部 -->
<footer class="footer">
  <div class="container">
    <p class="text-muted">
    <h2><a href="http://www.shiyanlou.com" title="www.shiyanlou.com" style="color: blue;">www.shiyanlou.com</a></h2>
    </p>
  </div>
</footer>

在 index.php 中引入对应文件：

<!DOCTYPE html>
<html lang="zh-CN">
  <!-- header部分 -->
  <?php require_once 'public/layouts/header.php' ?>

  <body>
  <!-- 导航栏 -->
  <?php require_once 'public/layouts/nav.php' ?>
  <!-- 页面主体内容 -->
    <div class="container">
        <!-- 表单部分（略） -->
       </div><!-- /.container -->

    <!-- 网页底部 -->
    <?php require_once 'public/layouts/footer.php'; ?>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="public/js/check.js"></script>
  </body>
</html>

上面用到了一个函数：require_once ，那就有必要了解一下require、 require_once 、 include 、include_once 的区别。

require：和include 几乎完全一样，除了处理失败的方式不同之外。 require 在出错时产生 E_COMPILE_ERROR 级别的错误。换句话说将导致脚本中止而include 只产生警告 E_WARNING ），脚本会继续运行。

require_once：和require 语句完全相同，唯一区别是 PHP 会检查该文件是否已经被包含过，如果是则不会再次包含。

include：同上 require。

include_once ：在脚本执行期间包含并运行指定文件。此行为和include 语句类似，唯一区别是如果该文件中已经被包含过，则不会再次包含。如同此语句名字暗示的那样，只会包含一次。

再次打开网页，你会发现没有任何变化。说明我们的操作是成功的。

2.2 建立用户主页

我们往往更希望把用户的主页作为 index.php ,那我们就把之前那个首页文件重命名为 welcome.php 作为欢迎界面。新建一个 index.php 文件作为用户主页。我们还是可以沿用 welcome.php 的风格样式。所以，把 2.1 中的 index.php 的代码复制到现在的 index.php 中，把表单部分去掉，添加用户首页需要展示的内容：

<?php         
session_start();        //开启session会话
//此处添加PHP代码
?>
<!DOCTYPE html>
***
***
<!-- 页面主体内容 -->
    <div class="container">
      <div class="content">
          <div class="starter-template">
             <!-- 这里做了修改，其他地方自由发挥 -->
            <h1>Welcome To ShiYanLou</h1>
            <div class="jumbotron">
              <!-- 打印用户名 -->
              <h1>Hello, <?php echo $_SESSION['user']; ?>！</h1>
              <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
              <p><a class="btn btn-primary btn-lg" href="http://www.shiyanlou.com" role="button">Learn more</a></p>
            </div>
          </div>  
      </div>
    </div><!-- /.container -->

这里我在主体内容中使用了 bootstrap 中的巨幕组件，并将登录用户的用户名打印出来，由于使用了 session ,所以我们需要在顶部首先开启 session：

PHP 实现用户注册登录功能（四）

2.3 浏览限制与细节处理

index.php 作为我们的用户主页，应该只能允许已登录的当前用户查看。如果用户未登陆，我们应该将其跳转到 welcome.php 让用户注册或登陆。如果用户已经登陆的，那么只能让他进入主页中去，而不能让他再次进入 welcome.php 中去登陆或者注册。因此我们需要对用户做一些浏览限制：

在 index.php 顶部的 php 代码段单继续添加如下代码：

//未登录，跳转至欢迎界面
if (!isset($_SESSION['user'])) {
  header('location:welcome.php');
  exit();   //防止继续执行
}

在 welcome.php 顶部添加 php 代码：

<?php 
    session_start();    //首先要开始 session
    //已登录，跳转至主页
  if (isset($_SESSION['user'])) {
    header('location:index.php');
    exit();
  }
 ?>

细心的你可能已经注意到了，在我们的用户主页的导航栏上，还有 register 和 login 的按钮，这是不应该在主页上出现的。所以我们需要修改导航栏部分的展示效果，编辑 /public/layouts/nav.php ：

<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Menu</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">ShiYanLou</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <?php 
              if (!isset($_SESSION['user'])) {
           ?>
            <li><a href="#Register" data-toggle="modal" data-target="#register">Register</a></li>
            <li><a href="#Register" data-toggle="modal" data-target="#login">Login</a></li>
            <?php
               }else{ 
             ?>
              <li><a href="http://www.shiyanlou.com" >Learn</a></li>
              <li><a href="admin/Logout.php" >Logout</a></li>
            <?php
               } 
             ?>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

我在上面的导航栏部分，添加了判断条件，如果已经登陆进入了用户主页，则像是 Learn 和 Logout 按钮。否则用户现在处于欢迎界面，就应该显示 Register 和 Login 按钮。

这里需要使用登出的方法，所以我们现在应该在 admin 新建一个 Logout.php 文件来完成登出的功能。

Logout.php :

<?php 
session_start();
unset($_SESSION['user']);
echo "<script>alert('You hava logouted!');location.href = '/welcome.php'</script>";

现在，我们的细节和浏览限制已经完成了。如果你还觉得有什么不足之处，你可以继续完善。

PHP 实现用户注册登录功能（四）

三、实现记住我功能

我们经常在登陆的时候会看到这个选项，使用这个选项，只要不清除浏览器数据，下次访问网站时可以自动登陆，这是非常方便的一个功能。之所以这个功能放到这里来实现，是因为这个选项不是必须的，对于一些对安全要求比较高的网站，是不提供这个功能。比如淘宝等。使用 cookie 实现自动登录具有一定的安全风险，如果在真实的项目中对 cookie 的处理一定要谨慎，对于一般的网站则不需要考虑太多。我们之前实现的那些功能都是比较通用的。接下来我们可以把自动登录的功能加入到我们的项目中。

首先，在登陆表单添加 Remember Me 选项(默认 yes)：

<div class="form-group">
  <label for="password" class="col-sm-4 control-label">Remember Me:</label>
  <div class="col-sm-3">
    <label class="checkbox-inline">
      <input type="radio" name="rem" id="yes" value="1" checked> Yes
    </label>
    <label class="checkbox-inline">
      <input type="radio" name="rem" id="no" value="0"> No
    </label>
  </div>
</div>

其次，修改后台登陆处理程序：
```
private $rem;    //添加记住我私有属性
*****
$this->rem = $_POST['rem'];        //构造方法中获取记住我参数

//在登陆成功之后，跳转页面之前添加判断，若 记住我，则将标识保存到session中
if ($this->rem == 1) {
  $_SESSION['rem'] = '1';
}
```
这里可能有人会有疑惑，为什么不在这里直接使用setcookie() 函数，而是保存到session中。如果你在这里设置了cookie，打开浏览器，使用开发者工具查看网络请求，你就会发现，从登陆成功再到跳转至用户主页的过程中，访问 index.php 的请求 header 部分中的 Request Headers 中包含了你刚才设置的 cookie ，而不是在 Response Header 中,很明显，当我们关闭了浏览器，这个 cookie 就不存在。更多的关于 response cookie 和 request cookie 的区别，可以到网上去查阅相关的资料。

生成 cookie 并自动登陆：

修改 index.php 上方 php 代码：

if (!isset($_SESSION['user'])) {    //未登录
  if (isset($_COOKIE['user'])) {    //是否存在 cookie
    $_SESSION['user'] = $_COOKIE['user'];    //存在，自动登陆
  }else{
    header('location:welcome.php');     //不存在，跳转至欢迎界面
  }
}
if (isset($_SESSION['rem'])) {        //如果 session 中有 记住我 的标识，则在本页面生成用户名的 cookie，有效时间为一个小时（可以调节）
  setcookie('user',$_SESSION['user'],time()+3600);
  unset($_SESSION['rem']);    //清除本条session
}

清除 cookie ：

既然上面生成了 cookie ，那么当我们进行登出操作时，就应该将其清理掉。所以在 Logout.php 中添加一句代码：
```
unset($_COOKIE['user']);
```
OK ！现在我们的项目已经实现了 记住我 这样一个功能。基本上完成了本次项目的全部功能。

四、实验总结

本课程通过四次实验操作，带领大家从页面制作到最后的功能完善，既学到了前端的知识，也对后端技术有了一定的了解。这也是成为一名合格的PHP程序员所必须掌握的本领。相信通过本次课程的学习，大家以后自己搭建网站的时候，可以很轻松的实现用户注册登陆模块的功能。当然，因为作者的能力有限，文档中难免会有这样那样的不足之处，一些构思或者实现方法可能不是最优的，也欢迎各位在课程评论中指出。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

JavaScript经典实例

Shelley Powers / 李强 / 中国电力出版社 / 2012-3 / 78.00元

《JavaScript经典实例》各节中的完整代码解决了常见的编程问题，并且给出了在任何浏览器中构建Web应用程序的技术。只需要将这些代码示例复制并粘贴到你自己的项目中就行了，可以快速完成工作，并且在此过程中学习JavaScript的很多知识。你还将学习如何利用ECMAScript5和HTML5中的最新功能，包括新的跨域挂件通信技术、HTML5的video和audio元素，以及绘制画布。《JavaS......一起来看看《JavaScript经典实例》这本书的介绍吧!

码农工具

PHP 实现用户注册登录功能（四）

功能完善

一、实验介绍

1.1 实验内容

1.2 实验知识点

1.3 实验环境

1.4 源码下载

二、前端优化

2.1 HTML复用

2.2 建立用户主页

2.3 浏览限制与细节处理

三、实现记住我功能

四、实验总结

JavaScript经典实例

URL 编码/解码

html转js在线工具

正则表达式在线测试