投稿
  1. 极客之音首页
  2. 技术随笔

开发一个简单网站–第一章:初遇

小半 • • 技术随笔 • 阅读 91

导读：本篇文章讲解 开发一个简单网站–第一章:初遇，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

笫一章:初遇

介绍:利用PHP、Mysql数据库、html、css、javascript、bootstrap框架,开发一个简单网站.效率不高,主要作练习用.

<1>.登录页面 loginto.php

效果图:
在这里插入图片描述

引用：css效果用的是:

https://blog.csdn.net/Wrj6811/article/details/105800712?utm_medium=distribute.wap_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.wap_blog_relevant_no_pic&depth_1-utm_source=distribute.wap_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.wap_blog_relevant_no_pic

引用：验证码用的是:

https://www.jianshu.com/p/7473f5bdd9c0

loginto.php文件代码：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="PNG/loginto.css" rel="stylesheet" media="screen">
    <link href="bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <meta charset="utf-8">
    <meta name="description" content="Example of Fluid Layout with Bootstrap version 2.0 from w3cschool.cc">
    <meta name="author" content="">
    <!-- Le styles -->
    <link href="bootstrap-3.0.0/dist/bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap-3.0.0/dist/bootstrap/twitter-bootstrap-v2/docs/assets/css/example-fluid-layout.css" rel="stylesheet">

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1786038_m62pqneyrzf.css">
    <title>龙星通信-登录</title>
    <style src="into/custom.css"></style>
</head>
 
<body >
    <div id="fb-root"></div>
    <script type="text/javascript">
        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));   
    </script>


    <div class="form-wrapper">
        
        <div class="header">
            登录
        </div>

        <form method="post" action="https://www.test.com/NB/self/login.php" >
            <div class="input-wrapper">
                <div class="border-wrapper">
                    <input type="text" name="account" placeholder="帐户" class="border-item" autocomplete="off">
                </div>
                <div class="border-wrapper">
                    <input type="password" name="password" placeholder="密码" class="border-item" autocomplete="off">
                </div>
                <div class="border-wrapper">
                    <input type="password" name="verification" placeholder="验证码" class="border-item" autocomplete="off">
                </div>
                <p align = "center"><img src="https://www.test.com/NB/self/into/idcode.php" width="100px" height="50px"alt=""></p>
            </div>
            <div class="action">
                <input class="submit" name="submit" type="submit" value="登录" autocomplete="off"/>
            </div>
            <div class="action">
                        <a href="https://www.test.com/NB/self/reginto.php" autocomplete="off" style="color: darkslateblue;">注册</a>
            </div>
        </form>
        
                <?php
                    if(isset($_GET["q"])){
                        echo '
                    <div class="action">
                        <a href="https://www.test.com/NB/self/loginreget.php" autocomplete="off" style="color: darkslateblue;">重置密码</a>
                    </div>
                    <div>
                        <div class="alert alert-danger alert-dismissable">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                                &times;
                            </button>
                        '.$_GET["q"].' 
                        </div> 
                    </div>
                        ';
                    }            
                ?>
    

    <script type="text/javascript">
            (function() {
                var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                po.src = 'https://apis.google.com/js/plusone.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
            })();
    </script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> 
    <script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
 
</html>

<2>.注册页面 reginto.php

在这里插入图片描述
reginto.php文件代码：

<!DOCTYPE html>
<html lang="en">
 
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="PNG/loginto.css" rel="stylesheet" media="screen">
    <link href="bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <meta charset="utf-8">
    <meta name="description" content="Example of Fluid Layout with Bootstrap version 2.0 from w3cschool.cc">
    <meta name="author" content="">
    <!-- Le styles -->
    <link href="bootstrap-3.0.0/dist/bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap-3.0.0/dist/bootstrap/twitter-bootstrap-v2/docs/assets/css/example-fluid-layout.css" rel="stylesheet">

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1786038_m62pqneyrzf.css">
    <title>龙星通信-注册</title>
    <style src="into/custom.css"></style>
</head>
 
<body >
    <div id="fb-root"></div>
        <script type="text/javascript">
            (function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));   
        </script>

    <div class="form-wrapper">
        <div class="header">
            注册
        </div>

        <form method="post" action="https://www.test.com/NB/self/reg.php" >
            <div class="input-wrapper">
                <div class="border-wrapper">
                    <input type="text" name="username" placeholder="用户名" class="border-item" autocomplete="off">  
                </div>
                <div class="border-wrapper">
                    <input type="text" name="account" placeholder="帐户" class="border-item" autocomplete="off">
                </div>
                <div class="border-wrapper">
                    <input type="password" name="password" placeholder="密码" class="border-item" autocomplete="off">
                </div>
                <div class="border-wrapper">
                    <input type="password" name="repassword" placeholder="再次确认密码" class="border-item" autocomplete="off">
                </div>
                <div class="border-wrapper">
                    <input type="password" name="verification" placeholder="验证码" class="border-item" autocomplete="off">
                </div>
                <p align = "center"><img src="https://www.test.com/NB/self/into/idcode.php" width="120px" height="60px"alt=""></p>          
            </div>
            <div class="action">
                <input bu class="submit" name="submit" type="submit" value="注册" />
            </div>
            <div>
                <div class="alert alert-danger alert-dismissable">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                        &times;
                    </button>
                    <?php
                        if(isset($_GET["q"])){
                            echo $_GET["q"];
                        }            
                    ?>
                </div>  
            </div> 
        </form>
        
        <script type="text/javascript">
            (function() {
                var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                po.src = 'https://apis.google.com/js/plusone.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
            })();
        </script>
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> 
        <script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
        <!-- <div class="icon-wrapper"></div> -->
    </div>
</body>
 
</html>

<3>.登录验证后台 login.php

<?php
include("Admin/db-creds.inc");
$conn = mysqli_connect($host,$dbuser,$dbpass,$dbname);
if (!$conn) {
    die("连接失败: " . mysqli_connect_error());
    echo '连接失败:'.mysqli_connect_error();
}

session_start();

if(isset($_POST['submit'])){  
    $verification = $_POST['verification'];
    if ($verification == $_SESSION['vCode']){
        $account = htmlspecialchars($_POST['account']);
        $password = MD5($_POST['password']);
        //检测用户名及密码是否正确
        $check_query = mysqli_query($conn,"SELECT id,leved FROM users WHERE account='$account' and password='$password' limit 1");
        if($result = mysqli_fetch_array($check_query)){//登录成功
            if($result['leved']<3){
                $time = date('Y-m-d h:i:s',time());
                $id = $result['id'];
                $sql = "INSERT INTO userin(intime, userid) VALUES ('$time','$id')";
                $result = mysqli_query($conn,$sql);
       
                $_SESSION['userid'] = $id;
                header("Location: home.php");

            }else{
                header("Location: loginto.php?q=你存在违规行为,帐号己被查封,请联系管理员解封!");
            }    
        } else {
            header("Location: loginto.php?q=登录失败,用户名或密码错误!");
        }
    }else{
        // exit('验证码错误!点击此处 <a href="javascript:history.back(-1);">返回</a>登录失败!</a>');
        header("Location: loginto.php?q=登录失败,验证码错误!");
    }

}else{
    exit('无效识别!');
}

?>

<4>.注册认证后台reg.php

<?php
    session_start();
    
    if(isset($_POST['submit'])){
        if($_POST['password'] == $_POST['repassword']){
            $verification = $_POST['verification'];
            if ($verification == $_SESSION['vCode']){
                $username = htmlspecialchars($_POST['username']);
                $password = MD5($_POST['password']);
                $account = $_POST['account'];
                $time = date('Y-m-d');

                $conn = mysqli_connect();
                if (!$conn) {
                    die("连接失败: " . mysqli_connect_error());
                    echo '连接失败:'.mysqli_connect_error();
                }

                $sql = "INSERT INTO `users` (`username`,`account`,`password`, `leved`, `regtime`) VALUES ('$username','$account','$password', '2', '$time')";
                
                if($conn->query($sql) == TRUE){
                    echo '时间:'.date('Y-m-d');
                    exit('注册成功 :返回<a href="https://www.test.com/NB/self/login.html">登录</a>!');
                }else{
                    header("Location: reginto.php?q="."注册失败:数据有误!");
                }
            }else{
                header("Location: reginto.php?q="."注册失败:验证码错误!");
            }
        }else{
            header("Location: reginto.php?q="."注册失败:两次输入密码不一致!");
        }
    }else{
        header("Location: reginto.php?q="."注册失败,无效识别!");
    }
?>

<5>.数据库配置 db-creds.inc

<?php
//give your mysql connection username n password
$dbuser ='';
$dbpass ='';
$dbname ="";
$host = 'localhost';
?>

@其他:

第一章:初遇

第二章:相识

第三章:相知

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/92743.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！