HTML+CSS+PHP+COOKIE在本地搭建一个简易的登陆注册网页

昨天晚上看了一叶飘零大佬的直播，大佬说：初学者最好自己先动手去做一些项目，这样能更好的了解原理，恰好学长要求做一个简易的登陆注册系统，利用这个机会再学习一波。

做了两天，搞懂了很多概念，也遇到了很多问题，但是这个过程特别有意思，记录一下，把那些学到的知识也总结一下。

一：准备工作
打开mySQL

打开网站根目录

这里我直接放在了WWW目录下，有点乱。

这样准备工作就做好了，开始奋斗了。

开始之前把我写的php文件简单描述一下：
login.php（登陆页面)
logincookie.php（连接数据库+设置cookie页面）
welcome.php (判断是否有cookie以防绕过+登陆后呈现的页面)
end.php (清除cookie页面)
Register.php (注册页面)
linkmysql.php（注册时连接数据库页面）
Register link.php（注册判断是否注册成功和导入数据库用户信息页面）
fail.php (登陆失败页面)

二：创建登陆页面和注册页面

感悟：
那句话怎么说，学到用时方恨少，差不多就这个意思，之前学过HTML和CSS，但一自己写。。。，就会写个简单的表单，无非就是加一个外部样式CSS改一下背景颜色什么的。。。所以还得查大佬的。

这个样式干净又好看（自己认为），所以模仿，但是并非是复制粘贴，自己一步一步敲。。。
（下面是转载自mind_programmonkey 大佬的CSS)

html{width: 100%;height: 100%;overflow: hidden;font-style: sans-serif;
}
body{width: 100%;height: 100%;font-family: 'Open Sans',sans-serif;margin: 0;background-color: #4A374A;
}
#login{position: absolute;top: 50%;left:50%;margin: -150px 0 0 -150px;width: 300px;height: 300px;
}
#login h1{color: #fff;text-shadow:0 0 10px;letter-spacing: 1px;text-align: center;
}
h1{font-size: 2em;margin: 0.67em 0;
}
input{width: 278px;height: 18px;margin-bottom: 10px;outline: none;padding: 10px;font-size: 13px;color: #fff;text-shadow:1px 1px 1px;border-top: 1px solid #312E3D;border-left: 1px solid #312E3D;border-right: 1px solid #312E3D;border-bottom: 1px solid #56536A;border-radius: 4px;background-color: #2D2D3F;
}
.but{width: 300px;min-height: 20px;display: block;background-color: #4a77d4;border: 1px solid #3762bc;color: #fff;padding: 9px 14px;font-size: 15px;line-height: normal;border-radius: 5px;margin: 0;
}
---------------------
作者：mind_programmonkey
来源：CSDN
原文：https://blog.csdn.net/Mind_programmonkey/article/details/78522494

这是我的HTML代码

<?php
?>
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>请登陆</title><link rel="stylesheet" type="text/css" media="screen" href="1.css"><script src="main.js"></script>
</head>
<body><div id="login"><h1>login</h1><form action="logincookie.php" method="post"><input type="text" name="username"  placeholder="用户名" />
<input type="password" name="password" placeholder="密码" /><br /><button class="tj" type="submit">登陆</button></form><form action="Register.php" method="post"><button class="zc" type="submit">注册</button></form>
</body>
</html>

做之前没有懂其中的一些东西，现在做完了把之前不懂的弄懂。
（下面是我的，就是一些值改过）

body {width: 100px;height: 100px;background-color: beige;background-image: url(28.jpg);//加一张图片
}
#login{position: absolute;//通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 50%，距离页面顶部 50%。top:50%;left:50%;margin: -150px 0 0 -150px;//这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。该属性可以有 1 到 4 个值，上外边距是 -150px，右外边距是 0px，下外边距是 0px，左外边距是 -150pxwidth: 300px;height: 300px;
}#login h1{color:   #9393FF;text-shadow: 0 0 10px;//text-shadow 属性向文本设置阴影,其他添加的效果可以在W3school查到。letter-spacing: 1px;//letter-spacing 属性增加或减少字符间的空白（字符间距）text-align: center;//text-align 属性规定元素中的文本的水平对齐方式，这里是居中对齐。
}h1 {font-size: 2em;margin: 0.67em 0;
}input {width: 300px;height: 20px;margin-bottom: 10px;//margin-bottom 属性设置元素的下外边距outline: none;//outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用padding: 10px;//padding 简写属性在一个声明中设置所有内边距属性,所有 4 个内边距都是 10px.font-size: 20px;color: #fff;text-shadow: 1px 1px 1px;//text-shadow属性向文本设置阴影border-top: 1px solid #312E3D;//border-top 属性在一行声明中为上边框设置所有的属性border-left: 1px solid #312E3D;border-right: 1px solid #312E3D;border-bottom: 1px solid #56536A;border-radius: 4px;background-color:#2D2D3F;}.tj {width: 300px;min-height: 20px;display: block;background-color: #4a77d4;border: 1px solid #3762bc;//border 简写属性在一个声明设置所有的边框属性color: #fff;padding:  9px 14px;font-size:15px;line-height: normal;//border-radius: 5px;margin: 0px;
}.zc {width: 300px;min-height: 20px;display: block;background-color: #33CC33;border: 1px solid #3762bc;color: #fff;padding:  9px 14px;font-size:15px;line-height: normal;//line-height 属性设置行间的距离（行高）border-radius: 5px;margin: 0px;
}

了解了这些属性，但还是不知道为啥大佬这样设置其中的一些数据，毕竟目前是小白，慢慢来吧。

我用的是CSS外部样式表,把CSS存到1.css文件中，在login.php（登陆页面）文件中引用。

 <link rel="stylesheet" type="text/css" media="screen" href="1.css">

这样，就完成了第一步！
实现效果如下：

在登陆页面加一个注册按钮

在1.css里面添加一段

.zc {width: 300px;min-height: 20px;display: block;background-color: #33CC33;border: 1px solid #3762bc;color: #fff;padding:  9px 14px;font-size:15px;line-height: normal;//line-height 属性设置行间的距离（行高）border-radius: 5px;margin: 0px;
}

实现效果：

再做一个注册页面（Register.php），采用相同的CSS，换个颜色即可。
Register.php
代码如下：

<?php
?>
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>请注册</title><link rel="stylesheet" type="text/css" media="screen" href="3.css">
</head>
<body><div id="Register"><h1>Register</h1><form action="Register link.php" method="POST"><input type="text" name="username"  placeholder="请输入用户名" />
<input type="password" name="password" placeholder="请输入密码" /><br /><button class="zc" type="submit">注册</button></form>
</body>
</html>

实现效果如下：

这样就实现了登陆页面和注册页面。

三：连接mySQL和设置COOKIE
我们的登陆页面和注册页面都已经做好了，现在就来写一个PHP文件来连接数据库并且设置一下cookie.
logincookie.php（连接数据库+设置cookie页面）
代码如下：

<?php
//第一次登陆的时候，通过用户输入的信息来确认用户
header('Content-type: texy/html;charset=utf-8');
//设置编码，防止乱码
if ( ( $_POST['username'] != null ) && ( $_POST['password'] != null ) ) {//判断输入是否为空$userName = $_POST['username'];//post方式接收传来的参数，用定义的$userName和$password接收$password = $_POST['password'];//从数据库获取用户信息//数据库连接信息 分别为主机 数据库用户名 密码$conn = mysqli_connect('localhost','root','root');mysqli_select_db($conn,'login');//连接所创建的login数据库$sql = "select * from user where username = '$userName'";//从数据库表中获取数据$res = mysqli_query($conn,$sql);//针对login这个数据库进行查询, 查询是否存在有这个用户名$row = mysqli_fetch_array($res);//输出查询结果，传给$rowif  ($row['username']!=$userName) {echo '不能登陆';header('Location:fail.php');}else if($row['username']==$userName&&$row['password']!=$password){echo '不能登陆';header('Location:fail.php');}else if($row['username']!=$userName&&$row['password']!=$password) {echo '不能登陆';header('Location:fail.php');}else if($row['username']==$userName&&$row['password'] ==$password) {    //如果密码验证通过，设置一个cookies，把用户名保存在客户端setcookie('username',$userName,time()+3600);//设置一个小时//最后跳转到登录后的欢迎页面echo '登陆成功';header('Location:welcome.php');//跳转到最后的欢迎页面}
}
else {echo '登陆失败';header('Location:fail.php');//跳转到失败页面
}

这里面的PHP连接数据库语法，需要学习一下才能知道这些语句的意思。
w3school网站
这个网站特别好，特别详细，从这里面可以学习到PHP连接mySQL语法。

例如：
mysql_connect(servername,username,password);//主机名、数据库用户名、密码
//一般初始的数据库用户名和密码都是      root

语法学习会再总结一个单独的博客来记录一下，这里主要介绍一下搭建流程和遇到的问题。

通过PHP连接mySQL语法我们就可将用户输入的信息用POST方式传入到数据库中，然后利用查询语句进行查询数据库数据，进行比对，然后判断用户名和密码是否与数据库所存数据相同。

接下来实现cookie，一开始真的不知道有什么用处，查了一些博客，看了一些概念，就知道是把用户的信息存储到客户端，方便用户下次登入。但其实cookie也可以设置防绕过的功能，就例如：
如果我不设置cookie，那么我的登陆页面和最终页面都是独立的，靠的也只是HTML中的<form action=" "> 来连接进行跳转功能。但这样不安全，如果对方注册一个用户，登陆到你的最终页面，可以直接在url地址栏里直接输入这个文件，例如我的最终页面是welcome.php，对方一输入没有如何阻拦，直接就可以进入。所以设置cookie的作用不仅是把用户的信息保存在客户端，更重要的防止绕过。

cookie的具体介绍可以看一下
B站孙胜利老师的讲解的和菜鸟教程官网上的介绍，特别详细。

一开始模仿大佬做，设置了两个cookie，一个是用户名的。另一个是密码的，但已经写过注销cookie了PHP文件却依旧能在url地址栏里直接进入后台，一开始真的不知道错误点在那，搞了很长时间，但这个过程及其有意思，查资料，问朋友，自己修改代码。最后发现。。。，其实完全不用设置密码的cookie了，我设置用户名cookie的前提便是用户名输入和数据库密码相等了，所以只要设置一个用户名cookie，便能够识别和登陆。也可以在注销cookie时，把密码的cookie注销，之前直接能登入后台就是因为我设置了两个cookie，却只清除了一个。。。

找到问题所在就可以成功设置好cookie，并且注销cookie了。

四：实现登陆功能和注销cookie
在上面我们实现了两个页面，一个是登陆页面，一个连接数据库+cookie的，下面我们还需要两个页面。
一个登陆失败页面（fail.php）
代码如下：

<?php
?><!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>登陆失败</title><link rel="stylesheet" type="text/css" media="screen" href="2.css">
</head>
<body><div id="login"><h1>请重新登陆</h1></div><a href="login.php">重新登陆</a>
</body>
</html>

可以看logincookie.php的代码中，如果用户名和密码有一个不正确的时候，都会跳转到fail.php页面。
实现效果：

下面我们再实现一个用户登陆成功的页面（welcome.php）
代码如下：

<?phpif(!isset($_COOKIE['username'])){//如果cookie没有设置，则不能登陆。echo '不能登陆';exit();}
?>
//上面的代码便是设置cookie的作用便用于此，这样便可防止直接登入后台
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>请登陆</title><link rel="stylesheet" type="text/css" media="screen" href="4.css">
</head>
<body><div id="Landingsuccessfully"><h1>Landingsuccessfully</h1><a href="end.php">Please cancel</a>
</body>
</html>

实现效果：
直接从url里面登陆，显示结果：

正常用户登陆，显示结果：

因为我设置的cookie是一个小时的，我们需要手动清除一下cookie，否则客户端会保留cookie，下次在url里直接可以登陆后台。

所以再写一个注销cookie的页面（end.php）
代码如下：

<?php
ini_set("error_reporting","E_ALL & ~E_NOTICE");
header('Content-type:text/html;charset=utf-8');
if (isset($_COOKIE['username'])) {setcookie('username',$userName,time()-3600);echo '注销成功';
}
?>

之前这个页面老是报错，大致便是Notice:Undefined varialbe:变量名称，但注销功能能正常实现，加上

ini_set("error_reporting","E_ALL & ~E_NOTICE");

便可以解决报错问题，查资料发现。
在4.3.0中运行正常，在4.3.1中运行会提示Notice:Undefined varialbe:tmp_i
修改方法：
在程序开头加一句：
error_reporting(E_ALL & ~E_NOTICE); 或error_reporting(E_ALL ^ E_NOTICE);
具体查看：
报错原因和修改方法

这样就实现了cookie注销的功能了
实现效果：

进行一下测试，看是否清除cookie。
在url地址栏里直接登陆后台试试

ok,看来确实注销成功了，完成咯。

五：实现注册功能
登陆功能也完全实现了，接下来我们就实现一下注册功能。
这里我们又写了三个页面（好乱），不过毕竟是小白，只要能写出来就行。
首先是注册页面（Register.php）
代码如下：

<?php
?>
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>请注册</title><link rel="stylesheet" type="text/css" media="screen" href="3.css">
</head>
<body><div id="Register"><h1>Register</h1><form action="Register link.php" method="POST"><input type="text" name="username"  placeholder="请输入用户名" />
<input type="password" name="password" placeholder="请输入密码" /><br /><button class="zc" type="submit">注册</button></form>
</body>
</html>

接下来是连接数据库(linkmysql.php)
代码如下：

<?phpheader("Content-type: text/html; charset=utf-8");//设置编码,防止乱码$con = mysql_connect("localhost","root","root") or die("数据库连接失败");mysql_select_db('login') or  die("指定的数据库不能打开");mysql_query("set names utf8");
?>

再就是导入信息的页面（Register link.php）
代码如下：

<?phprequire_once("linkmysql.php");//首先连接数据库$name=trim($_POST['username']);//trim函数，过滤空格，使用trim函数，我们可以把表单中空格给过滤掉$password=$_POST['password'];$sql = "select * from user where username='$name'";//从数据库查找用户名数据$info = mysql_query($sql);//函数执行一条 MySQL 查询$res = mysql_num_rows($info);//返回一行的结果if(empty($name)){//empty() 函数用于检查一个变量是否为空。echo "<script>alert('用户名不能为空');location.href='login.php';</script>";}else if(empty($password)){echo "<script>alert('密码不能为空');location.href='login.php';</script>";}else{   if($res){echo "<script>alert('用户名已存在');location.href='login.php';</script>";}else{$sql1 ="insert into user(username,password) values('".$name."','" .$password."')";//PHP MySQL 插入数据$result = mysql_query($sql1);//判断插入数据是否成功if($result){echo "<script>alert('注册成功')</script>";header('Location:login.php');}else{echo "<script>alert('注册失败')</script>";}}
}
?>

这样就实现了注册功能。
这里面涉及了数据库的PHP mySQL插入的语法，可以在菜鸟教程学习，之后再写一篇总结一下这些语句的用法。

?，到此为止我们就实现了简易的登陆注册页面。

虽然这个项目很小，但做出了真的很有成就感，同时觉得学习的东西真的好有意思，加油，继续努力学习（开心！！！）。

HTML+CSS+PHP+COOKIE在本地搭建一个简易的登陆注册网页相关推荐

如何使用HTML+CSS+JavaScript+wamp sever自主搭建一个易班轻应用
如何使用HTML+CSS+JavaScript+wamp sever自主搭建一个易班轻应用目录: 文章目录如何使用HTML+CSS+JavaScript+wamp sever自主搭建一个易班轻应用 ...
如何在本地搭建一个Android应用crashing跟踪系统－ACRA
https://github.com/bboyfeiyu/android-tech-frontier/tree/master/others/%E5%A6%82%E4%BD%95%E5%9C%A8%E6 ...
php添加本地搜索,十分钟，在本地搭建一个搜索引擎
假设有一堆词,也有一堆内容.现在想知道: 每个词的相关词有哪些? 每个词的相关内容有哪些? 每个内容的相关内容有哪些? 利用上述词与词.词与内容.内容与内容的关联,来优化页面的推荐信息,使用户和搜索引 ...
用css，html，js搭建一个书店购物系统
用css,html,js搭建一个书店购物系统,如下: <!DOCTYPE html> <html> <head> <meta charset="ut ...
如何在本地搭建一个EasyPlayer的H5 demo 播放H265视频流?
EasyPlayer视频流媒体播放器兼容性很强,不仅能支持H.264/H.265视频的播放,还具有多个系列版本,如EasyPlayer-RTSP.EasyPlayer.js.EasyPlayerPro ...
使用python搭建一个简易的本地局域网
使用python搭建一个简易的本地局域网 1.设置python路径为环境变量// python3 2.命令行输入python -m http.server 8888// 或python2 2.命令行输 ...
如何快速用node在本地搭建一个服务器
众所周知,服务器是通过安装特殊的软件(或者运行特殊的代码)来提供网络服务的机器.那么我们的电脑可不可以弄成一个服务器,来供他人访问呢? 答案是可以的,这里我们需要按照一下node.js这个软件.具体按 ...
如何搭建一个简易的Web框架
Web框架本质什么是Web框架, 如何自己搭建一个简易的Web框架?其实, 只要了解了HTTP协议, 这些问题将引刃而解. 简单的理解: 所有的Web应用本质上就是一个socket服务端, 而用户 ...
快速搭建一个简易的HTTP服务器用于文件分享与下载
需要快速搭建一个简易的HTTP服务器进行文件的分享与下载.主要有以下两种方法: 1. 使用python 来实现 import http.server import socketserverPORT = ...

HTML+CSS+PHP+COOKIE在本地搭建一个简易的登陆注册网页

HTML+CSS+PHP+COOKIE在本地搭建一个简易的登陆注册网页相关推荐

最新文章

热门文章