PHP 实现用户注册登录功能

绝地灬酷狼 2022-04-06 07:22 974阅读 0赞

# 前端页面制作 #

## 一、介绍 ##

### 1.1 基础内容 ###

本次实验主要以前端制作为主要内容，使用纯前端知识制作用户注册登录的界面，为后续实验做铺垫。通过本实验的学习，我们可以轻松地制作类似的界面效果。由于这是 PHP 的项目课，所以我们并不需要一行一行的写 html 代码，本次课程的界面制作主要使用前端框架 bootstrap3 的模板和组件来快速搭建大方漂亮的界面，大家也会领略到 bootstrap 框架的方便之处。

如果你对页面制作不感兴趣或者对这方面比较熟悉，可以跳过本次实验，直接下载使用实验文档最后提供的代码文件。

### 1.2 知识点 ###

*  Bootstrap3页面布局
 *  Jquery脚本编写
 *  Ajax异步通信

### 1.3 实验环境 ###

*  编程环境：Ubuntu1404
 *  MySQL数据库
 *  PHP内置服务器
 *  sublime，一个方便快速的文本编辑器。点击桌面左下角： 应用程序菜单/开发/sublime。

### 1.4 最终效果图 ###

![æ¤å¤è¾å¥å¾ççæè¿°][format_png]

![æ¤å¤è¾å¥å¾ççæè¿°][format_png 1]

### 1.5 代码获取 ###

你可以通过下面命令将代码下载到环境中，作为参照对比进行学习

wget http://labfile.oss.aliyuncs.com/courses/587/index.php
    wget http://labfile.oss.aliyuncs.com/courses/587/check.js

## 二、实验步骤 ##

### 2.1 页面制作 ###

2.1.1 主页

首先在 `/home/Code` 目录下建立一个 `web` 文件夹作为我们的网站根目录，在该目录下建立 `index.php` 作为网站首页。使用 `sublime` 打开`web` 文件夹，对 `index.php` 编辑：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Index</title>
        <link rel="stylesheet" href="">
    </head>
    <body>
        <h1>hello shiyanlou</h1>
    </body>
    </html>

接下来启动服务器，自 `PHP5.4`之后 PHP 内置了一个 Web 服务器，因此我们可以很方便地运行服务器，在 `web` 目录下执行以下命令：

$ php -S localhost:80   #若启动失败，可将端口号换为 8080

不出意外地话，我们的服务器就启动了，打开浏览器，输入 URL ：localhost:80

![æ¤å¤è¾å¥å¾ççæè¿°][format_png 2]

好了，接下来我们将对这个页面进行精心的制作！

2.1.2 模板挑选

由于我们的课程是 PHP 的项目课，所以我们的重点不是去设计精美的界面，但是也不能太随意应付，毕竟写出来也要给别人欣赏。所以我们可以到网上去寻找好看免费的模板，自己再进行加工，就是自己的作品了。本课程主要使用 bootstrap 框架制作界面，所以首先应该去 bootstrap 官网去看看相关的优秀作品。大家平时开发也可以到上面去寻找一丝创作灵感。

![å®ä¾][format_png 3]

经过一番寻找，我选择了这个模板：

![æ¨¡æ¿][format_png 4]

大家也可以选择自己喜欢的模板，制作出自己喜欢的界面。我将会对这个模板页面进行一下改造，首先，先教大家如何使用这个模板。

*  复制源代码：查看该模板的源代码，全部复制并粘贴到我们自己 `index.php` 中(覆盖之前的测试代码)；
 *  使用 css：在 web 目录下建立一个 public 文件夹，并在其下建立 img，css，js文件夹，分别用来放置我们对应的文件。
    
    我们可以看到模板的源代码的header中有这样一段注释：`` 下面就是该模板所用的自定义的 css 文件。在网页中单击 css 链接，复制 css 代码，存放到 `public/css/start.css` 文件（自行建立文件）。
 *  调整引用位置：在 `index.php` 使用相对路径调整 css 文件的引用路径。
 *  标签页图标：自行找一个 ico 文件放到 `public/img` 下，并修改 `<link rel="icon" href="public/img/xxxx.ico">`，调整引用目录

2.1.3 目录结构及修改后代码

目录结构：

![ç®å½][format_png 5]

`Index.php` 代码：

<!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="public/img/favicon.ico">
    
        <title>Index</title>
    
        
        <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    
        
        <link href="public/css/start.css" rel="stylesheet">
        <link href="public/css/footer.css" rel="stylesheet">
      </head>
    
      <body>
        
        <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="#">Project name</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">Register</a></li>
                <li><a href="#login">Login</a></li>
              </ul>
            </div>
          </div>
        </nav>
        
        <div class="container">
                <div class="content">
                  <div class="starter-template">
                    
                    <h1>Welcome To ShiYanLou</h1>
                    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
                  </div>    
                </div>
        </div>
    
        
        <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>
    
        
        
        <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>
      </body>
    </html>

这里我还添加了一个网页的 `footer`，对应的 `footer.css` 文件代码：

/* Sticky footer styles
    -------------------------------------------------- */
    .footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      /* Set the fixed height of the footer here */
      height: 60px;
      text-align:center;
      background-color: #f5f5f5;
    }

对应的 `start.css` 的代码：

body {
      padding-top: 50px;
    }
    .starter-template {
      padding: 40px 15px;
      text-align: center;
    }

现在再次打开 localhost:80 ,应该就可以看到一个漂亮的首页了，而且还是响应式的布局。这里展示我的首页！

![æ¤å¤è¾å¥å¾ççæè¿°][format_png 6]

2.1.4 注册表单制作

我们将把注册和登陆的表单全部放到 index.php 中。为了美观，我们把表单样式做成模糊框样式的效果。

这里我们要使用到 bootstrap 的模糊框的 js 插件 [modals][] 。

把模糊框的代码片段放到 `container` 的 div 中去。将它作为注册的表单。同时修改导航栏的 `register` 按钮的相关参数和模糊框的id，使之与模糊框对应起来。

<li><a href="#Register" data-toggle="modal" data-target="#register">Register</a></li>

注册表单代码：

<div class="container">
          <div class="content">
              <div class="starter-template">
                    
                <h1>Welcome To ShiYanLou</h1>
                <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
              </div>  
              
              <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="register" aria-labelledby="myLargeModalLabel">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myModalLabel">Register</h4>
                  </div>
                  <form action="" method="post" accept-charset="utf-8" class="form-horizontal">
                    <div class="modal-body">
    
                      <div class="form-group">
                        <label for="username" class="col-sm-4 control-label">Name:</label>
                        <div class="col-sm-6">
                          <input type="text" class="form-control" name="username" id="username" minlength="2" maxlength="20" placeholder="username" required="">
                        </div>
                        
                        <h6 style="color: red;" id="dis_un"></h6>
                      </div>
    
                      <div class="form-group">
                        <label for="email" class="col-sm-4 control-label">Email:</label>
                        <div class="col-sm-6">
                          <input type="email" class="form-control" name="email" id="remail" placeholder="Email" required="">
                        </div>
                        
                        <h6 style="color: red;" id="dis_em"></h6>
                      </div>
    
                      <div class="form-group">
                        <label for="password" class="col-sm-4 control-label">Password:</label>
                        <div class="col-sm-6">
                          <input type="password" class="form-control" name="password" id="password" placeholder="password" minlength="6" maxlength="20" required="">
                        </div>
                        
                        <h6 style="color: red;" id="dis_pwd"></h6>
                      </div>
    
                      <div class="form-group">
                        <label for="confirm" class="col-sm-4 control-label">Confirm password:</label>
                        <div class="col-sm-6">
                          <input type="password" class="form-control" name="confirm" id="confirm" placeholder="confirm" minlength="6" maxlength="20" required="">
                        </div>
                        
                        <h6 style="color: red;" id="dis_con_pwd"></h6>
                      </div>
    
                      <div class="form-group">
                        <label for="code" class="col-sm-4 control-label"> verification code :</label>
                        <div class="col-sm-6">
                          <input type="text" class="form-control" name="code" id="code" placeholder="verification code" required="" maxlength="4" size="100">
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="col-sm-12" style="center">
                          <img src="#" alt="" id="codeimg" >
                          <a href="#" title="Switch">Click to Switch</a>
                        </div>
                      </div>
                    </div>
    
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal" style="float: left;">Close</button>
                      <input type="reset" class="btn btn-warning" value ="reset" />
                      <button type="submit" class="btn btn-primary" id="reg">register</button>
                    </div>
                  </form>
                  </div>
                </div>
              </div>
          </div>
    
        </div>

修改完以上代码，保存之后，再次打开主页，点击 register 按钮，就能看到一个好看的模糊框表单：

![register][]

2.1.5 登陆表单制作

参照注册表单相似的做法，我们快速搭建一个登录表单

修改导航栏菜单：

<li><a href="#Login" data-toggle="modal" data-target="#login">Login</a></li>

在注册表单之后添加以下登陆表单代码：

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="login" aria-labelledby="myLargeModalLabel">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myModalLabel">Login</h4>
                  </div>
                  <form action="" method="post" accept-charset="utf-8" class="form-horizontal">
                    <div class="modal-body">
    
                      <div class="form-group">
                        <label for="email" class="col-sm-4 control-label">Email:</label>
                        <div class="col-sm-6">
                          <input type="email" class="form-control" name="email" id="email" placeholder="Email" required="">
                        </div>
                      </div>
    
                      <div class="form-group">
                        <label for="password" class="col-sm-4 control-label">Password:</label>
                        <div class="col-sm-6">
                          <input type="password" class="form-control" name="password" placeholder="password" minlength="6" maxlength="20" required="">
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="code" class="col-sm-4 control-label"> verification code :</label>
                        <div class="col-sm-6">
                          <input type="text" class="form-control" name="code" id="code" placeholder="verification code" required="" maxlength="4">
                        </div>
                      </div>
    
                      <div class="form-group">
                        <div class="col-sm-12" style="text-align:center">
                          <img src="#" alt="" id="codeimg">
                          <span>Click to Switch</span>
                        </div>
                      </div>
    
                    </div>
    
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal" style="float: left;">Close</button>
                      <input type="reset" class="btn btn-warning" value ="reset" />
                      <button type="submit" class="btn btn-primary" name="login">Login</button>
                    </div>
                  </form>
                  </div>
                </div>
              </div>

现在打开主页，点击登陆按钮。

![login][]

### 2.2 Js 脚本编写 ###

2.2.1 分析脚本功能

我们经常会填写各种各样的表单，也经常会有这样的体验：当你输入数据有误或者不符合规范时候，表单页面就会给出各种错误提示，让你去改正。比如让你输入邮箱地址，你却输入了电话号码，这就是不符合规范的。当你填写用户名的时候，如果网站要求用户名具有唯一性，那么就需要对你的用户名进行检测，并给出相关提示，比如 ‘用户名已被注册’等信息。这些功能大部分都是通过前端 js 代码实现的。这样做的原因，一方面是为了让表单输入更人性化，节约输入成本。另一方面也是为了减轻后台服务器的压力。本次实验我们也会带着大家做一些表单的输入检测，如果你细心的话，可能已经注意到了，我在注册表单的输入框之后添加了对应的错误提示代码。由于注册和登陆表单功能类似，为了示范作用，我们这里只做注册表单的 js 代码，登陆部分可以留做作业，大家自己去完善。

我们需要实现的 js 功能：

*  用户名唯一性检测
 *  邮箱格式和唯一性检测
 *  密码与确认密码输入检测

Javascript库：Jquery

2.2.2 代码编写

为了目录结构的规范性，我们先在 public/js/ 下建立 check.js。并在 index.php 底部添加引入代码：

接下来就开始认真的写 js 代码了！

为了体现代码的规范性，我将各个功能封装为函数，最后再统一调用。

$(document).ready(function() {
    
        var nameFlag = true;    //准备一个用户名的可用性标识
        var emailFlag = true;    //准备一个邮箱的可用性标识
        var pwdFlag = true;   //准备一个密码的可行性标识
    
      //此处添加检测方法
      function checkName (){}        //检测用户名
      function checkEmail (){}        //邮箱检测
      function checkPassword (){}            //密码检测
      function checkSubmit (){}        //表单提交检测
    
      checkName ();
      checkEmail ();
      checkPassword ();
      checkSubmit ();
        })

2.2.3 用户名检测

这里我采用实时的方法对用户名的输入做检测：当用户输入一个字符，就做一次检测，判断合法性和唯一性。因为要检测用户名唯一性，就需要从数据库里去查找用户名，这涉及到后台代码的功能，不过现在我们只关心前台的功能，这里使用 Ajax 与后台交互，实现实时检测。代码如下:

2.2.4 注册邮箱检测

这里的邮箱输入，我们不仅需要对其做唯一性检测，还需要做格式检测，判断用户输入是否是邮箱格式。我们也需要使用 Ajax 与后台交互确认唯一性，不过不需要像用户名那样实时检测，只需要在其失去焦点之后就开始检测，代码如下：

2.2.5 密码与确认密码检测

*  密码输入的规则：不能为空，长度至少为6位。
 *  确认密码规则：不能为空，长度至少6位。当上面输入密码不为空，确认密码与输入密码须一致。

基于以上规则，实现代码：

2.2.6 提交检测

当点击表单注册按钮时，我们需要判断表单界面是否存在错误，若有误，则提示检测页面信息，否则提交。

至此，注册表单部分的js代码就写完了，可能写的不是很完善，但是希望可以抛砖引玉。大家也可以自行编写相关的 js 检测代码。

2.2.7 运行效果

当注册表单输入有误时，点击了 register 按钮：

![check][]

部分需要与后台交互配合的效果需要在后续的实验中才能实现：用户名与邮箱的唯一性检测。

## 三、实验总结 ##

本次实验主要以制作注册登陆页面为主，让大家学会如何使用免费的模板，以及相应的表单制作。虽然这是 PHP 的项目课，但是作为一名 PHP 程序员，这些简单的前端技术和简单的页面制作也是必须要掌握的。虽然做出来的页面不是很精美，但是也达到了我们想要的效果。如果有兴趣的同学，可以自行设计精美的网页。

## 四、课后作业 ##

参考注册表单的js代码，自行设计编写登陆表单的输入检测 js 脚本。

# 验证码制作 #

## 一、实验介绍 ##

### 1.1 实验内容 ###

本次实验将会带领大家使用面向对象的思想封装一个验证码类。并在注册和登陆界面展示使用。通过本次实验的学习，你将会领悟到 PHP 的 OOP 思想，以及 [GD][] 库的使用，验证码生成。

### 1.2 涉及到的知识点 ###

*  PHP编程
 *  GD库使用
 *  OOP编程

### 1.2 实验环境 ###

*  实验楼在线编程环境
 *  PHP内置服务器
 *  sublime，一个方便快速的文本编辑器。点击桌面左下角： 应用程序菜单/开发/sublime

### 1.3 效果图 ###

![éªè¯ç 1][1]

![éªè¯ç ][format_png 7]

## 二、封装验证码类 ##

### 2.1 建立目录以及准备字体 ###

在 web 目录下建立一个 `admin` 目录作为我们的后台目录，存放后台代码文件。在 `admin` 下建立一个 `fonts` 目录，用于存放制作验证码所需字体。

在 admin 下新建一个 `Captcha.php` 文件，这就是我们需要编辑的验证码类文件。

当前目录层次结构：

![æ¤å¤è¾å¥å¾ççæè¿°][format_png 8]

编辑 `Captcha.php` 文件：

<?php 
    /**
    * Captcha class
    */
    class Captcha
    {
    
        function __construct()
        {
            # code...
        }
    }

添加该类的私有属性和构造方法：

<?php 
    /**
    * Captcha class
    */
    class Captcha
    {
        private $codeNum;    //验证码位数
        private $width;    //验证码图片宽度
        private $height;    //验证码图片高度
        private $img;    //图像资源句柄
        private $lineFlag;    //是否生成干扰线条
        private $piexFlag;    //是否生成干扰点
        private $fontSize;    //字体大小
        private $code;    //验证码字符
        private $string;    //生成验证码的字符集
        private $font;    //字体
        function __construct($codeNum = 4,$height = 50,$width = 150,$fontSize = 20,$lineFlag = true,$piexFlag = true)
        {
            $this->string = 'qwertyupmkjnhbgvfcdsxa123456789';    //去除一些相近的字符
            $this->codeNum = $codeNum;
            $this->height = $height;
            $this->width = $width;
            $this->lineFlag = $lineFlag;
            $this->piexFlag = $piexFlag;
            $this->font = dirname(__FILE__).'/fonts/consola.ttf';
            $this->fontSize = $fontSize;
        }
    }

字体文件可通过以下命令下载到 fonts 目录：

$ wget http://labfile.oss.aliyuncs.com/courses/587/consola.ttf

接下来开始编写具体的方法：

*  创建图像资源句柄
    
        //创建图像资源    
        public function createImage(){
                $this->img = imagecreate($this->width, $this->height);    //创建图像资源
                imagecolorallocate($this->img,mt_rand(0,100),mt_rand(0,100),mt_rand(0,100));    //填充图像背景（使用浅色）
            }
    
    用到的相关函数
    
     *  [imagecreate][]：新建一个基于调色板的图像
     *  [imagecolorallocate][]：为一幅图像分配颜色
     *  [mt\_rand][mt_rand]：生成更好的随机数
 *  创建验证码字符串并输出到图像
    
        //创建验证码    
        public function createCode(){
                $strlen = strlen($this->string)-1;
                for ($i=0; $i < $this->codeNum; $i++) { 
                    $this->code .= $this->string[mt_rand(0,$strlen)];    //从字符集中随机取出四个字符拼接
                }
                  $_SESSION['code'] = $this->code;    //加入 session 中
        
              //计算每个字符间距
                $diff = $this->width/$this->codeNum;
                for ($i=0; $i < $this->codeNum; $i++) { 
                            //为每个字符生成颜色（使用深色）
                  $txtColor = imagecolorallocate($this->img,mt_rand(100,255),mt_rand(100,255),mt_rand(100,255));
                  //写入图像
                    imagettftext($this->img, $this->fontSize, mt_rand(-30,30), $diff*$i+mt_rand(3,8), mt_rand(20,$this->height-10), $txtColor, $this->font, $this->code[$i]);
                }
            }
    
    用到的相关函数：
    
     *  [imagettftext][]：用 TrueType 字体向图像写入文本
 *  创建干扰线条
    
        //创建干扰线条（默认四条）
        public function createLines(){
                for ($i=0; $i < 4; $i++) { 
                    $color = imagecolorallocate($this->img,mt_rand(0,155),mt_rand(0,155),mt_rand(0,155));    //使用浅色
                    imageline($this->img,mt_rand(0,$this->width),mt_rand(0,$this->height),mt_rand(0,$this->width),mt_rand(0,$this->height),$color); 
                }
            }
    
    用到的相关函数：
    
     *  [imageline][]：画一条线段
 *  创建干扰点
    
        //创建干扰点    （默认一百个点）
        public function createPiex(){
                for ($i=0; $i < 100; $i++) { 
                    $color = imagecolorallocate($this->img,mt_rand(0,255),mt_rand(0,255),mt_rand(0,255));
                    imagesetpixel($this->img,mt_rand(0,$this->width),mt_rand(0,$this->height),$color);
                }
            }
    
    使用的相关函数：
    
     *  [imagesetpixel][]：画一个单一像素
 *  对外输出图像：
    
        public function show()
            {
                $this->createImage();
                $this->createCode();
                if ($this->lineFlag) {    //是否创建干扰线条
                    $this->createLines();
                }
                if ($this->piexFlag) {    //是否创建干扰点
                    $this->createPiex();
                }
                header('Content-type:image/png');    //请求页面的内容是png格式的图像
                imagepng($this->img);    //以png格式输出图像
                imagedestroy($this->img);    //清除图像资源，释放内存
            }
    
    用到的相关函数：
    
     *  [imagepng][]：以 PNG 格式将图像输出到浏览器或文件
     *  [imagedestroy][]：销毁一图像
 *  对外提供验证码：
    
        public function getCode(){
                return $this->code;
            }

完整代码如下：

<?php 
    /**
    * Captcha class
    */
    class Captcha
    {
        private $codeNum;
        private $width;
        private $height;
        private $img;
        private $lineFlag;
        private $piexFlag;
        private $fontSize;
        private $code;
        private $string;
        private $font;
        function __construct($codeNum = 4,$height = 50,$width = 150,$fontSize = 20,$lineFlag = true,$piexFlag = true)
        {
            $this->string = 'qwertyupmkjnhbgvfcdsxa123456789';
            $this->codeNum = $codeNum;
            $this->height = $height;
            $this->width = $width;
            $this->lineFlag = $lineFlag;
            $this->piexFlag = $piexFlag;
            $this->font = dirname(__FILE__).'/fonts/consola.ttf';
            $this->fontSize = $fontSize;
        }
    
        public function createImage(){
            $this->img = imagecreate($this->width, $this->height);
            imagecolorallocate($this->img,mt_rand(0,100),mt_rand(0,100),mt_rand(0,100));
        }
    
        public function createCode(){
            $strlen = strlen($this->string)-1;
            for ($i=0; $i < $this->codeNum; $i++) { 
                $this->code .= $this->string[mt_rand(0,$strlen)];
            }
            $_SESSION['code'] = $this->code;
            $diff = $this->width/$this->codeNum;
            for ($i=0; $i < $this->codeNum; $i++) { 
                $txtColor = imagecolorallocate($this->img,mt_rand(100,255),mt_rand(100,255),mt_rand(100,255));
                imagettftext($this->img, $this->fontSize, mt_rand(-30,30), $diff*$i+mt_rand(3,8), mt_rand(20,$this->height-10), $txtColor, $this->font, $this->code[$i]);
            }
        }
    
        public function createLines(){
            for ($i=0; $i < 4; $i++) { 
                $color = imagecolorallocate($this->img,mt_rand(0,155),mt_rand(0,155),mt_rand(0,155));
                imageline($this->img,mt_rand(0,$this->width),mt_rand(0,$this->height),mt_rand(0,$this->width),mt_rand(0,$this->height),$color); 
            }
        }
    
        public function createPiexs(){
            for ($i=0; $i < 100; $i++) { 
                $color = imagecolorallocate($this->img,mt_rand(0,255),mt_rand(0,255),mt_rand(0,255));
                imagesetpixel($this->img,mt_rand(0,$this->width),mt_rand(0,$this->height),$color);
            }
        }
    
        public function show()
        {
            $this->createImage();
            $this->createCode();
            if ($this->lineFlag) {
                $this->createLines();
            }
            if ($this->piexFlag) {
                $this->createPiexs();
            }
            header('Content-type:image/png');
            imagepng($this->img);
            imagedestroy($this->img);
        }
    
        public function getCode(){
            return $this->code;
        }
    }

以上就是验证码类的全部代码。看起来确实挺简单的，不过用的图像处理函数比较多，上面相关的函数我也做了必要的链接和用途说明。这些函数也不用死记硬背，遇到不清楚的，随时查阅 PHP 官方文档，最重要的是还有中文文档。

### 2.2 使用验证码 ###

既然已经封装完毕，那就可以开始使用了。这里为了方便，直接在 `Captcha` 类的下方调用该类：

session_start(); //开启session
    $captcha = new Captcha();    //实例化验证码类(可自定义参数)
    $captcha->show();    //调用输出

## 三、前端展示 ##

后端已经准备好了验证码，前端界面就可以展示了，修改 `index.php` 中的注册与登陆表单的验证码部分：

<div class="form-group">
      <div class="col-sm-12" style="text-align: center">
          <img src="admin/Captcha.php" alt="" id="codeimg" onclick="javascript:this.src = 'admin/Captcha.php?'+Math.random();">
          <span>Click to Switch</span>
      </div>
    </div>

`img` 标签添加了点击事件的 js 代码，这样就可以实现点击更换验证码的功能！

效果图：

![ææå¾][format_png 9]

## 四、实验总结 ##

到目前为止，我们的验证码模块基本就完成了。学习到这里，大家应该对面向对象编程有了进一步的理解。也领悟到了一丝 OOP 思想。OOP 的三大特征：封装，继承，多态。我们这里只用到了一点封装的思想。大家可以继续完善和改进这个验证码类，设计出更加完美的类。这个实验我们也体会到了PHP 的函数很多，不要死记硬背，多看官方文档。

[https://www.shiyanlou.com/courses/587/labs/1968/document][https_www.shiyanlou.com_courses_587_labs_1968_document]

# 实现注册登陆功能 #

## 一、实验介绍 ##

### 1.1 实验内容 ###

本次实验将接着上次实验继续进行。利用 OOP 思想封装注册和登陆的后台逻辑，与前台配合实现注册登陆功能。

### 1.2 实验知识点 ###

*  PHP编程
 *  mysqli 扩展对数据库操作
 *  session会话

### 1.3 实验环境 ###

*  sublime，一个方便快速的文本编辑器。点击桌面左下角： 应用程序菜单/开发/sublime。
 *  MySQL数据库，使用下面的命令开启服务：
    
        $ sudo service mysql start
        # 自行建立 web 数据库，users 表：id，username，email，password
        # 可使用以下 SQL 语句建立数据表:
        CREATE TABLE users(
        id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
        username VARCHAR(20) NOT NULL,
        email VARCHAR(50) NOT NULL,
        password CHAR(32) NOT NULL
        );

*  开启服务器：
    
        $ php -S localhost:80 #若启动失败，可将端口号换为 8080

## 二、实现注册功能 ##

### 2.1 建立文件 ###

在 admin 目录下建立 `Register.php` 作为后台登陆处理程序，稍后我们将会在其中封装具体的注册逻辑。

同时修改首页中注册表单的提交地址。

新建配置文件，因为要使用到数据库，需要使用一些连接参数。我们可以单独建立一个配置文件，把这些参数都定义好。

在 web 目录下建立一个 config.php 文件，这就是我们的配置文件了，先定义一些数据库的连接参数：

<?php
    session_start();    //开启session，在其他位置引用时可以自动开始
    define('DB_HOST', '127.0.0.1');
    define('DB_NAME', 'web');
    define('DB_USER', 'root');
    define('DB_PWD', '');

前提是你在数据库里已经建立好了 `web` 数据库和 `users` 表。

### 2.2 逻辑编码 ###

*  定义类并添加属性和构造方法：
    
        <?php 
        /**
        * register
        */
        class Register
        {
            private $username;    //用户名
            private $db;    //数据库实例
            private $email;    //邮箱
            private $pwd;    //密码
            private $con;    //确认密码
            private $code;    //验证码
            function __construct()
            {
                if (!isset($_POST['type'])) {    //    若不是通过post方式访问，则返回
                    echo "<script>alert('You access the page does not exist!');history.go(-1);</script>";
                    exit();
                }
                require '../config.php';    //引入配置文件
                $this->db = new mysqli(DB_HOST,DB_USER,DB_PWD,DB_NAME) or die('数据库连接异常');    //实例化mysqli连接
            }
        }

*  判断用户名唯一性（结合前端 Ajax）
    
        public function uniqueName()
            {
              //判断是否是通过ajax方式提交数据
                if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) ) {
                    if('xmlhttprequest' == strtolower($_SERVER['HTTP_X_REQUESTED_WITH'])){
                        $this->username = $_POST['username'];    //接受post的用户名
                        $sql = "SELECT count(*) FROM users WHERE username = '".$this->username."'";        //构造查询语句
                        $count = mysqli_fetch_row($this->db->query($sql))[0];//获取结果集中索引为0的值
                        if ($count) {    //$count不为0，则存在相同的用户名
                            echo "1";
                        }else{
                            echo "0";
                        }
                    }else{    //不是ajax方式
                        echo "hello world";
                    }
                }else{    //不是ajax方式
                    echo "hello world";
                }
            }
 *  判断邮箱唯一性（结合前端 Ajax）
    
        public function uniqueEmail()
            {
                if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) ) {
                    if('xmlhttprequest' == strtolower($_SERVER['HTTP_X_REQUESTED_WITH'])){
                        $this->email = $_POST['email'];
                        $sql = "SELECT count(*) FROM users WHERE email = '".$this->email."'";
                        $count = mysqli_fetch_row($this->db->query($sql))[0];
                        if ($count) {
                            echo "1";
                        }else{
                            echo "0";
                        }
                    }else{
                        echo "hello world";
                    }
                }else{
                    echo "hello world";
                }
            }
 *  检测验证码
    
        public function checkCode()
            {
              //判断输入的验证码是否与session中的验证码一致
                if ($this->code != $_SESSION['code']) {
                    echo "<script>alert('Verification code is not correct.please try again!');history.go(-1);</script>";
                    exit();
                }
            }
 *  检测邮箱格式（正则）
    
        public function checkEmail()
            {
                $pattern = "/^([0-9A-Za-z\\-_\\.]+)@([0-9a-z]+\\.[a-z]{2,3}(\\.[a-z]{2})?)$/i";
                if (!preg_match($pattern,$this->email)) {
                    echo "<script>alert('Email format incorrect.please try again!');history.go(-1);</script>";
                    exit();
                }
            }
 *  用户名格式（长度）
    
        public function checkName()
            {
                $length = strlen($this->username);
                if (trim($this->username) == '' || $length < 2 || $length > 20) {
                    echo "<script>alert('UserName format incorrect.please try again!');history.go(-1);</script>";
                    exit();
                }
            }
 *  检测密码
    
        public function checkPwd(){
            //密码不能为空格,长度介于6至20之间
                if (trim($this->pwd) == '' || strlen($this->pwd) < 6 || strlen($this->pwd) > 20) {
                    echo "<script>alert('PassWord format incorrect.please try again!');history.go(-1);</script>";
                    exit();
                }
              //确认密码必须与密码保持一致
                if ($this->pwd != $this->con) {
                    echo "<script>alert('Confirm password do not match.please try again!');history.go(-1);</script>";
                    exit();
                }
            //加密密码
                $this->pwd = md5($this->pwd);
            }
 *  执行注册操作
    
        public function doRegister()
            {
                $this->email = $_POST['email'];        //接受参数
                $this->username = $_POST['username'];
                $this->code = $_POST['code'];
                $this->pwd = $_POST['password'];
                $this->con = $_POST['confirm'];
                $this->checkCode();    //检测数据
                $this->checkPwd();
                $this->checkName();
                $this->checkEmail();
                $sql = "INSERT INTO users (username, email, password) VALUES ('".$this->username."','".$this->email."','".$this->pwd."')";
                $result = $this->db->query($sql);        //将数据录入数据库
                if ($result) {
                    $this->db->close();        //不要忘记关闭数据库连接
                    echo "<script>alert('Successful registration, please log in!');location.href = '/';</script>";
                    exit();
                }else{
                    echo $this->db->error;
                    exit();
                }
            }
    
    看到这里，你可能会有些疑惑，前端的输入数据我们已经通过 `js`做了格式检测,，为什么这里还要做相同的检测？
    
    这涉及到一点网络安全的知识。设计web应用时，一定要牢住的一条准则就是：**永远不要相信客户端的输入** ！前端 js 检测设计得再好，在有技术基础的人面前，都形同虚设。所以，不要指望你写的那点 js 能真正对数据过滤有多大的作用，那只适用于普通用户和技术小白而已。
 *  判断请求数据类型
    
    如果你对注册页面还有印象的话，应该知道，我们提交的数据可以有三种类型。其中两种是通过 Ajax 提交，一种是通过表单页面提交，所以在设计的时候，我添加了一个 `type` 的参数以区别是哪种数据的提交。所以我们在执行相关操作之前需要加以判断：
    
        $reg = new Register();    //先实例化注册类
        switch ($_POST['type']) {    //根据传递的type执行对应操作
            case 'name':    //ajax方式提交的用户名唯一性检测
                $reg->uniqueName();
                break;
            case 'email':    //ajax方式提交的邮箱唯一性检测
                $reg->uniqueEmail();
                break;
            case 'all':        //通过表单提交的注册操作
                $reg->doRegister();
                break;
            default:
                echo "hello world";
                break;
        }

### 2.3 前端修改 ###

*  修改 js 脚本
    
    将用户名和邮箱的 ajax 请求地址稍作修改：
    
        //用户名唯一性检测
        $.post('admin/Register.php', {username: $(this).val(),type:'name'}, function(data, textStatus, xhr) {
          *****
        }
        //邮箱唯一性检测
        $.post('admin/Rregister.php', {email: $(this).val(),type: 'email'}, function(data, textStatus, xhr) {
          *****
        }
 *  修改注册表单提交地址
    
        <form action="admin/Register.php" method="post" accept-charset="utf-8" class="form-horizontal">
 *  向注册表单添加一项 `type` 的输入标签,表示这是注册表单提交：
    
        <input type="hidden" name="type" value="all">

## 三、实现登陆功能 ##

和注册功能类似，登陆功能也可以封装成为一个登陆类，其中主要的方法有以下几个：

*  检查验证码
 *  检查邮箱格式和密码格式
 *  检查用户是否存在
 *  执行登陆操作

### 3.1 封装登陆类 ###

*  首先在 admin 目录下建立一个 Login.php 作为登陆处理文件。定义类，添加属性和构造方法：
    
        <?php 
        /**
        * login
        */
        class Login
        {
            private $email;    //登陆邮箱
            private $password;    //登陆密码
            private $code;    //验证码
            function __construct()
            {
                if (!isset($_POST['login'])) {    //非 post 方式提交不被接受
                    echo "<script>alert('You access the page does not exist!');history.go(-1);</script>";
                    exit();
                }
                require '../config.php';    //引入配置文件
                $this->email = $_POST['email'];
                $this->password = $_POST['password'];
                $this->code = $_POST['code'];
            }
        }

*  检查登录邮箱格式(同上注册方法)

*  检查密码格式
    
        //验证密码格式
        public function checkPwd()
            {
                if (!trim($this->password) == '') {
                    $strlen = strlen($this->password);
                    if ($strlen < 6 || $strlen > 20) {
                        echo "<script>alert('Password length of illegal.please try again!');history.go(-1);</script>";
                        exit();
                    }else{
                        $this->password = md5($this->password);
                    }
                }else{
                    echo "<script>alert('Password cannot be blank.please try again!');history.go(-1);</script>";
                    exit();
                }
            }
 *  检查验证码（同上注册）
 *  检查用户是否存在
    
        //数据库验证
        public function checkUser()
            {
                $db = new mysqli(DB_HOST,DB_USER,DB_PWD,DB_NAME) or die('数据库连接异常');
                $sql = "SELECT username FROM users WHERE email = '".$this->email."' and password = '".$this->password."'";
                $result = mysqli_fetch_row($db->query($sql))[0];
                if (!$result) {        //不存在，登陆失败
                    echo "<script>alert('Email or password is incorrect.please try again!');history.go(-1);</script>";
                    exit();
                }else{        //用户存在，登陆成功
                    $_SESSION['user'] = $result;    //将用户名保存到 session 会话中
                    $db->close();        //不要忘记关闭数据库连接
              //输出登陆成功信息，并跳转到主页（这里暂时为登陆和注册首页）
                    echo "<script>alert('Login Success!');location.href = '/index.php'</script>";
                    exit();
                }
            }
 *  执行以上操作：
    
        public function doLogin()
            {
                $this->checkCode();
                $this->checkEmail();
                $this->checkPwd();
                $this->checkUser();
            }
 *  调用登陆类
    
        $login = new Login();
        $login->doLogin();
 *  修改登陆表单提交地址
    
        <form action="admin/Login.php" method="post" accept-charset="utf-8" class="form-horizontal">
    
    ## 四、功能测试 ##

现在当你在注册页面输入用户名和邮箱时，便可做出动态响应。

**输入有误：**

![register][register 1]

**注册成功：**

![register][register 2]

**登陆成功：**

![success][]

## 五、实验总结 ##

到目前为止，简单的用户注册登陆功能就基本实现了。不过尚有很多不足。比如跳转的用户主页没有设计，还可以添加一个 **记住我** 的功能，页面查看的权限（是否登录），提高代码复用率等等。我们将会在下一个实验继续完善我们的项目。

# 功能完善 #

## 一、实验介绍 ##

### 1.1 实验内容 ###

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

### 1.2 实验知识点 ###

*  Html代码复用
 *  建立用户主页
 *  使用 cookie 实现 `记住我` 功能并且自动登录
 *  浏览页面访问限制

### 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">
            
            <meta name="description" content="">
            <meta name="author" content="">
            <link rel="icon" href="public/img/favicon.ico">
        
            <title>web page</title>
        
            
            <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
        
            
            <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>
              </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">
      
      <?php require_once 'public/layouts/header.php' ?>
    
      <body>
      
      <?php require_once 'public/layouts/nav.php' ?>
      
        <div class="container">
            
           </div>
    
        
        <?php require_once 'public/layouts/footer.php'; ?>
    
        
        
        <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_once] ，那就有必要了解一下 [require][]、[require\_once][require_once]、[include][]、[include\_once ][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>

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

![index][]

### 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>
          </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>";

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

![æ¤å¤è¾å¥å¾ççæè¿°][format_png 10]

![æ¤å¤è¾å¥å¾ççæè¿°][format_png 11]

## 三、实现记住我功能 ##

我们经常在登陆的时候会看到这个选项，使用这个选项，只要不清除浏览器数据，下次访问网站时可以自动登陆，这是非常方便的一个功能。之所以这个功能放到这里来实现，是因为这个选项不是必须的，对于一些对安全要求比较高的网站，是不提供这个功能。比如淘宝等。使用 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()][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程序员所必须掌握的本领。相信通过本次课程的学习，大家以后自己搭建网站的时候，可以很轻松的实现用户注册登陆模块的功能。当然，因为作者的能力有限，文档中难免会有这样那样的不足之处，一些构思或者实现方法可能不是最优的，也欢迎各位在课程评论中指出。

[format_png]: /images/20220406/943e1e55a0324407bf34d0b132fbd030.png
[format_png 1]: /images/20220406/8bc13e7f98464a1e9c8779b9c4e7e836.png
[format_png 2]: /images/20220406/ba22dc8061604606944f20aa72ab6bc7.png
[format_png 3]: /images/20220406/30d4812d5ee440668f9c8615c5acac4c.png
[format_png 4]: /images/20220406/e306d0ffc3d2402b80655ad8d7cc0097.png
[format_png 5]: /images/20220406/dac7e63709c341699a754498b1c5657d.png
[format_png 6]: /images/20220406/583c8c1536e34648b5cabb35d9dd07ee.png
[modals]: http://v3.bootcss.com/javascript/#modals
[register]: /images/20220406/2d32cb590b6b4a589ee6ea287a9df792.png
[login]: /images/20220406/bfdc3e1804134302a84f20a8696be06a.png
[check]: /images/20220406/f9ccdcbfb03e4a15b9478112ce97a5cd.png
[GD]: http://php.net/manual/zh/book.image.php
[1]: /images/20220406/9a32c648a2bc4dccb052d7eb4e1d52d7.png
[format_png 7]: /images/20220406/e7883846db8c41ec8b80d9527244a092.png
[format_png 8]: /images/20220406/2d1bd34dcf61490fb1a6201de048e6d9.png
[imagecreate]: http://php.net/manual/zh/function.imagecreate.php
[imagecolorallocate]: http://php.net/manual/zh/function.imagecolorallocate.php
[mt_rand]: http://php.net/manual/zh/function.mt-rand.php
[imagettftext]: http://php.net/manual/zh/function.imagettftext.php
[imageline]: http://php.net/manual/zh/function.imageline.php
[imagesetpixel]: http://php.net/manual/zh/function.imagesetpixel.php
[imagepng]: http://php.net/manual/zh/function.imagepng.php
[imagedestroy]: http://php.net/manual/zh/function.imagedestroy.php
[format_png 9]: /images/20220406/6688574eb92d45c4ac35eb8f2276f94d.png
[https_www.shiyanlou.com_courses_587_labs_1968_document]: https://www.shiyanlou.com/courses/587/labs/1968/document
[register 1]: /images/20220406/26d0d3cc101440bcb589bd1e0e7aa79b.png
[register 2]: /images/20220406/b4d445fc1b754ba5a402a06ef3554782.png
[success]: /images/20220406/7400eaee97ab41b3ba9920f271e22e63.png
[require_once]: http://php.net/manual/zh/function.require-once.php
[require]: http://php.net/manual/zh/function.require.php
[include]: http://php.net/manual/zh/function.include.php
[include_once]: http://php.net/manual/zh/function.include-once.php
[Link 1]: http://v3.bootcss.com/components/#jumbotron
[index]: /images/20220406/6ef1160bd2f64b84912b77fd573db144.png
[format_png 10]: /images/20220406/8d21aaaa33ba49aa85e98ea461a9096a.png
[format_png 11]: /images/20220406/168215af9362422589df8701c8770df1.png
[setcookie]: http://php.net/manual/zh/function.setcookie.php