这是一个简单的小项目,但对于我这小白来说,也是写了好几天才完成,中间心态炸裂n次,但最后还是 搞定了!!!
说了那麽多,还是分享一下吧!
实验环境是phpstudy2018。
在phpstudy的www目录里,创建一个新文件夹test。
文件里有:
index.php 主页面(登陆页面)
login.php 登录页面的后台操作
register.html 注册页面
register.php 注册页面的后台操作
主页面(登录页面)
先上图
有点简单了。
下面是源码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
body {
background-size: cover;
min-width: 1000px;
background-image:url(https://s1.ax1x.com/2020/08/23/d0t8ln.jpg);
font-size:14px;
}
#main {
width:360px;
height:320px;
background:#fff;
border:1px solid #ddd;
position:absolute;
top:50%;
left:50%;
margin-left:-180px;
margin-top:-160px;
background-size: cover;
background-image:url(https://s1.ax1x.com/2020/07/31/alzGMn.jpg);
}
#main .title {
height: 48px;
line-height: 48px;
color:#333;
font-size:16px;
font-weight:bold;
text-indent:30px;
border-bottom:1px dashed #eee;
}
#main form {
width:300px;
margin:20px 0 0 40px;
}
#main form label {
margin:20px 0 0 40px;
display:block;
}
#main form label input.text {
width:200px;
height:25px;
}
#main form label input.submit {
width:200px;
display:block;
height:35px;
cursor:pointer;
margin:20px 0 0 2px;
}
</style>
</head>
<body>
<div id="main">
<div class="title">欢迎使用,请登录</div>
<form action="login.php" method="post" onsubmit="return enter()">
<label><input class="text" type="text" placeholder="用户名" name="username" /></label>
<label><input class="text" type="password" placeholder="密码" name="password" /></label>
<label><input class="submit" type="submit" name="submit" value="登录" /></label>
<a href="register.html" target="_self" style="position: absolute; bottom: 10px; right: 10px;">没有账号,先注册</a>
</form>
</div>
</body>
</html>
主要就是对登录页面的背景,颜色,登录框背景,颜色,字体大小等等的设置,这也没啥技术含量,都是html知识的简单运用,我就不多说了。
登录页面的后台操作
直接上源码:
<?php
error_reporting(0);
//第一次登陆的时候,通过用户输入的信息来确认用户
if ( (($_POST['username']))!=NULL && (($_POST['password'])!=NULL)) {
$userName = $_POST['username'];
$password = $_POST['password'];
//从db获取用户信息
//PS:数据库连接信息改成自己的 分别为主机 数据库用户名 密码
$conn = mysqli_connect('localhost:3306','root','root');
mysqli_select_db($conn,'test');
$sql = "select username,password from user where username = '$userName' and password='$password'";
$res = mysqli_query($conn,$sql);
$row = mysqli_fetch_array($res);
if ($row['username']!=$userName) {
echo '不能登陆!';
header('Location:index.html');
}
else if($row['username']==$userName&&$row['password']!=$password)
{
echo '不能登陆!!';
header('Location:index.html');
}
else if($row['username']!=$userName&&$row['password']!=$password) {
echo '不能登陆!!!';
header('Location:index.html');
}
else if($row['username']==$userName&&$row['password'] ==$password) {
//如果密码验证通过,设置一个cookies,把用户名保存在客户端
setcookie('username',$userName,time()+3600);//设置一个小时
//最后跳转到登录后的欢迎页面
/*echo '登陆成功!';
header('Location:https://y.qq.com/n/yqq/mv/v/o0013f4q6uz.html');//跳转到最后的欢迎页面*/
echo "<script>alert('登陆成功!!');location.href='https://pan.baidu.com/s/1qK_KopZzMZIKfT7jkZ1FVQ';</script>";
}
}
else {
echo '登陆失败';
header('Location:index.html');//跳转到失败页面
}
if ( (($_COOKIE['username']) != null) && (($_COOKIE['password']) != null) ) {
$userName = $_COOKIE['username'];
$password = $_COOKIE['password'];
//从db获取用户信息
//PS:数据库连接信息改成自己的 分别为主机 数据库用户名 密码
$conn = mysqli_connect('localhost','root','password','test');
$res = mysqli_query($conn,"select * from user where username = '$userName' ");
$row = mysqli_fetch_assoc($res);
if ($row['password'] == $password) {
//验证通过后跳转到登录后的欢迎页面
header('Location: https://pan.baidu.com/s/1qK_KopZzMZIKfT7jkZ1FVQ' . "?username=$userName");
}
}
else {
echo "<script>alert('用户名或密码错误');location.href='index.html';</script>";
}
?>
代码开头的error_reporting(0);
是为了关闭错误报告,如果没有error_reporting(0) 那么$userName = $_POST['username'];
会报错。
还有就是sql语句的构造,我构造了n次才正常运行,到这个才能与数据库的账号,密码比对。
然后就是你输入账号,密码与数据库里已有比对,来判断你是否可以登录。
如果比对正确,那么就会先存一个时间为一小时的cookie,然后跳转到登录成功页面,我在这放了一个百度云盘链接,登陆成功可以直接访问。
cookie就是将你的信息存储在本地,下次登录到同样的页面,直接读取cookie里的信息,方便下次访问。
登录成功是一段哲理视频。
注册页面
从登录页面里,选择注册跳转到注册页面。
注册页面太简单了,本来想弄个二次密码验证和验证码注册验证,但因为是本地搭建,也没有人恶意攻击我们,就不需要了。
源码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
body {
min-width: 500px;
background-image:url(https://s1.ax1x.com/2020/07/31/alz3xs.jpg);
font-size:14px;
}
#main {
width:360px;
height:320px;
background:#fff;
border:1px solid #ddd;
position:absolute;
top:50%;
left:50%;
margin-left:-180px;
margin-top:-160px;
background-size: cover;
background-image:url(https://s1.ax1x.com/2020/07/31/alzGMn.jpg);
}
#main .title {
height: 48px;
line-height: 48px;
color:#333;
font-size:16px;
font-weight:bold;
text-indent:30px;
border-bottom:1px dashed #eee;
}
#main form {
width:300px;
margin:20px 0 0 40px;
}
#main form label {
margin:20px 0 0 40px;
display:block;
}
#main form label input.text {
width:200px;
height:25px;
}
#main form label input.submit {
width:200px;
display:block;
height:35px;
cursor:pointer;
margin:20px 0 0 2px;
}
error_reporting(0);
</style>
</head>
<body>
<div id="main">
<div class="title">注册</div>
<form action="register.php" method="post" onsubmit="return enter()">
<label><input class="text" type="text" placeholder="用户名" name="username" /></label>
<label><input class="text" type="password" placeholder="密码" name="password" /></label>
<label><input class="submit" type="submit" name="submit" value="注册" /></label>
</form>
</div>
</body>
</html>
注册页面与登录页面相比,没有做出太大的更改。换了个图片也就没啥了。
注册页面的后台操作
源码:
<?php
error_reporting(0);
$username = ($_POST['username']);
$password = trim($_POST['password']);
$conn = mysqli_connect('localhost', 'root', 'root');
//如果有错误,存在错误号
if (mysqli_errno($conn)) {
echo mysqli_error($conn);
exit;
}
mysqli_select_db($conn, 'test'); //选择数据库
mysqli_set_charset($conn, 'utf8'); //选择字符集
$sql = "insert into user ( username,password) values ('$username','$password' )";
$result = mysqli_query($conn,$sql);//针对user这个数据库进行查询, 查询是否存在有这个用户
$row = mysqli_num_rows($result);//输出查询结果,传给$row
if($_POST['username']==NULL){
echo "<script>alert('用户名不能为空');location.href='register.html';</script>";
}
else if($_POST['password']== NULL){
echo "<script>alert('密码不能为空');location.href='register.html';</script>";
}
else{
if($row){
echo "<script>alert('用户名已存在');location.href='register.html';</script>";
}else{
$sql1 ="insert into user(username,password) values('".$username."','" .$password."')";//PHP MySQL 插入数据
$result = mysqli_query($sql1);//判断插入数据是否成功
if($row){
echo "<script>alert('注册失败!');location.href='register.html';</script>";
}else{
echo "<script>alert('注册成功!');location.href='index.html';</script>";
}
}
}
mysqli_close($conn);
?>
按照流程,先连接数据库,将你的输入的信息传到后台,判断用户名,密码不能为空,再将用户名与数据库对比,若不存在,注册成功,跳转到登陆页面;若已经存在,会报错: 用户名已经存在。
再将你的信息插入到数据库。
最难的也是sql语句的构造,起初是用户名为空,密码却可以正常传入;但是将$usename改为自己的用户名,却可以正常传入。就猜想为用户名传入过程出现了错误,就检查了注册页面的用户名提交方式,发现也没错误。
最终还是回到了register.php页面检查,修修改改才写成现在的语句。
想想太不容易了,心态炸了n次。
与团队内的其他大佬比,我可能写的太简单了,但还是要记录一下!