用PHP和HTML写一个简单的网站登录注册项目

首先，这是一个很简单的登陆注册页面，请不要在意美观及设计，重点在于登录注册这个功能。这个项目由五个分页组成：

1.index.php ：一个简单的首页，有login register，当用户登录之后，在cookie的有效期内，这两个按钮会变成用户名。

2.login.html ：主要包括了一个登录的表单，上面简单的美化是组里的前端用javascript做的，其中很重要的一点是表单中的 method='post' action='login.php' 是这个起到了与服务器端运行的php连接与传输的作用。表单标签中的name属性也很重要，php文件中将通过POST['name']来得到用户输入的数据。

3.login.php ：php文件在得到了html表单传输过来的数据之后，询问数据库，查询是否存在与用户输人信息相同的信息。如果存在，则给用户设置一个COOKIE，使他在一段时间内保持登录状态。

4.register.html：与login.html类似，连接php文件，传送到服务器中。用到了一些javascript的方式来判断用户输入是否合法。

5.register.php：接收来自html中用户输入的数据后，将数据存入数据库。

代码如下：

index.php ：

<?php
$flag=0;
//var_dump($_GET);
if(isset($_GET["out"])){if($_GET["out"]){setcookie('uname','',time()-1);$flag=1;//防止服务器接收到getout操作时已经认为该用户有cookie，然后下面的COOKIE[NAME]已经有了，服务器返回给他的才是空的}
}
if($flag!=1){$link=mysqli_connect('localhost','root','liqiyao123','test');if(isset($_COOKIE['uname'])){$name=$_COOKIE['uname'];$query=mysqli_query($link,"SELECT username FROM info WHERE username = '$name'");$row=mysqli_num_rows($query);if($row==1){echo "Welcome ".$_COOKIE['uname']."";echo '    ';echo '<a href="index.php?out=1">logout</a>';//用户logout}}else{echo  '<a href="login.html">login</a>';echo  '    ';echo  '<a href="register.html">register</a>';}
}
else{echo  '<a href="login.html">login</a>';echo  '    ';echo  '<a href="register.html">register</a>';
}?>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>login</title><style type="text/css">@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);* {box-sizing: border-box;margin: 0;padding: 0;font-weight: 300;}body {font-family: 'Source Sans Pro', sans-serif;color: white;font-weight: 300;}body ::-webkit-input-placeholder {/* WebKit browsers */font-family: 'Source Sans Pro', sans-serif;color: white;font-weight: 300;}body :-moz-placeholder {/* Mozilla Firefox 4 to 18 */font-family: 'Source Sans Pro', sans-serif;color: white;opacity: 1;font-weight: 300;}body ::-moz-placeholder {/* Mozilla Firefox 19+ */font-family: 'Source Sans Pro', sans-serif;color: white;opacity: 1;font-weight: 300;}body :-ms-input-placeholder {/* Internet Explorer 10+ */font-family: 'Source Sans Pro', sans-serif;color: white;font-weight: 300;}.wrapper {background: #50a3a2;background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);position: absolute;left: 0;width: 100%;height: 100%;/*  margin-top: -200px;*/overflow: hidden;}.wrapper.form-success .container h1 {-webkit-transform: translateY(85px);transform: translateY(85px);}.container {max-width: 600px;margin: 0 auto;padding: 80px 0;padding-top:200px; height: 400px;text-align: center;}.container h1 {font-size: 40px;-webkit-transition-duration: 1s;transition-duration: 1s;-webkit-transition-timing-function: ease-in-put;transition-timing-function: ease-in-put;font-weight: 200;}form {padding: 20px 0;position: relative;z-index: 2;}form input {-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: 0;border: 1px solid rgba(255, 255, 255, 0.4);background-color: rgba(255, 255, 255, 0.2);width: 250px;border-radius: 3px;padding: 10px 15px;margin: 0 auto 10px auto;display: block;text-align: center;font-size: 18px;color: white;-webkit-transition-duration: 0.25s;transition-duration: 0.25s;font-weight: 300;}form input:hover {background-color: rgba(255, 255, 255, 0.4);}form input:focus {background-color: white;width: 300px;color: #53e3a6;}form button {-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: 0;background-color: white;border: 0;padding: 10px 15px;color: #53e3a6;border-radius: 3px;width: 125px;cursor: pointer;font-size: 18px;-webkit-transition-duration: 0.25s;transition-duration: 0.25s;}form button:hover {background-color: #f5f7f9;}.bg-bubbles {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;}.bg-bubbles li {position: absolute;list-style: none;display: block;width: 40px;height: 40px;background-color: rgba(255, 255, 255, 0.15);bottom: -160px;-webkit-animation: square 25s infinite;animation: square 25s infinite;-webkit-transition-timing-function: linear;transition-timing-function: linear;}.bg-bubbles li:nth-child(1) {left: 10%;}.bg-bubbles li:nth-child(2) {left: 20%;width: 80px;height: 80px;-webkit-animation-delay: 2s;animation-delay: 2s;-webkit-animation-duration: 17s;animation-duration: 17s;}.bg-bubbles li:nth-child(3) {left: 25%;-webkit-animation-delay: 4s;animation-delay: 4s;}.bg-bubbles li:nth-child(4) {left: 40%;width: 60px;height: 60px;-webkit-animation-duration: 22s;animation-duration: 22s;background-color: rgba(255, 255, 255, 0.25);}.bg-bubbles li:nth-child(5) {left: 70%;}.bg-bubbles li:nth-child(6) {left: 80%;width: 120px;height: 120px;-webkit-animation-delay: 3s;animation-delay: 3s;background-color: rgba(255, 255, 255, 0.2);}.bg-bubbles li:nth-child(7) {left: 32%;width: 160px;height: 160px;-webkit-animation-delay: 7s;animation-delay: 7s;}.bg-bubbles li:nth-child(8) {left: 55%;width: 20px;height: 20px;-webkit-animation-delay: 15s;animation-delay: 15s;-webkit-animation-duration: 40s;animation-duration: 40s;}.bg-bubbles li:nth-child(9) {left: 25%;width: 10px;height: 10px;-webkit-animation-delay: 2s;animation-delay: 2s;-webkit-animation-duration: 40s;animation-duration: 40s;background-color: rgba(255, 255, 255, 0.3);}.bg-bubbles li:nth-child(10) {left: 90%;width: 160px;height: 160px;-webkit-animation-delay: 11s;animation-delay: 11s;}@-webkit-keyframes square {0% {-webkit-transform: translateY(0);transform: translateY(0);}100% {-webkit-transform: translateY(-700px) rotate(600deg);transform: translateY(-700px) rotate(600deg);}}@keyframes square {0% {-webkit-transform: translateY(0);transform: translateY(0);}100% {-webkit-transform: translateY(-700px) rotate(600deg);transform: translateY(-700px) rotate(600deg);}}.cc{text-decoration: none;color: #53e3a6; }</style><script type="text/javascript">$("#login-button").click(function(event){event.preventDefault();$('form').fadeOut(500);$('.wrapper').addClass('form-success');});function check(){{if(form.username.value == "")//如果用户名为空{alert("您还没有填写用户名！");form.username.focus();return false;}if(form.pass.value == "")//如果密码为空{alert("您还没有填写密码！");myform.pass.focus();return false;}}</script>
</head>
<body><div class="wrapper"><div class="container"><h1>Welcome</h1><form name='form' class="form" method='post' action='login.php' onSubmit="return check()"><input type="text" placeholder="Username" name='username'><input type="password" placeholder="Password" name='pass'><button type="submit" id="login-button" name='submit' value='submit'>Login</button><button type="submit" id="register-button"><a href="register.html" class="cc">register</a></button></form></div><ul class="bg-bubbles"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>
</body>
</html>

<?php
$username=$_POST['username'];
$password=$_POST['pass'];
$link = mysqli_connect('localhost','root','liqiyao123','test');
$query=mysqli_query($link,"SELECT username,password FROM info WHERE username = '$username'");//找到与输入用户名相同的信息，注意要取出的信息有两项
$row = mysqli_fetch_array($query);
if($_POST['submit']){    if($row['username']==$username &&$row['password']==$password){setcookie('uname',$username,time()+7200);echo "<script>alert('successfully');window.location= 'index.php';</script>";}else echo "<script>alert('failed');history.go(-1)</script>";//返回之前的页面
}
include('login.html');?>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>register</title><style type="text/css">@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);* {box-sizing: border-box;margin: 0;padding: 0;font-weight: 300;}body {font-family: 'Source Sans Pro', sans-serif;color: white;font-weight: 300;}body ::-webkit-input-placeholder {/* WebKit browsers */font-family: 'Source Sans Pro', sans-serif;color: white;font-weight: 300;}body :-moz-placeholder {/* Mozilla Firefox 4 to 18 */font-family: 'Source Sans Pro', sans-serif;color: white;opacity: 1;font-weight: 300;}body ::-moz-placeholder {/* Mozilla Firefox 19+ */font-family: 'Source Sans Pro', sans-serif;color: white;opacity: 1;font-weight: 300;}body :-ms-input-placeholder {/* Internet Explorer 10+ */font-family: 'Source Sans Pro', sans-serif;color: white;font-weight: 300;}.wrapper {background: #50a3a2;background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);position: absolute;left: 0;width: 100%;height: 100%;/*  margin-top: -200px;*/overflow: hidden;}.wrapper.form-success .container h1 {-webkit-transform: translateY(85px);transform: translateY(85px);}.container {max-width: 600px;margin: 0 auto;padding: 80px 0;padding-top:100px;height: 400px;text-align: center;}.container h1 {font-size: 40px;-webkit-transition-duration: 1s;transition-duration: 1s;-webkit-transition-timing-function: ease-in-put;transition-timing-function: ease-in-put;font-weight: 200;}form {padding: 20px 0;position: relative;z-index: 2;}form input {-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: 0;border: 1px solid rgba(255, 255, 255, 0.4);background-color: rgba(255, 255, 255, 0.2);width: 250px;border-radius: 3px;padding: 10px 15px;margin: 0 auto 10px auto;display: block;text-align: center;font-size: 18px;color: white;-webkit-transition-duration: 0.25s;transition-duration: 0.25s;font-weight: 300;}form input:hover {background-color: rgba(255, 255, 255, 0.4);}form input:focus {background-color: white;width: 300px;color: #53e3a6;}form button {-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: 0;background-color: white;border: 0;padding: 10px 15px;color: #53e3a6;border-radius: 3px;width: 125px;cursor: pointer;font-size: 18px;-webkit-transition-duration: 0.25s;transition-duration: 0.25s;}form button:hover {background-color: #f5f7f9;}.bg-bubbles {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;}.bg-bubbles li {position: absolute;list-style: none;display: block;width: 40px;height: 40px;background-color: rgba(255, 255, 255, 0.15);bottom: -160px;-webkit-animation: square 25s infinite;animation: square 25s infinite;-webkit-transition-timing-function: linear;transition-timing-function: linear;}.bg-bubbles li:nth-child(1) {left: 10%;}.bg-bubbles li:nth-child(2) {left: 20%;width: 80px;height: 80px;-webkit-animation-delay: 2s;animation-delay: 2s;-webkit-animation-duration: 17s;animation-duration: 17s;}.bg-bubbles li:nth-child(3) {left: 25%;-webkit-animation-delay: 4s;animation-delay: 4s;}.bg-bubbles li:nth-child(4) {left: 40%;width: 60px;height: 60px;-webkit-animation-duration: 22s;animation-duration: 22s;background-color: rgba(255, 255, 255, 0.25);}.bg-bubbles li:nth-child(5) {left: 70%;}.bg-bubbles li:nth-child(6) {left: 80%;width: 120px;height: 120px;-webkit-animation-delay: 3s;animation-delay: 3s;background-color: rgba(255, 255, 255, 0.2);}.bg-bubbles li:nth-child(7) {left: 32%;width: 160px;height: 160px;-webkit-animation-delay: 7s;animation-delay: 7s;}.bg-bubbles li:nth-child(8) {left: 55%;width: 20px;height: 20px;-webkit-animation-delay: 15s;animation-delay: 15s;-webkit-animation-duration: 40s;animation-duration: 40s;}.bg-bubbles li:nth-child(9) {left: 25%;width: 10px;height: 10px;-webkit-animation-delay: 2s;animation-delay: 2s;-webkit-animation-duration: 40s;animation-duration: 40s;background-color: rgba(255, 255, 255, 0.3);}.bg-bubbles li:nth-child(10) {left: 90%;width: 160px;height: 160px;-webkit-animation-delay: 11s;animation-delay: 11s;}@-webkit-keyframes square {0% {-webkit-transform: translateY(0);transform: translateY(0);}100% {-webkit-transform: translateY(-700px) rotate(600deg);transform: translateY(-700px) rotate(600deg);}}@keyframes square {0% {-webkit-transform: translateY(0);transform: translateY(0);}100% {-webkit-transform: translateY(-700px) rotate(600deg);transform: translateY(-700px) rotate(600deg);}}.cc{text-decoration: none;color: #53e3a6;}</style><script type="text/javascript">$("#login-button").click(function(event){event.preventDefault();$('form').fadeOut(500);$('.wrapper').addClass('form-success');});//验证信息填写是否有误function check(){if(form.username.value.length<6 || form.username.value.length>16){alert('用户名不合法！请输入6-16位用户名');form.username.focus();return false;}if(form.pass.value.length<6 ||form.pass.value.length>16){alert('密码不合法！请输入6-16位密码');form.username.focus();return false;}if(form.pass.value != form.pass2.value)//判断两次输入的密码是否一致{alert("两次输入的密码不一致！");form.pass.focus();return false;}}</script>
</head>
<body><div class="wrapper"><div class="container"><h1>Welcome</h1><form name='form' class="form" action='register.php' method='post' onSubmit="return check();"><input type="text" placeholder="Username" name='username'><input type="password" placeholder="Password" name='pass'><input type="password" placeholder="Reconfirm Your Password" name='pass2'><input type="text" placeholder="Your Name" name='realname'><input type="Password" placeholder="Your Phonenumber" name='phonenumber'><button type="submit" id="login-button" ><a href="login.html" class="cc">Login</a></button><button type="submit" id="register-button" value='submit' name='submit' >Register</button></form></div><ul class="bg-bubbles"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>
</body>
</html>

<?php
$username=$_POST['username'];
$password=$_POST['pass'];
$realname=$_POST['realname'];
$phonenumber=$_POST['phonenumber'];
$link = mysqli_connect('localhost','root','liqiyao123','test');
if($_POST['submit']){if(mysqli_query($link,"insert into info (username,password,realname,phonenumber) values('$username','$password','$realname','$phonenumber')")){setcookie("uname",$username,time()+7200);echo "<script>alert('successfully');window.location= 'index.php';</script>";}else {echo "<script>alert('failed');history.go(-1)</script>";}
}
include('register.html');?>

用PHP和HTML写一个简单的网站登录注册项目相关推荐

python 搭建登陆系统,用Python连接操作MySQL数据库，做一个简单的用户登录注册系统...
我们可以很容易地用Python实现一个用户登录系统,相信这即使是对编程新手来说也是小菜一碟. 作为Python的小萌新,今天我想记录下来的是如何实现一个连接了MySQL数据库的用户登录注册系统,它的效 ...
手把手搭建一个完整的ssm登录注册项目(适合新手)
数据库设计实体层,使用lombook更方便哦 mapper dao层 dao层的基类,因为没有使用springboot,我们得自己管理起来 dao层实现层 service层则重写一遍dao层代码就不 ...
使用selenium写一个简单的爬虫登录邮箱
零.前言 selenium使用过程比较简单,完整代码在最后一.安装selenium 参考:http://www.testclass.net/selenium_python/install-selen ...
用java做一个简单记事本_用记事本写一个简单的java程序
用记事本写一个简单的java程序第一步: 安装好jdk,并设置好环境变量. 桌面-计算机(右键)-属性-高级系统设置-环境变量-path-在变量值后加上:和jdk安装路径加上(路径即为C:\Prog ...
如何搭建python框架_从零开始:写一个简单的Python框架
原标题:从零开始:写一个简单的Python框架 Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发. 你为什么想搭建一个Web框架?我想有下面几个原因: 有一个 ...
ipad php mysql_如何用PHP/MySQL为 iOS App 写一个简单的web服务器（译） PART1
原文:http://www.raywenderlich.com/2941/how-to-write-a-simple-phpmysql-web-service-for-an-ios-app 作为一个i ...
python123程序设计题说句心里话_用c++写一个简单的计算器程序
// 050305.cpp : 定义控制台应用程序的入口点. // // 050304.cpp : 定义控制台应用程序的入口点. // //四则运算 #include "stdafx.h&q ...
用java写一个简单的区块链（下）
用java写一个简单的区块链(下) 2018年03月29日 21:44:35 java派大星阅读数:725 标签: 区块链java 更多个人分类: 区块链版权声明:本文为博主原创文章,转载请标明 ...
怎样用java写一个简单的文件复制程序
怎样用java写一个简单的文件复制程序代码来源:https://jingyan.baidu.com/article/c35dbcb0d6f1398916fcbc07.html package Num ...

用PHP和HTML写一个简单的网站登录注册项目

用PHP和HTML写一个简单的网站登录注册项目相关推荐

最新文章

热门文章