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

举报
坠入极夜的夏 发表于 2024/04/15 21:36:09 2024/04/15
【摘要】 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>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
CSS HTML MySQL PHP
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入