PHP+bootstrap-實現簡單的使用者登入驗證

阿新 • • 發佈：2019-02-17

使用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.登入處理

實現程式碼

<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中的學習小結，如存在問題或錯誤，歡迎指正！

PHP+bootstrap-實現簡單的使用者登入驗證

使用php實現簡單的驗證登入使用者名稱和密碼的功能。程式設計相關工具：PhpStorm，wampserver，Mysql線上啟用PhpStorm：http://blog.csdn.net/ssbby/article/details/52204236介面使用：bootstrap

PHP+MySQL實現簡單的登入（SQL注入入門實驗）

本實驗是入門級的SQL注入實驗，手工注入吧，用sqlmap就沒意思了，簡單過程：使用者輸入使用者和密碼然後提交，服務端收到使用者和密碼並查詢資料庫輸出到頁面。一、建立資料庫create database web1;建立兩張表，一張儲存登入使用者和密碼，另一張儲存flag：cr

Ajax實現簡單的登入驗證與帳號註冊

上一篇部落格介紹了Ajax的GET和POST方法以及上傳檔案的進度條展示,這篇部落格將介紹一個簡單的登入與註冊功能的實現設計HTML 這個是即將成為我畢業設計的一個網站, 在導航欄我添加了兩個註冊和登入的按鈕和按下登入按鈕後彈出的登入框,

Eclipse下用maven構建Struts專案，實現簡單的登入及驗證。

點選File->new->Maven Project. 右鍵所建立的專案->點選Properties->點選Java Build Path將JDK改成所需要的版本然後點選Project Facets先改Java，再改Dynamic Web Mod

php實現簡單的登入

我用了bootstrap框架，不知為什麼一直表單不能正常排序顯示，不過主要學習php邏輯，先不糾結。登入頁：test.php <!DOCTYPE html> <html lang="zh-CN"> <head>

php實現註冊和登入驗證

html： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head>

javascript實現簡單使用者登入表單驗證功能

用C#實現簡單的帶有驗證碼及密碼使用MD5加密的“登入”WinForm小程式

初學C#Windows窗體程式時，做個簡單的“登入”是再簡單不過的了。像下面這樣的，功能稍理想了吧？有後臺數據庫，有驗證碼，資料庫中密碼是密文（如圖所示：資料庫中表資料是32位MD5加密的……) 下面講解如何實現。步驟： 1、建立相應的資料

BootStrap實現簡單響應式導航菜單

bar query alt str content doctype bootstra inf ini 　　　用BootStrap實現響應式導航欄，我會對其中的一些樣式進行說明。　　先上代碼，是一個很簡單的Demo。　　　 <!doctype html>

利用functools模組的wraps裝飾器實現Flask的登入驗證

首先看一段官方對functools.wraps的功能描述： This is a convenience function for invoking update_wrapper() as a function decorator when defining a wrapper

使用SpringMVC攔截器實現簡單的登陸驗證功能（面向小白）

接著上一篇文章《使用Idea建立一個JavaWeb的SSM(maven)專案實現登陸功能》在上一篇文章裡已經實現了頁面登陸的功能，但是不夠完善，在沒有攔截器的情況下我可以不登陸一樣可以訪問index.jsp頁面如圖在這種情況下專案是有風險的，別人可以在不登陸的情況下隨意訪問你的

微信小程式+SpringBoot+mybatis+MySQL實現簡單的登入

微信小程式+SpringBoot+mybatis+MySQL實現簡單的登入當下微信小程式和springboot都是比較火的。今天我們來用springboot和微信小程式來實現簡單的登入。 1.首先來完成微信小程式端，新建一個微信小程式。如果不會的可以檢視我的上一篇文章開發微信小程式簡

SSM+Shiro寫的一個簡單的登入驗證

專案結構 web.XML配置 <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="

ThinkPHP5實現簡單的登入功能

public function verification() { // 判斷是否是POST登入,如果不是,直接殺掉 if(!isset($_POST['submit'])){ $this->error("非法訪問!!!"); } $username = $_PO

vue router+vuex實現首頁登入驗證判斷邏輯

首頁登入邏輯要求在頁面上判斷是否獲取到登入token ，沒有獲取到則跳轉到登入頁。登入成功後，跳轉到前一個頁面。 1.vue router 路由判斷首先我們想到的是router.beforeEach 前置導航守衛，這個方法接受三個引數 to from next 。 to引數為即將跳

實現企業郵箱登入驗證功能

需求說明實現企業郵箱登入驗證功能使用者通過JSP頁面輸入使用者名稱和密碼如果使用者名稱為lucky，密碼為123456，在歡迎頁面顯示“你好：lucky！” 如果驗證登入失敗，則返回登入頁面重新登入 <%@ page language="

Taro開發微信小程式實現簡單的登入退出功能

Taro是由凹凸實驗室打造的一套遵循 React 語法規範的多端統一開發框架，還有我發現從某度上搜索的結果首頁居然看不到Taro框架的任何資訊，但是谷歌首頁就直接給出了結果，Taro使用文件。我是準備用它來開發微信小程式的，而且公司使用的前端架構正好是React

JAVA實現簡單的登入介面

我本來是學C++的，然後課程上老師要求做一個登陸介面，用C++實現不限時，然後就選擇了JAVA，從零開始自學JAVA。好在網上很多大佬都寫了如何用JAVA編寫登陸介面的部落格，寫得很詳細，使得我第一次接觸JAVA也能看懂一二。比較推薦這篇，博主真的很細心，我主要也是參考的

使用Unity3d luaframework ugui 實現簡單的登入註冊

1.開啟luaframework ugui 工程 , 可能會報錯 , 不過都是一些小錯誤 , 設定AppConst指令碼 ` 2.搭建頁面登入成功後顯示 3.打包資源3個預設物分別放在不同資料夾下 , 開啟Packager 指令碼 , 寫指令碼 4.編寫l

swift入門-實現簡單的登入介面

// // AppDelegate.swift // UIWindow import UIKit @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { var

PHP+bootstrap-實現簡單的使用者登入驗證

相關推薦