用PHP和HTML寫一個簡單的網站登入註冊專案
阿新 • • 發佈:2019-01-24
首先,這是一個很簡單的登陸註冊頁面,請不要在意美觀及設計,重點在於登入註冊這個功能。這個專案由五個分頁組成:
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 :
login.html<?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>
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');?>