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,左外边距是 -150px width: 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);//输出查询结果,传给$row if ($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)
代码如下:
<?php if(!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)
代码如下:
<?php header("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)
代码如下:
<?php require_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(table)+css
- [置顶] 【实战】如何通过html+css+mysql+php来快速的制作动态网页(以制作一个博客网站为列)
- (PHP+HTML+JavaScript+Css)一个简单爬虫的开发
- 在一个服务器上搭建好php环境,在服务器上可以访问,其他机器可以访问服务器但网页无法访问
- HTML&CSS基础学习笔记1.28-给网页添加一个css样式
- 一个简单的网页密码登陆php代码
- HTML&CSS基础学习笔记1.22-一个简单的注册页面
- Android WebView 远程网页 加载本地资源js/html/css
- html css编写一个两列布局的网页,左侧宽度为200px,右侧自动扩展
- 搭建一个 简易的php版 todolist
- 妙味课堂:css学习--- 制作一个网页html+css过程
- php 访问一个网站地址,发送post数据和设置cookie,取得服务器返回的数据(html,setcookie命令设置的cookie);
- ASP网站数据采集程序制作:一个采集入库生成本地文件的几个FUCTION(可用来生成HTML静态网页)
- Ubuntu15.04 网站服务器环境搭建,php/html/css等学习环境搭建教程
- 如何用JS与HTML搭建一个简易的登录框
- 利用html、css、javascript、php同时交互数据库制作的注册登录界面
- PHP+Apache+MySQL实现简易的注册登陆系统
- Android本地登录与WebView网页登陆同步问题(cookie同步问题)
- 用CSS、HTML编写一个两列布局的网页,右侧宽度为200px,左侧自动扩展。
- html简易登陆注册模板