PHP:一个简单的后台注册登录的Demo

本人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">密&nbsp;&nbsp;码</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>&nbsp;&nbsp;&nbsp;&nbsp;

                          <!-- 验证码图片 -->
                          <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   效果图(背景图来源网络)


最后:经过本人验证,完全可以实现注册和登陆两大基本功能,与数据库的交互也不成问题。

           如果你看过本篇文章后有任何疑问,欢迎在下方留言~

展开阅读全文

没有更多推荐了,返回首页