Paparan modul lengkap untuk membangunkan buku tetamu ringkas dalam PHP
Kerja penyediaan sebelum ini pada dasarnya telah siap
Dalam bab ini, kita hanya perlu memanggil pelbagai fail kelas, fail JS dan fail CSS yang telah kami sediakan
Di sini Untuk menunjukkan kesan, kami tidak memanggil fail JS dan fail CSS, rakan-rakan boleh mencubanya sendiri.
<?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() 方法切换元素的可见状态。
// 如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
$("#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() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。
var id=$(this).attr("href"); //attr() 方法设置或返回被选元素的属性值。
var reply_form=$("#reply_form").html();
$(this).parent().parent().children(".m").append(reply_form); //append() 方法在被选元素的结尾插入指定内容。
$(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 之间的一个随机数。
$("#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个字符以内");return false;}
l=$("#message").val().trim().length;
if(l==0) {alert("留言内容不能为空");return false;}
if(l>300) {alert("留言内容要300字符以内");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">留言内容：</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">回复</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 "回复：".$row["reply"];
echo "<span class='retime'>__".$row["retime"]."</span>";
echo "</p>";
}
?>
</div>
</li>
<?php } ?>
</ul>
</div>
<div class="pagination" >
当前第<?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="回复" style="width:60px; vertical-align:middle;" />
</form>
</div>
</div>
<?php }?>
</body>
</html>
?>Dengan cara ini kami telah menyelesaikan semua fungsi.
Nota: Bab ini hanyalah demonstrasi mudah, dan kodnya adalah untuk rujukan pembelajaran sahaja.
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
