PHP連接數(shù)據(jù)庫實(shí)現(xiàn)簡單的登錄頁面功能
最后實(shí)現(xiàn)結(jié)果如下圖所示:
如果輸入的用戶名或密碼為空,則會彈出對話框提示
如果輸入的用戶名或密碼為空,則會彈出對話框提示
登錄成功頁面:
具體實(shí)現(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 "連接成功"; // } // 驗(yàn)證表單 登錄信息 //判斷用戶名和密碼是否為空 $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í)間被設(shè)置為一個(gè)月(60 秒 * 60 分 * 24 小時(shí) * 30 天) $expire = time() + 60 * 60 * 24 * 30; setcookie("fusername1", $fusername, $expire); setcookie("fuserpassword1", $fuserpassword, $expire); //關(guān)閉數(shù)據(jù)庫,可進(jìn)行頁面跳轉(zhuǎn) 這里為了方便 僅顯示為登錄成功 // header("Location:personcenter.html"); echo "登錄成功!"; mysqli_close($conn); } else { //用戶名或密碼錯(cuò)誤,賦值err為1 echo "<script>alert('用戶名或密碼錯(cuò)誤,請重新輸入!');location.href='denglu.html';</script>"; } } else { //用戶名或密碼為空,賦值err為2 echo "<script>alert('用戶名或密碼不能為空,請重新輸入!');location.href='denglu.html'</script>"; }
所建數(shù)據(jù)庫如下:
這樣我們簡單的登錄頁面就做好了,通過form表單傳遞表單信息,一定要與input的name屬性相匹配才能成功。這里所創(chuàng)建的cookie便于用戶登錄后,向多個(gè)頁面?zhèn)鬟f用戶信息。如:在另一個(gè)頁面中 $fusername = $_COOKIE["fusername1"]; 來接受cookie所傳遞的值
以上就是PHP連接數(shù)據(jù)庫實(shí)現(xiàn)簡單的登錄頁面功能的詳細(xì)內(nèi)容,更多關(guān)于PHP數(shù)據(jù)庫登錄頁面的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
php變量與數(shù)組相互轉(zhuǎn)換的方法(extract與compact)
這篇文章主要介紹了php變量與數(shù)組相互轉(zhuǎn)換的方法,結(jié)合實(shí)例形式分析了extract與compact函數(shù)的相關(guān)功能與使用技巧,需要的朋友可以參考下2016-12-12PHP 實(shí)現(xiàn)explort() 功能的詳解
本篇文章是對PHP 實(shí)現(xiàn)explort()功能進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06PHP的SQL注入實(shí)現(xiàn)(測試代碼安全不錯(cuò))
看黑客是如何入侵的,我們寫編寫php代碼的過程中,最好自己先測試效果。2011-02-02