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

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS PostgreSQL,集群系列 2核4GB
简介: 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>
相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
8天前
|
NoSQL 关系型数据库 MySQL
不是 PHP 不行了,而是 MySQL 数据库扛不住啊
【9月更文挑战第8天】这段内容讨论了MySQL在某些场景下面临的挑战及其原因,并指出这些问题不能完全归咎于MySQL本身。高并发读写压力、数据量增长以及复杂查询和事务处理都可能导致性能瓶颈。然而,应用程序设计不合理、系统架构不佳以及其他数据库选择和优化策略不足也是重要因素。综合考虑这些方面才能有效解决性能问题,而MySQL通过不断改进和优化,仍然是许多应用场景中的可靠选择。
|
5天前
|
数据可视化 图形学 UED
只需四步,轻松开发三维模型Web应用
为了让用户更方便地应用三维模型,阿里云DataV提供了一套完整的三维模型Web模型开发方案,包括三维模型托管、应用开发、交互开发、应用分发等完整功能。只需69.3元/年,就能体验三维模型Web应用开发功能!
27 8
只需四步,轻松开发三维模型Web应用
|
9天前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
35 19
|
9天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
28 13
|
8天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
9天前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
|
14天前
|
数据采集 Java 数据挖掘
Java IO异常处理:在Web爬虫开发中的实践
Java IO异常处理:在Web爬虫开发中的实践
|
15天前
|
前端开发 JavaScript 持续交付
Web应用开发的方法
Web应用开发的方法
13 1
WK
|
14天前
|
数据采集 API 开发者
很少有人用python开发web???
Python 是一种流行且广泛使用的编程语言,尤其在 Web 开发领域。它凭借简洁的语法、丰富的框架(如 Django 和 Flask)、强大的库支持及活跃的社区,成为许多开发者和企业的首选。Python 的易学性、高效性及广泛的应用场景(包括 Web API、微服务和数据分析等)使其在 Web 开发中占据重要地位,并将持续发挥更大作用。
WK
36 0
|
3天前
|
存储 SQL 关系型数据库
使用MySQL Workbench进行数据库备份
【9月更文挑战第13天】以下是使用MySQL Workbench进行数据库备份的步骤:启动软件后,通过“Database”菜单中的“管理连接”选项配置并选择要备份的数据库。随后,选择“数据导出”,确认导出的数据库及格式(推荐SQL格式),设置存储路径,点击“开始导出”。完成后,可在指定路径找到备份文件,建议定期备份并存储于安全位置。
46 11