当前位置：首页 > 行业动态 > 正文

如何创建MySQL数据库登录网页模板？

MySQL数据库登录网页模板是一种用于通过网页界面访问和管理MySQL数据库的工具。它通常包含表单字段，用于输入数据库服务器地址、端口号、用户名和密码等信息。

MySQL数据库登录网页模板

如何创建MySQL数据库登录网页模板？ 第1张

背景介绍

在现代网络应用中，用户登录功能是至关重要的，它不仅保护了用户的隐私，还能提供个性化的服务，本文将详细介绍如何使用HTML、CSS和JavaScript创建一个美观的用户登录界面，并通过PHP与MySQL数据库进行交互，实现用户的注册和登录功能。

开发环境准备

1、Web服务器：如Apache或Nginx，用于部署和运行Web应用程序。

2、数据库：MySQL，用于存储用户信息。

3、集成开发环境（IDE）：如Visual Studio Code或Sublime Text，方便代码编写。

4、现代Web浏览器：如Google Chrome或Mozilla Firefox，用于测试网页效果。

HTML部分

HTML是网页的基础结构，用于创建用户登录和注册表单的界面，以下是一个简单的示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
    <div >
        <i ></i>Login my own account<br/>
    </div>
    <div >
        <i ></i>Register new account
    </div>
    <div >
        <div >
            <i ></i>
        </div>
        <form action="login_check.php" method="post" >
            <h1>Welcome</h1>
            <input type="text" name="username" id=""  placeholder="USERNAME" />
            <input type="password" name="password" id=""  placeholder="PASSWORD" />
            <input type="submit" name=""  id="" value="Login" />
        </form>
    </div>
    <div >
        <div >
            <i ></i>
        确定要放弃本次机会？
        </div>
        <form action="register.php" method="post" >
            <h1>Register</h1>
            <input type="text" name="username" id=""  placeholder="USERNAME" required />
            <input type="password" name="password" id=""  placeholder="PASSWORD" required />
            <input type="password" name="confirm_password" id=""  placeholder="CONFIRM PASSWORD" required />
            <input type="submit" name=""  id="" value="Register" />
        </form>
    </div>
</body>
</html>

CSS部分

使用CSS美化界面，提高用户体验，以下是一个简单的样式文件示例：

{ margin: 0; padding: 0; }
html { height: 100%; width: 100%; overflow: hidden; margin: 0; padding: 0; background: url("../images/login.jpg") no-repeat 0px 0px; background-size: 100% 100%; }
body { font-family: Arial, "微软雅黑"; color: #fff; background: transparent; }
.login-box, .register-box { width: 300px; margin: auto; }
.login-box h1, .register-box h1 { text-align: center; color: #4CAF50; }
.login-bt, .register-bt { width: 100%; height: 35px; background: #4CAF50; border: none; color: #fff; font-size: 16px; }
.login-box input[type="text"], .login-box input[type="password"] { width: calc(100% 22px); height: 25px; border: 1px solid #ccc; margin-bottom: 20px; padding-left: 10px; }
.register-box input[type="text"], .register-box input[type="password"] { width: calc(100% 22px); height: 25px; border: 1px solid #ccc; margin-bottom: 20px; padding-left: 10px; }
.register-bt { background: #4CAF50; border: none; color: #fff; font-size: 16px; }

JavaScript部分

使用JavaScript进行表单验证，确保用户输入的数据符合要求，以下是一个简单的验证脚本示例：

$(document).ready(function() {
    $(".login-form").on("submit", function(e) {
        var username = $("input[name='username']").val();
        var password = $("input[name='password']").val();
        if (username === "" || password === "") {
            alert("用户名和密码不能为空");
            e.preventDefault();
        }
    });
    $(".register-form").on("submit", function(e) {
        var username = $("input[name='username']").val();
        var password = $("input[name='password']").val();
        var confirmPassword = $("input[name='confirm_password']").val();
        if (username === "" || password === "" || confirmPassword === "") {
            alert("用户名和密码不能为空");
            e.preventDefault();
        } else if (password !== confirmPassword) {
            alert("两次输入的密码不一致");
            e.preventDefault();
        }
    });
});

PHP部分

使用PHP处理业务逻辑，包括用户注册和登录验证，以下是一个简单的PHP文件示例：

login_check.php

<?php
session_start();
include 'db_connect.php'; // 连接数据库的文件
$username = $_POST['username'];
$password = $_POST['password'];
$sql = "SELECT * FROM users WHERE username='$username' AND password=SHA('$password')";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
    $_SESSION['username'] = $username;
    header("Location: welcome.php"); // 登录成功后跳转到欢迎页面
} else {
    echo "用户名或密码错误";
}
?>

db_connect.php

<?php
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) { die("连接失败：" . $conn->connect_error); }
?>

register.php

<?php
include 'db_connect.php'; // 连接数据库的文件
$username = $_POST['username'];
$password = $_POST['password'];
$hashedPassword = password_hash($password, PASSWORD_DEFAULT); // 加密密码
$sql = "INSERT INTO users (username, password) VALUES ('$username', '$hashedPassword')";
if ($conn->query($sql) === TRUE) { echo "注册成功"; } else { echo "注册失败：" . $conn->error; }
?>

通过上述步骤，我们实现了一个基本的用户登录和注册系统，该系统包括前端的HTML和CSS界面设计，JavaScript表单验证以及后端的PHP与MySQL数据库交互，根据实际需求，可以进一步扩展和完善该系统，例如添加记住密码、忘记密码等功能，希望本文对你有所帮助！

本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/377568.html
0

相关文章