需要引入jq和bootstrap
login.php
<?php
/**
* Created by PhpStorm.
* User: dllo
* Date: 16/9/13
* Time: 上午10:50
*/
session_start();
//$_SESSION["user"] = "kitty";
//echo $_SESSION["user"];
//var_dump($_COOKIE);
//setcookie(session_name(),session_id(),time()-10000,"/");
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
<script src="js/jquery-2.2.3.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">logo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">产品</a></li>
<li><a href="#">帮助中心</a></li>
<li><a href="#">合作</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">关于我们</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<?php
if (isset($_SESSION["user"]) && isset($_SESSION["pass"])){
echo " <li class=\"dropdown\">
<a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">{$_SESSION['user']} <span class=\"caret\"></span></a>
<ul class=\"dropdown-menu\" role=\"menu\">
<li><a href=\"#\" data-toggle=\"modal\" data-target=\"#myModal\">设置</a></li>
<li class=\"divider\"></li>
<li><a href=\"javascript:signOut()\">注销</a></li>
</ul>
</li>" ;
}else{
echo "<li class=\"dropdown\">
<a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">登录 <span class=\"caret\"></span></a>
<ul class=\"dropdown-menu\" role=\"menu\">
<li><a href=\"#\" data-toggle=\"modal\" data-target=\"#myModal\">登录</a></li>
<li class=\"divider\"></li>
<li><a href=\"#\">忘记密码</a></li>
</ul>
</li>";
}
?>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-center">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="https://static.slightech.com/img/logo.png" alt="">
</div>
<div class="modal-body text-center">
<form class="form-horizontal" role="form" method="post" action="login_api.php">
<div class="form-group">
<label for="inputEmail3" class="col-sm-4 control-label" >邮箱</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputEmail3" name="user" placeholder="邮箱">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-4 control-label" >密码</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="inputPassword3" name="pass" placeholder="密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-info">登录</button>
<button type="submit" class="btn btn-info">重置</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
function signOut() {
window.location.assign("login_api.php");
}
</script>
</body>
</html>
login_api.php
<?php
/**
* Created by PhpStorm.
* User: dllo
* Date: 16/9/13
* Time: 下午3:40
*/
session_start();
if (isset($_POST["user"]) && isset($_POST["pass"])){
$user = $_POST["user"];
$pass = $_POST["pass"];
mysql_connect("localhost","root","");
mysql_select_db("0503");
mysql_query("set names utf8");
$sql = "SELECT * FROM user WHERE username='{$user}' AND password='{$pass}'";
$result = mysql_query($sql);
if (mysql_num_rows($result) > 0){
// 存在,可以登录
$_SESSION["user"] = $user;
$_SESSION["pass"] = $pass;
header("Location:login.php");
}else{
// 用户名密码错误
header("location:login.php");
}
}else{
setcookie(session_name(),session_id(),time()-10000,"/");
header("location:login.php");
}