（一） 小白實現了登錄操作，如圖，代碼在下面
一、登錄界面
1. 布局:
a) 定width , height , margin:20px auto , box-shadow , border-radius
b) position:relative;
2. 思路：
2.1提交數據：
a) 驗證數據合理性
在表單提交時(onsubmit屬性),通過JS中的document.getElementById(“id”).value獲取賬號密碼用str.trim()==‘’確認不為空，為空則alert,並返回false,不讓提交
b) 驗證賬號密碼正確
通過表單中的name屬性post到后台（login_judge）,使用$_POST[‘name’]獲取提交表格的值，通過$mysqli_result = db->query(“sql查找語句”)存儲db數據庫中表格的信息，在while中通過$row = $mysqli_result->fetch_array()獲取數據庫第一條信息，用$row[‘user’] == $username判斷用戶名和密碼是否完全匹配
i. 匹配：使用$_SESSION[‘username’]保持用戶登錄（使用session都要先使用session_start()!!!)，用header（"location:gbook.php”）,登錄至留言板。
ii. 檢查完后無匹配：$_SESSION[‘flag’] = 1;//用來在登錄界面alert(“賬號或密碼錯誤”);
header(“location:login.php”);//用來返回登錄界面
c) 賬號或密碼錯誤
使用if（isset($_SESSION[‘flag’])）判斷是否存在flag，存在則說明賬號密碼錯誤，echo JS中的alert();並且使用unset($_SESSISON[‘flag’])摧毀它
d) 其他情況（已經登錄，美化）
使用isset($_SESSION[‘username’])等判斷已登錄，登錄至留言板界面；
使用定時器window.onload =function(){setInterval(“函數” ,2000)};函數進行文字改變，讓頁面變非主流。。。。
代碼
login.php//登錄界面
<?php /*使用session必須*/ session_start(); /*判斷是否已登錄，已登錄則跳轉至留言板界面*/ if( isset($_SESSION['username'] ) && isset($_SESSION['password']) ) {header("location:user_gbook/gbook.php");eixt();} /*判斷是否是由后台傳過來的賬號密碼錯誤信息*/ if(isset($_SESSION['flag']) ){ /*alert登錄錯誤信息*/ echo "<script type='text/javascript'>alert('用戶名或密碼錯誤')</script>"; /*銷毀flag，避免一直alert()錯誤信息*/ unset($_SESSION['flag']); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Gbook</title> <style type="text/css"> .title {width:158px;margin:20px auto;/*display:block;*/font-size:23px;color:pink;position:relative;top:18px;} .button{width:102px;height:23px;margin:15px 0px 0px 34px;} .wrap{width:600px;height:300px; margin:200px auto;border:2px solid pink;box-shadow:0 0 5px 0 #aaa; border-radius:30px;} .wrap .login{width:174px;margin: 0 auto;} .wrap .input{width:174px;margin:50px auto;} </style> <script type="text/javascript"> var flag = 0; window.onload = function(){ var t = setInterval("changeColor()",2000); } function judge(){ var username = document.getElementById("username").value; var password = document.getElementById("password").value; if(username == ""||username.trim()==""){alert("用戶名不能為空！");return false;} if(password == ""||password.trim()==""){alert("密碼不能為空!");return false;} return true; } function changeColor(){ var node = document.getElementById("title"); if(flag == 0 ){ node.innerHTML = "✩留言板登錄✩"; flag = 1; } else { node.innerHTML = "★留言板登錄★";flag=0;} } </script> </head> <body> <div class="wrap"> <div class="title" id="title">✩留言板登錄✩</div> <div class="login"> <!--判斷數據--> <form class="input" action="login_judge.php" method="post" onsubmit="return judge();"> <label>用戶名：</label> <input name="username" id="username" type="text" class="user" placeholder="請輸入賬號"/></br> <label>密碼：</label></br> <input name ="password" id="password" type="password" class="password" placeholder="請輸入密碼"/></br> <div class="button"> <input type="submit" class="submit" value="登錄" name="login" /> <!--實現本地頁面跳轉--> <input type="button" class="regist" value="注冊" name="regist" onclick="window.location.href='regist.php'"/> </div> </form> </div> </div> </body> </html>
login_judge.php//實現登錄的后台
<?php session_start(); $success = false; /*自己編寫的，連接數據庫並設置字符編碼，需要自己創建好數據庫和表*/ include('connect.php'); /*獲取傳輸過來的表單信息*/ $username = $_POST["username"]; $password = $_POST["password"]; $sql = "select * from user_msg"; /*執行sql語句*/ $mysqli_result = $db->query($sql); while($row = $mysqli_result->fetch_array()){ if($row['username']==$username && $row['password']==$password){ $success = true; break; } } /*查找到匹配的賬號密碼*/ if($success == true) { /*用session保持登錄狀態*/ $_SESSION['username']=$username; $_SESSION['password']=$password; header("location:user_gbook/gbook.php"); } /*沒找到匹配的賬號密碼*/ else { /*返回登錄界面並告訴界面登錄失敗*/ $_SESSION['flag']=1; header("location:login.php"); } ?>