PHP로 간단한 방명록을 개발하는 완전한 모듈 표시
이전 준비는 기본적으로 완료되었습니다
이번 장에서는 이미 준비한 각종 클래스 파일, JS 파일, CSS 파일만 호출하면 됩니다
효과를 보여드리기 위해 JS 파일과 CSS 파일은 호출하지 않았습니다. CSS 파일. 친구들이 직접 시도해 볼 수 있습니다.
<?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>
?>이렇게 해서 모든 기능이 완료되었습니다.
참고: 과정의 이 장은 단순한 데모일 뿐이며 해당 코드는 학습 참조용으로만 사용됩니다.
![프론트엔드 프로젝트 - Shangyou [HTML/CSS/JS 기술 종합실습]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![제로 기반 프론트엔드 과정 [Vue 고급 학습 및 실무 적용]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![웹 프론트엔드 튜토리얼 [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost 실무 응용 [api, 인터페이스, 자동화 테스트, 모의]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
