PHP连接数据库实现简单的登录页面

木路露

15593人浏览 · 2022-03-10 19:16:48

木路露 · 2022-03-10 19:16:48 发布

最后实现结果如下图所示：

如果输入的用户名或密码为空，则会弹出对话框提示

同样的，如果输入的密码不正确也会弹出对话框提示：

登录成功页面：

具体实现代码如下：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <link rel="icon" href="img/denglu-img/loginIcon.png">
    <link rel="stylesheet" href="CSS/denglu-css.css">
    <script src="JS/jquery-1.11.0.min.js"></script>
    <link rel="stylesheet" href="CSS/bootstrap.min.css">
    <script src="JS/bootstrap.min.js"></script>
</head>

<body>
    <div id="box" style="background: url('img/loginBackground.jpg');position:fixed;background-repeat: no-repeat;position:fixed;
    top: 0;left: 0;width:100%;height:100%;min-width: 1000px;z-index:-10;zoom: 1;background-color: #fff;background-repeat: no-repeat;
    background-size: cover;-webkit-background-size: cover;-o-background-size: cover;
    background-position: center 0;"></div>
    <form action="login.php" method="post">
        <div class="login">
            <div class="login_container">
                <div class="login_titles">登录</div>
                <div class="login_user">
                    <img src="img/denglu-img/user.png">
                    <input name="fusername" id="user" type="text" placeholder="请输入用户名" style="width: 300px;">
                </div>
                <div class="login_pwd login_user">
                    <img src="img/denglu-img/pwd.png">
                    <input name="fuserpassword" id="pwd" type="text" placeholder="请输入密码" style="width: 300px;">
                </div>
                <!-- 记住密码 -->
                <div class="login_remenber">
                    <input id="remenber_pwd" type="checkbox" value="1" name="remember" checked> 记住密码
                    <span class="forgetpsd" style="float: right;"><a href="forget.php"
                            style="color:#fff;">忘记密码？</a></span>
                </div>
                <div>
                    <p>
                        <span class="login_submit">
                            <button>登陆</button>
                        </span>
                        <span class="zhuce">
                            <!-- <a href="zhuce.php"><input type="button" value="注册"></a> -->
                            <a href="zhuce.php"><input type="button" value="注册"
                                    style=" width: 100px;opacity: 0.8;text-align: center;color:black;font-size: 16px;margin: 10px 20px;">
                            </a>
                        </span>
                    </p>
                </div>
            </div>
        </div>
    </form>
</body>

</html>

css代码：

*{
    margin: 0;
    padding: 0;
}
.login{
    position: fixed;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
.login_title{
    text-align: center;
    margin: 10px 0;
    font-size: 30px;
    color: white;
    font-family: "华文行楷";
}
.login_container{
    padding: 20px 30px;
    background: rgba(0,0,0,0.3);
}
.login_titles{
    margin-bottom: 10px;
    text-align: center;
    font-size: 16px;
    color: #eee;
}
.login_user{
    position: relative;
    margin: 20px 0;
}
.login_user img{
    position: absolute;
    height: 20px;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
}
.login_user input{
    outline: none;
    border: none;
    padding: 7px 0px 7px 35px;
    width: 300px;
    font-family: "Microsoft soft";
    font-size: 14px;
    opacity: 0.4;
}
.login_remenber{
    font-family: "Microsoft soft";
    font-size: 14px;
    color: #eee;
}
.login_submit button{
    width: 100px;
    opacity: 0.8;
    text-align: center;
    color:black;
    font-size: 16px;
    margin: 10px 20px;
}
.zhuce{
    width: 100px;
    opacity: 0.8;
    text-align: center;
    color:black;
    font-size: 16px;
    margin: 10px 20px;
}
.login_message div{
    background: red;
    opacity: 0.8;
    text-align: center;
    color: white;
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    margin: 10px 0;
    display: none;
    transition:  2s;
}
.login_message{
    -webkit-animation: login_message 2s linear;
    -moz-animation: login_message 2s linear;
    animation:login_message 2s linear;
}

PHP连接数据库：

<?php
// 连接到数据库
$servername = "localhost";
$serverusername = "root";
$serverpassword = "123456";
$dbname = "mybs";
// 创建连接
$conn = new mysqli($servername, $serverusername, $serverpassword, $dbname);

// 检测连接
// if ($conn->connect_error) {
//     die("连接失败: " . $conn->connect_error);
// } else {
//     echo "连接成功";
// }

// 验证表单 登录信息
//判断用户名和密码是否为空
$fusername = isset($_POST['fusername']) ? $_POST['fusername'] : "";
$fuserpassword = isset($_POST['fuserpassword']) ? $_POST['fuserpassword'] : "";
$remember = isset($_POST['remember']) ? $_POST['remember'] : "";
// $fusername = $_POST["fusername"];
// $fuserpassword = $_POST["fuserpassword"];
// echo $fusername, $fuserpassword;


if (!empty($fusername) && !empty($fuserpassword)) { //建立连接
    $sql = "SELECT username,userpassword FROM `users` WHERE username = '$fusername' and userpassword = '$fuserpassword'";
    $result = $conn->query($sql);
    $row = mysqli_fetch_array($result); //判断用户名或密码是否正确
    if ($fusername == $row['username'] && $fuserpassword == $row['userpassword']) {
        // 创建cookie
        // 过期时间被设置为一个月（60 秒 * 60 分 * 24 小时 * 30 天）
        $expire = time() + 60 * 60 * 24 * 30;
        setcookie("fusername1", $fusername, $expire);
        setcookie("fuserpassword1", $fuserpassword, $expire);
        //关闭数据库,可进行页面跳转 这里为了方便 仅显示为登录成功
        // header("Location:personcenter.html");
        echo "登录成功！";
        mysqli_close($conn);
    } else {
        //用户名或密码错误，赋值err为1
        echo "<script>alert('用户名或密码错误，请重新输入！');location.href='denglu.html';</script>";
    }
} else {
    //用户名或密码为空，赋值err为2
    echo "<script>alert('用户名或密码不能为空，请重新输入！');location.href='denglu.html'</script>";
}

所建数据库如下：