入门客AI创业平台(我带你入门，你带我飞行)
博文笔记

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

创建时间：2016-04-24 投稿人： 浏览次数：154

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

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>";
}?>


login.html 

<!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>

login.php 

<?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");?>

register.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>

register.php 

<?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");?>



声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。
未上传头像

热门文章
EL表达式常见用法详解
Dubbo实现原理浅析
Java中局部变量必须初始化...
最新文章
Dubbo实现原理浅析
EL表达式常见用法详解
用PHP和HTML写一个简单的网...
copyright © 2008-2019 入门客AI创业平台 版权所有 备案号：湘ICP备2023012770号