本人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（图片根据个人爱好即可）
扫描二维码关注公众号，回复：
9683731 查看本文章
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上啦，包括数据库！不仅仅是注册登录哦！（在博文最上方呀）
如果再有问题还是欢迎你留言，我看到就一定会回复你的！
