PHP+bootstrap-实现简单的用户登录验证

最新推荐文章于 2024-07-26 16:01:24 发布
最新推荐文章于 2024-07-26 16:01:24 发布
阅读量8.2k 收藏 28
点赞数 7
分类专栏： php学习 问题小结 文章标签： php bootstrap mysql
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SSBBY/article/details/78950960
版权

使用php实现简单的验证登录用户名和密码的功能。

编程相关工具：PhpStorm，wampserver，Mysql

在线激活PhpStorm：http://blog.csdn.net/ssbby/article/details/52204236

界面使用：bootstrap（也在学习摸索中）

bootstrap学习：http://www.runoob.com/bootstrap/bootstrap-tutorial.html

wampserver的安装比较简单，可以自行百度，直接上代码吧。


1.登录界面

login.html 负责收集用户填写的登录信息

效果图：


实现代码：

<!DOCTYPE html>
<html lang="en" xmlns:margin-top="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 整体背景 -->
    <style type="text/css">
        html{
            height: 100%;
        }
        body{
            background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514881472495&di=d9c07e5a09dd0cf25a9bf773b5d18591&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F12%2F34%2F73C58PIC8uq_1024.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 100%;
        }
        .col-center-block {
            float: none;
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: 20%;
            text-align: center;
            max-width: 333px;
        }
        .edit {
            margin-top: 10px;
        }
        .textcolor{
           color: white;
        }
    </style>
</head>
<body>
    <!-- 两个输入框 -->
    <div class="container">
        <div class="row row-centered">
            <div class="col-xs-6 col-md-4 col-center-block">
                <h1 class="textcolor">欢迎登录</h1>
                <form action="../Module/login.php" method="post">
                    <!-- 输入id -->
                    <div class="input-group input-group-md">
                        <span class="input-group-addon" id="sizing-addon1">
                            <i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
                        <input type="text" class="form-control" id="userid" name="userid" placeholder="请输入学号"/>
                    </div>
                    <!-- 输入密码 -->
                    <div class="edit input-group input-group-md">
                        <span class="input-group-addon" id="sizing-addon2">
                            <i class="glyphicon glyphicon-lock"></i></span>
                        <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"/>
                    </div>
                    <br/>

                    <button type="submit" class="btn btn-success btn-block" name="submit" value="登录">登录</button>

                    <a type="submit" class="btn btn-primary btn-block" href="register.html" style="margin-bottom: 20%">注册</a>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

2.登录处理


login.php负责处理用户登录的检验工作

实现代码

<html>
<head>
    <!-- 解决弹窗对话框乱码问题 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<?php
/**
 * 登陆
 * Created by Cory_XuBoYu.
 * User: Administrator
 * Date: 2017/12/28
 * Time: 15:19
 */
if (isset($_POST["submit"]) && $_POST["submit"] == "登录") {
    $id = $_POST["userid"];
    $psw = $_POST["password"];
    if ($id == "" || $psw == ""){
        //弹出对话框后返回到先前页面
        echo "<script>alert('请输入用户名或密码！'); history.go(-1);</script>";
    }else {
        //连接数据库
        $servername = "127.0.0.1";
        $username = "root";
        $password = "123456";
        $dbname = "phpuser";
        // 创建连接
        $conn = new mysqli($servername, $username, $password,$dbname);
        // 检测连接
        if ($conn->connect_error) {
            die("连接失败: " . $conn->connect_error);
        }
        //设定字符集,解决数据库插入可能出现乱码，设置编码为GBK
        //构造sql查询语句
        $sql = "select userid,userpsw from php_user where userid = '$id' and userpsw = '$psw'";
        //执行SQL语句
        $result = $conn->query($sql);
        //统计执行结果影响的行数
        $num = $result->num_rows;
        //如果已经存在该用户
        if ($num){
            //将数据以索引的方式存储在数组中
            $row = mysqli_fetch_array($result);
            echo $row[0];
            //echo "<script>alert('登陆成功！');history.go(-1);</script>";
        }else{
            //弹出对话框后返回到先前页面
            echo "<script>alert('用户名或者密码不正确！');history.go(-1);</script>";
        }
    }
}else{
    //弹出对话框后返回到先前页面
    echo "<script>alert('提交未成功！');history.go(-1);</script>";
}
3.新用户注册

点击注册按钮弹窗进行注册

效果图：


修改后的login.html

<!DOCTYPE html>
<html lang="en" xmlns:margin-top="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 使用modal -->
    <script src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 整体背景 -->
    <style type="text/css">
        html{
            height: 100%;
        }
        body{
            background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514881472495&di=d9c07e5a09dd0cf25a9bf773b5d18591&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F12%2F34%2F73C58PIC8uq_1024.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 100%;
        }
        .col-center-block {
            float: none;
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: 20%;
            text-align: center;
            max-width: 333px;
        }
        .edit {
            margin-top: 10px;
        }
        .textcolor{
           color: white;
        }

        /*model显示居中*/
        .modal_wrapper{
            display: table;
            height: 100%;
            margin: 0px auto;
        }
        .modal-dialog{
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <!-- 两个输入框 -->
    <div class="container">
        <div class="row row-centered">
            <div class="col-xs-6 col-md-4 col-center-block">
                <h1 class="textcolor">欢迎登录</h1>
                <form action="../Module/login.php" method="post">
                    <!-- 输入id -->
                    <div class="input-group input-group-md">
                        <span class="input-group-addon" id="sizing-addon1">
                            <i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
                        <input type="text" class="form-control" id="userid" name="userid" placeholder="请输入学号"/>
                    </div>
                    <!-- 输入密码 -->
                    <div class="edit input-group input-group-md">
                        <span class="input-group-addon" id="sizing-addon2">
                            <i class="glyphicon glyphicon-lock"></i></span>
                        <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"/>
                    </div>
                    <br/>

                    <button type="submit" class="btn btn-success btn-block" name="submit" value="登录">登录</button>

                    <a type="submit" class="btn btn-primary btn-block" data-toggle="modal" data-target="#register">注册</a>
                </form>
            </div>
        </div>
    </div>
    <!-- 注册窗口 -->
    <div id="register" class="modal fade" tabindex="-1">
        <div class="modal_wrapper">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <button class="close" data-dismiss="modal">
                            <span>×</span>
                        </button>
                    </div>
                    <div class="modal-title">
                        <h1 class="text-center">注册</h1>
                    </div>
                    <div class="modal-body">
                        <form action="../Module/register.php" method="post">
                            <!-- 输入id -->
                            <div class="input-group input-group-md">
                            <span class="input-group-addon">
                                <i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
                                <input type="text" class="form-control" id="re_userid" name="userid" placeholder="请输入学号"/>
                            </div>
                            <!-- 输入姓名 -->
                            <div class="edit input-group input-group-md">
                            <span class="input-group-addon">
                                <i class="glyphicon glyphicon-user"></i></span>
                                <input type="password" class="form-control" id="re_username" name="username" placeholder="请输入姓名"/>
                            </div>
                            <!-- 输入密码 -->
                            <div class="edit input-group input-group-md">
                            <span class="input-group-addon">
                                <i class="glyphicon glyphicon-lock"></i></span>
                                <input type="password" class="form-control" id="re_password" name="password" placeholder="请输入密码"/>
                            </div>
                            <!-- 确认密码 -->
                            <div class="edit input-group input-group-md">
                            <span class="input-group-addon">
                                <i class="glyphicon glyphicon-ok"></i></span>
                                <input type="password" class="form-control" id="re_confirm" name="confirm" placeholder="请再次确认密码"/>
                            </div>
                            <br/>
                            <button type="Submit" class="btn btn-success btn-block" name="Submit" value="注册">注册</button>
                            <button class="btn btn-primary btn-block" data-dismiss="modal">返回</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
需要注意的地方，根据bootstrap官方文档， 如果您想要单独引用该插件的功能，那么您需要引用 modal.js，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 

<!-- 引入 Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 使用modal -->
<script src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
4.新注册处理

register.php负责处理用户注册工作

实现代码

<html>
<head>
    <!-- 解决弹窗对话框乱码问题 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<?php
/**
 * 新用户注册
 * Created by Cory_XuBoYu.
 * User: Administrator
 * Date: 2017/12/29
 * Time: 13:28
 */
if(isset($_POST["Submit"]) && $_POST["Submit"] == "注册"){
    $userid = $_POST["userid"];
    $user = $_POST["username"];
    $psw = $_POST["password"];
    $psw_confirm = $_POST["confirm"];
    if($userid == "" || $user == "" || $psw == "" || $psw_confirm == ""){
        echo "<script>alert('请确认信息完整性！'); history.go(-1);</script>";
    }else{
        if($psw == $psw_confirm){
            //连接数据库
            $servername = "127.0.0.1";
            $username = "root";
            $password = "123456";
            $dbname = "phpuser";
            // 创建连接
            $conn = new mysqli($servername, $username, $password,$dbname);
            //设定字符集,解决数据库插入可能出现乱码，设置编码为GBK
            mysql_query("set names 'gdk'");
            //SQL语句
            $sql = "select userid from php_user where userid = '$userid'";
            //执行SQL语句
            $result = $conn->query($sql);
            //统计执行结果影响的行数
            $num = $result->num_rows;
            //如果已经存在该用户
            if($num){
                echo "<script>alert('用户名已存在'); history.go(-1);</script>";
            }else{
                //不存在当前注册用户名称
                $sql_insert = "insert into php_user (userid,username,userpsw) values('$userid','$username','$psw')";
                $res_insert = $conn->query($sql_insert);
                $num_insert = $res_insert->num_rows;
                if($res_insert){
                    echo "<script>alert('注册成功！'); history.go(-1);</script>";
                }else{
                    echo "<script>alert('系统繁忙，请稍候！'); history.go(-1);</script>";
                }
            }
        }else{
            echo "<script>alert('密码不一致！'); history.go(-1);</script>";
        }
    }
}else{
    echo "<script>alert('提交未成功！'); history.go(-1);</script>";
}


用户登录成功失败，注册成功失败都有做了相应的提示：



PS.文章为本人在学习PHP中的学习小结，如存在问题或错误，欢迎指正！

Cory_boyu
关注
专栏目录
php+jquery(bootstrap)应用
11-07
php+php+jquery(bootstrap)应用 的简单应用，登陆注册页面，无数据库连接
php+mysql+bootstrap+jquery实现增删查改的前后端
05-03
在本项目中，我们主要探讨如何使用PHP、MySQL、Bootstrap和jQuery这四个技术栈来构建一个功能完善的前后端系统，实现数据的增删查改（CRUD）操作。以下是关于这些技术及其相互配合的详细说明。 **PHP**： PHP是一种...
bootstrap php 上传,Bootstrap+PHP实现多图上传功能实例详解
weixin_34614567的博客
03-10 417
使用bootstrap界面美观，可预览，可拖拽上传，可配合ajax异步或同步上传，下面是效果图：前端代码：fileinput.htmlbootstrap多图上传// 初始化filleinput控件 第一次初始化function initFileInput(ctrlName, uploadUrl){var control = $('#'+ctrlName);control.fileinput({la...
php+bootstrap 编写简易的步骤进度条
最新发布
魍魉
07-26 547
个人笔记记录，步骤进度条。
php登陆界面 +bootstrap mysql json
MissZhou要努力
08-04 1309
前台代码： main.php <?php /** * Created by PhpStorm. * User: admin-pc * Date: 2016/8/3 * Time: 8:11 */ header("Content-type: text/html; charset=utf-8"); ?> 登陆系统
基于PHP+Bootstrap实现的网上订餐管理系统
毕业作品网站
10-04 1701
填写完毕，用户点击提交信息按钮后，页面会用Ajax向后台post数据，在后台Laravel会先验证用户提交的信息是否规范，比如：被要求输入的内容用户是否已经输入了，用户名在用户表中是否是唯一的，邮箱在用户表中是否是唯一的，用户名不能小于六位不可以大于十二位，密码以及确认密码的内容是否一致，密码是否大于六位小于十二位等各项验证。当用户已经选中足够的食品后，可以选择结算。用户会被引导至结算页面，在这个页面如果用户之前有输入过订餐地址的话，会有订餐地址显示出来，如果没有的，则需要用户输入送餐地址，最后生成订单。
PHP实现分页功能(原生PHP代码+bootstrap)
小悲伤的博客
02-26 870
PHP实现分页功能(原生PHP代码+bootstrap开发说明图片代码 开发说明 这是接着我上一个ajax获取表单提交内容博文，在原来的页面增加分页功能！分页的样式是用bootstrap。废话不多说直接上代码 图片 代码 <script src="js/bootstrap.min.js"></script> <body> <?php // 1.连接 $link = @mysqli_connect('localhost','user','password');
springboot+bootstrap博客系统源码
12-10
【标题】"springboot+bootstrap博客系统源码"所涉及的知识点主要集中在两个核心部分：Spring Boot和Bootstrap，以及它们如何构建一个博客系统。 【Spring Boot】是Spring框架的一个模块，设计目标是简化Spring应用...
ThinkPhp5+bootstrap搭建个人博客网站
12-31
例如，使用Bootstrap的网格系统构建文章列表，用模态框处理用户登录和注册，以及使用下拉菜单实现标签筛选。 7. **服务器配置**：项目运行需要Apache或Nginx服务器支持。Apache和Nginx是常见的Web服务器，它们可以...
基于php+bootstrap+mysql自媒体信息发布系统.zip
07-23
开发者可能使用了PHP的内置函数和面向对象编程特性来实现功能，如用户认证、数据验证、新闻发布等。 【Bootstrap】是Twitter开发的一个开源前端框架，它包含HTML、CSS和JavaScript组件，可以快速创建响应式布局和...
bootstrap-colorpicker-2.3.3_php_
10-02
Bootstrap Colorpicker是一个流行的前端UI组件，它允许用户在网页上选择颜色，通常用于设计或配置相关的Web应用。这个"bootstrap-colorpicker-2.3.3_php_"文件可能包含了一个特定版本（2.3.3）的Bootstrap ...
PHP+bootstrap快速生成MySql数据字典-天龙八步
09-06
PHP+bootstrap快速生成MySql数据字典-天龙八步
bootstrap做登录注册页面带验证
03-29
用bootstrap做的登录，注册页面，使用validate进行表单验证，是本人从空白页面搭建的，亲测可用，1积分算是我的辛苦费吧。 我会通过博客注明知识点：http://blog.csdn.net/qq_19558705； 希望能帮到大家。没有积分的小伙伴可以私信我，我加qq发给你
bootstrap+php 图书管理系统
06-20
bootstrap响应式布局+php5.4 +mysql5.5，2015年一个实习项目发布只为了留念
Bootstrap实现登录校验表单(带验证码)
09-02
本文给大家介绍使用Bootstrap新制作的一个登录框，带验证码，带校验，非常不错，具有参考借鉴价值，感兴趣的朋友可以参考下
php bootstrap 轮播,php+bootstrap实现简易分页
weixin_42300194的博客
03-13 149
在MK网学习课程做的案例，非常简陋，主要是熟悉语言吧，初步进行学习的总结，先在数据库随便建个100来条数据的表header("content-type:text/html;charset=utf-8");//设置字符集$page = $_GET['id'];//GET传入的分页id,在url输入时加上?id=4(页码内的数)$mysqli = new mysqli('localhost','roo...
PHP+Bootstrap+原生Ajax+MySQL实现前后端交互（上）
HJay_Chou的博客
09-21 4091
前后端交互简介实现布局Bootstrap布局代码MySQL数据库实现查询功能添加记录修改记录删除记录 简介 本案例使用Bootstrap进行响应式布局，通过PHP以及MySQL实现前后端交互，使用Ajax技术实现页面的无刷新加载。 实现 布局 布局采用前端框架Bootstrap实现响应式布局，快速、高效。 注：使用Bootstrap布局，需注意，Bootstrap是依赖于JQuery之上的，所以需...
php+mysql+bootstrap 管理系统
12-02
PHP是一种流行的服务器端脚本语言，用于构建动态网页内容和网站。MySQL是一个开源的关系型数据库管理系统，用于存储和管理数据。Bootstrap是一个用于构建响应式和移动设备优化网站的前端框架。 结合PHP、MySQL和Bootstrap，我们可以构建一个功能强大的管理系统。首先，使用PHP编写后端逻辑，包括用户登录验证、数据处理和页面加载。接着，利用MySQL来创建数据库表，存储用户信息、管理数据和生成报表。最后，使用Bootstrap来设计好看、响应式的用户界面，确保系统在不同设备上都能良好显示和操作。 管理系统可以包括用户管理、数据管理和报表生成等功能。用户管理模块可以包括注册、登录、权限控制等功能，确保用户可以安全访问系统并进行相应操作。数据管理模块可以让用户对数据进行增删改查等操作，确保数据的完整性和安全性。报表生成模块可以让用户根据需要生成各种报表，以便进行数据分析和决策。 通过PHP实现后端逻辑的处理，使用MySQL进行数据的存储和管理，再配合Bootstrap设计美观的前端界面，我们可以打造一个灵活、高效的管理系统。这样的系统不仅能够提高工作效率，还可以提供数据支持和决策参考，对于企业和组织来说意义重大。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值