基于PHP實現(xiàn)用戶注冊登錄功能
更新時間：2016年10月14日 15:21:01 作者：xiaoxiaozi
本課程通過使用PHP及Web前端技術(shù)實現(xiàn)一個網(wǎng)站注冊登錄入口頁面，學習并實踐PHP編程等，有興趣的同學可以參考一下。
本文介紹的是基于PHP實現(xiàn)用戶注冊登錄功能，本項目分為四部分內(nèi)容：1前端頁面制作，2驗證碼制作，3實現(xiàn)注冊登陸，4功能完善。具體情況可以往下看。
驗證碼制作
一、實驗簡介
本次實驗將會帶領(lǐng)大家使用面向?qū)ο蟮乃枷敕庋b一個驗證碼類。并在注冊和登陸界面展示使用。通過本次實驗的學習，你將會領(lǐng)悟到 PHP 的 OOP 思想，以及 GD 庫的使用，驗證碼生成。
1.1 涉及到的知識點
- PHP
- GD庫
- OOP編程
1.2 開發(fā)工具
sublime，一個方便快速的文本編輯器。點擊桌面左下角： 應用程序菜單/開發(fā)/sublime
二、封裝驗證碼類
2.1 建立目錄以及準備字體
在 web 目錄下建立一個 admin 目錄作為我們的后臺目錄，存放后臺代碼文件。在 admin 下建立一個 fonts 目錄，用于存放制作驗證碼所需字體。
在 admin 下新建一個 Captcha.php 文件，這就是我們需要編輯的驗證碼類文件。
當前目錄層次結(jié)構(gòu)：
編輯 Captcha.php 文件：
<?php
/**
* Captcha class
*/
class Captcha
{
function __construct()
{
# code...
}
}
添加該類的私有屬性和構(gòu)造方法：
<?php
/**
* Captcha class
*/
class Captcha
{
private $codeNum; //驗證碼位數(shù)
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
接下來開始編寫具體的方法：
創(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：新建一個基于調(diào)色板的圖像
- imagecolorallocate：為一幅圖像分配顏色
- mt_rand：生成更好的隨機數(shù)
創(chuàng)建驗證碼字符串并輸出到圖像
//創(chuàng)建驗證碼
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]);
}
}
用到的相關(guān)函數(shù)
- imagecreate：新建一個基于調(diào)色板的圖像
- imagecolorallocate：為一幅圖像分配顏色
- mt_rand：生成更好的隨機數(shù)
創(chuàng)建驗證碼字符串并輸出到圖像
//創(chuàng)建驗證碼
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]);
}
}
用到的相關(guān)函數(shù)：
- imagettftext：用 TrueType 字體向圖像寫入文本
創(chuàng)建干擾線條
//創(chuàng)建干擾線條（默認四條）
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：畫一條線段
創(chuàng)建干擾點
//創(chuàng)建干擾點 （默認一百個點）
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：畫一個單一像素
對外輸出圖像：
public function show()
{
$this->createImage();
$this->createCode();
if ($this->lineFlag) { //是否創(chuàng)建干擾線條
$this->createLines();
}
if ($this->piexFlag) { //是否創(chuàng)建干擾點
$this->createPiex();
}
header('Content-type:image/png'); //請求頁面的內(nèi)容是png格式的圖像
imagepng($this->img); //以png格式輸出圖像
imagedestroy($this->img); //清除圖像資源，釋放內(nèi)存
}
用到的相關(guān)函數(shù)：
- 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;
}
}
以上就是驗證碼類的全部代碼。看起來確實挺簡單的，不過用的圖像處理函數(shù)比較多，上面相關(guān)的函數(shù)我也做了必要的鏈接和用途說明。這些函數(shù)也不用死記硬背，遇到不清楚的，隨時查閱 PHP 官方文檔，最重要的是還有中文文檔。
2.2 使用驗證碼
既然已經(jīng)封裝完畢，那就可以開始使用了。這里為了方便，直接在 Captcha 類的下方調(diào)用該類：
session_start(); //開啟session $captcha = new Captcha(); //實例化驗證碼類(可自定義參數(shù)) $captcha->show(); //調(diào)用輸出
三、前端展示
后端已經(jīng)準備好了驗證碼，前端界面就可以展示了，修改 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 代碼，這樣就可以實現(xiàn)點擊更換驗證碼的功能！
效果圖：
四、完善
到目前為止，我們的驗證碼模塊基本就完成了。學習到這里，大家應該對面向?qū)ο缶幊逃辛诉M一步的理解。也領(lǐng)悟到了一絲 OOP 思想。OOP 的三大特征：封裝，繼承，多態(tài)。我們這里只用到了一點封裝的思想。大家可以繼續(xù)完善和改進這個驗證碼類，設(shè)計出更加完美的類。這個實驗也告訴我們，PHP 的函數(shù)很多，不要死記硬背，多看官方文檔。
相關(guān)文章
CodeIgniter框架數(shù)據(jù)庫事務處理的設(shè)計缺陷和解決方案
這篇文章主要介紹了CodeIgniter框架數(shù)據(jù)庫事務處理的設(shè)計缺陷和解決方案,也可以說是一個小BUG,使用CodeIgniter事務的朋友會遇到這個問題,需要的朋友可以參考下2014-07-07
Windows和Linux中php代碼調(diào)試工具Xdebug的安裝與配置詳解
這篇文章主要介紹了Windows和Linux中php代碼調(diào)試工具Xdebug的安裝與配置詳解,需要的朋友可以參考下2014-05-05
Yii提供了一整套用來簡化實現(xiàn)RESTful風格的WebService服務的API。這篇文章主要介紹了Yii2框架制作RESTful風格的API快速入門教程的相關(guān)資料,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了在PHP中讓文件下載更快的一個方法,那就是使用X-SendFile頭實現(xiàn),主流量的服務器都支持這個頭文件,的朋友可以參考下2014-06-06
php metaphone()函數(shù)及php localeconv() 函數(shù)實例解析
這篇文章主要介紹了php metaphone()函數(shù)及php localeconv() 函數(shù)實例解析的相關(guān)資料,需要的朋友可以參考下2016-05-05
IIS 7.5 asp Session超時時間設(shè)置方法
這篇文章主要介紹了IIS 7.5中asp Session超時時間設(shè)置方法，需要的朋友可以參考一下2017-04-04
基于PHP實現(xiàn)發(fā)微博動態(tài)代碼實例
這篇文章主要介紹了基于PHP實現(xiàn)發(fā)微博動態(tài)代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-12-12
本篇文章主要介紹了Yii2框架中使用PHPExcel導出Excel文件的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了Yii2 rules 的驗證規(guī)則,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
本篇文章是對HTTP響應狀態(tài)碼速查表進行了詳細的分析介紹，需要的朋友參考下2013-06-06