设为首页收藏本站
切换到窄版

IE盒子

搜索
IE盒子»论坛 › IE盒子 › 数据库 › MySQL+PHP+html实现简单的网页登录
返回列表 发帖
查看: 91|回复: 1

MySQL+PHP+html实现简单的网页登录

[复制链接]
刘玉春

4

主题

6

帖子

14

积分

新手上路

Rank: 1

积分
14
发表于 2023-3-28 22:13:37 | 显示全部楼层 |阅读模式
一、版本问题

首先声明php版本是7.4.3，不同版本的php可能会存在差异!在复制后如果出现网页报错，请仔细阅读php版本手册，适当更改代码内容!
二、开始编写简单的UI界面[这里以PC端作为演示]
(1)网页基础---无样式的简单页面[index.html和register.html]
index.html



这是没有样式的登录页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
        <title>登录演示</title>
    </head>
    <body>
    <form action="login.php" method="POST" >
        <div class="login">
        <h1>登录</h1>
        <div class="input-outline-x">
        <input class="input-control input-outline" type="text" name="username">
        <label class="input-label">账号</label>
        </div>
        <br>
        <div class="input-outline-x">
        <input class="input-control input-outline" type="password" name="password">
        <label class="input-label">密码</label>
        </div>
        <br>
        <button class="submit" type="submit">登录</button>
        <br>
        还没有账号?<a href="register.html">注册</a>
        </div>
    </form>
    </body>
</html>
同理可以得到注册页面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
        <title>注册演示</title>
    </head>
    <body>
    <form action="register.php" method="POST" >
        <div class="register">
        <h1>注册</h1>
        <div class="input-outline-x">
        <input class="input-control input-outline" type="text" name="username">
        <label class="input-label">账号</label>
        </div>
        <br>
        <div class="input-outline-x">
        <input class="input-control input-outline" type="phone" name="phone">
        <label class="input-label">电话</label>
        </div>
        <br>
        <div class="input-outline-x">
        <input class="input-control input-outline" type="password">
        <label class="input-label">密码</label>
        </div>
        <br>
        <div class="input-outline-x">
        <input class="input-control input-outline" type="password" name="password">
        <label class="input-label">确认密码</label>
        </div>
        <br>
        <button class="submit" type="submit">注册</button>
        <br>
        已有账号?<a href="index.html">登录</a>
        </div>
    </form>
    </body>
</html>
上面出现的类名会在后续样式里使用到，这里先定义好
(2)美化网页---编写网页样式[index.css]
为了不繁琐的编写文件，所以就只在一个CSS文件里编写两个页面的样式了[你也可以根据自己的需求来更改这些样式]
不要忘记新建CSS文件[index.css]也可以不引入，直接写在html里
在使用这些样式前，一定要先引入这些样式[一定不要忘记!]
<link rel="stylesheet" type="text/css" href="index.css">

body{
    background-color: #F5F5F5;
}
.login{
    height: 300px;
    width: 270px;
    margin: 0 auto;
    margin-top: 50%;
    text-align: center;
    border-radius: 10px;
    transition: 0.5s;
    background-color: #ffffff;
}
.login:hover{
    box-shadow: 0px 5px 0px #D7D7D7;
}
.register{
    height: 400px;
    width: 270px;
    margin: 0 auto;
    margin-top: 35%;
    text-align: center;
    border-radius: 10px;
    transition: 0.5s;
    background-color: #ffffff;
}
.register:hover{
    box-shadow: 0px 5px 0px #D7D7D7;
}
a{
    text-decoration: none;
    color: #3ABFD2;
}
input {
    margin: 0;
    font-size: 16px;
    height: 30px;
    border-style: solid;
    border-radius: 10px;
    border-width: 1px;
    transition: 0.5s;
}
input:hover{
    box-shadow: 0px 5px 0px #D7D7D7;
}
.input{
    width: 250px;
    clear: both;
}
.submit{
    margin-top: 10px;
    margin-bottom: 20px;
}
.input-fill-x, .input-outline-x, .textarea-outline-x {
    position: relative;
}
.input-control:focus + label {
    color: blue;
    background: white;
    transform: scale(0.8) translate(0, -15px);
}
.input-label {
    padding: 0 5px;
    position: absolute;
    left: 30px;
    top: 5px;
    transform-origin: 0 0;
    pointer-events: none;
    transition: all .3s;
}
.submit {
  min-width: 130px;
  height: 40px;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: none;
  background: #ced4da;
  box-shadow: 0 0px #adb5bd;
}
.submit:hover {
  box-shadow: 0 5px 0px #adb5bd;
}
.submit:active {
  box-shadow: 0 0 #adb5bd;
  top: 5px;
}
这里就是页面美化的样式了!不一定好看，你可以使用自己的样式!



仅展示了登录效果

三、准备数据库
(1)数据库创建
如果没有数据库的话就先创建一个数据库[建议取名为user]之后再在这个数据库里创建一张表叫user



这样设置一下



ID那一行设置索引



引擎选择InnoDB



最后的效果应当是这样

四、php文件编写[一切准备好了之后就可以开始写核心的php文件了]
这里使用到的name有[username][phone][password]
login.php
<?php
header("Content-Type:text/html;charset=utf-8");
    $conn = mysqli_connect('localhost','root','','user') or die('服务器连接失败');
//根据自己的服务器地址更改
    $conn->query("SET NAMES 'UTF8'");

  

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

     $sql = "select * from user where username = '$username' and password = '$password'" or die('请您再次检查输入是否正确，系统没有在管理员名单中找到您');
  

    $result=$conn->query($sql) or die('请您再次检测查输入是否正确，系统没有在管理员名单中找到您');
if (!$result) {
    printf("发生错误: %s\n", mysqli_error($conn));
    exit();
}
    $rows=$result->fetch_assoc() or die('请您再次检测查输入是否正确，系统没有在管理员名单中找到您');

   

  

    if($rows){
        echo "登陆成功!";
    }

    else{
        echo"认证失败，请重新认证！";
    }  
    ?>   
register.php
<?php    header ( "Content-type:text/html;charset=utf-8" );

    $conn = mysqli_connect('localhost','root','','user') or die('数据库连接失败');

    $conn->set_charset('utf8');



    $username = $_POST['username'];

    $password = $_POST['password'];

    $phone = $_POST['phone'];

     

    $sql = "INSERT INTO user(id,username,phone,password)

                VALUES (null,'{$username}' ,'{$phone}','{$password}')";

    mysqli_query($conn,$sql) or die(mysqli_error($conn));

    echo("注册成功<br/><a href='index.html'>点击返回登录</a>")     ?>
到这里就快结束了，这个登录并没有做安全措施，其他业务也只能你自己进行添加[很显然，这是一个相对粗糙的案例]，当然，后期我也会出一些有关登录安全的措施。至于上面的确认密码，我并没有写逻辑。
好多地方可能与你的业务内容不匹配，你需要自己更改一下，如果复制过去之后无法运行，可能是你没有更改需要更改的地方，或者版本不匹配。如果是代码问题，希望各位码友能够私信我并指出问题，我会在第一时间更改它，以保证它是全新的，可靠的，高效的。也希望这在你完成业务工作的过程中，可以帮助到你。
最后的最后，总结一下
index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
                <link rel="stylesheet" type="text/css" href="index.css">
        <title>登录演示</title>
    </head>
    <body>
    <form action="login.php" method="POST" >
        <div class="login">
        <h1>登录</h1>
        <div class="input-outline-x">
        <input class="input-control input-outline" type="text" name="username">
        <label class="input-label">账号</label>
        </div>
        <br>
        <div class="input-outline-x">
        <input class="input-control input-outline" type="password" name="password">
        <label class="input-label">密码</label>
        </div>
        <br>
        <button class="submit" type="submit">登录</button>
        <br>
        还没有账号?<a href="register.html">注册</a>
        </div>
    </form>
    </body>
</html>register.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
                <link rel="stylesheet" type="text/css" href="index.css">
        <title>注册演示</title>
    </head>
    <body>
    <form action="register.php" method="POST" >
        <div class="register">
        <h1>注册</h1>
        <div class="input-outline-x">
        <input class="input-control input-outline" type="text" name="username">
        <label class="input-label">账号</label>
        </div>
        <br>
        <div class="input-outline-x">
        <input class="input-control input-outline" type="phone" name="phone">
        <label class="input-label">电话</label>
        </div>
        <br>
        <div class="input-outline-x">
        <input class="input-control input-outline" type="password">
        <label class="input-label">密码</label>
        </div>
        <br>
        <div class="input-outline-x">
        <input class="input-control input-outline" type="password" name="password">
        <label class="input-label">确认密码</label>
        </div>
        <br>
        <button class="submit" type="submit">注册</button>
        <br>
        已有账号?<a href="index.html">登录</a>
        </div>
    </form>
    </body>
</html>index.css
body{
    background-color: #F5F5F5;
}
.login{
    height: 300px;
    width: 270px;
    margin: 0 auto;
    margin-top: 50%;
    text-align: center;
    border-radius: 10px;
    transition: 0.5s;
    background-color: #ffffff;
}
.login:hover{
    box-shadow: 0px 5px 0px #D7D7D7;
}
.register{
    height: 400px;
    width: 270px;
    margin: 0 auto;
    margin-top: 35%;
    text-align: center;
    border-radius: 10px;
    transition: 0.5s;
    background-color: #ffffff;
}
.register:hover{
    box-shadow: 0px 5px 0px #D7D7D7;
}
a{
    text-decoration: none;
    color: #3ABFD2;
}
input {
    margin: 0;
    font-size: 16px;
    height: 30px;
    border-style: solid;
    border-radius: 10px;
    border-width: 1px;
    transition: 0.5s;
}
input:hover{
    box-shadow: 0px 5px 0px #D7D7D7;
}
.input{
    width: 250px;
    clear: both;
}
.submit{
    margin-top: 10px;
    margin-bottom: 20px;
}
.input-fill-x, .input-outline-x, .textarea-outline-x {
    position: relative;
}
.input-control:focus + label {
    color: blue;
    background: white;
    transform: scale(0.8) translate(0, -15px);
}
.input-label {
    padding: 0 15px;
    position: absolute;
    left: 30px;
    top: 5px;
    transform-origin: 0 0;
    pointer-events: none;
    transition: all .1s;
}
.submit {
  min-width: 130px;
  height: 40px;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: none;
  background: #ced4da;
  box-shadow: 0 0px #adb5bd;
}
.submit:hover {
  box-shadow: 0 5px 0px #adb5bd;
}
.submit:active {
  box-shadow: 0 0 #adb5bd;
  top: 5px;
}login.php
<?php
header("Content-Type:text/html;charset=utf-8");
    $conn = mysqli_connect('localhost','root','','user') or die('服务器连接失败');

    $conn->query("SET NAMES 'UTF8'");

  

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

     $sql = "select * from user where username = '$username' and password = '$password'" or die('请您再次检查输入是否正确，系统没有在管理员名单中找到您');
  

    $result=$conn->query($sql) or die('请您再次检测查输入是否正确，系统没有在管理员名单中找到您');
if (!$result) {
    printf("发生错误: %s\n", mysqli_error($conn));
    exit();
}
    $rows=$result->fetch_assoc() or die('请您再次检测查输入是否正确，系统没有在管理员名单中找到您');

    //若表中存在输入的用户名和密码，row=1；若表中用户名不存在或密码错误，则row=0

  

    if($rows){
        echo "登陆成功!";
    }

    else{
        echo"认证失败，请重新认证！";
    }  
    ?>   
register.php
<?php    header ( "Content-type:text/html;charset=utf-8" );

    $conn = mysqli_connect('localhost','root','','user') or die('数据库连接失败');

    $conn->set_charset('utf8');



    $username = $_POST['username'];

    $password = $_POST['password'];

    $phone = $_POST['phone'];

     

    $sql = "INSERT INTO user(id,username,phone,password)

                VALUES (null,'{$username}' ,'{$phone}','{$password}')";

    mysqli_query($conn,$sql) or die(mysqli_error($conn));

    echo("注册成功<br/><a href='index.html'>点击返回登录</a>")     ?>
码文不易还望给个小心心

回复

使用道具 举报

窒息在爱里的鱼

1

主题

4

帖子

4

积分

新手上路

Rank: 1

积分
4
发表于 2023-3-28 22:14:24 | 显示全部楼层
可不可以给个小心心啊[谢邀]
回复

使用道具 举报

返回列表 发帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表