昨天晚上看了一葉飄零大佬的直播，大佬說：初學者最好自己先動手去做一些項目，這樣能更好的了解原理，恰好學長要求做一個簡易的登陸注冊系統，利用這個機會再學習一波。
做了兩天，搞懂了很多概念，也遇到了很多問題，但是這個過程特別有意思，記錄一下，把那些學到的知識也總結一下。
一：準備工作
開始之前把我寫的php文件簡單描述一下：
二：創建登陸頁面和注冊頁面
感悟：
html { width : 100%
; height : 100%
; overflow : hidden
; font-style : sans-serif
;
}
body { width : 100%
; height : 100%
; font-family : 'Open Sans' ,sans-serif
; margin : 0
; background-color : #4A374A
;
}
#login { position : absolute
; top : 50%
; left : 50%
; margin : -150px 0 0 -150px
; width : 300px
; height : 300px
;
}
#login h1 { color : #fff
; text-shadow : 0 0 10px
; letter-spacing : 1px
; text-align : center
;
}
h1 { font-size : 2em
; margin : 0.67em 0
;
}
input { width : 278px
; height : 18px
; margin-bottom : 10px
; outline : none
; padding : 10px
; font-size : 13px
; color : #fff
; text-shadow : 1px 1px 1px
; border-top : 1px solid #312E3D
; border-left : 1px solid #312E3D
; border-right : 1px solid #312E3D
; border-bottom : 1px solid #56536A
; border-radius : 4px
; background-color : #2D2D3F
;
}
.but { width : 300px
; min-height : 20px
; display : block
; background-color : #4a77d4
; border : 1px solid #3762bc
; color : #fff
; padding : 9px 14px
; font-size : 15px
; line-height : normal
; border-radius : 5px
; margin : 0
;
}
---------------------
作者：mind_programmonkey
來源：CSDN
原文：https : //blog.csdn.net/Mind_programmonkey/article/details/78522494
這是我的HTML代碼
<?php
?>
<!DOCTYPE html>
< html> < head> < metacharset = " utf-8" > < title> 請登陸
</ title> < linkrel = " stylesheet" type = " text/css" media = " screen" href = " 1.css" > < scriptsrc = " main.js" > </ script> </ head> < body> < divid = " login" > < h1> login
</ h1> < formaction = " logincookie.php" method = " post" > < inputtype = " text" name = " username" placeholder = " 用戶名" /> < inputtype = " password" name = " password" placeholder = " 密碼" /> < br/> < buttonclass = " tj" type = " submit" > 登陸
</ button> </ form> < formaction = " Register.php" method = " post" > < buttonclass = " zc" type = " submit" > 注冊
</ button> </ form> </ body> </ html> 做之前沒有懂其中的一些東西，現在做完了把之前不懂的弄懂。
body { width : 100px
; height : 100px
; background-color : beige
; background-image : url(28.jpg) ; //加一張圖片
}
#login { position : absolute
; //通過絕對定位，元素可以放置到頁面上的任何位置。下面的標題距離頁面左側 50%，距離頁面頂部 50%。
top : 50%
; left : 50%
; margin : -150px 0 0 -150px
; //這個簡寫屬性設置一個元素所有外邊距的寬度，或者設置各邊上外邊距的寬度。該屬性可以有 1 到 4 個值，上外邊距是 -150px，右外邊距是 0px，下外邊距是 0px，左外邊距是 -150px
width : 300px
; height : 300px
;
} #login h1 { color : #9393FF
; text-shadow : 0 0 10px
; //text-shadow 屬性向文本設置陰影,其他添加的效果可以在W3school查到。
letter-spacing : 1px
; //letter-spacing 屬性增加或減少字符間的空白（字符間距）
text-align : center
; //text-align 屬性規定元素中的文本的水平對齊方式，這里是居中對齊。
} h1 { font-size : 2em
; margin : 0.67em 0
;
} input { width : 300px
; height : 20px
; margin-bottom : 10px
; //margin-bottom 屬性設置元素的下外邊距
outline : none
; //outline （輪廓）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用
padding : 10px
; //padding 簡寫屬性在一個聲明中設置所有內邊距屬性,所有 4 個內邊距都是 10px.
font-size : 20px
; color : #fff
; text-shadow : 1px 1px 1px
; //text-shadow屬性向文本設置陰影
border-top : 1px solid #312E3D
; //border-top 屬性在一行聲明中為上邊框設置所有的屬性
border-left : 1px solid #312E3D
; border-right : 1px solid #312E3D
; border-bottom : 1px solid #56536A
; border-radius : 4px
; background-color : #2D2D3F
; } .tj { width : 300px
; min-height : 20px
; display : block
; background-color : #4a77d4
; border : 1px solid #3762bc
; //border 簡寫屬性在一個聲明設置所有的邊框屬性
color : #fff
; padding : 9px 14px
; font-size : 15px
; line-height : normal
; //
border-radius : 5px
; margin : 0px
;
} .zc { width : 300px
; min-height : 20px
; display : block
; background-color : #33CC33
; border : 1px solid #3762bc
; color : #fff
; padding : 9px 14px
; font-size : 15px
; line-height : normal
; //line-height 屬性設置行間的距離（行高）
border-radius : 5px
; margin : 0px
;
}
了解了這些屬性，但還是不知道為啥大佬這樣設置其中的一些數據，畢竟目前是小白，慢慢來吧。
我用的是CSS外部樣式表,把CSS存到1.css文件中，在login.php（登陸頁面）文件中引用。
< link rel
= "stylesheet" type
= "text/css" media
= "screen" href
= "1.css" >
這樣，就完成了第一步！
在1.css里面添加一段
.zc { width : 300px
; min-height : 20px
; display : block
; background-color : #33CC33
; border : 1px solid #3762bc
; color : #fff
; padding : 9px 14px
; font-size : 15px
; line-height : normal
; //line-height 屬性設置行間的距離（行高）
border-radius : 5px
; margin : 0px
;
}
實現效果：
<?php
?>
< ! DOCTYPE html
>
< html
>
< head
> < meta charset
= "utf-8" > < title
> 請注冊
< / title
> < link rel
= "stylesheet" type
= "text/css" media
= "screen" href
= "3.css" >
< / head
>
< body
> < div id
= "Register" > < h1
> Register
< / h1
> < form action
= "Register link.php" method
= "POST" > < input type
= "text" name
= "username" placeholder
= "請輸入用戶名" / >
< input type
= "password" name
= "password" placeholder
= "請輸入密碼" / > < br
/ > < button
class = "zc" type
= "submit" > 注冊
< / button
> < / form
>
< / body
>
< / html
>
實現效果如下：
三：連接mySQL和設置COOKIE logincookie.php （連接數據庫+設置cookie頁面）
<?php
header ( 'Content-type: texy/html;charset=utf-8' ) ;
if ( ( $_POST [ 'username' ] != null ) && ( $_POST [ 'password' ] != null ) ) { $userName = $_POST [ 'username' ] ; $password = $_POST [ 'password' ] ; $conn = mysqli_connect ( 'localhost' , 'root' , 'root' ) ; mysqli_select_db ( $conn , 'login' ) ; $sql = "select * from user where username = '$userName ; $res = mysqli_query ( $conn , $sql ) ; $row = mysqli_fetch_array ( $res ) ; if ( $row [ 'username' ] != $userName ) { echo '不能登陸' ; header ( 'Location:fail.php' ) ; } else if ( $row [ 'username' ] == $userName && $row [ 'password' ] != $password ) { echo '不能登陸' ; header ( 'Location:fail.php' ) ; } else if ( $row [ 'username' ] != $userName && $row [ 'password' ] != $password ) { echo '不能登陸' ; header ( 'Location:fail.php' ) ; } else if ( $row [ 'username' ] == $userName && $row [ 'password' ] == $password ) { setcookie ( 'username' , $userName , time ( ) + 3600 ) ; echo '登陸成功' ; header ( 'Location:welcome.php' ) ; }
}
else { echo '登陸失敗' ; header ( 'Location:fail.php' ) ;
}
這里面的PHP連接數據庫語法，需要學習一下才能知道這些語句的意思。
例如：
mysql_connect ( servername
, username
, password
) ;
語法學習會再總結一個單獨的博客來記錄一下，這里主要介紹一下搭建流程和遇到的問題 。
通過PHP連接mySQL語法 我們就可將用戶輸入的信息用POST方式 傳入到數據庫中，然后利用查詢語句進行查詢數據庫數據，進行比對，然后判斷用戶名和密碼是否與數據庫所存數據相同。
接下來實現cookie ，一開始真的不知道有什么用處，查了一些博客，看了一些概念，就知道是把用戶的信息存儲到客戶端，方便用戶下次登入。但其實cookie也可以設置防繞過的功能 ，就例如：
cookie的具體介紹可以看一下B站孫勝利老師的講解 的和菜鳥教程官網上的介紹，特別詳細。
一開始模仿大佬做，設置了兩個cookie，一個是用戶名的。另一個是密碼的，但已經寫過注銷cookie了PHP文件卻依舊能在url地址欄里直接進入后臺，一開始真的不知道錯誤點在那，搞了很長時間，但這個過程及其有意思，查資料，問朋友，自己修改代碼。最后發現。。。，其實完全不用設置密碼的cookie了，我設置用戶名cookie的前提便是用戶名輸入和數據庫密碼相等了，所以只要設置一個用戶名cookie，便能夠識別和登陸。也可以在注銷cookie時，把密碼的cookie注銷，之前直接能登入后臺就是因為我設置了兩個cookie，卻只清除了一個。。。
找到問題所在就可以成功設置好cookie，并且注銷cookie了。
四：實現登陸功能和注銷cookie
<?php
?> < ! DOCTYPE html
>
< html
>
< head
> < meta charset
= "utf-8" > < meta http
- equiv
= "X-UA-Compatible" content
= "IE=edge" > < title
> 登陸失敗
< / title
> < link rel
= "stylesheet" type
= "text/css" media
= "screen" href
= "2.css" >
< / head
>
< body
> < div id
= "login" > < h1
> 請重新登陸
< / h1
> < / div
> < a href
= "login.php" > 重新登陸
< / a
>
< / body
>
< / html
>
可以看logincookie.php 的代碼中，如果用戶名和密碼有一個不正確的時候，都會跳轉到fail.php 頁面。welcome.php ）
<?php if ( ! isset ( $_COOKIE [ 'username' ] ) ) { echo '不能登陸' ; exit ( ) ; }
?>
< ! DOCTYPE html
>
< html
>
< head
> < meta charset
= "utf-8" > < title
> 請登陸
< / title
> < link rel
= "stylesheet" type
= "text/css" media
= "screen" href
= "4.css" >
< / head
>
< body
> < div id
= "Landingsuccessfully" > < h1
> Landingsuccessfully
< / h1
> < a href
= "end.php" > Please cancel
< / a
>
< / body
>
< / html
>
實現效果：
所以再寫一個注銷cookie的頁面（end.php）
<?php
ini_set ( "error_reporting" , "E_ALL & ~E_NOTICE" ) ;
header ( 'Content-type:text/html;charset=utf-8' ) ;
if ( isset ( $_COOKIE [ 'username' ] ) ) { setcookie ( 'username' , $userName , time ( ) - 3600 ) ; echo '注銷成功' ;
}
?>
之前這個頁面老是報錯，大致便是Notice:Undefined varialbe:變量名稱，但注銷功能能正常實現，加上
ini_set("error_reporting","E_ALL & ~E_NOTICE");
便可以解決報錯問題，查資料發現。
這樣就實現了cookie注銷的功能了
五：實現注冊功能 首先是注冊頁面（Register.php）
<?php
?>
< ! DOCTYPE html
>
< html
>
< head
> < meta charset
= "utf-8" > < title
> 請注冊
< / title
> < link rel
= "stylesheet" type
= "text/css" media
= "screen" href
= "3.css" >
< / head
>
< body
> < div id
= "Register" > < h1
> Register
< / h1
> < form action
= "Register link.php" method
= "POST" > < input type
= "text" name
= "username" placeholder
= "請輸入用戶名" / >
< input type
= "password" name
= "password" placeholder
= "請輸入密碼" / > < br
/ > < button
class = "zc" type
= "submit" > 注冊
< / button
> < / form
>
< / body
>
< / html
>
接下來是連接數據庫(linkmysql.php)
<?php header ( "Content-type: text/html; charset=utf-8" ) ; $con = mysql_connect ( "localhost" , "root" , "root" ) or die ( "數據庫連接失敗" ) ; mysql_select_db ( 'login' ) or die ( "指定的數據庫不能打開" ) ; mysql_query ( "set names utf8" ) ;
?>
再就是導入信息的頁面（Register link.php）
<?php require_once ( "linkmysql.php" ) ; $name = trim ( $_POST [ 'username' ] ) ; $password = $_POST [ 'password' ] ; $sql = "select * from user where username='$name ; $info = mysql_query ( $sql ) ; $res = mysql_num_rows ( $info ) ; if ( empty ( $name ) ) { echo "<script>alert('用戶名不能為空');location.href='login.php';</script>" ; } else if ( empty ( $password ) ) { echo "<script>alert('密碼不能為空');location.href='login.php';</script>" ; } else { if ( $res ) { echo "<script>alert('用戶名已存在');location.href='login.php';</script>" ; } else { $sql1 = "insert into user(username,password) values('" . $name . "','" . $password . "')" ; $result = mysql_query ( $sql1 ) ; / / 判斷插入數據是否成功
if ( $result ) { echo "<script>alert('注冊成功')</script>" ; header ( 'Location:login.php' ) ; } else { echo "<script>alert('注冊失敗')</script>" ; } }
}
?>
這樣就實現了注冊功能。
?，到此為止我們就實現了簡易的登陸注冊頁面。
雖然這個項目很小，但做出了真的很有成就感，同時覺得學習的東西真的好有意思，加油，繼續努力學習（開心！！！）。
總結
以上是生活随笔 為你收集整理的HTML+CSS+PHP+COOKIE在本地搭建一个简易的登陆注册网页 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
