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

最新推荐文章于 2024-10-14 10:39:18 发布
最新推荐文章于 2024-10-14 10:39:18 发布
阅读量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 436
使用bootstrap界面美观，可预览，可拖拽上传，可配合ajax异步或同步上传，下面是效果图：前端代码：fileinput.htmlbootstrap多图上传// 初始化filleinput控件 第一次初始化function initFileInput(ctrlName, uploadUrl){var control = $('#'+ctrlName);control.fileinput({la...
Bootstrap+HTML5网站构建实战实例
最新发布
weixin_29903713的博客
10-14 1106
本文还有配套的精品资源，点击获取 简介：Bootstrap和HTML5是现代Web开发的重要工具，通过结合使用，开发者能够快速构建具有响应式设计、丰富功能和良好用户体验的网站。Bootstrap提供了预定义的CSS类、JavaScript插件和响应式栅格系统，简化了多设备适配和复杂布局的开发。HTML5作为现代网页设计标准，通过新的语义化元素增强了网站的无障碍性和语义清晰度...
php登陆界面 +bootstrap mysql json
MissZhou要努力
08-04 1319
前台代码： 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 1726
填写完毕，用户点击提交信息按钮后，页面会用Ajax向后台post数据，在后台Laravel会先验证用户提交的信息是否规范，比如：被要求输入的内容用户是否已经输入了，用户名在用户表中是否是唯一的，邮箱在用户表中是否是唯一的，用户名不能小于六位不可以大于十二位，密码以及确认密码的内容是否一致，密码是否大于六位小于十二位等各项验证。当用户已经选中足够的食品后，可以选择结算。用户会被引导至结算页面，在这个页面如果用户之前有输入过订餐地址的话，会有订餐地址显示出来，如果没有的，则需要用户输入送餐地址，最后生成订单。
PHP实现分页功能(原生PHP代码+bootstrap)
小悲伤的博客
02-26 935
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-5-login-page:基于Bootstrap 5的登录页面模板
03-06
Bootstrap 5登录页面 这是Bootstrap 5登录页面模板，您可以根据需要使用它，并且可以免费用于个人或商业用途。 安装 让我们轻松一点！ 只需下载此模板，然后在您的项目中使用它即可。 演示版 特征 Bootstrap 5...
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 编写简易的步骤进度条
魍魉
07-26 659
个人笔记记录，步骤进度条。
php bootstrap 轮播,php+bootstrap实现简易分页
weixin_42300194的博客
03-13 157
在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 4142
前后端交互简介实现布局Bootstrap布局代码MySQL数据库实现查询功能添加记录修改记录删除记录 简介 本案例使用Bootstrap进行响应式布局，通过PHP以及MySQL实现前后端交互，使用Ajax技术实现页面的无刷新加载。 实现 布局 布局采用前端框架Bootstrap实现响应式布局，快速、高效。 注：使用Bootstrap布局，需注意，Bootstrap是依赖于JQuery之上的，所以需...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值