PHP開發(fā)之留言板頁(yè)面樣式
我們一章節(jié)代碼沒(méi)有使用任何的頁(yè)面樣式，頁(yè)面看起來(lái)很雜亂，不是我們期待的效果，所以，本章節(jié)使用了一些css樣式讓頁(yè)面看起來(lái)更可觀
提示：線上運(yùn)行可能由于圖片太大，所以看不出一些樣式，可以到本地嘗試一下
css樣式
<style>
#left{
width: 25%;
float: left;
}
#center{
width: 42%;
float: left;
}
#right{
width: 32%;
float: left;
}
.right{
margin-left: 180px;
}
.button{
background-color: rgba(230, 228, 236, 0.93); /* Green */
border: none;
color: #110c0f;
padding: 10px 70px;
text-align: center;
display: inline-block;
font-size: 16px;
margin-left: 20px;
cursor: pointer;
}
form{
font-size: 17px;
}
button{
background-color: rgba(249, 247, 255, 0);
border: none;
font-size: 16px;
color: #551a8b;
cursor: pointer;
}
a{
text-decoration:none;
}
table{
width: 550px;
height: 100px;
}
</style>我們?cè)诎l(fā)布留言頁(yè)面運(yùn)用了jQuery里面的顯示隱藏效果，當(dāng)我們點(diǎn)擊發(fā)布留言的時(shí)候，會(huì)將我們發(fā)布留言所用的頁(yè)面顯示出來(lái)，jQuery代碼如下
注意：運(yùn)用jQuery的顯示效果，需要加載jQuery庫(kù)，需要將下面的一段代碼放到head里面
<script?src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("form").toggle();
});
});
</script>JS
我們要對(duì)我們發(fā)布的留言進(jìn)行驗(yàn)證，如果姓名和留言沒(méi)有填寫，我們是不允許發(fā)布的，需要給出提示信息，代碼如下
<script>
function foo(){
if(myform.name.value=="")
{
alert("請(qǐng)輸入你的姓名");
myform.name.focus();
return false;
}
if (myform.content.value=="")
{
alert("留言內(nèi)容不能為空");
myform.content.focus();
return false;
}
if(myform.vcode.value==""){
alert('驗(yàn)證碼不能為空');
myform.vcode.focus();
return false;
}
}
</script>完整的頁(yè)面布局代碼
<?php
session_start();
header("content-type:text/html;charset=utf-8");
$page=isset($_GET['page']) ?$_GET['page'] :1 ;//接收頁(yè)碼
$page=!empty($page) ? $page :1;
$conn=mysqli_connect("localhost","root","root","Ressage");
mysqli_set_charset($conn,'utf8'); //設(shè)定字符集
$table_name="ressage_user";//查取表名設(shè)置
$perpage=5;//每頁(yè)顯示的數(shù)據(jù)個(gè)數(shù)
//最大頁(yè)數(shù)和總記錄數(shù)
$total_sql="select count(*) from $table_name";
$total_result =mysqli_query($conn,$total_sql);
$total_row=mysqli_fetch_row($total_result);
$total = $total_row[0];//獲取最大頁(yè)碼數(shù)
$total_page = ceil($total/$perpage);//向上整數(shù)
//臨界點(diǎn)
$page=$page>$total_page ? $total_page:$page;//當(dāng)下一頁(yè)數(shù)大于最大頁(yè)數(shù)時(shí)的情況
//分頁(yè)設(shè)置初始化
$start=($page-1)*$perpage;
$sql= "select * from ressage_user order by id desc limit $start ,$perpage";
$result=mysqli_query($conn,$sql);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<style>
.right{
margin-left: 140px;
}
.button{
background-color: rgba(230, 228, 236, 0.93); /* Green */
border: none;
color: #110c0f;
padding: 10px 70px;
text-align: center;
display: inline-block;
font-size: 16px;
margin-left: 20px;
cursor: pointer;
}
form{
font-size: 17px;
}
button{
background-color: rgba(249, 247, 255, 0);
border: none;
font-size: 16px;
color: #551a8b;
cursor: pointer;
}
a{
text-decoration:none;
}
table{
width: 360px;
height: 100px;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("form").toggle();
});
});
function foo(){
if(myform.name.value=="")
{
alert("請(qǐng)輸入你的姓名");
myform.name.focus();
return false;
}
if (myform.content.value=="")
{
alert("留言內(nèi)容不能為空");
myform.content.focus();
return false;
}
if(myform.vcode.value==""){
alert('驗(yàn)證碼不能為空');
myform.vcode.focus();
return false;
}
}
</script>
</head>
<body>
<div id="left">
<img src="https://img.php.cn/upload/image/460/147/285/1477727203382106.jpg" width="370px">
</div>
<div id="center">
<h1>留言內(nèi)容</h1>
<p>
<?
if($result==null){
echo"暫時(shí)沒(méi)有留言";
} ?>
</p>
<?php
while($row=mysqli_fetch_array($result)){
?>
<table border="1" cellspacing="0">
<tr>
<td>姓名：<?php echo $row['name']?></td>
<td style="text-align: center">留言時(shí)間:<?php echo $row['ressage_time']?></td>
<td><a href="ressage_delete.php?id=<?php echo $row['id']?>" >刪除</a> </td>
</tr>
<tr>
<td colspan="3">你的留言:<?php echo $row['content']?></td>
</tr>
</table>
<?php
}?>
<div id="baner" style="margin-top: 20px">
<a href="<?php
echo "$_SERVER[PHP_SELF]?page=1"
?>">首頁(yè)</a>
<a href="<?php
echo "$_SERVER[PHP_SELF]?page=".($page-1)
?>">上一頁(yè)</a>
<!-- 顯示123456等頁(yè)碼按鈕-->
<?php
for($i=1;$i<=$total_page;$i++){
if($i==$page){//當(dāng)前頁(yè)為顯示頁(yè)時(shí)加背景顏色
echo "<a style='padding: 5px 5px;background: #000;color: #FFF' href='$_SERVER[PHP_SELF]?page=$i'>$i</a>";
}else{
echo "<a style='padding: 5px 5px' href='$_SERVER[PHP_SELF]?page=$i'>$i</a>";
}
}
?>
<a href="<?php
echo "$_SERVER[PHP_SELF]?page=".($page+1)
?>">下一頁(yè)</a>
<a href="<?php
echo "$_SERVER[PHP_SELF]?page={$total_page}"
?>">末頁(yè)</a>
<span>共<?php echo $total?>條</span>
</div>
</div>
<div id="right" >
<h2>留言板</h2>
<div > <a href="">首頁(yè)</a> | <button>留言</button> <a href="" class="right">管理員登錄</a>
<form method="post" action="ressage_post.php" style="display:none;" onsubmit="return foo();" name="myform" ">
<div class="form">
<p>
姓名：<input type="text" name="name">
</p>
<p>
郵箱：<input type="email" name="email">
</p>
<p>
留言內(nèi)容：<br/>
<textarea cols="30" rows="7" name="content"></textarea>
</p>
<p>
驗(yàn)證碼：<input type="text" name="vcode"><img src="yanzhengma.php" onClick="this.src='yanzhengma.php?nocache='+Math.random()" style="cursor:hand">
</p>
<p>
<button class="button">提交留言</button>
</p>
</div>
</form>
</div>
</body>
</html>這樣我們我頁(yè)面布局就做好了，下面就是發(fā)布留言往數(shù)據(jù)庫(kù)插入數(shù)據(jù)
