1.創建login.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄註冊</title>
<link href="../public/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
body{
background-color: #1D2024;
}
.login-container{
width:375px;
}
.login-white{
color: #fff;
}
.text-green{
color: #69aa46;
}
.login-container .text-primary{
color: #dd5a3f;
}
h1{
font-family: Arial,sans-serif;
font-size: 32px;
}
.login-box{
padding: 6px;
background-color: #f7f7f7;
}
.widget-main{
padding:16px 36px 16px;
}
.widget-main h4{
font-size: 19px;
color: blue;
border-bottom: 1px solid #d5e3ef;
line-height: 28px;
padding-bottom: 4px;
margin-bottom: 16px;
}
.widget-form{
}
.line{
margin-top: 10px;
text-align: center;
position: relative;
z-index: 1;
}
.line::before{
content: "";
border: 1px dotted #a6c4db;
position: absolute;
left: 0;right:0;
display: block;
top:50%;
z-index: -1;
}
.line span{
font-size:13px;
background: #f7f7f7 none repeat scroll 0 0;
padding: 0 8px;
color: #5090c1;
}
.login-foot{
background: #5090c1;
border-top:2px solid #597597;
}
.login-foot::after{
content: "";
display: table;
}
.login-foot .left{
padding: 9px 0 11px;
}
.login-foot .left a{
margin-left:11px;
color:#fe9;
text-shadow: 1px 0 1px rgba(0,0,0,.25);
}
.login-foot .right a{
margin-right:11px;
color:#cf7;
text-shadow: 1px 0 1px rgba(0,0,0,.25);
}
.login-foot .right{
padding: 9px 0 11px;
}
.social{
margin-top:20px;
text-align: center;
}
.social a{
width:34px;
height: 34px;
margin: 0;
padding: 0;
line-height: 34px;
border-radius: 100%;
}
.social a i{
font-size:32px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="login-container center-block">
<div>
<h1 class="text-center">
<i class="glyphicon glyphicon-leaf text-green"></i>
<span class="text-primary">ItC</span>
<span class="login-white">Application</span>
</h1>
<h4 class="text-info text-center">
© Itcast
</h4>
</div>
<div class="login-box">
<div class="login-widget">
<div class="widget-main">
<h4>
<i class="glyphicon glyphicon-glass text-green"></i>
Please Enter Your Information
</h4>
<form action="validate.php" method="post">
<fieldset>
<div class="form-group has-feedback">
<input class="form-control" type="text" name="uname" id="uname" placeholder="Username">
<div class="form-control-feedback">
<span style="color: #666;" class="glyphicon glyphicon-user"></span>
</div>
</div>
<div class="form-group has-feedback">
<input class="form-control" type="password" name="upass" id="upass" placeholder="Password">
<div class="form-control-feedback">
<span style="color: #666;" class="glyphicon glyphicon-lock"></span>
</div>
</div>
<div class="clearfix">
<div class="form-group has-feedback pull-left" style="width:180px;">
<input class="form-control" type="text" name="verify" placeholder="Verify">
<div class="form-control-feedback">
<span style="color: #666;" class="glyphicon glyphicon-leaf"></span>
</div>
</div>
<img class="pull-right img-rounded" style="border: 1px solid #ccc;" width="100" src="../public/images/5.jpg" alt="">
</div>
<div class="clearfix">
<label for="remember" style="display: inline-block;margin-top: 6px;">
<input style="position: absolute;" type="checkbox" name="remember" id="remember">
<span style="color: #666;margin-left: 16px;">Remember</span>
</label>
<button class="pull-right btn btn-primary btn-sm" type="submit">
<i class="glyphicon glyphicon-log-in"> </i>
Login
</button>
</div>
</fieldset>
</form>
<div class="line">
<span>Or According Bellow</span>
</div>
<div class="social">
<a href="#" class="btn btn-primary">
<i class="glyphicon glyphicon-grain"></i>
</a>
<a href="#" class="btn btn-danger">
<i class="glyphicon glyphicon-fire"></i>
</a>
<a href="#" class="btn btn-info">
<i class="glyphicon glyphicon-heart"></i>
</a>
</div>
</div>
</div>
<div class="login-foot clearfix">
<div class="pull-left left">
<a href="#">
<i class="glyphicon glyphicon-arrow-left"></i>
I forgot my password
</a>
</div>
<div class="pull-right right">
<a href="#">
I want to register
<i class="glyphicon glyphicon-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2.創建login.php文件
<?php
include '../resource/login.html';
3.創建數據表
DROP TABLE IF EXISTS `users`;
CREATE TABLE IF NOT EXISTS `users` (
`id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
`u_name` varchar(32) DEFAULT NULL,
`u_pwd` varchar(128) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
INSERT INTO `users` (`id`, `u_name`, `u_pwd`) VALUES
(1, 'admin', '202cb962ac59075b964b07152d234b70');
COMMIT;
4.創建validate.php文件
<?php
$u_name=$_POST['uname'];
$u_pwd=$_POST['upass'];
$verify=$_POST['verify'];
$obj=mysqli_connect('localhost','root','');
$sql='set names utf8';
$return=mysqli_query($obj,$sql);
$sql='use newdb3';
$return=mysqli_query($obj,$sql);
$u_pwd=md5($u_pwd);
$sql="select * from users where u_name='$u_name' && u_pwd='$u_pwd'";
$result=mysqli_query($obj,$sql);
$userInfo=mysqli_fetch_assoc($result);
if($userInfo){
header('location:listNews.php');
}else{
header('location:login.php');
}
5.防止翻牆
(1)validate.php文件中設置session
if($userInfo){
session_start();
$_SESSION['userInfo']=$userInfo;
header('location:listNews.php');
}else{
header('location:login.php');
}
(2)在受登錄保存的其後的文件中驗證session
session_start();
if(!isset($_SESSION['userInfo'])){
header('location:login.php');
exit;
}
6.登出 創建logout.php文件
session_start();
session_destroy();
header('location:login.php');
