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

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,高可用系列 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>
相关实践学习
如何快速连接云数据库RDS MySQL
本场景介绍如何通过阿里云数据管理服务DMS快速连接云数据库RDS MySQL,然后进行数据表的CRUD操作。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
23天前
|
存储 关系型数据库 MySQL
PHP与MySQL动态网站开发:从基础到实践####
本文将深入探讨PHP与MySQL的结合使用,展示如何构建一个动态网站。通过一系列实例和代码片段,我们将逐步了解数据库连接、数据操作、用户输入处理及安全防护等关键技术点。无论您是初学者还是有经验的开发者,都能从中获益匪浅。 ####
|
25天前
|
关系型数据库 MySQL PHP
php实现一个简单的MySQL分页
通过本文的详细步骤和代码示例,我们实现了一个简单的PHP MySQL分页功能。主要步骤包括计算总记录数、设置分页参数、查询当前页的数据以及生成分页链接。这种分页方式适用于大多数Web应用,能够有效提升用户体验和页面响应速度。
26 4
|
19天前
|
SQL 关系型数据库 MySQL
PHP与MySQL的高效交互:从基础到实践####
本文深入探讨了PHP与MySQL数据库之间的高效交互技术,涵盖了从基础连接到高级查询优化的全过程。不同于传统的摘要概述,这里我们直接以一段精简代码示例作为引子,展示如何在PHP中实现与MySQL的快速连接与简单查询,随后文章将围绕这一核心,逐步展开详细讲解,旨在为读者提供一个从入门到精通的实战指南。 ```php <?php // 数据库配置信息 $servername = "localhost"; $username = "root"; $password = "password"; $dbname = "test_db"; // 创建连接 $conn = new mysqli($se
23 0
|
26天前
|
关系型数据库 MySQL PHP
PHP与MySQL的深度整合:构建高效动态网站####
在当今这个数据驱动的时代,掌握如何高效地从数据库中检索和操作数据是至关重要的。本文将深入探讨PHP与MySQL的深度整合方法,揭示它们如何协同工作以优化数据处理流程,提升网站性能和用户体验。我们将通过实例分析、技巧分享和最佳实践指导,帮助你构建出既高效又可靠的动态网站。无论你是初学者还是有经验的开发者,都能从中获得宝贵的见解和实用的技能。 ####
21 0
|
2天前
|
存储 Oracle 关系型数据库
数据库传奇:MySQL创世之父的两千金My、Maria
《数据库传奇:MySQL创世之父的两千金My、Maria》介绍了MySQL的发展历程及其分支MariaDB。MySQL由Michael Widenius等人于1994年创建,现归Oracle所有,广泛应用于阿里巴巴、腾讯等企业。2009年,Widenius因担心Oracle收购影响MySQL的开源性,创建了MariaDB,提供额外功能和改进。维基百科、Google等已逐步替换为MariaDB,以确保更好的性能和社区支持。掌握MariaDB作为备用方案,对未来发展至关重要。
10 3
|
2天前
|
安全 关系型数据库 MySQL
MySQL崩溃保险箱:探秘Redo/Undo日志确保数据库安全无忧!
《MySQL崩溃保险箱:探秘Redo/Undo日志确保数据库安全无忧!》介绍了MySQL中的三种关键日志:二进制日志(Binary Log)、重做日志(Redo Log)和撤销日志(Undo Log)。这些日志确保了数据库的ACID特性,即原子性、一致性、隔离性和持久性。Redo Log记录数据页的物理修改,保证事务持久性;Undo Log记录事务的逆操作,支持回滚和多版本并发控制(MVCC)。文章还详细对比了InnoDB和MyISAM存储引擎在事务支持、锁定机制、并发性等方面的差异,强调了InnoDB在高并发和事务处理中的优势。通过这些机制,MySQL能够在事务执行、崩溃和恢复过程中保持
14 3
|
2天前
|
SQL 关系型数据库 MySQL
数据库灾难应对:MySQL误删除数据的救赎之道,技巧get起来!之binlog
《数据库灾难应对:MySQL误删除数据的救赎之道,技巧get起来!之binlog》介绍了如何利用MySQL的二进制日志(Binlog)恢复误删除的数据。主要内容包括: 1. **启用二进制日志**:在`my.cnf`中配置`log-bin`并重启MySQL服务。 2. **查看二进制日志文件**:使用`SHOW VARIABLES LIKE &#39;log_%&#39;;`和`SHOW MASTER STATUS;`命令获取当前日志文件及位置。 3. **创建数据备份**:确保在恢复前已有备份,以防意外。 4. **导出二进制日志为SQL语句**:使用`mysqlbinlog`
20 2
|
16天前
|
关系型数据库 MySQL 数据库
Python处理数据库:MySQL与SQLite详解 | python小知识
本文详细介绍了如何使用Python操作MySQL和SQLite数据库,包括安装必要的库、连接数据库、执行增删改查等基本操作,适合初学者快速上手。
106 15
|
9天前
|
SQL 关系型数据库 MySQL
数据库数据恢复—Mysql数据库表记录丢失的数据恢复方案
Mysql数据库故障: Mysql数据库表记录丢失。 Mysql数据库故障表现: 1、Mysql数据库表中无任何数据或只有部分数据。 2、客户端无法查询到完整的信息。
|
16天前
|
关系型数据库 MySQL 数据库
数据库数据恢复—MYSQL数据库文件损坏的数据恢复案例
mysql数据库文件ibdata1、MYI、MYD损坏。 故障表现:1、数据库无法进行查询等操作;2、使用mysqlcheck和myisamchk无法修复数据库。