HTML+MYSQL+PHP搭建带有cookie的登录页面

这周学长给我们布置了新任务,要让我们在一周内搭建一个带有cookie的登陆界面,任务很轻松(才怪),几经波折之后终于弄好了(呜呜呜~),下面总结一下过程。

在本地搭建一个带有cookie的登陆注册界面需要以下步骤:

  • 创建数据库
  • 登陆界面
  • 注册界面

大致需要以下PHP文件:
在这里插入图片描述
- 使用phpstudy 自带的mysql 创建数据库

在localhost 点击箭头新建数据库命名为 mysql
在这里插入图片描述
然后在新建数据库中新建一个表,命名为 user,添加新字段,username 和 password ;内容可以先空着
在这里插入图片描述

- 使用HTML编写登陆界面
总流程如下:
在这里插入图片描述
login.php;代码如下:

 <!DOCTYPE html>
 <html lang='zh'>
 <head>
 <title> login</title>
 <meta charset="UTF-8">
<style>
    body{
        background-image:url('325151.jpg');
        font-size:30px;//字体大小
    }
    .main{
        position:absolute;//全局变量
        top:35%;
        left:45%;
    }

    input{
        width:250px;
        height:30px;
        text-align:left;
        color:blue;
    }
    .sub{
        width:125px;
        height:30px;
    }
    button{
        width:125px;
        height:30px;
        text-align:left;
    }
</style>
</head>
 <body>  
<div class="main">
<form name="input" action="post.php" method="post">
用户名 :<br /><input type="text" name="username"><br>
密码 :  <br /><input type="password" name="password"> <br>
             <input type="submit" value="登陆" class="sub">
             <button><a href="reg.php">注册</a></button>

</form>
</div>
</body> 
</html>

界面如下:
在这里插入图片描述
- 登陆验证:
post.php;代码如下

<?php

       $conn=mysql_connect("localhost",'root','root') or die("数据库连接失败!");//连接你的本地数据库
       localhost为服务器 root为用户名 root为密码

       mysql_select_db('myphp',$conn) or die("您要选择的数据库不存在");//选择你建立的数据表

       $name=$_POST['username'];

       $pwd=$_POST['password'];//获取表单提交的内容用两个变量来存post方式接受的值

       $sql="select * from user where username='$name' and password='$pwd'";//查询语句

       $query=mysql_query($sql);//函数执行一条 MySQL 查询。

       $arr=mysql_fetch_array($query);然后从$query中取一行数字数组

       if(is_array($arr)){//对$arr进行判断

              setcookie('username',$name,time()+3600);//设置cookie,时间为一小时,(以秒为单位)
              header("Location:index.php");//跳转页面

       }else{

              echo "您的用户名或密码输入有误,<a href=\"login.php\">请重新登录!</a>";

       }

?>

实现注册总流程:
在这里插入图片描述

-注册页面
在这里插入图片描述
reg.php;代码如下:

 <!DOCTYPE html>
    <html >
    <head>
    <title> 注册</title>
    <meta charset="UTF-8">
    <style>
    body{
        background-image:url('323971.jpg');
        background-repeat:no-repeat;
        font-size:30px;
    }
    .main{
        position:absolute;
        top:35%;
        left:45%;
    }

    input{
        text-align:center;
        width:250px;
        height:30px;
        text-align:left;
        color:green;
    }
    .sub{
        width:125px;
        height:30px;
    }
    </style>
    </head>
    <body>  
<div class="main">
<form name="input" action="regin.php" method="post">
用户名<br/><input type="text" name="username"><br>
密码  <br/><input type="password" name="password"> <br>
           <input type="submit" value="注册" class="sub">
    </body>
    </div>
    </html>

regin.php ; 注册验证:

 <?php
     $conn=mysql_connect("localhost",'root','root') or die("数据库连接失败!");

           mysql_select_db('myphp',$conn) or die("您要选择的数据库不存在");
     $name=trim($_POST['username']);
    //trim函数,过滤空格,如果不加,我们在用户名后面添加很多空格,提交表单,打开firebug
    //调试工具,我们可以到输入的用户名后面会有很多空格,使用trim函数,我们可以把表单中空格给过滤掉
     $password=$_POST['password'];
     $sql = "select * from user where username='$name'";
     $info = mysql_query($sql);
     $res = mysql_num_rows($info);
    if(empty($name)){
        echo "<script>alert('用户名不能为空');location.href='reg.php';</script>";
    }else if(empty($password)){
        echo "<script>alert('密码不能为空');location.href='reg.php';</script>";
    }else{    
        if($res){
            echo "<script>alert('用户名已存在');location.href='reg.php';</script>";
        }else{
            $sql1 ="insert into user(username,password) values('".$name."','" .($password)."')";
            $result = mysql_query($sql1);
            if($result){
                     echo "<script>alert('注册成功')</script>",header("Location:login.php");;
            }else{
                     echo "<script>alert('注册失败')</script>";
            }
        }
}    
?>                                           

- 登陆成功界面
在这里插入图片描述
代码如下:

 <?php
    if(!isset($_COOKIE['username']))//对跳转方式判断,阻止直接跳转;
    {
        echo '登录非法!<a href="login.php">请登录</a>';
        exit();
    }
 ?>
 <!DOCTYPE html>
    <html >
    <head>
    <title> welcome! </title>
    <meta charset="UTF-8">
    </head>
    <body>  
   Hello 靓仔!
   <a href="logout.php">注销</a>//点击“ 注销 ”跳转页面
    </body>
    </html>

- 注销 cookie
logout.php:
代码如下:

<?php
    if(isset($_COOKIE['username'])){
        setcookie('username',$name,time()-1);//清除cookie 将时间设置为负数
        header('Location:login.php');
    }
    else{
        echo '注销失败';
        header('Location:index.php');
    }
?>

以上就是利用phpstudy搭建带有cookie 的登录注册界面的全过程,希望这篇文章可以帮助别人,同时也防止自己遗忘。
转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 2058751973@qq.com

×

喜欢就点赞,疼爱就打赏