欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

用PHP代码实现一个漂亮的登录注册前后端关联的界面

程序员文章站 2024-03-22 23:14:04
...

用PHP代码实现一个漂亮的登录注册前后端关联的界面

登录界面
用PHP代码实现一个漂亮的登录注册前后端关联的界面 没输入用户名或者密码的提示
用PHP代码实现一个漂亮的登录注册前后端关联的界面用户名或者密码错误的提示
用PHP代码实现一个漂亮的登录注册前后端关联的界面

Login.php.

<!DOCTYPE html>
<html>
<head>
    <title>登录</title>
    <link rel="stylesheet" href="login.css">
    <meta name="content-type"; charset="UTF-8">
</head>
<body>
<div id="bigBox">
        <h1>登录页面</h1>

        <form id="loginform" action="loginaction.php" method="post">
            <div class="inputBox">

                    <div class="inputText">
                        <input type="text" id="name" name="username" placeholder="Username" value="">
                    </div>
                <div class="inputText">
                   <input type="password" id="password" name="password" placeholder="Password">
                </div>
                <br >
                <div style="color: white;font-size: 12px" >
                    <?php
                    $err = isset($_GET["err"]) ? $_GET["err"] : "";
                    switch ($err) {
                        case 1:
                            echo "用户名或密码错误！";
                            break;

                        case 2:
                            echo "用户名或密码不能为空！";
                            break;
                    } ?>
                </div>
                <div class="register">
                    <a href="register.php" style="color: white">注册账号</a>
                </div>
                <div class="fgtpwd">
                    <a href="#" style="color: white">忘记密码</a>
                </div>
            </div>
           <div>
               <input type="submit" id="login" name="login" value="登录" class="loginButton m-left">
               <input type="reset" id="reset" name="reset" value="重置" class="loginButton">
           </div>
</div>
</div>
</form>
</body>
</html>

login.css 背景图片自己找一张好看一点的

body
{
    margin: 0;
    padding: 0;
    background-image: url("image/bgimg.jpg");	/* 背景图片 */
    background-repeat: no-repeat;	/* 背景图片不重复 */
}
#bigBox
{
    margin: 0 auto;	/* login框剧中 */
    margin-top: 170px; /* login框与顶部的距离 */
    padding: 20px 50px;	/* login框内部的距离(内部与输入框和按钮的距离) */
    background-color: #00000090;	/* login框背景颜色和透明度 */
    width: 400px;
    height: 300px;
    border-radius: 10px;	/* 圆角边 */
    text-align: center;	/* 框内所有内容剧中 */
}
#bigBox h1
{
    color: white;	/* LOGIN字体颜色 */
    font-family: "Comic Sans MS";
}
#bigBox .inputBox
{
    margin-top: 20px;	/* 输入框顶部与LOGIN标题的间距 */
}
#bigBox .inputBox .inputText
{
    margin-top: 20px;	/* 输入框之间的距离 */
}
#bigBox .inputBox .inputText input
{
    border: 0;	/* 删除输入框边框 */
    padding: 10px 10px;	/* 输入框内的间距 */
    border-bottom: 1px solid white;	/* 输入框白色下划线 */
    background-color: #00000000;	/* 输入框透明 */
    color: white;	/* 输入字体的颜色 */
}
#bigBox .loginButton
{

    margin-right: 30px;
    margin-top: 40px;	/* 按钮顶部与输入框的距离 */
    width: 100px;
    height: 25px;
    color: white;	/* 按钮字体颜色 */
    border: 0; /* 删除按钮边框 */
    border-radius: 20px;	/* 按钮圆角边 */
    background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);	/* 按钮颜色 */
}
.m-left{
    margin-left: 30px;

}
.register{
    position: absolute;
    margin-bottom: 1000px;
    right: 10px;
    color: #ffffff;
    /*left:  calc(5% - 200px);*/
    margin-right:800px;
    /*bottom: 240px;*/
    font-size: 13px;
}
.fgtpwd{
    position: absolute;
    margin-bottom: 1000px;
    right: 10px;
    color: #ffffff;
    /*left:  calc(5% - 200px);*/
    margin-right:666px;
    /*bottom: 240px;*/
    font-size: 13px;
}

Loginaction.php
本来在登录界面有一个记住我的单选框，但是后来觉得太难看删掉了，但是代码里没有删，反正不会报错就行了，懒得改了

<?php
header("Content-Type: text/html;charset=utf-8");
// $Id:$ //声明变量
$username = isset($_POST['username']) ? $_POST['username'] : "";
$password = isset($_POST['password']) ? $_POST['password'] : "";
$remember = isset($_POST['remember']) ? $_POST['remember'] : ""; //判断用户名和密码是否为空
if (!empty($username) && !empty($password)) { //建立连接
    $conn = mysqli_connect('localhost', 'root', '', 'user'); //准备SQL语句
    $sql_select = "SELECT username,password FROM usertext WHERE username = '$username' AND password = '$password'"; //执行SQL语句
    $ret = mysqli_query($conn, $sql_select);
    $row = mysqli_fetch_array($ret); //判断用户名或密码是否正确
    if ($username == $row['username'] && $password == $row['password'])
    { //选中“记住我” //本来在登录界面有一个记住我的单选框，但是后来觉得太难看删掉了，但是代码里没有删，反正不会报错就行了，懒得改了
        if ($remember == "on")
        { //创建cookie
            setcookie("", $username, time() + 7 * 24 * 3600);
        } //开启session
        session_start(); //创建session
        $_SESSION['user'] = $username; //写入日志
        $ip = $_SERVER['REMOTE_ADDR'];
        $date = date('Y-m-d H:m:s');
        $info = sprintf("当前访问用户：%s,IP地址：%s,时间：%s /n", $username, $ip, $date);
        $sql_logs = "INSERT INTO logs(username,ip,date) VALUES('$username','$ip','$date')";
        //日志写入文件，如实现此功能，需要创建文件目录logs
        $f = fopen('./logs/' . date('Ymd') . '.log', 'a+');
        fwrite($f, $info);
        fclose($f); //跳转到loginsucc.php页面
        header("Location:loginsucc.php"); //关闭数据库,跳转至loginsucc.php
        mysqli_close($conn);
    }
    else
    {
        //用户名或密码错误，赋值err为1
        header("Location:login.php?err=1");
    }
} else { //用户名或密码为空，赋值err为2
    header("Location:login.php?err=2");
}

登录成功的界面我就随便写了一个
loginsucc.php

<!DOCTYPE html>
<html>
<head>
    <title>登录成功</title>
    <meta name="content-type";
          charset="UTF-8">
</head>
<body>
<div>
    <?php
    // $Id:$ //开启session
    session_start(); //声明变量
    $username = isset($_SESSION['user']) ? $_SESSION['user'] : ""; //判断session是否为空
    if (!empty($username)) { ?>
        <h1>登录成功！</h1> 欢迎您！
        <?php
        echo $username; ?>
        <br/> <a href="login.php">退出</a> //跳转至主网页
        <?php
    } else { //未登录，无权访问
        ?>
        <h1>你无权访问！！！</h1>
        <?php
    } ?> </div>
</body>
</html>

注册界面
用PHP代码实现一个漂亮的登录注册前后端关联的界面那些密码不一致的提示的图片我就不放了，跟登录差不多，嘻嘻

register.php

<!DOCTYPE html>
<html>
<head>
    <title>注册</title>
    <link rel="stylesheet" href="register.css">
    <meta name="content-type"; charset="UTF-8">
</head>
<body>
<div id="bigBox">
        <h1>注册页面</h1>


        <form action="registeraction.php" method="post">
            <div class="inputBox">

                <div class="inputText">
                <input type="text" id="id_name" name="username" required="required" placeholder="Username">
                </div>
                <div class="inputText">
                <input type="password" id="password" name="password" required="required" placeholder="Password">
                </div>
                <div class="inputText">
                <input type="password" id="re_password" name="re_password" required="required" placeholder="PasswordAgain">
                </div>
                <div class="inputText m-plc" style="color: white;opacity: 70%">
                    Sex：
                <input type="radio" id="sex" name="sex" value="mam" style="color: white">男
                <input type="radio" id="sex" name="sex" value="woman" style="color: white">女
                </div>
                <div class="inputText">
                <input type="text" id="qq" name="qq" required="required" placeholder="QQ">
                </div>
                <div class="inputText">
                <input type="email" id="email" name="email" required="required" placeholder="Email">
                </div>
                <div class="inputText">
                <input type="text" id="phone" name="phone" required="required" placeholder="Phone">
                </div>
                <div class="inputText">
                <input type="text" id="address" name="address" required="required" placeholder="Address">
                </div>
                <br>
                <div style="color: white;font-size: 12px" >
                <!--提示信息-->
                <?php
                $err = isset($_GET["err"]) ? $_GET["err"] : "";
                switch ($err) {
                    case 1:
                        echo "用户名已存在！";
                        break;

                    case 2:
                        echo "密码与重复密码不一致！";
                        break;

                    case 3:
                        echo "注册成功！";
                        break;
                }
                ?>
                </div>
            </div>
            <div>
                <input type="submit" id="register" name="register" value="注册" class="loginButton m-left">
                <input type="reset" id="reset" name="reset" value="重置" class="loginButton">
            </div>

            <div class="register">
            <a href="login.php" style="color: white">已有账号，去登录</a>
            </div>
        </form>
</div>
</body>
</html>

register.css

body
{
    margin: 0;
    padding: 0;
    background-image: url("image/bgimg.jpg");	/* 背景图片 */
    background-repeat: no-repeat;	/* 背景图片不重复 */
}
#bigBox
{
    margin: 0 auto;	/* login框剧中 */
    margin-top: 90px; /* login框与顶部的距离 */
    padding: 20px 50px;	/* login框内部的距离(内部与输入框和按钮的距离) */
    background-color: #00000090;	/* login框背景颜色和透明度 */
    width: 500px;
    height: 500px;
    border-radius: 10px;	/* 圆角边 */
    text-align: center;	/* 框内所有内容剧中 */
}
#bigBox h1
{
    color: white;	/* LOGIN字体颜色 */
    font-family: "Comic Sans MS";
}
#bigBox .inputBox
{
    margin-top: 15px;	/* 输入框顶部与LOGIN标题的间距 */
}
#bigBox .inputBox .inputText
{
    margin-top: 6px;	/* 输入框之间的距离 */
}
#bigBox .inputBox .inputText input
{
    border: 0;	/* 删除输入框边框 */
    padding: 10px 10px;	/* 输入框内的间距 */
    border-bottom: 1px solid white;	/* 输入框白色下划线 */
    background-color: #00000000;	/* 输入框透明 */
    color: white;	/* 输入字体的颜色 */
}
#bigBox .loginButton
{

    margin-right: 30px;
    margin-top: 14px;	/* 按钮顶部与输入框的距离 */
    width: 100px;
    height: 25px;
    color: white;	/* 按钮字体颜色 */
    border: 0; /* 删除按钮边框 */
    border-radius: 20px;	/* 按钮圆角边 */
    background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);	/* 按钮颜色 */
}
.m-left{
    margin-left: 40px;

}
.m-plc{
    margin-right: 30px;
    margin-top: 30px;
}
.register{
    position: absolute;
    /*margin-bottom: 1000px;*/
    right: 10px;
    color: #ffffff;
    /*left:  calc(5% - 200px);*/
    margin-right:700px;
    /*bottom: 240px;*/
    font-size: 13px;
    color: white;
    bottom: 70px;

}

registeraction.php
mysqli_set_charset($conn,“utf8”);
这句话很重要，不然写进数据库的中文会乱码

<?php
header("Content-Type: text/html;charset=utf-8");
// $Id:$ //声明变量
$username = isset($_POST['username']) ? $_POST['username'] : "";
$password = isset($_POST['password']) ? $_POST['password'] : "";
$re_password = isset($_POST['re_password']) ? $_POST['re_password'] : "";
$sex = isset($_POST['sex']) ? $_POST['sex'] : "";
$qq = isset($_POST['qq']) ? $_POST['qq'] : "";
$email = isset($_POST['email']) ? $_POST['email'] : "";
$phone = isset($_POST['phone']) ? $_POST['phone'] : "";
$address = isset($_POST['address']) ? $_POST['address'] : "";

if ($password == $re_password) { //建立连接
    $conn = mysqli_connect("localhost", "root", "", "user"); //准备SQL语句,查询用户名
    mysqli_set_charset($conn,"utf8");
    $sql_select = "SELECT username FROM usertext WHERE username = '$username'"; //执行SQL语句
    $ret = mysqli_query($conn, $sql_select);
    $row = mysqli_fetch_array($ret); //判断用户名是否已存在
    if ($username == $row['username']) { //用户名已存在，显示提示信息
        header("Location:register.php?err=1");
    } else { //用户名不存在，插入数据 //准备SQL语句
        $sql_insert = "INSERT INTO usertext(username,password,sex,qq,email,phone,address) 
VALUES('$username','$password','$sex','$qq','$email','$phone','$address')"; //执行SQL语句
        mysqli_query($conn, $sql_insert);
        header("Location:register.php?err=3");
    } //关闭数据库
    mysqli_close($conn);
} else {
    header("Location:register.php?err=2");
} ?>

数据库
用PHP代码实现一个漂亮的登录注册前后端关联的界面完结撒花，嘿嘿

相关标签： mysql 注册、登录

上一篇： Maximum Profit

下一篇： 使用css实现手风琴菜单

推荐阅读