PHP連接數(shù)據(jù)庫實現(xiàn)簡單的登錄頁面功能

更新時間：2023年09月21日 10:22:52 作者：木路露

這篇文章主要介紹了PHP連接數(shù)據(jù)庫實現(xiàn)簡單的登錄頁面功能,文中的示例代碼講解詳細,對大家的學(xué)習(xí)或工作有一定的幫助,感興趣的可以了解一下

最后實現(xiàn)結(jié)果如下圖所示：

如果輸入的用戶名或密碼為空，則會彈出對話框提示

登錄成功頁面：

具體實現(xiàn)代碼如下：

HTML代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陸</title>
    <link rel="icon" href="img/denglu-img/loginIcon.png" rel="external nofollow" >
    <link rel="stylesheet" href="CSS/denglu-css.css" rel="external nofollow" >
    <script src="JS/jquery-1.11.0.min.js"></script>
    <link rel="stylesheet" href="CSS/bootstrap.min.css" rel="external nofollow" >
    <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" rel="external nofollow" 
                            style="color:#fff;">忘記密碼？</a></span>
                </div>
                <div>
                    <p>
                        <span class="login_submit">
                            <button>登陸</button>
                        </span>
                        <span class="zhuce">
                            <!-- <a href="zhuce.php" rel="external nofollow"  rel="external nofollow" ><input type="button" value="注冊"></a> -->
                            <a href="zhuce.php" rel="external nofollow"  rel="external nofollow" ><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連接數(shù)據(jù)庫：

<?php
// 連接到數(shù)據(jù)庫
$servername = "localhost";
$serverusername = "root";
$serverpassword = "123456";
$dbname = "mybs";
// 創(chuàng)建連接
$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']) {
        // 創(chuàng)建cookie
        // 過期時間被設(shè)置為一個月（60 秒 * 60 分 * 24 小時 * 30 天）
        $expire = time() + 60 * 60 * 24 * 30;
        setcookie("fusername1", $fusername, $expire);
        setcookie("fuserpassword1", $fuserpassword, $expire);
        //關(guān)閉數(shù)據(jù)庫,可進行頁面跳轉(zhuǎn) 這里為了方便 僅顯示為登錄成功
        // 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>";
}

所建數(shù)據(jù)庫如下：

這樣我們簡單的登錄頁面就做好了，通過form表單傳遞表單信息，一定要與input的name屬性相匹配才能成功。這里所創(chuàng)建的cookie便于用戶登錄后，向多個頁面?zhèn)鬟f用戶信息。如：在另一個頁面中 $fusername = $_COOKIE["fusername1"]; 來接受cookie所傳遞的值

以上就是PHP連接數(shù)據(jù)庫實現(xiàn)簡單的登錄頁面功能的詳細內(nèi)容，更多關(guān)于PHP數(shù)據(jù)庫登錄頁面的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: