基于PHP實(shí)現(xiàn)用戶注冊(cè)登錄功能

更新時(shí)間：2016年10月14日 15:21:01 作者：xiaoxiaozi

本課程通過(guò)使用PHP及Web前端技術(shù)實(shí)現(xiàn)一個(gè)網(wǎng)站注冊(cè)登錄入口頁(yè)面，學(xué)習(xí)并實(shí)踐PHP編程等，有興趣的同學(xué)可以參考一下。

本文介紹的是基于PHP實(shí)現(xiàn)用戶注冊(cè)登錄功能，本項(xiàng)目分為四部分內(nèi)容：1前端頁(yè)面制作，2驗(yàn)證碼制作，3實(shí)現(xiàn)注冊(cè)登陸，4功能完善。具體情況可以往下看。

驗(yàn)證碼制作

一、實(shí)驗(yàn)簡(jiǎn)介

本次實(shí)驗(yàn)將會(huì)帶領(lǐng)大家使用面向?qū)ο蟮乃枷敕庋b一個(gè)驗(yàn)證碼類(lèi)。并在注冊(cè)和登陸界面展示使用。通過(guò)本次實(shí)驗(yàn)的學(xué)習(xí)，你將會(huì)領(lǐng)悟到 PHP 的 OOP 思想，以及 GD 庫(kù)的使用，驗(yàn)證碼生成。

1.1 涉及到的知識(shí)點(diǎn)

PHP
GD庫(kù)
OOP編程

1.2 開(kāi)發(fā)工具

sublime，一個(gè)方便快速的文本編輯器。點(diǎn)擊桌面左下角：應(yīng)用程序菜單/開(kāi)發(fā)/sublime

二、封裝驗(yàn)證碼類(lèi)

2.1 建立目錄以及準(zhǔn)備字體

在 web 目錄下建立一個(gè) admin 目錄作為我們的后臺(tái)目錄，存放后臺(tái)代碼文件。在 admin 下建立一個(gè) fonts 目錄，用于存放制作驗(yàn)證碼所需字體。

在 admin 下新建一個(gè) Captcha.php 文件，這就是我們需要編輯的驗(yàn)證碼類(lèi)文件。

當(dāng)前目錄層次結(jié)構(gòu)：

編輯 Captcha.php 文件：

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

添加該類(lèi)的私有屬性和構(gòu)造方法：

<?php 
/**
* Captcha class
*/
class Captcha
{
  private $codeNum;  //驗(yàn)證碼位數(shù)
  private $width;  //驗(yàn)證碼圖片寬度
  private $height;  //驗(yàn)證碼圖片高度
  private $img;  //圖像資源句柄
  private $lineFlag;  //是否生成干擾線條
  private $piexFlag;  //是否生成干擾點(diǎn)
  private $fontSize;  //字體大小
  private $code;  //驗(yàn)證碼字符
  private $string;  //生成驗(yàn)證碼的字符集
  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;
  }
}

字體文件可通過(guò)以下命令下載到 fonts 目錄：

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

接下來(lái)開(kāi)始編寫(xiě)具體的方法：

創(chuàng)建圖像資源句柄

//創(chuàng)建圖像資源  
public function createImage(){
    $this->img = imagecreate($this->width, $this->height);  //創(chuàng)建圖像資源
    imagecolorallocate($this->img,mt_rand(0,100),mt_rand(0,100),mt_rand(0,100));  //填充圖像背景（使用淺色）
  }

用到的相關(guān)函數(shù)

imagecreate：新建一個(gè)基于調(diào)色板的圖像
imagecolorallocate：為一幅圖像分配顏色
mt_rand：生成更好的隨機(jī)數(shù)

創(chuàng)建驗(yàn)證碼字符串并輸出到圖像

//創(chuàng)建驗(yàn)證碼  
public function createCode(){
    $strlen = strlen($this->string)-1;
    for ($i=0; $i < $this->codeNum; $i++) { 
      $this->code .= $this->string[mt_rand(0,$strlen)];  //從字符集中隨機(jī)取出四個(gè)字符拼接
    }
     $_SESSION['code'] = $this->code;  //加入 session 中
  
   //計(jì)算每個(gè)字符間距
    $diff = $this->width/$this->codeNum;
    for ($i=0; $i < $this->codeNum; $i++) { 
          //為每個(gè)字符生成顏色（使用深色）
     $txtColor = imagecolorallocate($this->img,mt_rand(100,255),mt_rand(100,255),mt_rand(100,255));
     //寫(xiě)入圖像
      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]);
    }
  }

用到的相關(guān)函數(shù)

imagecreate：新建一個(gè)基于調(diào)色板的圖像
imagecolorallocate：為一幅圖像分配顏色
mt_rand：生成更好的隨機(jī)數(shù)

創(chuàng)建驗(yàn)證碼字符串并輸出到圖像

//創(chuàng)建驗(yàn)證碼  
public function createCode(){
    $strlen = strlen($this->string)-1;
    for ($i=0; $i < $this->codeNum; $i++) { 
      $this->code .= $this->string[mt_rand(0,$strlen)];  //從字符集中隨機(jī)取出四個(gè)字符拼接
    }
     $_SESSION['code'] = $this->code;  //加入 session 中
  
   //計(jì)算每個(gè)字符間距
    $diff = $this->width/$this->codeNum;
    for ($i=0; $i < $this->codeNum; $i++) { 
          //為每個(gè)字符生成顏色（使用深色）
     $txtColor = imagecolorallocate($this->img,mt_rand(100,255),mt_rand(100,255),mt_rand(100,255));
     //寫(xiě)入圖像
      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]);
    }
  }

用到的相關(guān)函數(shù)：

imagettftext：用 TrueType 字體向圖像寫(xiě)入文本

創(chuàng)建干擾線條

//創(chuàng)建干擾線條（默認(rèn)四條）
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); 
    }
  }

用到的相關(guān)函數(shù)：

imageline：畫(huà)一條線段

創(chuàng)建干擾點(diǎn)

//創(chuàng)建干擾點(diǎn) （默認(rèn)一百個(gè)點(diǎn)）
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);
    }
  }

使用的相關(guān)函數(shù)：

imagesetpixel：畫(huà)一個(gè)單一像素

對(duì)外輸出圖像：

 public function show()
  {
    $this->createImage();
    $this->createCode();
    if ($this->lineFlag) {  //是否創(chuàng)建干擾線條
      $this->createLines();
    }
    if ($this->piexFlag) {  //是否創(chuàng)建干擾點(diǎn)
      $this->createPiex();
    }
    header('Content-type:image/png');  //請(qǐng)求頁(yè)面的內(nèi)容是png格式的圖像
    imagepng($this->img);  //以png格式輸出圖像
    imagedestroy($this->img);  //清除圖像資源，釋放內(nèi)存
  }

用到的相關(guān)函數(shù)：

imagepng：以 PNG 格式將圖像輸出到瀏覽器或文件
imagedestroy：銷(xiāo)毀一圖像

對(duì)外提供驗(yàn)證碼：

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;
  }
}

以上就是驗(yàn)證碼類(lèi)的全部代碼?？雌饋?lái)確實(shí)挺簡(jiǎn)單的，不過(guò)用的圖像處理函數(shù)比較多，上面相關(guān)的函數(shù)我也做了必要的鏈接和用途說(shuō)明。這些函數(shù)也不用死記硬背，遇到不清楚的，隨時(shí)查閱 PHP 官方文檔，最重要的是還有中文文檔。

2.2 使用驗(yàn)證碼

既然已經(jīng)封裝完畢，那就可以開(kāi)始使用了。這里為了方便，直接在 Captcha 類(lèi)的下方調(diào)用該類(lèi)：

session_start(); //開(kāi)啟session
$captcha = new Captcha();  //實(shí)例化驗(yàn)證碼類(lèi)(可自定義參數(shù))
$captcha->show();  //調(diào)用輸出

三、前端展示

后端已經(jīng)準(zhǔn)備好了驗(yàn)證碼，前端界面就可以展示了，修改 index.php 中的注冊(cè)與登陸表單的驗(yàn)證碼部分：

<div class="form-group">
 <div class="col-sm-12">
   <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 標(biāo)簽添加了點(diǎn)擊事件的 js 代碼，這樣就可以實(shí)現(xiàn)點(diǎn)擊更換驗(yàn)證碼的功能！

效果圖：

四、完善

到目前為止，我們的驗(yàn)證碼模塊基本就完成了。學(xué)習(xí)到這里，大家應(yīng)該對(duì)面向?qū)ο缶幊逃辛诉M(jìn)一步的理解。也領(lǐng)悟到了一絲 OOP 思想。OOP 的三大特征：封裝，繼承，多態(tài)。我們這里只用到了一點(diǎn)封裝的思想。大家可以繼續(xù)完善和改進(jìn)這個(gè)驗(yàn)證碼類(lèi)，設(shè)計(jì)出更加完美的類(lèi)。這個(gè)實(shí)驗(yàn)也告訴我們，PHP 的函數(shù)很多，不要死記硬背，多看官方文檔。

您可能感興趣的文章: