web简易开发——通过php与HTML+css+mysql实现用户的登录,注册

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
RDS MySQL Serverless 高可用系列,价值2615元额度,1个月
简介: web简易开发——通过php与HTML+css+mysql实现用户的登录,注册

写完后可将HTML和PHP结合成php,我只是为了方便

login

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        body{
            margin: 0;
            }
        .c1{
            margin: 16% auto;
            width: fit-content;
            border: 2px solid rgba(255,255,255, 0.2); /*增加半透明边框*/
            border-top: 0;
            padding: 30px 60px 40px;
            border-radius: 2%;
            background-color: rgba(255,255,255,0.2);
            /* 设置box-shadow使其有立体感 */
            box-shadow: 5px 5px 0 0  rgba(0,0,0,0.2);
        }
        .c1 input{
            height: 25px;
            background: transparent; /*背景透明*/
            border: 2px solid rgba(255,255,255,0.3); /*边框半透明*/
            box-shadow: inset 0 0 4px rgba(255,255,255,0.2),0 0 4px rgba(255,255,255,0.2);  /*内外渐变阴影*/
        }
        .c1 a{
            text-decoration:none;
            color: dodgerblue;
        }
        .c1 span{
            font-size: 15px;
        }
        .c1 button{
            width:100%;
            height: 30px;
            background-color: dodgerblue;
            border: 1px solid dodgerblue;
            color: white;
            border-radius: 2%;
        }
        .c2:hover{
            color: white;
        }
    </style>
</head>
    <body style="background-image:url('image/2077.jpg');
    background-size:1800px;
    height: 600px">
        <form action="login.php" method="POST">
            <div class="c1">
                <div>
                    <br>
                    <br>
                    <div>
                         <input type="text" name="username" placeholder="username">
                    </div>
                    <br>
                    <div>
                        <input type="password" name="password" placeholder="password">
                    </div>
                    <br>
                        <button type="submit"><span> </span></button>
                    <br>
                    <br>
                    <span><a href="enroll.html" target="_self" class="c2">注册</a></span>
                    <span style="float: right"><a href="#" target="_self" class="c2">忘记密码</a></span>
                    <div style="clear: both" ></div>
                </div>
            </div>
        </form>
    </body>
</html>
<?php
// 启动会话
session_start();
// 数据库连接信息
$root_sevsername="localhost";
$root_username="root";
$root_password="123456";
$root_dbname="users";

// 连接到MySQL数据库
$conn= mysqli_connect($root_sevsername,$root_username,$root_password,$root_dbname);

/*
 * 验证表单登录信息
 * 检查用户名和密码字段是否为空,并对输入的用户名和密码进行合法性检查
 */
// 定义表单提交的用户名和密码字段
// 获取并处理表单提交的用户名和密码
$pusername = $_POST['username'] ?? "";
$ppassword = isset($_POST['password']) ? $_POST['password'] : "";

// 定义白名单和黑名单正则表达式,以检查输入是否包含敏感字符
$whitepattern="/^[A-z\d]*$/i";         // 只允许输入的内容是字符串和数字的组合
$blackpattern="/\*|'|\"|#|;|,|or|\^|=|<|>|and|`|\(|\)|\ |%/i";

// 检查用户名是否包含黑名单中的字符
if(preg_match($blackpattern, $pusername)) die("<script>alert('illegal input!,用户名中包涵敏感词汇,请重新输入!');location.href='login.html'</script>");
// 检查密码是否包含黑名单中的字符
if(!preg_match($whitepattern, $ppassword)) die("<script>alert('illegal input!,密码中包涵敏感词汇,请重新输入!');location.href='login.html'</script>");

// 建立数据库连接并验证用户名和密码是否为空
if(!$conn || empty($pusername) || empty($ppassword)){
    echo "<script>alert('用户名或者密码不能为空,请重新输入!');location.href='login.html'</script>";
} else {
    // 执行SQL查询,比对用户名和密码
    $sql = "select username,password from `users` where username='$pusername' and password='$ppassword'";
    $result = $conn->query($sql);
    $row = mysqli_fetch_array($result);

    // 验证查询结果,如果用户名和密码匹配,则登录成功
    if ($pusername == $row['username'] && $ppassword == $row['password']) {
        // 设置cookie以记住用户名
        setcookie('username', $pusername, time() + 10);
        // 提示登录成功并跳转到主页
        echo "<script>alert('欢迎登录!$pusername');location.href='index.php'</script>";
        mysqli_close($conn);
    } else { // 如果用户名或密码不匹配,则提示用户重新输入
        echo "<script>alert('用户名或者密码错误,请重新输入!');location.href='login.html'</script>";
    }
}

enroll

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注册</title>
  <style>
    .c1 {
      margin: 16% auto;
      width: fit-content;
      border: 2px solid rgba(255, 255, 255, 0.2); /*增加半透明边框*/
      border-top: 0;
      padding: 30px 60px 40px;
      border-radius: 2%;
      background-color: rgba(255, 255, 255, 0.2);
      /* 设置box-shadow使其有立体感 */
      box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.2);
    }
    .c1 a{
      text-decoration:none;
      color: dodgerblue;
    }
    .c2:hover{
      color: white;
    }

    input{
      height: 25px;
      background: transparent; /*背景透明*/
      border: 2px solid rgba(255,255,255,0.3); /*边框半透明*/
      box-shadow: inset 0 0 4px rgba(255,255,255,0.2),0 0 4px rgba(255,255,255,0.2);  /*内外渐变阴影*/
    }

  </style>
</head>
  <body  style="background-image: url(image/OIP-C.jpg);background-size:1800px;">
    <form action="enroll.php" method="POST">
      <div class="c1">
        <div>
          <span><a href="login.html" target="_self" class="c2">返回</a></span>
          <br>
          <br>
          <input type="text" name="username" placeholder="username,不得为汉字">
          <br>
          <br>
          <input type="password" name="password1" placeholder="first password,不得为汉字">
          <br>
          <br>
          <input type="password" name="password2" placeholder="last password,不得为汉字">
          <br>
          <br>
          <button type="submit" style="width: 100%;height: 27px;border: 1px solid dodgerblue;color: white;border-radius: 2%;background-color: dodgerblue;"><span> </span></button>
          <br>
          <div style="clear: both" ></div>
        </div>
      </div>
    </form>
  </body>
</html>
<?php
$pusername=$_POST["username"];
$ppassword1=$_POST["password1"];
$ppassword2=$_POST["password2"];
//验证表单
if (strlen($pusername) < 1){
    echo '<script type="text/javascript">'; // 输出包含JavaScript的HTML片段
    echo 'alert("username不能为空!");'; // 弹窗提示
    echo 'window.location.href = "enroll.html";'; // 重定向到注册页
    echo '</script>';
    exit();
}//验证用户名
if (strlen($ppassword2&&$ppassword1) < 1) {
    echo '<script type="text/javascript">'; // 输出包含JavaScript的HTML片段
    echo 'alert("password不能为空!");'; // 弹窗提示
    echo 'window.location.href = "enroll.html";'; // 重定向到注册页
    echo '</script>';
    exit();
}//验证密码
if(strlen($ppassword1==$ppassword2)){
    $ppassword3=$ppassword1;
}else{
    echo '<script type="text/javascript">'; // 输出包含JavaScript的HTML片段
    echo 'alert("两次密码不一样!");'; // 弹窗提示
    echo 'window.location.href = "enroll.html";'; // 重定向到注册页
    echo '</script>';
    exit();
}//验证密码
isset($_POST['add']);
$sevsername="localhost";
$username="root";
$password="123456";
$dbname="users";

$conn= mysqli_connect($sevsername,$username,$password,$dbname);

$whitepattern="/^[a-z\d]*$/i";         // 构造的白名单正则表达式,只允许输入的内容是字符串和数字的组合
$blackpattern="/\*|'|\"|#|;|,|or|\^|=|<|>|and|`/i";// 构造的黑名单正则表达式

if(preg_match($blackpattern, $pusername)){ // preg_match:使用正则表达式对字符串进行正则匹配
    die("<script>alert('illegal input!,用户名中包涵敏感词汇,请重新输入!');location.href='enroll.html'</script>");
}
if(!preg_match($whitepattern, $ppassword3)){
    die("<script>alert('illegal input!,密码中包涵敏感词汇,请重新输入!');location.href='enroll.html'</script>");
}

//if(!$conn){
//    die("连接失败:<br>".$conn->connect_error);
//}
$sql = "INSERT INTO users (username,password)
VALUES ({$pusername},{$ppassword3})";
if(mysqli_query($conn,$sql))
{
    echo "<script>alert('注册成功,欢迎您$pusername!');location.href='login.html'</script>";
}else{
    echo "<script>alert('注册失败,用户名不合规,请重试!');location.href='enroll.html'</script>";
}

floget

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
<style>
  body{
  margin: 0;
  }
  .c1{
  margin: 16% auto;
  width: fit-content;
  border: 2px solid rgba(255,255,255, 0.2); /*增加半透明边框*/
  border-top: 0;
  padding: 30px 60px 40px;
  border-radius: 2%;
  background-color: rgba(255,255,255,0.2);
  /* 设置box-shadow使其有立体感 */
  box-shadow: 5px 5px 0 0  rgba(0,0,0,0.2);
  }
  .c1 input{
  height: 25px;
  background: transparent; /*背景透明*/
  border: 2px solid rgba(255,255,255,0.3); /*边框半透明*/
  box-shadow: inset 0 0 4px rgba(255,255,255,0.2),0 0 4px rgba(255,255,255,0.2);  /*内外渐变阴影*/
  }
  .c1 a{
  text-decoration:none;
  color: dodgerblue;
  }
  .c1 button{
  width:100%;
  height: 30px;
  background-color: dodgerblue;
  border: 1px solid dodgerblue;
  color: white;
  border-radius: 2%;
  }
</style>
</head>
<body style="/*background-image:url('image/派蒙.png')*/background-color: #444444;
    background-size:1800px;
    height: 600px">
  <form action="floget.php" method="POST">
    <div class="c1">
      <div>
        <span><a href="login.html" target="_self" class="c2">返回</a></span>
        <br>
        <br>
        <div>
          <input type="text" name="username" placeholder="your_username">
        </div>
        <br>
        <div>
          <input type="password" name="oldpassword" placeholder="old_password">
        </div>
        <br>
        <div>
          <input type="password" name="nowpassword1" placeholder="now_password">
        </div>
        <br>
        <div>
          <input type="password" name="nowpassword2" placeholder="make_sure_password">
        </div>
        <br>
        <button type="submit"><span> </span><span> </span><span> </span></button>
        <br>
        <br>
        <div style="clear: both" ></div>
      </div>
    </div>
  </form>
</body>
</html>
<?php
session_start();
//$root_sevsername="localhost";
//$root_username="root";
//$root_password="123456";
//$root_dbname="users";

//$conn= mysqli_connect($root_sevsername,$root_username,$root_password,$root_dbname);
$conn=mysqli_connect("localhost","root","123456","users");
//获取用户名,旧密码,新密码
$p_username = $_POST['username'];
$p_oldpassword = $_POST['oldpassword'];
$p_nowpassword1 = $_POST['nowpassword1'];
$p_nowpassword2 = $_POST['nowpassword2'];
//判断两次密码是否相等
$p_nowpassword3=0;
if($p_nowpassword1==$p_nowpassword2){
    $p_nowpassword3=$p_nowpassword1;
}else{
    echo "<script>alert('两次新密码输入不一致');location.href='floget.html'</script>";
}
if($p_oldpassword==$p_nowpassword3&&!empty($p_nowpassword3)){
    echo "<script>alert('新旧密码相同');location.href='floget.html'</script>";
}
if(empty($p_oldpassword)||empty($p_nowpassword3)){
    echo "<script>alert('新旧密码不得为空');location.href='floget.html'</script>";
}

$whitepattern="/^[A-z\d]*$/i";         // 构造的白名单正则表达式,只允许输入的内容是字符串和数字的组合;/d:表示一个十进制的数字 [0-9]
$blackpattern="/\*|'|\"|#|;|,|or|\^|=|<|>|and|`|\(|\)|\ |%/i";// 构造的黑名单正则表达式

if(!preg_match($whitepattern, $p_nowpassword3)||preg_match($blackpattern,$p_nowpassword3)){
    die("<script>alert('illegal input!,密码中包涵敏感词汇,请重新输入!');location.href='floget.html'</script>");
}
if(preg_match($blackpattern,$p_username)){
    die("<script>alert('illegal input!,用户名中包涵敏感词汇,请重新输入!');location.href='floget.html'</script>");
}
if(empty($p_oldpassword) || empty($p_nowpassword3)) {
    echo "<script>alert('密码错误,请重试');location.href='floget.html'</script>";
} else {

//    $sql1="SELECT password FROM `users`";
//    $result=$conn->query($sql1);
//    $row=mysqli_fetch_array($result);
    $sql_search = "SELECT password, username FROM `users` WHERE password='$p_oldpassword' AND username='$p_username'";
    $result = $conn->query($sql_search);
    $row = mysqli_fetch_array($result);
//    echo "<script>alert('$row');location.href='login.html'</script>";
//    foreach($row as $key => $value):
//        echo $key."-".$value."<br/>";
//    endforeach;
//将查询到的数据赋予以数组赋予row
    if ($p_nowpassword3 !== $row['password']/*新密码与旧密码不等*/ && $p_username == $row['username']/*判断用户名是否正确*/) {
        $sql_write = "UPDATE `users` SET `password` = '$p_nowpassword3' WHERE `users`.`username` = '$p_username'";
        $conn->query($sql_write);
        echo "<script>alert('修改成功,即将返回登录页');location.href='login.html'</script>";
    }
}

exit

<?php
setcookie("username",time()-3600);
header('Refresh:3; url="login.html"');
echo "<h2>三秒后返回登入页面</h2>";

index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<?php
    if(isset($_COOKIE['username'])){
        echo "帐户信息:<br/>";
        echo "用户名:".$_COOKIE['username']."<br/>";
        echo '<a href="out.php">退出登录</a><br>';
        echo '<a href="floget.html">修改密码</a>';
    }else {
        echo '未登入用户不允许访问,<a href="login.html">请登入</a>';
    }
//$cookname=$_COOKIE['username1'];
//echo"<script>alert('欢迎登录!$cookname');/*location.href='index.php'*/</script>";

?>
</body>
</html>
相关实践学习
基于CentOS快速搭建LAMP环境
本教程介绍如何搭建LAMP环境,其中LAMP分别代表Linux、Apache、MySQL和PHP。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
1天前
|
前端开发 开发者 UED
CSS能力是Web开发中不可或缺的技能
【5月更文挑战第26天】CSS能力是Web开发中不可或缺的技能
10 3
|
3天前
|
前端开发
尚硅谷html5+css3(3)布局
尚硅谷html5+css3(3)布局
|
3天前
|
移动开发 搜索推荐 HTML5
尚硅谷html5+css3(1)html相关知识
尚硅谷html5+css3(1)html相关知识
|
4天前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
15 1
基于HTML5开发的Markdown在线编辑器
|
4天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
11 1
|
10天前
|
前端开发 算法
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
|
12天前
|
前端开发 数据安全/隐私保护
利用 HBuilderX 设置CSS样式会员注册页面
利用 HBuilderX 设置CSS样式会员注册页面
21 1
|
12天前
|
前端开发
|
12天前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
12天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
23 0
HTML5/CSS3粒子效果进度条代码

推荐镜像

更多