Affichage complet du module de développement d'un livre d'or simple en PHP
Le travail de préparation précédent est pratiquement terminé
Dans ce chapitre, il nous suffit d'appeler les différents fichiers de classe, fichiers JS et fichiers CSS que nous avons préparés
Ici Afin de montrer l'effet, nous n'avons pas appelé le fichier JS et le fichier CSS, les amis peuvent l'essayer par eux-mêmes.
<?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>簡(jiǎn)單留言本</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() 方法切換元素的可見(jiàn)狀態(tài)。
// 如果被選元素可見(jiàn)，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素。
$("#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)前匹配元素集合中每個(gè)元素的父元素，使用選擇器進(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 之間的一個(gè)隨機(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個(gè)字符以內(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>簡(jiǎn)單留言本</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"];?>頁(yè)/
共<?php echo $page_result["page_info"]["page_count"];?>頁(yè)/
每頁(yè)顯示<?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);?>">上一頁(yè)</a>
<a href="index.php?pn=<?php echo ($page_result['page_no']+1);?>">下一頁(yè)</a>
<a href="index.php?pn=1">首頁(yè)</a>
<a href="index.php?pn=<?php echo ($page_result['page_info']['page_count']);?>">尾頁(yè)</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>
?>De cette fa?on, nous avons rempli toutes les fonctions.
Remarque?: ce chapitre n'est qu'une simple démonstration et son code est uniquement destiné à la référence d'apprentissage.
