Message board page style developed in PHP
Our code in this chapter does not use any page styles. The page looks very messy, which is not the effect we expected. Therefore, this chapter uses some css styles to make the page look more impressive.
Tips: When running online, some styles may not be visible due to the large size of the image. You can try it locally
css style
<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>We use the show-hide effect in jQuery on the post message page. When we click to post the message, the page we used to post the message will be displayed. Come out, the jQuery code is as follows
Note: To use jQuery’s display effect, you need to load the jQuery library, and you need to put the following piece of code into the head
<script>
$(document).ready(function(){
$("button").click(function(){
$("form").toggle();
});
});
</script># #JS
We need to verify the messages we publish. If the name and message are not filled in, we are not allowed to publish them. They need to be given. Prompt information, the code is as follows
<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>##Complete page layout code <?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>In this way, our page layout is ready. The next step is to post a message and insert data into the database
