html+css+php+cookie+mysql制作一个简易的登陆网页

一味的学习未免有些枯燥无味,偶尔有个任务检验一下学习成果还是很有必要的

一.环境准备

一切开始的基本

1.打开phpstudy

2.找到网站根目录,把文件放在WWW文件下


这里我新建了一个login文件夹来存放,其中包括以下几个文件:
login.php 登录页面
register.php 注册页面
loginout.php 注销页面
index.php 登录成功页面
skip.php 注销跳转页面

二.登录页面


下面是登录界面的代码:
php部分代码

<?php
if(isset($_POST['submit']))
{
    if(isset($_POST['name']) && isset($_POST['password']) && $_POST['name']!=NULL && $_POST['password']!=NULL)
    {
        $link=mysqli_connect('localhost','root','yxld');//连接数据库
        if(mysqli_connect_errno())
        {
        exit(mysqli_connect_errno());
        }
        mysqli_select_db($link,'login');
        $query="select * from t2 ";//选择表
        $result=mysqli_query($link,$query);
        $a=0;
        while($colum=mysqli_fetch_array($result))
        {
            if($colum['name']===$_POST['name'] && $colum['password']===$_POST['password'])
                {
                    $a++;
                    break;
                }
        }    
            if($a>0)
            {
                if(setcookie('name',$colum['name'],time()+600))
                {
                    header('Location:index.php');    
                }
            }
            else
            {
                echo "账号或密码错误,或者没有注册";
            }        
    }
    else
    {
        echo "账号或密码错误,或者没有注册";
    }    
}
?>

html+css部分代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>请登录</title>
<style type="text/css">
/*body{
background-image:url(jpg/4.jpg);
background-repeat:no-repeat;
}*/
#head{
margin-top:200px;
text-align: center;
font-family:"楷体";/*设置字体*/
font-size:50px;/*设置字体大小*/
font-weight:2px;/*调整字体粗细*/
line-height: 35px;
}
.s{
text-align: center;
font-family:"楷体";/*设置字体*/
font-size:15px;/*设置字体大小*/
}
.c{
margin-left:0%;
border-radius:30px;
}
#longin{

margin-left:46%;
width: 160px;
height: 25px;
background-color:pink;
border-radius:30px;
}

#then{

margin-left:46%;
}
a{
margin-left:2%;
}
</style>
</head>
<boby>
<form method="post" action="login.php">
<p id="head">用户登陆</p>
<p class="s">账号:<input type="text" name="name" class="c" /></p>
<p class="s">密码:<input type="password" name="password" class="c" /></p>
<input type="submit" value="登陆" id="longin" name="submit" />
</br>
<p id="then">没有账号?<a href="register.php">前往注册</a> </p>
</form>
</boby>
</html>

三.注册页面


注册界面的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
header('Content-type:text/html;charset=utf-8');
$link=mysqli_connect('localhost','root','yxld');
if(mysqli_connect_errno())
{
exit(mysqli_connect_errno());
}
mysqli_select_db($link,'login');
$query="select * from t2 ";
$result=mysqli_query($link,$query);
$a=0;
while($colum=mysqli_fetch_array($result))
{
if(@($colum['name']===$_COOKIE['name']))
{
$a++;
break;
}
}
if(isset($_COOKIE['name'])&&$a>0)
{
echo"亲爱的{$_COOKIE['name']}您好,恭喜登陆成功!";
echo"<a href='logout.php'>注销</a>";
}
else
{
echo"<a href='login.php'>请前往登录</a>";
}
?>

四.注册成功页面


注册成功后跳转到登录页面进行登录。

五.登陆成功页面


另:明明为用户名
登录成功代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
header('Content-type:text/html;charset=utf-8');
$link=mysqli_connect('localhost','root','yxld');
if(mysqli_connect_errno())
{
exit(mysqli_connect_errno());
}
mysqli_select_db($link,'login');
$query="select * from t2 ";
$result=mysqli_query($link,$query);
$a=0;
while($colum=mysqli_fetch_array($result))
{
if(@($colum['name']===$_COOKIE['name']))
{
$a++;
break;
}
}
if(isset($_COOKIE['name'])&&$a>0)
{
echo"亲爱的{$_COOKIE['name']}您好,恭喜登陆成功!";
echo"<a href='logout.php'>注销</a>";
}
else
{
echo"<a href='login.php'>请前往登录</a>";
}
?>

六.注销及其跳转页面

登陆成功后点击注销,将进行跳转,其代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
if(!isset($_GET['url'])||!isset($_GET['info']))
{
exit();
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="refresh" content="3;URL=<?php echo $_GET['url']?>"/>
<title>正在跳转中...</title>
</head>
<boby>
<div style="text-align:center;font-size:20px;"><?php echo $_GET['info']?>,3秒后自动跳转!</div>
</boby>
</html>

跳转后就是注销后的界面

注销成功就前往登录界面,注销代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
header('Content-type:text/html;charset=utf-8');
if(isset($_COOKIE['name']))
{
if(setcookie('name',$_COOKIE['name'],time()-600))
{
header('Location:skip.php?url=index.php&info=注销成功,正在跳转中!');
}
else
{
header('Location:skip.php?url=index.php&info=注销失败,请稍后重试!');
}
}
?>

通过此次任务,我也学到了很多,比如数据库的连接、cookie会话控制等。虽然任务进程缓慢,完成任务不够及时,但是我也发现了自己学习的一些缺点,比如知识记得不够牢固,一些知识点不会运用等,所以以后需要在学习之后好好练习一番。


 Previous
php学习笔记(四) php学习笔记(四)
一.会话控制http是一个无状态的协议,此协议无法维护两个事务之间的联系。当一个用户请求一个页面后再请求另外一个页面时,http无法告诉我们这两个请求是来自同一个人。为了使得网站可以跟踪客户端与服务器之间的交互,保存和记忆每个用户的身份和信
2019-04-29 yxld
Next 
php学习笔记(三) php学习笔记(三)
一.正则表达式1.理解正则表达式语法规则描述了一类字符串的特征,然后通过这个特征可以配合一些特定的函数,来完成对字符串更加复杂的一系列操作。正则表达式:普通字符和特殊字符组成的一个字符串。定界符一般习惯使用正斜线/作为定界的字符,前后一致普
2019-04-21 yxld
  TOC