2. it技术
  3. 开发一个简单网站--第一章:初遇

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

it2025-01-07  9

笫一章:初遇

<1>.登录页面 loginto.php<2>.注册页面 reginto.php<3>.登录验证后台 login.php<4>.注册认证后台reg.php<5>.数据库配置 db-creds.inc@其他:

介绍:利用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'; ?>

@其他:

第一章:初遇

第二章:相识

第三章:相知

最新回复(0)