（一）小白实现了登录操作，如图，代码在下面

一、登录界面

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(MYSQL_ASSOC))获取逆序的第一条信息　　（3->2->1），用$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(MYSQL_ASSOC)){
        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");
    }
?>

能登录注册的留言板(1)——实现登录