利用php实现简单的后台注册登录（附代码）
利用php实现简单的后台注册登录（附代码）
内容导读
收集整理的这篇技术教程文章主要介绍了利用php实现简单的后台注册登录（附代码），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含17265字，纯文字阅读大概需要25分钟。
内容图文
这篇文章分享给大家的内容是关于利用php实现简单的后台注册登录（附代码），内容很有参考价值，希望可以帮到有需要的小伙伴。本人PHP小白，前段时间研究它，下载了一个Gxl网的后台框架，改了样式，然后自己参考网络上面成型的项目添加了功能代码。
另：我是使用 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可见 必须全屏才可以使用--> <p class="login"> <p class="loginmain"> <h2>熊猫个人事务管理系统</h2> <form action="admin/login_check.php" class="form-horizontal" method="post"> <!-- 让表单在一行中显示form-horizontal --> <!-- 用户名 --> <p class="form-group"> <!-- for 属性规定 label 绑定到哪个表单元素 --> <label for="username" class="col-lg-1 control-label">用户名</label> <p class="col-lg-4"> <input type="text" name="username" id="username" class="form-control" placeholder="请输入登录账号"/> </p> </p> <p class="form-group"></p> <p class="form-group"></p> <!-- 密码 --> <p class="form-group"> <label for="password" class="col-lg-1 control-label">密 码</label> <p class="col-lg-4"> <input type="password" name="password" id="password" class="form-control" placeholder="请输入密码"/> </p> </p> <p class="form-group"></p> <p class="form-group"></p> <!-- 验证码 --> <p class="form-group"> <!-- for 属性规定 label 与哪个表单元素绑定。 --> <label for="captcha" class="col-lg-1 control-label">验证码</label> <p class="col-lg-2"> <!-- ./ 当前路径 --> <!-- 用户输入验证码的框 --> <input type="text" name="captcha" id="captcha" class="form-control" placeholder="请输入右图内容：" /> <!-- 当用户链接时，void(0) 计算为 0，但 Javascript 上没有任何效果。 --> </p> <p> <!-- 验证码图片 --> <a href="#" onclick="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> </p> <p class="form-group"></p> <p class="form-group"></p> <p class="form-group"> <p class="col-lg-11 col-lg-offset-1"> <span class="checkbox "> <label><input type="checkbox" name="" class="checkbox-inline">记住我</label> </span> </p> </p> <p class="form-group"> <p> <p class="col-lg-1 col-lg-offset-1"> <input type="submit" name="b_login" value="登录" class="btn btn-success btn-lg"> </p> <p 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> </p> <p class="form-group"></p> <p class="form-group"></p> <span class="text" name="text"></span> </p> </form> </p> <p class="rightpic" > <p id="container" > </p> </p> </p> <p class="bottom"> 版权所有 2017-2018 我是熊(￣(工)￣)工作室 </p></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/*实现简单的验证码功能*///开启sessionsession_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可见 必须全屏才可以使用 或者改百分比使用--><p class="register"><form action="register_check.php" method="post" enctype="multipart/form-data"> <p class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" id="username" placeholder="Username" name="username"> </p> <p class="form-group"> <label for="nickname">昵称</label> <input type="text" class="form-control" id="nickname" placeholder="Nickname" name="nickname"> </p> <p class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" id="password" placeholder="Password" name="password"> </p> <p class="form-group"> <label for="confirmPassword">确认密码</label> <input type="password" class="form-control" id="confirmPassword" placeholder="ConfirmPassword" name="confirmPassword"> </p> <p class="form-group"> <a href="#" onclick="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"> </p> <p class="form-group"> <label for="photoFile">头像</label> <input type="hidden" name="MAX_FILE_SIZE" value="10240000" id=""/> <input type="file" id="photoFile" name="photoFile"> </p> <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></p></span><p class="bottom"> 版权所有 2017-2018 我是熊(￣(工)￣)工作室</p></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 效果图（背景图来源网络）
最后：经过本人验证，完全可以实现注册和登陆两大基本功能，与数据库的交互也不成问题。
相关推荐：
PHP如何上传图片到数据库进行显示的的代码
php队列处理：php消息队列实现原理（图文）
以上就是利用php实现简单的后台注册登录（附代码）的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是为您收集整理的利用php实现简单的后台注册登录（附代码）全部内容，希望文章能够帮你解决利用php实现简单的后台注册登录（附代码）所遇到的程序开发问题。 如果觉得技术教程内容还不错，欢迎将网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
