PHP+MySQL實現留言板功能（一）
阿新 • • 發佈：2018-11-25
1.登陸註冊頁面前端設計
由於小編第一次寫部落格，加上前端知識還不夠紮實，本文小編著重處理後端，及PHP連線資料庫，實現新增留言，刪除留言功能。話不多說，我們直接上程式碼。
登陸頁面設計：我們將其命名為：index.php
由於小編在設計的時候把所有的css全部寫在了一個檔案中，所以css檔案我會最後發出來。
<html> <head> <title>登陸</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="./css/index1.css"> <style> body{height:100%;} </style> </head> <body style="background: url(./images/timg7.jpg);"> <div class="index_01"> <table style="width: 100%;height:100%;" > <tr> <td align="center" > <table align="center" width=350 height=230; class="index_table" > <form method ="POST" action = "doloadling.php" name="frmLogin"> <tr align="center" style="font-size:25px;"> <td colspan="2" style="font-size:35px;">使用者登陸</td> </tr> <tr> <td align="center" style="font-size:25px;">使用者名稱</td> <td><input type="name" maxlength="16" name="uid" placeholder="請輸入賬號" style="width:180px;font-size:20px;border-radius: 8px; "></td> </tr> <tr> <td align="center" style="font-size:25px;">密 碼</td> <td><input name="password" type="password" maxlength="16" placeholder="請輸入密碼" style="width:180px;font-size:20px;border-radius: 8px; "></td> </tr> <tr align="center"> <td colspan="2"> <input type="submit" name="denglu" value="登陸" class="btn"> <input type="reset" name="rs" value="重置" class="btn"> <input type="button" name="zu" value="註冊" onclick="window.location.href='register.php'" class="btn"/> </td> </tr> </form> </table> </td> </tr> </table> </div> </body> </html>
註冊頁面設計：我們將其命名為：register.php
<html> <head> <title>註冊</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="./css/index1.css"> <style> body{height:100%;} </style> </head> <body style="background: url(./images/timg7.jpg)"> <div class="index_01" > <table style="width: 100%;height:100%;" > <tr> <td align="center" > <form action="doregister.php " name="dl" method="post"> <table align="center" width=350 height=230; style="font-family:宋體;font-size:25px;"> <tr align="center"> <td colspan="2" style="font-size:35px;">註冊使用者</td> </tr> <tr> <td align="center">使用者名稱</td> <td> <input type="name" maxlength="20" name="id" placeholder="手機號/郵箱" style="width:180px;font-size:20px;border-radius: 8px; "> </td> </tr> <tr> <td align="center">密 碼</td> <td > <input name="password" type="password" maxlength="16" placeholder="請輸入密碼" style="width:180px;font-size:20px;border-radius: 8px; "> </td> </tr> <tr> <td align="center">Again</td> <td> <input name="confirmPassword" type="password" maxlength="16" placeholder="請再次輸入密碼" style="width:180px;font-size:20px;border-radius: 8px; "> </td> </tr> <tr> <td colspan="2" align="center"> <input type="button" name='zu' value='登陸' onclick="location.href='index.php'" style="font-size:17px;border-radius: 12px;" class="btn"/> <input type="reset" name="zu" value="重置" style="font-size:17px;border-radius: 12px;" class="btn"> <input type="submit" name="zu" value="註冊" style="font-size:17px;border-radius:12px;" class="btn"/> </td> </tr> </table> </form> </td> </tr> </table> </div> </body> <html>
這樣在加上我最後發出來的css檔案，就實現了一個簡單的登陸註冊的前端頁面的設計了。前端效如下：
接下來我們先實現登陸和註冊功能，在註冊頁面通過post傳輸方法得到的
首先建立資料表儲存賬號和對應密碼：
程式碼如下：
DROP TABLE IF EXISTS `tbl_ms`; CREATE TABLE `tbl_ms` ( `username` varchar(25) NOT NULL, `password` varchar(255) NOT NULL, PRIMARY KEY (`username`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
這樣，簡單的註冊功能加上後臺處理頁面就實現了，後面我也會把登陸註冊後臺處理頁面發出來的。要實現登陸功能，就要先寫出新增留言的前端網頁，否則就會出現這樣的介面：
小編就不解釋為什麼會出現這樣的情況了 ，相信大家都懂。
為了方便大家後面的頁面設計，我在這一節就先把css檔案類容先發出來，將其命名為index1.css
.btn {
color: white;
background-color: #2579d1;
padding: 0px 1em;
height: 35px;
font-size:17px;
border-radius: 12px;
/* border: 0px solid black;*/
}
.btn:hover {
background-color: #00ff00;
}
.index_01{
height: 400px;width: 400px;
margin:auto;
position: absolute;top: 0;
left: 0;right: 0;bottom: 0;
border-radius: 50%;
background-color: rgba(50,150,550,0.5);
font-family:宋體;
}
div.k1 {
margin-top:55px;
margin-left:auto;
margin-right:auto;
max-width: 500px;
background: #D2E9FF;
padding: 20px 20px 20px 20px;
color: #666;
}
h1 {
font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 10px 10px 10px 20px;
display: block;
background: #C0E1FF;
border-bottom: 1px solid #B8DDFF;
margin: -20px -20px 15px;
}
h1>span {
display: block;
font-size: 14px;
}
label {
display: block;
margin: 0px 0px 5px;
}
label>span {
float: left;
width: 22%;
text-align: right;
padding-right: 15px;
margin-top: 10px;
font-weight: bold;
}
input[type="text"],textarea,select {
color: #888;
width: 70%;
padding: 0px 0px 0px 5px;
border: 1px solid #C5E2FF;
background: #FBFBFB;
outline: 0;
-webkit-box-shadow:inset 0px 1px 6px #ECF3F5;
box-shadow: inset 0px 1px 6px #ECF3F5;
font: 200 12px/25px "Trebuchet MS", Arial, Helvetica, sans-serif;
height: 30px;
line-height:15px;
margin: 2px 6px 16px 0px;
}
textarea{
height:100px;
padding: 5px 0px 0px 5px;
width: 70%;
}
.button,.reset,.submit,.button1{
padding: 10px 30px 10px 30px;
background: #66C1E4;
border: none;
color: #FFF;
box-shadow: 1px 1px 1px #4C6E91;
-webkit-box-shadow: 1px 1px 1px #4C6E91;
-moz-box-shadow: 1px 1px 1px #4C6E91;
text-shadow: 1px 1px 1px #5079A3;
}
.button:hover,.reset:hover,.submit:hover,.button1:hover{
background: #9AFF02;
}
.wrapper {
width: 600px;
margin: 0 auto;
}
.ds-post-main {
position: relative;
width: 500px;
margin-left: auto;
margin-right: auto;
}
.ds-comment-body {
z-index: 1;
position: relative;
left: 0;
background: #F0F0E3;
padding: 15px 15px 15px 30px;
color: #696A52;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.75) inset;
}
.ds-comment-body {
color: #696A52;
}
.ds-avatar {
z-index: 2;
position: absolute;
top: 48px;
left: -20px;
padding: 5px;
width: 36px;
height: 36px;
border-radius: 50%;
box-shadow: -1px 0 1px rgba(0,0,0,.15) inset;
}
.ds-avatar a {
display: block;
padding: 1px;
width: 32px;
height: 32px;
border: 1px solid #B9BAA6;
border-radius: 50%;
background-color: #fff;
-moz-transition: color 0.15s linear;
-webkit-transition: color 0.15s linear;
transition: color 0.15s linear;
}
a {
text-decoration: none;
}
這次就先講到這裡了。要實現具體的留言板功能，記得關注哦。小編會持續更新的。最多不超過一週。小編就會更新下一節哦。