本人PHP小白，前段時間研究它，下載了一個php中文網的後臺框架，改了樣式，然後自己參考網絡上面成型的項目添加了功能代碼。
記錄一下，如果有人正好在這方面有疑問，希望可以有一點點幫助。
另：我是使用 navicat for mysql+sublime+phpmystudy 工具來實現驗證的。
一、先建立好層及目錄文件
先放一下項目的層級目錄：
如果只要實現註冊登錄功能則有很多文件夾都可以省略，因爲我還在其中實現了前臺代碼，所以放上了整個系統的層級目錄。
二、入口文件（index.php）
<?php
/* PHP系統進入的入口頁面*/
header("Content-type: text/html; charset=utf-8");
include('admin/login.html');//首頁
?>
三、登陸頁面
3.1 admin/login.html (這裏使用了bootstrap框架以及jquery)
<!-- PHP系統進入的頁面 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- <link rel="stylesheet" type="text/css" href="../public/css/base.css"> -->
<link rel="stylesheet" type="text/css" href="css/b_login.css">
<title></title>
</head>
<body>
<span class="visible-lg"><!-- bootstrap自適應工具 大屏幕>=1200px可見 必須全屏纔可以使用-->
<div class="login">
<div class="loginmain">
<h2>熊貓個人事務管理系統</h2>
<form action="admin/login_check.php" class="form-horizontal" method="post">
<!-- 讓表單在一行中顯示form-horizontal -->
<!-- 用戶名 -->
<div class="form-group">
<!-- for 屬性規定 label 綁定到哪個表單元素 -->
<label for="username" class="col-lg-1 control-label">用戶名</label>
<div class="col-lg-4">
<input type="text" name="username" id="username" class="form-control" placeholder="請輸入登錄賬號"/>
</div>
</div>
<div class="form-group"></div>
<div class="form-group"></div>
<!-- 密碼 -->
<div class="form-group">
<label for="password" class="col-lg-1 control-label">密 碼</label>
<div class="col-lg-4">
<input type="password" name="password" id="password" class="form-control" placeholder="請輸入密碼"/>
</div>
</div>
<div class="form-group"></div>
<div class="form-group"></div>
<!-- 驗證碼 -->
<div class="form-group">
<!-- for 屬性規定 label 與哪個表單元素綁定。 -->
<label for="captcha" class="col-lg-1 control-label">驗證碼</label>
<div class="col-lg-2">
<!-- ./ 當前路徑 -->
<!-- 用戶輸入驗證碼的框 -->
<input type="text" name="captcha" id="captcha" class="form-control" placeholder="請輸入右圖內容：" />
<!-- 當用戶鏈接時，void(0) 計算爲 0，但 Javascript 上沒有任何效果。 -->
</div>
<p>
<!-- 驗證碼圖片 -->
<a href="#" οnclick="javascript:reflash()">
<img id="captcha_img" name="captcha_img" alt="看不清楚，換一張" border="1" src="admin/captcha.php?r=<?php echo rand(); ?>" width=100 height=30>
</a>
</div>
<div class="form-group"></div>
<div class="form-group"></div>
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<span class="checkbox ">
<label><input type="checkbox" name="" class="checkbox-inline">記住我</label>
</span>
</div>
</div>
<div class="form-group">
<p>
<div class="col-lg-1 col-lg-offset-1">
<input type="submit" name="b_login" value="登錄" class="btn btn-success btn-lg">
</div>
<div class="col-lg-1 col-lg-offset-1">
<a href="admin/register.html">
<input type="button" name="b_register" value="註冊" class="btn btn-success btn-lg">
</a>
</div>
<div class="form-group"></div>
<div class="form-group"></div>
<span class="text" name="text"></span>
</div>
</form>
</div>
<div class="rightpic" >
<div id="container" >
</div>
</div>
</div>
<div class="bottom">
版權所有 2017-2018 我是熊(￣(工)￣)工作室
</div>
</span>
<script src="public/js/jquery-3.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="public/js/delaunay.js"></script>
<script src="public/js/TweenMax.js"></script>
<script src="js/effect.js"></script>
<script src="js/b_login.js"></script>
</body>
</html>
3.2 css/b_login.css（圖片根據個人愛好即可）
body{
background-image: url(../picture/17.png);
background-size: cover;
font-size: 17px;
font-family: "幼圓"
}
.login{
width:1000px;
height:500px;
margin:100px auto;
border:1px;
background-color: rgba(0, 0, 0, 0.3);
padding: 1px;
position:relative;
color:#fff;
}
.rightpic{
width:500px;
height:360px;
position:absolute;
right:30px;
top:50px;
opacity: 0.6;
}
.captcha{
cursor:pointer
}
.text{
font-size: 18px;
margin-left: 180px;
text-align: center;
color: #f00;
}
.bottom{
text-align: center;
color: #fff;
}
#container{
position: relative;
width:500px;
height:330px;
}
canvas{ position: absolute;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
img {
position: absolute;
-webkit-transition: opacity .3s;
transition: opacity .3s;
}
3.3 js/b_login.js（這裏涉及到了驗證碼）
//alert($)
function reflash(){
var change = document.getElementById('captcha_img');
check.src="admin/captcha.php?r=<?php echo rand(); ?>";
}
$(document).ready(function(){//頁面加載完成再加載腳本
/*點擊登錄按鈕後做的事件處理*/
$('input[name="b_login"]').click(function(event){
var $name = $('input[name="username"]');
var $password = $('input[name="password"]');
var $captcha = $('input[name="captcha"]');
var $text = $(".text");
var _name = $.trim($name.val());//去掉字符串多餘空格
var _password = $.trim($password.val());
var _captcha_img = $.trim($captcha.val());
if(_name==''){
$text.text('請輸入用戶名');
$name.focus();
return;
}
if(_password==''){
$text.text('請輸入密碼');
$password.focus();
return;
}
if(captcha==""){
$text.text('請輸入驗證碼');
return;
}
});
});
3.4 admin/captcha.php（這個圖片驗證碼是我從網上找的）
<?php
/*實現簡單的驗證碼功能*/
//開啓session
session_start();
//創建一個大小爲 100*30 的驗證碼
$image = imagecreatetruecolor(100, 30);
$bgcolor = imagecolorallocate($image, 255, 255, 255);
imagefill($image, 0, 0, $bgcolor);
$captch_code = '';
for ($i = 0; $i < 4; $i++) {
$fontsize = 6;
$fontcolor = imagecolorallocate($image, rand(0, 120), rand(0, 120), rand(0, 120));
$data = 'abcdefghijkmnpqrstuvwxy3456789';
$fontcontent = substr($data, rand(0, strlen($data) - 1), 1);
$captch_code .= $fontcontent;
$x = ($i * 100 / 4) + rand(5, 10);
$y = rand(5, 10);
imagestring($image, $fontsize, $x, $y, $fontcontent, $fontcolor);
}
//就生成的驗證碼保存到session
$_SESSION['authcode'] = $captch_code;
//在圖片上增加點干擾元素
for ($i = 0; $i < 200; $i++) {
$pointcolor = imagecolorallocate($image, rand(50, 200), rand(50, 200), rand(50, 200));
imagesetpixel($image, rand(1, 99), rand(1, 29), $pointcolor);
}
//在圖片上增加線干擾元素
for ($i = 0; $i < 3; $i++) {
$linecolor = imagecolorallocate($image, rand(80, 220), rand(80, 220), rand(80, 220));
imageline($image, rand(1, 99), rand(1, 29), rand(1, 99), rand(1, 29), $linecolor);
}
//設置頭
header('content-type:image/png');
imagepng($image);
imagedestroy($image);
?>
3.5 admin/login_check.php（這就是主要的功能代碼了 在這之前 你需要有數據庫文件
比如我這裏的數據庫文件名叫做panda_work 我連接數據庫的用戶名是root 密碼是123456）
<?php
//開啓Session
session_start();
header("Content-type:text/html;charset=utf-8");
$link = mysqli_connect('localhost','root','123456','panda_work');
if (!$link) {
die("連接失敗:".mysqli_connect_error());
}
//接受提交過來的用戶名及密碼
$username = @$_POST["username"];//用戶名
$password = @$_POST["password"];//密碼
$captcha = @$_POST["captcha"]; //驗證碼
/*if($username == "")
{
//echo "請填寫用戶名<br>";
echo"<script type='text/javascript'>alert('請填寫用戶名');location='login.html'; </script>";
}
if($password == "")
{
//echo "請填寫密碼<br><a href='login.html'>返回</a>";
echo"<script type='text/javascript'>alert('請填寫密碼');location='login.html';</script>";
}*/
if($captcha != @$_SESSION['authcode']) //判斷填寫的驗證碼是否與驗證碼PHP文件生成的信息匹配
{
echo "<script type='text/javascript'>alert('驗證碼錯誤!');location='../index.php';</script>";
return;
}
$sql = "select * from panda_admin";
$result = mysqli_query($link, $sql);
$rows = mysqli_fetch_array($result);
if($rows) {
//拿着提交過來的用戶名和密碼去數據庫查找，看是否存在此用戶名以及其密碼
if ($username == $rows["name"] && $password == $rows["password"]) {
$_SESSION['username'] = $username;
//echo "驗證成功！<br>";
echo "<script type='text/javascript'>alert('登陸成功');location='../web/index.html';</script>";
} else {
//echo "用戶名或者密碼錯誤<br>";
echo "<script type='text/javascript'>alert('用戶名或者密碼錯誤');location='../index.php';</script>";
//echo "<a href='login.html'>返回</a>";
}
}
?>
3.6 數據庫（按照自己需要的來即可）
3.7 效果圖
四、註冊頁面
4.1 admin/register.html (這裏使用了bootstrap框架以及jquery)
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./../bootstrap/css/bootstrap.min.css">
<!-- <link rel="stylesheet" type="text/css" href="../public/css/base.css"> -->
<link rel="stylesheet" type="text/css" href="../css/b_register.css">
<title>後臺註冊頁面</title>
</head>
<body>
<span class="visible-lg"><!-- bootstrap自適應工具 大屏幕>=1200px可見 必須全屏纔可以使用 或者改百分比使用-->
<div class="register">
<form action="register_check.php" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="username">用戶名</label>
<input type="text" class="form-control" id="username" placeholder="Username" name="username">
</div>
<div class="form-group">
<label for="nickname">暱稱</label>
<input type="text" class="form-control" id="nickname" placeholder="Nickname" name="nickname">
</div>
<div class="form-group">
<label for="password">密碼</label>
<input type="password" class="form-control" id="password" placeholder="Password" name="password">
</div>
<div class="form-group">
<label for="confirmPassword">確認密碼</label>
<input type="password" class="form-control" id="confirmPassword" placeholder="ConfirmPassword" name="confirmPassword">
</div>
<div class="form-group">
<a href="#" οnclick="javascript:reflash()">
<img id="captcha_img" name="captcha_img" alt="看不清楚，換一張" border="1" src="captcha.php?r=<?php echo rand(); ?>" width=100 height=30>
</a>
<p><p>
<input type="text" class="form-control" id="captcha" placeholder="請輸入上圖驗證碼，按F5可刷新" name="captcha">
</div>
<div class="form-group">
<label for="photoFile">頭像</label>
<input type="hidden" name="MAX_FILE_SIZE" value="10240000" id=""/>
<input type="file" id="photoFile" name="photoFile">
</div>
<button type="submit" name="b_register" class="col-lg-1 col-lg-offset-3">提交</button>
<p>
<a href="../index.php">
<button type="button" name="b_login" class="col-lg-1 col-lg-offset-3">返回</button>
</a>
<span class="text2"></span>
</form>
</div>
</span>
<div class="bottom">
版權所有 2017-2018 我是熊(￣(工)￣)工作室
</div>
</body>
<script src="./../public/js/jquery-3.1.1.min.js"></script>
<script src="./../bootstrap/js/bootstrap.min.js"></script>
<script src="./../public/js/delaunay.js"></script>
<script src="./../public/js/TweenMax.js"></script>
<script src="../js/effect.js"></script>
<script src="../js/b_register.js"></script>
</html>
4.2 css/b_register.css（圖片根據個人愛好即可）
body{
/*background-image: url(../picture/14.png);*/
background-size: auto;
font-size: 17px;
font-family: "幼圓";
background-image: url(../picture/19.jpg);
background-repeat:no-repeat;
/* text-align: center;*/
/*color: #00F;*/
}
.register{
width:800px;
height:600px;
margin:200px auto;
border:1px;
background-color: rgba(0, 0, 0, 0.3);
padding: 1px;
position:relative;
background-image: url(../picture/18.gif);
opacity: 0.8;
}
.bottom{
text-align: center;
color: #fff;
margin-bottom: 100px;
}
4.3 js/b_register.js（這裏涉及到了圖片上傳）
//alert($)
function reflash(){
var change = document.getElementById('captcha_img');
check.src="admin/captcha.php?r=<?php echo rand(); ?>";
}
$(document).ready(function(){//頁面加載完成再加載腳本
/*點擊登錄按鈕後做的事件處理*/
$('input[name="b_register"]').click(function(event){
var $name = $('input[name="username"]');
var $password = $('input[name="password"]');
var $confirmPassword = $('input[name="confirmPassword"]');
var $photoFile = $('input[name="photoFile"]');
var $nickname = $('input[name="nickname"]');
var $text2 = $(".text2");
var _name = $.trim($name.val());//去掉字符串多餘空格
var _password = $.trim($password.val());
var _confirmPassword = $.trim($confirmPassword.val());
var _nickname = $.trim($.trim($nickname.val()));
if(_name == ''){
$text2.text('請輸入用戶名');
$name.focus();
return;
}
if(_nickname == ""){
$text2.text('請輸入暱稱');
$nickname.focus();
return;
}
if(_password == ''){
$text2.text('請輸入密碼');
$password.focus();
return;
}
if(_confirmPassword == ""){
$text2.text("請輸入驗證碼");
$confirmPassword.focus();
return;
}
if(_password !=_confirmPassword){
$text2.text("兩次輸入的密碼不一致");
$password.focus();
return;
}
if (_photoFile == "") {
$text2.text("請選擇一個圖片文件");
$photoFile.focus();
return;
}
});
});
4.4 admin/file_check.php(處理上傳的圖片文件，這個也是我從網上找的，更改了一小部分代碼，
其中需要在admin文件夾下新建一個存儲文件uploads)
<?php
//1.處理文件信息
$fileArr = @$_FILES["photoFile"];//input標籤中的name
//將文件信息保存在變量中
$name = @$fileArr['name'];//文件名
$type = @$fileArr["type"];//文件類型
$tmp_name = @$fileArr["tmp_name"];//文件臨時存儲位置的文件名
$error = @$fileArr["error"];//文件的錯誤信息
$size = @$fileArr["size"];//文件的大小
//2.新建存儲文件的目錄
$filePath = "uploads";
function createDir($filePath){
if(!file_exists($filePath)){
$res = mkdir($filePath);
if($res){
echo "創建成功";
}
}
}
createDir($filePath);
//因爲要上傳的文件爲圖片，所以此時設置允許的後綴名如下，如果其他文件則修改爲txt等後綴
$allowExt=["image/png","image/jpeg","image/gif"];
//3.判斷文件是否上傳成功
if($error===UPLOAD_ERR_OK){//UPLOAD_ERR_OK==0,上傳成功
if(!in_array($type,$allowExt)){//如果類型不在數組中
exit("非法類型文件");
}
//判斷後綴正確但不是圖片的文件
if(!getimagesize($tmp_name)){
exit("不是真正的一張圖片");
}
$ext = pathinfo($name)["extension"];//獲取文件後綴
$uniname = time().".".$ext;//生成一個唯一的文件名
$destination = $filePath."/".$uniname;
//4.move_uploaded_file將上傳的文件移動到新位置。 若成功,則返回 true,否則返回 false
$res = move_uploaded_file($tmp_name,$destination);
if($res){//上傳成功
//把圖片服務器連接傳出去：拼接出一個圖片的src
$server = @$_SERVER["HTTP_ORIGIN"];
$rootDir = pathinfo($_SERVER["REQUEST_URI"])["dirname"];
$imgPath = $server.$rootDir."/".$destination; //圖片的src
//echo "<img src='{$imgPath}'>";//輸出圖片
$_SESSION['imgPath'] = $imgPath;
}
else{
echo "<script type='text/javascript'>alert('上傳失敗!');location='register.html';</script>";
}
}
else{//上傳失敗，給出錯誤提示
switch ($error) {
case UPLOAD_ERR_INI_SIZE://1
die("上傳的文件超過了PHP配置中upload_max_file大小的最大值");//die();結束程序
break;
case UPLOAD_ERR_FORM_SIZE://2
die("上傳的文件超過了HTML表單中隱藏域MAX_FILE_SIZE中value選項指定的值");
break;
case UPLOAD_ERR_NO_TMP_DIR://6
die("沒有找不到臨時文件夾");
break;
case UPLOAD_ERR_CANT_WRITE://7
die("文件寫入失敗");
break;
case UPLOAD_ERR_EXTENSION://8
die("php文件上傳擴展沒有打開");
break;
case UPLOAD_ERR_PARTIAL://3
die("文件只有部分被上傳");
break;
default:
break;
}
}
?>
4.5 admin/register_check.php （其和登錄模塊是共用一個數據表的）
<?php
session_start();
header("Content-type:text/html;charset=utf-8");
$link = mysqli_connect('localhost','root','123456','panda_work');
if (!$link) {
die("連接失敗:".mysqli_connect_error());
}
$username = @$_POST['username'];
$password = @$_POST['password'];
$confirm = @$_POST['confirmPassword'];//確認密碼
$code = @$_POST['captcha'];//驗證碼
$nickname = @$_POST['nickname'];
$photoFile = @$_FILES['photoFile']['tmp_name'];//圖片文件
/* $data['img'] =base64_encode(file_get_contents($_FILES['photoFile']['tmp_name']));*/
//$data['img_type'] = @$_FILES['photoFile']['type'];
/* $image = mysql_real_escape_string(file_get_contents(@$_FILES['photoFile']['tmp_name']),"localhost"); //獲取圖片*/
include('file_check.php');
$imgPath = @$_SESSION['imgPath'];
if($username == "" || $password == "" || $confirm == "" || $code == "" ||$nickname == ""||
$photoFile==""
)
{
echo "<script>alert('信息不能爲空！重新填寫');window.location.href='register.html'</script>";
} elseif ((strlen($username) < 3)||(!preg_match('/^\w+$/i', $username))) {
echo "<script>alert('用戶名至少3位且不含非法字符！重新填寫');window.location.href='register.html'</script>";
//判斷用戶名長度
}elseif(strlen($password) < 5){
echo "<script>alert('密碼至少5位！重新填寫');window.location.href='register.html'</script>";
//判斷密碼長度
}elseif($password != $confirm) {
echo "<script>alert('兩次密碼不相同！重新填寫');window.location.href='register.html'</script>";
//檢測兩次輸入密碼是否相同
}
elseif($code != $_SESSION['authcode']) {
echo "<script>alert('驗證碼錯誤！重新填寫');window.location.href='register.html'</script>";
//判斷驗證碼是否填寫正確
} elseif(mysqli_fetch_array(mysqli_query($link,"select * from panda_admin where name = '$username'"))){
echo "<script>alert('用戶名已存在');window.location.href='register.html'</script>";
}
else{
$sql= "insert into panda_admin(name,nickname, password,photo_file) values('$username','$nickname','$password','$imgPath')";
//插入數據庫
if(!(mysqli_query($link,$sql))){
echo "<script>alert('數據插入失敗');window.location.href='register.html'</script>";
}
else{
echo "<script>alert('註冊成功！');window.location.href='../index.php'</script>";
}
}
/*elseif (!preg_match('/^[\w\.]+@\w+\.\w+$/i', $email)) {
echo "<script>alert('郵箱不合法！重新填寫');window.location.href='zhuce.html'</script>";
//判斷郵箱格式是否合法
} */
?>
4.6 效果圖（背景圖來源網絡）
最後：經過本人驗證，完全可以實現註冊和登陸兩大基本功能，與數據庫的交互也不成問題。
如果你看過本篇文章後有任何疑問，歡迎在下方留言~
PS.我已經把我當年做的項目的所有代碼上傳到csdn上啦，包括數據庫！不僅僅是註冊登錄哦！（在博文最上方呀）
如果再有問題還是歡迎你留言，我看到就一定會回覆你的！