昨天晚上看了一葉飄零大佬的直播，大佬說(shuō)：初學(xué)者最好自己先動(dòng)手去做一些項(xiàng)目，這樣能更好的了解原理，恰好學(xué)長(zhǎng)要求做一個(gè)簡(jiǎn)易的登陸注冊(cè)系統(tǒng)，利用這個(gè)機(jī)會(huì)再學(xué)習(xí)一波。
做了兩天，搞懂了很多概念，也遇到了很多問(wèn)題，但是這個(gè)過(guò)程特別有意思，記錄一下，把那些學(xué)到的知識(shí)也總結(jié)一下。
一：準(zhǔn)備工作
開(kāi)始之前把我寫(xiě)的php文件簡(jiǎn)單描述一下：
二：創(chuàng)建登陸頁(yè)面和注冊(cè)頁(yè)面
感悟：
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
來(lái)源：CSDN
原文：https : //blog.csdn.net/Mind_programmonkey/article/details/78522494
這是我的HTML代碼
<?php
?>
<!DOCTYPE html>
< html> < head> < metacharset = " utf-8" > < title> 請(qǐng)登陸
</ 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" > 注冊(cè)
</ button> </ form> </ body> </ html> 做之前沒(méi)有懂其中的一些東西，現(xiàn)在做完了把之前不懂的弄懂。
body { width : 100px
; height : 100px
; background-color : beige
; background-image : url(28.jpg) ; //加一張圖片
}
#login { position : absolute
; //通過(guò)絕對(duì)定位，元素可以放置到頁(yè)面上的任何位置。下面的標(biāo)題距離頁(yè)面左側(cè) 50%，距離頁(yè)面頂部 50%。
top : 50%
; left : 50%
; margin : -150px 0 0 -150px
; //這個(gè)簡(jiǎn)寫(xiě)屬性設(shè)置一個(gè)元素所有外邊距的寬度，或者設(shè)置各邊上外邊距的寬度。該屬性可以有 1 到 4 個(gè)值，上外邊距是 -150px，右外邊距是 0px，下外邊距是 0px，左外邊距是 -150px
width : 300px
; height : 300px
;
} #login h1 { color : #9393FF
; text-shadow : 0 0 10px
; //text-shadow 屬性向文本設(shè)置陰影,其他添加的效果可以在W3school查到。
letter-spacing : 1px
; //letter-spacing 屬性增加或減少字符間的空白（字符間距）
text-align : center
; //text-align 屬性規(guī)定元素中的文本的水平對(duì)齊方式，這里是居中對(duì)齊。
} h1 { font-size : 2em
; margin : 0.67em 0
;
} input { width : 300px
; height : 20px
; margin-bottom : 10px
; //margin-bottom 屬性設(shè)置元素的下外邊距
outline : none
; //outline （輪廓）是繪制于元素周?chē)囊粭l線，位于邊框邊緣的外圍，可起到突出元素的作用
padding : 10px
; //padding 簡(jiǎn)寫(xiě)屬性在一個(gè)聲明中設(shè)置所有內(nèi)邊距屬性,所有 4 個(gè)內(nèi)邊距都是 10px.
font-size : 20px
; color : #fff
; text-shadow : 1px 1px 1px
; //text-shadow屬性向文本設(shè)置陰影
border-top : 1px solid #312E3D
; //border-top 屬性在一行聲明中為上邊框設(shè)置所有的屬性
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 簡(jiǎn)寫(xiě)屬性在一個(gè)聲明設(shè)置所有的邊框?qū)傩?span id="ozvdkddzhkzd" class="token property">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 屬性設(shè)置行間的距離（行高）
border-radius : 5px
; margin : 0px
;
}
了解了這些屬性，但還是不知道為啥大佬這樣設(shè)置其中的一些數(shù)據(jù)，畢竟目前是小白，慢慢來(lái)吧。
我用的是CSS外部樣式表,把CSS存到1.css文件中，在login.php（登陸頁(yè)面）文件中引用。
< 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 屬性設(shè)置行間的距離（行高）
border-radius : 5px
; margin : 0px
;
}
實(shí)現(xiàn)效果：
<?php
?>
< ! DOCTYPE html
>
< html
>
< head
> < meta charset
= "utf-8" > < title
> 請(qǐng)注冊(cè)
< / 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
= "請(qǐng)輸入用戶名" / >
< input type
= "password" name
= "password" placeholder
= "請(qǐng)輸入密碼" / > < br
/ > < button
class = "zc" type
= "submit" > 注冊(cè)
< / button
> < / form
>
< / body
>
< / html
>
實(shí)現(xiàn)效果如下：
三：連接mySQL和設(shè)置COOKIE logincookie.php （連接數(shù)據(jù)庫(kù)+設(shè)置cookie頁(yè)面）
<?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連接數(shù)據(jù)庫(kù)語(yǔ)法，需要學(xué)習(xí)一下才能知道這些語(yǔ)句的意思。
例如：
mysql_connect ( servername
, username
, password
) ;
語(yǔ)法學(xué)習(xí)會(huì)再總結(jié)一個(gè)單獨(dú)的博客來(lái)記錄一下，這里主要介紹一下搭建流程和遇到的問(wèn)題 。
通過(guò)PHP連接mySQL語(yǔ)法 我們就可將用戶輸入的信息用POST方式 傳入到數(shù)據(jù)庫(kù)中，然后利用查詢語(yǔ)句進(jìn)行查詢數(shù)據(jù)庫(kù)數(shù)據(jù)，進(jìn)行比對(duì)，然后判斷用戶名和密碼是否與數(shù)據(jù)庫(kù)所存數(shù)據(jù)相同。
接下來(lái)實(shí)現(xiàn)cookie ，一開(kāi)始真的不知道有什么用處，查了一些博客，看了一些概念，就知道是把用戶的信息存儲(chǔ)到客戶端，方便用戶下次登入。但其實(shí)cookie也可以設(shè)置防繞過(guò)的功能 ，就例如：
cookie的具體介紹可以看一下B站孫勝利老師的講解 的和菜鳥(niǎo)教程官網(wǎng)上的介紹，特別詳細(xì)。
一開(kāi)始模仿大佬做，設(shè)置了兩個(gè)cookie，一個(gè)是用戶名的。另一個(gè)是密碼的，但已經(jīng)寫(xiě)過(guò)注銷(xiāo)cookie了PHP文件卻依舊能在url地址欄里直接進(jìn)入后臺(tái)，一開(kāi)始真的不知道錯(cuò)誤點(diǎn)在那，搞了很長(zhǎng)時(shí)間，但這個(gè)過(guò)程及其有意思，查資料，問(wèn)朋友，自己修改代碼。最后發(fā)現(xiàn)。。。，其實(shí)完全不用設(shè)置密碼的cookie了，我設(shè)置用戶名cookie的前提便是用戶名輸入和數(shù)據(jù)庫(kù)密碼相等了，所以只要設(shè)置一個(gè)用戶名cookie，便能夠識(shí)別和登陸。也可以在注銷(xiāo)cookie時(shí)，把密碼的cookie注銷(xiāo)，之前直接能登入后臺(tái)就是因?yàn)槲以O(shè)置了兩個(gè)cookie，卻只清除了一個(gè)。。。
找到問(wèn)題所在就可以成功設(shè)置好cookie，并且注銷(xiāo)cookie了。
四：實(shí)現(xiàn)登陸功能和注銷(xiāo)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
> 請(qǐng)重新登陸
< / h1
> < / div
> < a href
= "login.php" > 重新登陸
< / a
>
< / body
>
< / html
>
可以看logincookie.php 的代碼中，如果用戶名和密碼有一個(gè)不正確的時(shí)候，都會(huì)跳轉(zhuǎn)到fail.php 頁(yè)面。welcome.php ）
<?php if ( ! isset ( $_COOKIE [ 'username' ] ) ) { echo '不能登陸' ; exit ( ) ; }
?>
< ! DOCTYPE html
>
< html
>
< head
> < meta charset
= "utf-8" > < title
> 請(qǐng)登陸
< / 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
>
實(shí)現(xiàn)效果：
所以再寫(xiě)一個(gè)注銷(xiāo)cookie的頁(yè)面（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 '注銷(xiāo)成功' ;
}
?>
之前這個(gè)頁(yè)面老是報(bào)錯(cuò)，大致便是Notice:Undefined varialbe:變量名稱(chēng)，但注銷(xiāo)功能能正常實(shí)現(xiàn)，加上
ini_set("error_reporting","E_ALL & ~E_NOTICE");
便可以解決報(bào)錯(cuò)問(wèn)題，查資料發(fā)現(xiàn)。
這樣就實(shí)現(xiàn)了cookie注銷(xiāo)的功能了
五：實(shí)現(xiàn)注冊(cè)功能 首先是注冊(cè)頁(yè)面（Register.php）
<?php
?>
< ! DOCTYPE html
>
< html
>
< head
> < meta charset
= "utf-8" > < title
> 請(qǐng)注冊(cè)
< / 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
= "請(qǐng)輸入用戶名" / >
< input type
= "password" name
= "password" placeholder
= "請(qǐng)輸入密碼" / > < br
/ > < button
class = "zc" type
= "submit" > 注冊(cè)
< / button
> < / form
>
< / body
>
< / html
>
接下來(lái)是連接數(shù)據(jù)庫(kù)(linkmysql.php)
<?php header ( "Content-type: text/html; charset=utf-8" ) ; $con = mysql_connect ( "localhost" , "root" , "root" ) or die ( "數(shù)據(jù)庫(kù)連接失敗" ) ; mysql_select_db ( 'login' ) or die ( "指定的數(shù)據(jù)庫(kù)不能打開(kāi)" ) ; mysql_query ( "set names utf8" ) ;
?>
再就是導(dǎo)入信息的頁(yè)面（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 ) ; / / 判斷插入數(shù)據(jù)是否成功
if ( $result ) { echo "<script>alert('注冊(cè)成功')</script>" ; header ( 'Location:login.php' ) ; } else { echo "<script>alert('注冊(cè)失敗')</script>" ; } }
}
?>
這樣就實(shí)現(xiàn)了注冊(cè)功能。
?，到此為止我們就實(shí)現(xiàn)了簡(jiǎn)易的登陸注冊(cè)頁(yè)面。
雖然這個(gè)項(xiàng)目很小，但做出了真的很有成就感，同時(shí)覺(jué)得學(xué)習(xí)的東西真的好有意思，加油，繼續(xù)努力學(xué)習(xí)（開(kāi)心！！！）。
總結(jié)
以上是生活随笔 為你收集整理的HTML+CSS+PHP+COOKIE在本地搭建一个简易的登陆注册网页 的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔 網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔 推薦給好友。
