PHP 實現用戶註冊登陸功能

時間 2019-12-04

標籤 php 實現用戶註冊登陸功能欄目 PHP 简体版

原文原文鏈接

項目簡介：本課程經過使用 PHP 及 Web 前端技術實現一個網站註冊登陸入口頁面，學習並實踐 PHP 編程，GD庫，MySQL 擴展，Bootstrap 響應式佈局，Cookie/Session 及 Ajax 等知識點。
本項目發佈在實驗樓，分爲四部份內容：1前端頁面製做，2驗證碼製做，3實現註冊登錄，4功能完善。本節實驗內容爲第二部分驗證碼製做部分。javascript

所有章節及代碼詳解能夠在實驗樓中在線完成：PHP 實現用戶註冊登陸功能php

驗證碼製做

1、實驗簡介

本次實驗將會帶領你們使用面向對象的思想封裝一個驗證碼類。並在註冊和登錄界面展現使用。經過本次實驗的學習，你將會領悟到 PHP 的 OOP 思想，以及 GD 庫的使用，驗證碼生成。html

1.1 涉及到的知識點

PHP前端
GD庫java
OOP編程web

1.2 開發工具

sublime，一個方便快速的文本編輯器。點擊桌面左下角：應用程序菜單/開發/sublime編程

1.3 效果圖

2、封裝驗證碼類

2.1 創建目錄以及準備字體

在 web 目錄下創建一個 admin 目錄做爲咱們的後臺目錄，存放後臺代碼文件。在 admin 下創建一個 fonts 目錄，用於存放製做驗證碼所需字體。後端

在 admin 下新建一個 Captcha.php 文件，這就是咱們須要編輯的驗證碼類文件。瀏覽器

當前目錄層次結構：session

編輯 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：生成更好的隨機數

建立驗證碼字符串並輸出到圖像

//建立驗證碼    
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();    //調用輸出

3、前端展現

後端已經準備好了驗證碼，前端界面就能夠展現了，修改 index.php 中的註冊與登錄表單的驗證碼部分：

<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 標籤添加了點擊事件的 js 代碼，這樣就能夠實現點擊更換驗證碼的功能！

效果圖：

4、完善

到目前爲止，咱們的驗證碼模塊基本就完成了。學習到這裏，你們應該對面向對象編程有了進一步的理解。也領悟到了一絲 OOP 思想。OOP 的三大特徵：封裝，繼承，多態。咱們這裏只用到了一點封裝的思想。你們能夠繼續完善和改進這個驗證碼類，設計出更加完美的類。這個實驗也告訴咱們，PHP 的函數不少，不要死記硬背，多看官方文檔。

本項目完整教程和代碼詳解能夠在實驗樓查看。
更多PHP經典項目：PHP所有-課程