Method to implement user registration and login function based on PHP-PHP Tutorial-php.cn

This course uses PHP and Web front-end technology to implement a website registration and login entry page, learn and practice PHP programming, etc. Interested students can refer to it.

This article introduces the realization of user registration and login function based on PHP. This project is divided into four parts: 1. Front-end page production, 2. Verification code production, 3. Implementation of registration and login, 4. Functional improvement. Details can be found below.

Verification code production

1. Experiment introduction

This experiment will lead you to use object-oriented thinking to encapsulate a verification code kind. And displayed on the registration and login interface. Through the study of this experiment, you will understand the OOP ideas of PHP, as well as the use of GD library and verification code generation.

1.1 Knowledge points involved

PHP
GD library
OOP Programming

1.2 Development Tools

sublime, a convenient and fast text editor. Click on the lower left corner of the desktop: Application menu/Development/sublime

2. Encapsulation verification code class

2.1 Create a directory and prepare fonts

Create an admin directory in the web directory as our backend directory to store backend code files. Create a fonts directory under admin to store the fonts required for making verification codes.

Create a new Captcha.php file under admin. This is the verification code file we need to edit.

Current directory hierarchy:

Edit Captcha.php file:

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

Copy after login

Add the private properties and construction methods of this class:

<?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 = &#39;qwertyupmkjnhbgvfcdsxa123456789&#39;;  //去除一些相近的字符
    $this->codeNum = $codeNum;
    $this->height = $height;
    $this->width = $width;
    $this->lineFlag = $lineFlag;
    $this->piexFlag = $piexFlag;
    $this->font = dirname(__FILE__).&#39;/fonts/consola.ttf&#39;;
    $this->fontSize = $fontSize;
  }
}

Copy after login

Font files can be downloaded to the fonts directory through the following command:

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

Next, start writing the specific method:

Create image resources Handle

//创建图像资源  
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));  //填充图像背景（使用浅色）
  }

Copy after login

Related functions used

imagecreate: Create a new palette-based image
imagecolorallocate: Assign a color to an image
mt_rand: Generate better random numbers

Create the verification code string and output it to the image

//创建验证码  
public function createCode(){
    $strlen = strlen($this->string)-1;
    for ($i=0; $i < $this->codeNum; $i++) { 
      $this->code .= $this->string[mt_rand(0,$strlen)];  //从字符集中随机取出四个字符拼接
    }
     $_SESSION[&#39;code&#39;] = $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]);
    }
  }

Copy after login

Related functions used

imagecreate: Create a new palette-based image
imagecolorallocate: Assign a color to an image
mt_rand: Generate better random numbers

Create a verification code string and output it to the image

//创建验证码  
public function createCode(){
    $strlen = strlen($this->string)-1;
    for ($i=0; $i < $this->codeNum; $i++) { 
      $this->code .= $this->string[mt_rand(0,$strlen)];  //从字符集中随机取出四个字符拼接
    }
     $_SESSION[&#39;code&#39;] = $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]);
    }
  }

Copy after login

Related functions used:

imagettftext: Write text to an image using TrueType fonts

Create interference lines

//创建干扰线条（默认四条）
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); 
    }
  }

Copy after login

Related functions used:

imageline: draw a line segment

Create interference points

//创建干扰点 （默认一百个点）
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);
    }
  }

Copy after login

Related functions used:

imagesetpixel: draw a single pixel

External output image:

 public function show()
  {
    $this->createImage();
    $this->createCode();
    if ($this->lineFlag) {  //是否创建干扰线条
      $this->createLines();
    }
    if ($this->piexFlag) {  //是否创建干扰点
      $this->createPiex();
    }
    header(&#39;Content-type:image/png&#39;);  //请求页面的内容是png格式的图像
    imagepng($this->img);  //以png格式输出图像
    imagedestroy($this->img);  //清除图像资源，释放内存
  }

Copy after login

Related functions used:

imagepng: Output the image to the browser or file in PNG format
imagedestroy: Destroy an image

Provide verification code to the outside world:

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 = &#39;qwertyupmkjnhbgvfcdsxa123456789&#39;;
    $this->codeNum = $codeNum;
    $this->height = $height;
    $this->width = $width;
    $this->lineFlag = $lineFlag;
    $this->piexFlag = $piexFlag;
    $this->font = dirname(__FILE__).&#39;/fonts/consola.ttf&#39;;
    $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[&#39;code&#39;] = $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(&#39;Content-type:image/png&#39;);
    imagepng($this->img);
    imagedestroy($this->img);
  }

  public function getCode(){
    return $this->code;
  }
}

Copy after login

The above is all the code for the verification code class. It does seem quite simple, but it uses a lot of image processing functions. I have also made necessary links and usage instructions for the above related functions. There is no need to memorize these functions by rote. If you encounter something unclear, please refer to the official PHP documentation at any time. The most important thing is that there are Chinese documentation.

2.2 Use the verification code

Now that it has been encapsulated, you can start using it. For convenience here, call this class directly below the Captcha class:

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

Copy after login

3. After the front-end display

The verification code has been prepared on the end, and the front-end interface can be displayed. Modify the verification code part of the registration and login form in index.php:

<p class="form-group">
 <p class="col-sm-12">
   <img src="admin/Captcha.php" alt="" id="codeimg" onclick="javascript:this.src = &#39;admin/Captcha.php?&#39;+Math.random();">
   <span>Click to Switch</span>
 </p>
</p>

Copy after login

# The js code of the click event is added to the ##img tag, so that the function of clicking to change the verification code can be realized!

Rendering:

4. Improve

So far, our verification code The module is basically complete. After studying here, everyone should have a better understanding of object-oriented programming. I also realized a bit of OOP thinking. The three major characteristics of OOP: encapsulation, inheritance, and polymorphism. We only use a little bit of the idea of encapsulation here. You can continue to refine and improve this verification code class and design a more perfect class. This experiment also tells us that PHP has many functions, so don’t memorize them by rote and read more official documents.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

Related recommendations:

phpRealizing cash red envelopes through WeChat payment

thinkPHP automatic verification, Detailed explanation of automatic addition and form error issues

phpEnterprise payment via WeChat payment

The above is the detailed content of Method to implement user registration and login function based on PHP. For more information, please follow other related articles on the PHP Chinese website!