用PHP和HTML做登录注册操作数据库Mysql

news2024/7/6 17:42:50

用PHP和HTML做登录注册操作数据库Mysql

两个HTML页面，两个PHP,两个css,两张图片，源码+资源在上方。

HTML页面

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="../../css/office/login.css">
</head>
<body>
    <div class="loginCard">
        <div class="logo">
            <img src="../../assets/images/logo.png" alt="" srcset="">
        </div>
        <form action="../../controllers/office/login.php" method="post">
            <label for="">昵称：</label>
            <input type="text" name="username" id="" placeholder="请输入昵称"><br><br>
            <label for="">密码：</label>
            <input type="password" name="password" id="" placeholder="请输入密码"><br><br>
            <a href="register.html">我没有账号，去注册</a>
            <button type="submit">登录</button>
        </form>
    </div>
</body>
</html>

register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/office/register.css">
</head>
<body>
    <div class="loginCard">
        <div class="logo">
            <img src="../../assets/images/logo.png" alt="" srcset="">
        </div>
    <form action="../../controllers/office/register.php" method="post"">
        用户名：<input type="text" name="username" id="" >
        <br>
        密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" id="">
        <br>
        性&nbsp;&nbsp;&nbsp;别：<select name="gender" id="">
            <option value="0">女</option>
            <option value="1">男</option>
        </select>
        <br>
        简&nbsp;&nbsp;&nbsp;介：<input type="text" name="brief" id="">
        <br>
        <a href="login.html">我已有账号，去登录</a>
        <input type="submit" name="" id="" value="注冊">
    </form>
</div>
</body>
</html>

php页面

login.php

<?php
header('content-type:text/html;charset=utf-8');
$host = "localhost";
$user = "root";
$password = "";
$db = "mydb";
$mysqli =new mysqli($host, $user, $password, $db);
if ($mysqli->connect_errno) {
    echo "连接失败" . $mysqli->connect_error;
}
$mysqli->set_charset("utf8");

$username=$_POST['username'];
$password=$_POST['password'];

$sql = "SELECT user_Name,user_Pwd FROM user WHERE user_Name='$username' AND user_Pwd='$password'";
$mysqli_stmt=$mysqli->query($sql);
if ($mysqli_stmt->num_rows > 0) {
    echo "登录成功";
}else{
    echo "<script>alert('登录失败');window.location.href='../../views/office/login.html'</script>";
}
$mysqli_stmt->free_result();
$mysqli->close();

?>

register.php

<?php
header('content-type:text/html;charset=utf-8');
$host = "localhost";
$use = "root";
$pass = "";
$db = "mydb";
$mysqli = mysqli_connect($host, $use, $pass, $db);
if (mysqli_connect_errno()) {
    echo "连接失败" . mysqli_connect_error();
}
$mysqli->set_charset("utf8");

//执行读取用户列表
//select($mysqli);

//注册
insert($mysqli);

$mysqli->close();

//自定义函数function
function insert($mysqli)
{
    $sql = "INSERT INTO user(user_Name,user_Pwd,gender,brief)VALUES(?,?,?,?)";
    $mysqli_stmt = $mysqli->prepare($sql);
    $username = $_POST["username"];
    $password = $_POST["password"];
    $gender = $_POST["gender"];
    $brief = $_POST["brief"];

    //ssis代表四个字符串，s字符串,i整数类型
    $mysqli_stmt->bind_param("ssis", $username, $password, $gender, $brief);

    if ($mysqli_stmt->execute()) {
        echo PHP_EOL;
        echo "<script>alert('恭喜您，注册成功');window.location.href='../../views/office/login.html'</script>";
    } else {
        echo "失败" . $mysqli_stmt->errno;
    }
    //释放结果集
    $mysqli_stmt->free_result();
    $mysqli_stmt->close();
};

//自定义函数function
function select($mysqli)
{
    $sql = "SELECT uid,username,password,age,gender FROM demo";
    $mysqli_stmt = $mysqli->prepare($sql);
    $uid=null;
    $username = null;
    $password = null;
    $age = null;
    $gender = null;
    if ($mysqli_stmt->execute()) {
        $mysqli_stmt->bind_result($uid,$username, $password, $age, $gender);
        while ($mysqli_stmt->fetch()) {
            echo "编号" . $uid . "<br>";
            echo "姓名" . $username . "<br>";
            echo "密码" . $password . "<br>";
            echo "年龄" . $age . "<br>";
            $gender = $gender == 1 ? "男" : "女";
            echo "性别" . $gender . "<br>";
        }
    }else{
        echo"查询失败";
    }
    //释放结果集
    $mysqli_stmt->free_result();
    $mysqli_stmt->close();
};

?>

css页面

login.css

body{
    background-image: url(../../assets/images/login_beijing.jpg);
    /* 平铺图片 */
    background-size: cover;
}
.loginCard{
    /* 自适应 */
    width: fit-content;
    /* 上右下左边距 */
    padding: 12px 24px;
    /* 边框 */
    border: 1px solid red;
    /* 外边距 */
    margin: 200px auto;
    box-shadow: 2px 2px 10px 1px #adadb3;
    border-radius: 4px;
    background-color: rgb(255, 255, 255,0.5);
}
.loginCard .logo{
    margin: 0 auto;
    width: 60px;
    height: 60px;
    transform: translateY(-40px);
    border: 1px solid coral;
    border-radius: 50px;
    background-color: #F6F6F6;
    box-shadow: 2px 2px 10px 1px #adadb3;
}
.loginCard .logo img{
    width: 70%;
    padding: 9px;
}

register

body{
    background-image: url(../../assets/images/login_beijing.jpg);
    /* 平铺图片 */
    background-size: cover;
}
.loginCard{
    /* 自适应 */
    width: fit-content;
    /* 上右下左边距 */
    padding: 12px 24px;
    /* 边框 */
    border: 1px solid red;
    /* 外边距 */
    margin: 200px auto;
    box-shadow: 2px 2px 10px 1px #adadb3;
    border-radius: 4px;
    background-color: rgb(255, 255, 255,0.5);
}
.loginCard .logo{
    margin: 0 auto;
    width: 60px;
    height: 60px;
    transform: translateY(-40px);
    border: 1px solid coral;
    border-radius: 50px;
    background-color: #F6F6F6;
    box-shadow: 2px 2px 10px 1px #adadb3;
}
.loginCard .logo img{
    width: 70%;
    padding: 9px;
}

图片素材

在这里插入图片描述

数据库

DROP TABLE IF EXISTS `user`;
CREATE TABLE IF NOT EXISTS `user` (
  `user_Id` int NOT NULL AUTO_INCREMENT COMMENT '用户编号',
  `user_Name` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL COMMENT '用户姓名',
  `user_Pwd` varchar(16) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL COMMENT '用户密码',
  `gender` int DEFAULT NULL COMMENT '性别',
  `brief` text CHARACTER SET utf8mb4 COLLATE utf8mb4_bin COMMENT '简介',
  PRIMARY KEY (`user_Id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;