PHP で簡単なゲストブックを開発するための完全なモジュールの表示
これまでの準備はほぼ完了です
この章では、準備済みの各種クラスファイル、JSファイル、CSSファイルを呼び出すだけです
効果を示すために、まだ呼び出していませんJS ファイルと 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>
?>これですべての機能が完了しました。
注: コースのこの章は単なるデモンストレーションであり、コードは学習の参考のみを目的としています。
<?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"];?>
