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

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,高可用系列 2核4GB
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>
相关实践学习
每个IT人都想学的“Web应用上云经典架构”实战
本实验从Web应用上云这个最基本的、最普遍的需求出发,帮助IT从业者们通过“阿里云Web应用上云解决方案”,了解一个企业级Web应用上云的常见架构,了解如何构建一个高可用、可扩展的企业级应用架构。
MySQL数据库入门学习
本课程通过最流行的开源数据库MySQL带你了解数据库的世界。 &nbsp; 相关的阿里云产品:云数据库RDS MySQL 版 阿里云关系型数据库RDS(Relational Database Service)是一种稳定可靠、可弹性伸缩的在线数据库服务,提供容灾、备份、恢复、迁移等方面的全套解决方案,彻底解决数据库运维的烦恼。 了解产品详情:&nbsp;https://www.aliyun.com/product/rds/mysql&nbsp;
相关文章
|
9月前
|
数据采集 存储 缓存
PHP爬虫的使用与开发
本文深入探讨了PHP爬虫的使用与开发,涵盖基本原理、关键技术、开发实践及优化策略。从发送HTTP请求、解析HTML到数据存储,再到处理反爬机制,全面指导读者构建高效可靠的爬虫程序。
201 3
|
4月前
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
256 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
|
4月前
|
人工智能 前端开发 JavaScript
【CodeBuddy】三分钟开发一个实用小功能之:CSS代码瘦身专家
本文展示了AI编程从概念到实践的革命性突破,以一个CSS代码优化工具为例,说明AI如何在3分钟内完成传统开发需2天的任务。文章详细解析了AI在垂直领域工具开发、高频技术场景覆盖及代码维护优化中的应用,并探讨了智能上下文感知、模式识别优化等核心功能。同时,面对语义理解与逻辑验证等挑战,AI结合开发者补充规则,实现人机协同。最终总结指出,AI编程并非取代开发者,而是助力效率提升,推动“需求即代码”的未来方向,开启软件开发新纪元。
87 4
【CodeBuddy】三分钟开发一个实用小功能之:CSS代码瘦身专家
|
6月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
281 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
4月前
|
人工智能 前端开发 JavaScript
【CodeBuddy】三分钟开发一个实用小功能之:CSS渐变背景生成器
这是一个由AI生成的完整CSS渐变生成器项目,具备可视化交互、实时预览和代码生成功能。通过HTML、CSS和JavaScript实现,支持线性与径向渐变,提供随机生成和复制代码功能。项目展示了AI编程助手在快速原型开发、教学辅助和设计系统集成中的应用价值。其智能上下文感知、全链路代码生成和决策能力,为开发者提供了高效工具支持,助力从样板代码中解放创造力。附带优化方向如增强渐变类型、智能推荐系统及工程化改进,进一步拓展了应用场景。
79 2
【CodeBuddy】三分钟开发一个实用小功能之:CSS渐变背景生成器
|
5月前
|
前端开发 PHP 开发者
Wordpress主题开发之index.php
本文介绍了 WordPress 主题开发中页面结构与模板文件的使用方法。通过 header.php、sidebar.php、footer.php 和 index.php 等模板文件,实现网站模块化设计,便于统一管理和代码重用。Header 部分包含 logo、导航条等;Content 展示主体内容;Side bar 显示推荐信息或广告;Footer 则呈现版权和备案信息等内容。文章还提供了各模板文件的具体代码示例,帮助开发者快速理解和应用 WordPress 模板机制。
161 9
|
5月前
|
API PHP 数据库
PhalApi 2.x:让PHP接口开发从“简单”到“极简”的开源框架
PhalApi 2.x 是一款专为接口开发设计的轻量级PHP框架,性能卓越且易于上手。它支持多协议、自动生成文档、提供多种客户端SDK,并采用现代化技术栈,适合中小型项目及微服务架构。通过清晰的分层架构和丰富的扩展库,开发者可快速构建高可用API。其日均超1000万次调用,广泛应用于移动App、物联网、电商等领域。官网:https://www.phalapi.net/,欢迎体验高效开发之旅!
|
10月前
|
编解码 前端开发 UED
探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论,旨在帮助开发者更好地理解和运用媒体查询,提升移动端用户体验。
223 4
|
10月前
|
SQL 安全 前端开发
PHP与现代Web开发:构建高效的网络应用
【10月更文挑战第37天】在数字化时代,PHP作为一门强大的服务器端脚本语言,持续影响着Web开发的面貌。本文将深入探讨PHP在现代Web开发中的角色,包括其核心优势、面临的挑战以及如何利用PHP构建高效、安全的网络应用。通过具体代码示例和最佳实践的分享,旨在为开发者提供实用指南,帮助他们在不断变化的技术环境中保持竞争力。
|
10月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
221 3

推荐镜像

更多