Complete module display of developing a simple guestbook in PHP
The previous preparations have been basically completed
This chapter only needs to call the various class files, JS files, and CSS files we have prepared
Here In order to show the effect, we did not call the JS file and CSS file, friends can try it by themselves.
<?php require_once("lydb.class.php");?>
<?php require_once("authority.class.php");?>
<?php
session_start();
$lydb=new LyDB();
if(isset($_POST["type"])){
if($_POST["type"]=="insert"){
if(Authority::check_insert()==true){
$lydb->insert($_POST["nickname"],"style/avatar/".$_POST["avatar"],$_POST["message"]);
header("Location:index.php");
exit();
}
}
else if($_POST["type"]=="login"){
if(isset($_POST["username"]) && isset($_POST["password"])){
$dd=User::validate($_POST["username"],$_POST["password"]);
if($dd==true){
$_SESSION["username"]=$_POST["username"];
header("Location:index.php");
exit();
}
else{
}
}
}
else if($_POST["type"]=="reply"){
$id=$_POST["id"];
$reply=$_POST["reply"];
$lydb->reply($id,$reply);
header("Location:index.php");
exit();
}
}
else if(isset($_GET["type"])){
if($_GET["type"]=="delete"&& isset($_GET["id"])){
if(Authority::check_delete()==true){
$lydb->delete_by_id($_GET["id"]);
header("Location:index.php");
exit();
}
}
else if($_GET["type"]=="logout"){
session_destroy();
header("Location:index.php");
exit();
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>簡單留言本</title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style-type:none;
font-size:13px;
font-family:'Helvetica Neue',Helvetica,Arial,Sans-serif;
}
body {
background-color: #54B1EB;
}
#all_wrap {
width: 100%;
margin: 0 auto;
margin-top:30px;
background-color:#CCCCCC;
}
#header h1 {
font-size: 36px;
line-height:70px;
}
#header {
margin: 0 auto;
width: 90%;
}
#content {
margin: 0 auto;
width: 90%;
border: 1px solid #3683D8;
}
.item {
margin: 0 auto;
width: 90%;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #900;
clear:both;
}
.a {
float: left;
width:60px;
margin-top:5px;
}
/*留言列表*/
.n,.t,.m{
line-height:30px;
}
.n {
float: left;
color:#00F;
padding-right:5px;
}
.t{
color:#666;
}
.o {
float: right;
}
.m{
padding-left:60px;
padding-right:30px;
word-break:break-all;
}
/*新留言表單*/
.form_line{
clear:both;
margin-top:10px;
}
.form_box {
margin: 0 auto;
width: 100%;
}
.form_text {
float: left;
width: 80px;
text-align:right;
}
#form_select_avater label {
width: 60px;
display: block;
float: left;
text-align: center;
cursor: pointer;
}
.form_input textarea {
width: 50%;
height: 70px;
}
#submit_0{
width: 100px;
height:30px;
}
#footer{
margin: 0 auto;
width: 90%;
}
.footer_message {
line-height: 40px;
}
.pagination {
text-align: center;
margin:60px 30px 20px 30px;
}
.pagination a {
display: inline-block;
border: 1px solid #00F;
padding-right: 8px;
padding-left: 8px;
padding-top: 2px;
padding-bottom: 2px;
text-decoration: none;
color: #900;
margin-right: 4px;
}
.pagination a:hover{
border-color:#F0F;
color:#000;
}
.login_button {
float: right;
}
#submit_1 {
width: 60px;
}
.login_form form label {
float: left;
display: block;
width: 220px;
}
.login_form {
padding-top: 20px;
}
.login_form form {
display: block;
border: 1px dashed #F0F;
width: 520px;
padding-top:10px;
padding-bottom:10px;
padding-left:3px;
}
.welcome_info {
color: #900;
float: right;
}
.r {
color: #F00;
}
.retime{
color:#666;
}
.login_button a{
text-decoration:none;
}
#login_form{
display:none;}
@media only screen and (min-width: 410px){
#all_wrap{
width: 95%;
margin: auto
}
}
@media only screen and (min-width: 350px) and (max-width: 410px){
#all_wrap{
width: 95%;
margin: auto
}
}
}
@media only screen and (max-width: 350px){
#all_wrap{
width: 95%;
margin: auto
}
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
random_checked_avatar();
$("#submit_0").click(validate_input);
// toggle() 方法切換元素的可見狀態(tài)。
// 如果被選元素可見，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素。
$("#login_show_button").toggle(function(){
$("#login_form").show(100);
return false;
},function(){
$("#login_form").hide(100);
return false;
});
$(".reply_button").click(function(){
if($(this).parent().parent().children(".m").children(".reply_form_wrap").size()==0){
//parent() 獲得當(dāng)前匹配元素集合中每個元素的父元素，使用選擇器進(jìn)行篩選是可選的。
var id=$(this).attr("href"); //attr() 方法設(shè)置或返回被選元素的屬性值。
var reply_form=$("#reply_form").html();
$(this).parent().parent().children(".m").append(reply_form); //append() 方法在被選元素的結(jié)尾插入指定內(nèi)容。
$(this).parent().parent().children(".m").children(".reply_form_wrap").show(200);
$(this).parent().parent().children(".m").children(".reply_form_wrap").children("form")
.children("input[name='id']").val(id);
}
return false;
});
});
function random_checked_avatar(){
var r=Math.random()*2; //返回介于 0 ~ 2 之間的一個隨機(jī)數(shù)。
$("#form_select_avater input:radio").eq(r).attr("checked","checked");
}
function validate_input(){
var l=$("#nickname").val().trim().length;
if(l==0) {alert("昵稱不能為空");return false;};
if(l>6) {alert("昵稱要6個字符以內(nèi)");return false;}
l=$("#message").val().trim().length;
if(l==0) {alert("留言內(nèi)容不能為空");return false;}
if(l>300) {alert("留言內(nèi)容要300字符以內(nèi)");return false;}
return true;
}
</script>
</head>
<body>
<div id="all_wrap">
<div id="header">
<?php if(!isset($_SESSION["username"])){?>
<div class="login_form" id="login_form">
<form action="index.php" method="post" >
<label>用戶名:
<input name="username" type="text" /></label>
<label>密碼:
<input name="password" type="password" /></label>
<label style="width:65px;"><input type="submit" name="submit_1" id="submit_1" value="登錄" /></label>
<input name="type" type="hidden" value="login" />
<div style="clear:both; line-height:0; height:0;"></div>
</form>
</div>
<div class="login_button"><a href="#" id="login_show_button">管理員登錄</a></div>
<div style="clear:both; line-height:0; height:0;"></div>
<?php } else {?>
<div class="welcome_info">
歡迎您：<?php echo $_SESSION["username"];?>
<a href="index.php?type=logout">退出</a> </div>
<?php }?>
<h1>簡單留言本</h1>
</div>
<div id="content">
<?php if(Authority::check_insert()==true){?>
<div class="form_box">
<form action="index.php" method="post">
<div class="form_line">
<div class="form_text">您的昵稱：</div>
<div class="form_input">
<input type="text" name="nickname" id="nickname"/>
</div>
</div>
<div class="form_line">
<div class="form_text">選擇頭像：</div>
<div class="form_input" id="form_select_avater">
<label>
<img src="style/avatar/1.jpg" width="48" height="48" />
<input name="avatar" type="radio" value="1.jpg" checked="checked" />
</label>
<label>
<img src="style/avatar/2.jpg" width="48" height="48" />
<input type="radio" name="avatar" value="2.jpg" />
</label>
<label>
<img src="style/avatar/3.jpg" width="48" height="48" />
<input type="radio" name="avatar" value="3.jpg" />
</label>
<label>
<img src="style/avatar/4.jpg" width="48" height="48" />
<input type="radio" name="avatar" value="4.jpg" />
</label>
<label>
<img src="style/avatar/5.jpg" width="48" height="48" />
<input type="radio" name="avatar" value="5.jpg" />
</label>
<label>
<img src="style/avatar/6.jpg" width="48" height="48" />
<input type="radio" name="avatar" value="6.jpg" />
</label>
<label>
<img src="style/avatar/7.jpg" width="48" height="48" />
<input type="radio" name="avatar" value="7.jpg" />
</label>
<label>
<img src="style/avatar/8.jpg" width="48" height="48" />
<input type="radio" name="avatar" value="8.jpg" />
</label>
<br style="clear:both;" />
</div>
</div>
<div class="form_line">
<div class="form_text">留言內(nèi)容：</div>
<div class="form_input">
<textarea name="message" id="message"></textarea>
</div>
</div>
<div class="form_line">
<div class="form_text"> </div>
<div class="form_input">
<input type="hidden" name="type" value="insert" />
<input type="submit" value="提交" id="submit_0" />
</div>
</div>
</form>
<div style="border-bottom:solid #00F 1px; margin:10px auto 10px auto;"></div>
</div>
<?php }// if(Authority::check_insert()==true)
?>
<div class="message_box">
<ul class="list">
<?php
$page_result=$lydb->select_page_result($_GET["pn"]);
$result=$page_result["page_data"];
//$result=$lydb->select_all_result();
while($row=mysqli_fetch_assoc($result)){
?>
<li class="item">
<div class="a">
<img src="<?php echo $row["avatar"];?>" width="50" height="50" />
</div>
<div class="n"><?php echo $row["nickname"];?></div>
<div class="o">
<?php echo $row["id"];?>樓
<?php if(Authority::check_delete()==true){?>
<a href="<?php echo $row["id"];?>" class="reply_button">回復(fù)</a>
<a href="index.php?type=delete&id=<?php echo $row["id"];?>">刪除</a>
<?php }?>
</div>
<div class="t"><?php echo $row["lytime"];?></div>
<div class="m">
<p><?php echo $row["message"];?></p>
<?php
if(isset($row["reply"]) && trim($row["reply"])!=""){
echo "<p class='r'>";
echo "回復(fù)：".$row["reply"];
echo "<span class='retime'>__".$row["retime"]."</span>";
echo "</p>";
}
?>
</div>
</li>
<?php } ?>
</ul>
</div>
<div class="pagination" >
當(dāng)前第<?php echo $page_result["page_no"];?>頁/
共<?php echo $page_result["page_info"]["page_count"];?>頁/
每頁顯示<?php echo $page_result["page_info"]["page_size"]; ?>條/
共<?php echo $page_result["page_info"]["ly_count"]; ?>條留言
<a href="index.php?pn=<?php echo ($page_result['page_no']-1);?>">上一頁</a>
<a href="index.php?pn=<?php echo ($page_result['page_no']+1);?>">下一頁</a>
<a href="index.php?pn=1">首頁</a>
<a href="index.php?pn=<?php echo ($page_result['page_info']['page_count']);?>">尾頁</a>
</div>
</div>
<div id="footer">
<div class="footer_message">
<p> </p>
<p style="text-align:right">2016</p>
</div>
</div>
</div>
<?php if(Authority::check_delete()==true){?>
<div id="reply_form" style="display:none;">
<div class="reply_form_wrap" style="display:none;">
<form action="index.php" method="post">
<input type="hidden" name="type" value="reply" />
<input type="hidden" name="id" value="" />
<textarea name="reply" style="width:300px; height:40px;"></textarea>
<input name="提交" type="submit" value="回復(fù)" style="width:60px; vertical-align:middle;" />
</form>
</div>
</div>
<?php }?>
</body>
</html>
?>In this way we have completed all functions.
Note: This chapter is just a simple demonstration, and its code is for learning reference only.
