php+mysql+apache实现登录注册系统
Php+mysql写网页注册登录系统
1、搭建msyql+php+apache的网站环境
(1) 在云服务器上搭建服务器，推荐使用宝塔集成
(2) 在本地windows搭建，推荐自己采用分开安装，这样可以更好的配置自己的需求
2、编写前端登录注册页面
(1) 采用form表单编写登录注册页面
(2) 也可以form表单配合ajax实现表单提交
代码演示:
login_register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录注册</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--背景-->
<div class="wel" id="background-3"></div>
<!--左右两边云-->
<div class="wel" id="box">
<div class="box-1 lefp"></div>
<div class="box-1">
<div class="righp"></div>
</div>
</div>
<!--荧光点点-->
<div class="wel" id="git"></div>
<!--登录注册表-->
<div class="wel" id="from">
<div class="box-2 le-1">
<form action="php/login.php" method="POST">
<div class="flrg">
<h3>登录</h3>
<div class="a">
<!--<label>账号：</label>-->
<input type="text" class="in-1" name="username" placeholder="请输入用户名">
</div>
<div class="a">
<!--<label>密码：</label>-->
<input type="password" class="in-1" name="password" placeholder="请输入密码">
</div>
<div class="a">
<input type="submit" name="submit" value="登录" id="login_sub">
<!-- <button type="button">登录</button> -->
</div>
<div class="a">
<div class="hr"></div>
</div>
<div class="a">
<a href="#">忘记密码？</a>
</div>
</div>
</form>
</div>
<div class="box-2 le-2">
<form action="php/register.php" method="POST">
<div class="flrg-1">
<h3>注册</h3>
<div class="a">
<input type="text" class="in-1" name="username" placeholder="您的用户名">
</div>
<div class="a">
<input type="password" class="in-1" name="password" placeholder="输入密码">
</div>
<div class="a">
<input type="password" class="in-1" name="pwd" placeholder="再次确认密码">
</div>
<div class="a">
<input type="text" class="in-1" name="phone" placeholder="输入手机号码">
</div>
<div class="a">
<input type="email" class="in-1" name="email" placeholder="输入邮箱地址">
</div>
<div class="a">
<input type="submit" name="submit" value="注册" id="register_sub">
<!-- <button type="button">注册</button> -->
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Style.css:
/*鬼泣*/
.wel{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#background-3{
background: url("../imgs/preview-1.jpg") no-repeat;
background-size: cover;
height: 900px;
}
.box-1{
width: 50%;
height: 900px;
float: left;
overflow: hidden;
}
.box-2{
width: 50%;
position: relative;
float: left;
overflow: hidden;
top: 25%;
}
.lefp{
background: url("../img/1baa42452320f5d4eb2f5e1f22cacebb.png");
-webkit-animation: mylefp 10s;
-o-animation: mylefp 10s;
animation: mylefp 10s;
position: relative;
float: left;
opacity: 0;
background-position: 100% 0;
}
.righp{
background: url("../img/1baa42452320f5d4eb2f5e1f22cacebb.png") ;
-webkit-animation: myrighp 10s;
-o-animation: myrighp 10s;
animation: myrighp 10s;
position: relative;
float: right;
opacity: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#git{
background: url("../img/midground.png");
-webkit-animation: mygit 100s linear infinite;
-o-animation: mygit 100s linear infinite;
animation: mygit 100s linear infinite;
}
/*左边云*/
@keyframes mylefp {
0%{
left: 0;
opacity: 1;
}
100%{
left: -60%;
opacity: 0;
}
}
@-o-keyframes mylefp {
0%{
left: 0;
opacity: 1;
}
100%{
left: -60%;
opacity: 0;
}
}
@-moz-keyframes mylefp {
0%{
left: 0;
opacity: 1;
}
100%{
left: -60%;
opacity: 0;
}
}
@-ms-keyframes mylefp {
0%{
left: 0;
opacity: 1;
}
100%{
left: -60%;
opacity: 0;
}
}
@-webkit-keyframes mylefp {
0%{
left: 0;
opacity: 1;
}
100%{
left: -60%;
opacity: 0;
}
}
/*右边云*/
@keyframes myrighp {
0%{
right: 0;
opacity: 1;
}
100%{
right: -120%;
opacity: 0;
}
}
@-webkit-keyframes myrighp {
0%{
right: 0;
opacity: 1;
}
100%{
right: -120%;
opacity: 0;
}
}
@-ms-keyframes myrighp {
0%{
right: 0;
opacity: 1;
}
100%{
right: -120%;
opacity: 0;
}
}
@-moz-keyframes myrighp {
0%{
right: 0;
opacity: 1;
}
100%{
right: -120%;
opacity: 0;
}
}
@-o-keyframes myrighp {
0%{
right: 0;
opacity: 1;
}
100%{
right: -120%;
opacity: 0;
}
}
/*荧光点点*/
@keyframes mygit {
0%{
background-position: 0 0;
/*transform: translateY(0px);*/
}
100%{
background-position: 0 -600%;
}
}
@-o-keyframes mygit {
0%{
background-position: 0 0;
/*transform: translateY(0px);*/
}
100%{
background-position: 0 -600%;
}
}
@-moz-keyframes mygit {
0%{
background-position: 0 0;
/*transform: translateY(0px);*/
}
100%{
background-position: 0 -600%;
}
}
@-ms-keyframes mygit {
0%{
background-position: 0 0;
/*transform: translateY(0px);*/
}
100%{
background-position: 0 -600%;
}
}
@-webkit-keyframes mygit {
0%{
background-position: 0 0;
/*transform: translateY(0px);*/
}
100%{
background-position: 0 -600%;
}
}
.le-1{
position: relative;
-webkit-animation: myflrg 10s;
-o-animation: myflrg 10s;
animation: myflrg 6s;
}
.le-2{
overflow: hidden;
height: 73%;
}
.flrg{
float: right;
width: 300px;
background: rgba(255,255,255,.6);
text-align: center;
padding-bottom: 40px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.a{
margin: auto;
}
.flrg>.a,.flrg-1>.a{
padding: 10px;
}
.flrg>.a>.in-1,.flrg-1>.a>.in-1{
outline: none;
opacity: 0.6;
width: 238px;
height: 33px;
border: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 16px;
color: black;
padding-left: 15px;
}
.in-1:focus{
-webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
-moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
-webkit-animation: myin-1 10s linear infinite;
-o-animation: myin-1 10s linear infinite;
animation: myin-1 10s linear infinite;
}
.flrg>.a>button,.flrg-1>.a>button{
width: 91%;
padding: 10px;
border: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
cursor: pointer;
-webkit-box-shadow: 0 0 19px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 0 19px rgba(0, 0, 0, .1);
box-shadow: 0 0 19px rgba(0, 0, 0, .1);
background: rgba(6,127,228,0.71);
color: white;
font-weight: bold;
letter-spacing: 12px;
text-align: center;
outline: none;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
.flrg>.a>button:hover,.flrg-1>.a>button:hover{
-webkit-box-shadow:0 15px 30px 0 rgba(255,255,255,.15) inset, 0 2px 7px 0 rgba(0,0,0,.2);
-moz-box-shadow:0 15px 30px 0 rgba(255,255,255,.15) inset, 0 2px 7px 0 rgba(0,0,0,.2);
box-shadow:0 15px 30px 0 rgba(255,255,255,.15) inset, 0 2px 7px 0 rgba(0,0,0,.2);
}
.hr{
width: 91%;
height: 2px;
background: rgba(255,255,255,0.6);
margin: auto;
}
.flrg>.a>a{
text-decoration: none;
font-weight: bold;
color: #545454;
}
.flrg-1{
float: left;
width: 300px;
background: rgba(255,255,255,.6);
text-align: center;
padding-bottom: 40px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
position: absolute;
-webkit-animation: myflrg-2 10s;
-o-animation: myflrg-2 10s;
animation: myflrg-2 6s;
overflow: hidden;
}
/*登录*/
@keyframes myflrg {
0%{
top: -300%;
}
100%{
top: 25%;
}
}
@-webkit-keyframes myflrg {
0%{
top: -300%;
}
100%{
top: 25%;
}
}
@-ms-keyframes myflrg {
0%{
top: -300%;
}
100%{
top: 25%;
}
}
@-moz-keyframes myflrg {
0%{
top: -300%;
}
100%{
top: 25%;
}
}
@-o-keyframes myflrg {
0%{
top: -300%;
}
100%{
top: 25%;
}
}
/*注册*/
@keyframes myflrg-2 {
0%{
top: 300%;
}
100%{
top: 0;
}
}
@-o-keyframes myflrg-2 {
0%{
top: 300%;
}
100%{
top: 0;
}
}
@-moz-keyframes myflrg-2 {
0%{
top: 300%;
}
100%{
top: 0;
}
}
@-ms-keyframes myflrg-2 {
0%{
top: 300%;
}
100%{
top: 0;
}
}
@-webkit-keyframes myflrg-2 {
0%{
top: 300%;
}
100%{
top: 0;
}
}
/*input呼吸框*/
@keyframes myin-1 {
0%{
-webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
-moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
}
50%{
-webkit-box-shadow: 0 0 33px #ff1000 inset, 0 0 18px #ff0300;
-moz-box-shadow: 0 0 33px #ff1000 inset, 0 0 18px #ff0300;
box-shadow: 0 0 33px #ff1000 inset, 0 0 18px #ff0300;
}
100%{
-webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
-moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
}
}
@-webkit-keyframes myin-1 {
0%{
-webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
-moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
}
50%{
-webkit-box-shadow: 0 0 33px #ff1000 inset, 0 0 18px #ff0300;
-moz-box-shadow: 0 0 33px #ff1000 inset, 0 0 18px #ff0300;
box-shadow: 0 0 33px #ff1000 inset, 0 0 18px #ff0300;
}
100%{
-webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
-moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
}
}
@-ms-keyframes myin-1 {
0%{
-webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
-moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
}
50%{
-webkit-box-shadow: 0 0 33px #ff1000 inset, 0 0 18px #ff0300;
-moz-box-shadow: 0 0 33px #ff1000 inset, 0 0 18px #ff0300;
box-shadow: 0 0 33px #ff1000 inset, 0 0 18px #ff0300;
}
100%{
-webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
-moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
}
}
@-moz-keyframes myin-1 {
0%{
-webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
-moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
}
50%{
-webkit-box-shadow: 0 0 33px #ff1000 inset, 0 0 18px #ff0300;
-moz-box-shadow: 0 0 33px #ff1000 inset, 0 0 18px #ff0300;
box-shadow: 0 0 33px #ff1000 inset, 0 0 18px #ff0300;
}
100%{
-webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
-moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
}
}
@-o-keyframes myin-1 {
0%{
-webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
-moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
}
50%{
-webkit-box-shadow: 0 0 33px #ff1000 inset, 0 0 18px #ff0300;
-moz-box-shadow: 0 0 33px #ff1000 inset, 0 0 18px #ff0300;
box-shadow: 0 0 33px #ff1000 inset, 0 0 18px #ff0300;
}
100%{
-webkit-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
-moz-box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
box-shadow: 0 0 33px #1b00ff inset, 0 0 18px #1b00ff;
}
}
#login_sub{
width: 91%;
padding: 10px;
border: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
cursor: pointer;
-webkit-box-shadow: 0 0 19px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 0 19px rgba(0, 0, 0, .1);
box-shadow: 0 0 19px rgba(0, 0, 0, .1);
background: rgba(6,127,228,0.71);
color: white;
font-weight: bold;
letter-spacing: 12px;
text-align: center;
outline: none;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
#register_sub{
width: 91%;
padding: 10px;
border: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
cursor: pointer;
-webkit-box-shadow: 0 0 19px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 0 19px rgba(0, 0, 0, .1);
box-shadow: 0 0 19px rgba(0, 0, 0, .1);
background: rgba(6,127,228,0.71);
color: white;
font-weight: bold;
letter-spacing: 12px;
text-align: center;
outline: none;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
编写注册成功返回页面return_register.html
3、数据库操作
(1) 创建数据库
(2) 创建数据表
(3) 创建字段id 、username、password、email、phone等
4、编写php后台
(1) 连接数据库；
conn.php
<?php
header("Content-Type:text/html;charset=utf8");
$mysql_server_name = "localhost:3306"; //连接数据库端口
$mysql_username = "root@"; //用户名
$mysql_password = "123456"; //密码
$mysql_database = "test"; //数据库名称
$conn = new mysqli($mysql_server_name, $mysql_username, $mysql_password, $mysql_database); //构造函数mysql
// 检测连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
//echo "连接成功";
(2) 编写接受注册信息的register.php
<?php
include 'conn.php';
if (isset($_POST["submit"])) {
$username = $_POST["username"];
$password = $_POST["password"]; //获取表单数据
$pwd = $_POST["pwd"];
$phone = $_POST["phone"];
$email = $_POST["email"];
if ($name == null && $password == null) { //判断是否填写
echo "<script type=" . "\"" . "text/javascript" . "\"" . ">" . "window.alert" . "(" . "\"" . "请填写完成！" . "\"" . ")" . ";" . "</script>";
echo "<script type=" . "\"" . "text/javascript" . "\"" . ">" . "window.location=" . "\"" . "../login_register.html" . "\"" . "</script>";
} else {
if ($phone == null && $email == null) { //判断是否填写
echo "<script type=" . "\"" . "text/javascript" . "\"" . ">" . "window.alert" . "(" . "\"" . "请填写完成！" . "\"" . ")" . ";" . "</script>";
echo "<script type=" . "\"" . "text/javascript" . "\"" . ">" . "window.location=" . "\"" . "../login_register.html" . "\"" . "</script>";
} else {
if ($password != $pwd) { //确认密码是否正确
echo "<script type=" . "\"" . "text/javascript" . "\"" . ">" . "window.alert" . "(" . "\"" . "密码不一致！" . "\"" . ")" . ";" . "</script>";
echo "<script type=" . "\"" . "text/javascript" . "\"" . ">" . "window.location=" . "\"" . "../login_register.html" . "\"" . "</script>";
} else {
$password_sure = password_hash($password, PASSWORD_DEFAULT); //密码加密
$password = $password_sure;
$sql = $conn->query("SELECT username FROM login_register WHERE username ='{$username}'"); //查询数据库中的用户名和密码 并返回集合
$row = mysqli_fetch_assoc($sql); //取其中一行
if ($row > 0) { //判断是否存在
//判断数据库表中是否已存在该用户名
echo "<script type=" . "\"" . "text/javascript" . "\"" . ">" . "window.alert" . "(" . "\"" . "该用户名已被注册" . "\"" . ")" . ";" . "</script>";
echo "<script type=" . "\"" . "text/javascript" . "\"" . ">" . "window.location=" . "\"" . "../login_register.html" . "\"" . "</script>";
} else {
$sql01 = $conn->query("SELECT phone FROM login_register WHERE phone ='{$phone}'"); //查询数据库中的用户名和密码 并返回集合
$row01 = mysqli_fetch_assoc($sql01); //取其中一行
if ($row01 > 0) { //判断是否存在
//判断数据库表中是否已存在该用户名
echo "<script type=" . "\"" . "text/javascript" . "\"" . ">" . "window.alert" . "(" . "\"" . "该手机号已被注册" . "\"" . ")" . ";" . "</script>";
echo "<script type=" . "\"" . "text/javascript" . "\"" . ">" . "window.location=" . "\"" . "../login_register.html" . "\"" . "</script>";
} else {
$sql02 = $conn->query("SELECT email FROM login_register WHERE email ='{$email}'"); //查询数据库中的用户名和密码 并返回集合
$row02 = mysqli_fetch_assoc($sql02); //取其中一行
if ($row02 > 0) { //判断是否存在
//判断数据库表中是否已存在该用户名
echo "<script type=" . "\"" . "text/javascript" . "\"" . ">" . "window.alert" . "(" . "\"" . "该邮箱已被注册" . "\"" . ")" . ";" . "</script>";
echo "<script type=" . "\"" . "text/javascript" . "\"" . ">" . "window.location=" . "\"" . "../login_register.html" . "\"" . "</script>";
} else {
//values('$username','$password1','$password2')给变量加上单引号后，使得可以写入汉字和字母
$conn->query("INSERT INTO login_register(username,password,phone,email) VALUES('$username','$password','$phone','$email')"); //将注册信息插入数据库表中 //echo"$sql";
echo "<script type=" . "\"" . "text/javascript" . "\"" . ">" . "window.location=" . "\"" . "../return_register.html" . "\"" . "</script>";
}
}
}
}
}
}
}
(3) 编写接受判断登录信息的login.php
<?php
session_start();
include('conn.php');
if(isset($_POST["submit"])){
$username=$_POST["username"];
$password=$_POST["password"];
if($username==null && $password==null){//判断是否为空
echo"<script type="."\""."text/javascript"."\"".">"."window.alert"."("."\""."请填写正确的信息！"."\"".")".";"."</script>";
echo"<script type="."\""."text/javascript"."\"".">"."window.location="."\""."../login_register.html"."\""."</script>";
exit;
}
$sql = $conn->query("select username from login_register where username ='{$username}'"); //查询数据库中的用户名和密码 并返回集合
$row = mysqli_fetch_assoc($sql); //取其中一行
$sql_password = "SELECT password FROM login_register WHERE username='{$username}'";
$rows=$conn->query($sql_password);
$data=$rows->fetch_all();
$password_sure=$data[0][0];
if ($row > 0) { //判断是否存在
if (password_verify($password,$password_sure)) {
$_SESSION['username'] = $username;//传入session数据
echo"<script type="."\""."text/javascript"."\"".">"."window.location="."\""."登录成功后跳转页面"."\""."</script>";
}else{
echo"<script type="."\""."text/javascript"."\"".">"."window.alert"."("."\""."用户名或密码错误,登录失败！请您重新登录或注册"."\"".")".";"."</script>";
echo"<script type="."\""."text/javascript"."\"".">"."window.location="."\""."../login_register.html"."\""."</script>";
}
} else {
// echo $row;
echo"<script type="."\""."text/javascript"."\"".">"."window.alert"."("."\""."登录失败！请您重新登录或注册"."\"".")".";"."</script>";
echo"<script type="."\""."text/javascript"."\"".">"."window.location="."\""."../login_register.html"."\""."</script>";
}
}
