美文网首页
PHP留言板案例

PHP留言板案例

作者: 挤时间学习的阿龙 | 来源:发表于2019-10-14 16:36 被阅读0次

一、项目效果展示
1、留言板效果展示


image.png

2、留言板搜索功能


image.png

二、步骤讲解

1、创建数据库

CREATE DATABASE onecms;

创建msg数据表

DROP TABLE IF EXISTS `msg`;
CREATE TABLE `msg` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `content` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;

2、创建conn.inc.php

<?php
define("HOST",'localhost');
define("USER",'root');
define("PWD",'root');
define("DBNAME",'msg');

3、创建mysqli.php

<?php
include 'conn.inc.php';
$mysqli=new mysqli(HOST,USER,PWD,DBNAME);
if($mysqli->connect_errno){
    die('数据库链接出错'.$mysqli->connect_error);
}

4、创建首页index.php

（1）引入kindeditor
kindeditor下载地址http://kindeditor.net/down.php

image.png
（2）添加js代码:(#content对应着html里内容标签的id属性)
image.png 
<!DOCTYPE html>
<html>
<head>
    <title>留言板</title>
    <meta charset="UTF-8">
    <script src="kindeditor/kindeditor-all.js"></script>
</head>
<body>
<div><h1>留言板</h1></div>
<div>
    <form action="insertdb.php" method="post">
        标题:<input type="text" id="title" name="title"><br>
        内容:<br><span><textarea name="content" rows="13" cols="80" id="content"></textarea>
                <script>
                    KindEditor.ready(function(K) {
                        window.editor = K.create('#content',{
                            afterBlur:function(){this.sync();}
                        })
                    });
                </script>
                </span>
        <input type="submit" name="dosub" id="btn" value="上传留言">
    </form>
</div>
</body>
</html>

3、初步效果

image.png

4、创建insertdb.php文件

<?php
include './mysqli.php';
header('Content-type:text/html;charset=utf-8');
$tit=$_POST["title"];
$con=$_POST["content"];
$sql="insert into msg(title,content) values('$tit','$con')";
if($mysqli->query($sql))
{
    echo "留言成功,3秒后跳转原页面";
}else{
    echo "留言失败,3秒后跳转原页面";
}
header("Refresh:3;url=index.php");

效果如下：


image.png

6、用ajax无刷新做添加功能，代码：

（1）先引入需要的js
<script src="jquery-1.11.0.js"></script>
（2）隐藏表单修改message.php代码:
<?php
//加载方法
var page=1;
var num=4;
$(function(){
    load(page);
    $("#btn1").click(function () {
        var title=$("#title").val();
        var content=$("#content").val();
        $.post("insertdb.php",{title:title,content:content},function (data) {
            if(data){
                alert("留言成功!");
            }else{
                alert("留言失败请重新输入!");
            }
            load(page);
            location.href="message.php";
        },"text")
    })
})
（3）修改insertdb.php代码如下:

相比之前删除了调转语句

<?php
include './mysqli.php';
$tit=$_POST["title"];
$con=$_POST["content"];
$sql="insert into message(title,content) values('$tit','$con')";
if($mysqli->query($sql))
{
    //返回1表示添加成功
    echo 1;
}
else{
    //返回0表示添加失败
    echo 0;
}

这就就实现了ajax无刷新Tina及留言

7、采用jquery来发送ajax请求

<!DOCTYPE html>
<html>
    <head>
        <title>留言板</title>
        <meta charset="UTF-8">
        <script src="jquery-1.11.0.js"></script>
        <script src="kindeditor/kindeditor/kindeditor-all.js"></script>
        <style>
            #div1 div{height: 30px; line-height: 30px; padding-left: 10px; background: #f0f0f0; margin-bottom: 1px}
        </style>
        <script>
            function load(){
                  var str="";
                  $.ajax({
                       type:'get',
                       url:'messageshowdb.php',
                       data:{},
                       dataType:'json',
                       success: function(data,status)
                       {
                           str="";
                            $.each(data, function(key,value) {
                  str+="<div>"+[key]+":"+"标题:"+value.title+"-----"+"内容:"+value.content+"</div>";
                                  $("#div1").html(str);
               });
                       }
                   })
            }
            $(function(){
    load(page);
    $("#btn").click(function () {

        var title=$("#title").val();
        var content=$("#content").val();
        $.post("insertdb.php",{title:title,content:content},function (data) {
            if(data){
                alert("留言成功!");
            }else{
                alert("留言失败请重新输入!");
            }
            load(page);
            location.href="index.php";
        },"text")
    })
  
})
        </script>
    </head>
    <body>
        <div><h1>留言板</h1></div>
        <div>搜索:<input id="con" name="sousuo"><input id="sousuo" type="button" value="确定"></div>
        <br><div id="div1"></div>
        <div>
            标题:<input type="text" id="title" name="title"><br>
            内容:<br><span><textarea name="content" rows="13" cols="80" id="content"></textarea>
                <script>
                    KindEditor.ready(function(K) {
                        window.editor = K.create('#content',{
                            afterBlur:function(){this.sync();}
                        })
                    });
                </script>
                </span>
            <input type="submit" name="dosub" id="btn1" value="上传留言">
        </div>
    </body>
</html>

8、新建messageshowdb.php

<?php
include 'mysqli.php';
$sql="select * from msg";
$result=$mysqli->query($sql);
if($result->num_rows>0)
{
    while ($row=$result->fetch_assoc())
    {
        $arr[$row["id"]]["title"]=$row["title"];//$arr[1]["title"]=$row["title"]
        $arr[$row["id"]]["content"]=$row["content"];//$arr[1]["content"]=$arr["content"]
    }
}
echo json_encode($arr);

效果展示如下:


image.png

9、留言分页设计

（1）修改message.php代码:
<?php
var page=1;
            var num=4;
            function load(page){
                function showpage() {
                    //获取总页数
                    $.ajax({
                        async:false,//设置成同步 函数内部变量 外部可以取到
                        type:'get',
                        url:'totaldb.php',
                        data:{page:page,num:num},
                        dataType:'text',
                        success: function(data,status)
                        {
                            totalpage=data;
                        }
                    })
                    var result="";
                    //显示分页
                    result="<input type='button' id='prev' value='上一页'></input>";
                    result+='当前页：第'+page+'页/总共：'+totalpage+"页";
                    result+="<input type='button' id='next'value='下一页'></input>";
                    $('#page').html(result);
                    //单击下一页 page递增 实现翻页
                    $('#next').click(function(){
                        page++;
                        if(page>=totalpage)
                        {
                            page=totalpage;
                        }
                        load(page);
                    })
                    //单击上一页 page递减 实现翻页
                    $('#prev').click(function(){
                        page--;
                        if(page<=1)
                        {
                            page=1;
                        }
                        load(page);
                    })
                }
                       //获取内容
                  var str="";
                  $.ajax({
                       type:'get',
                       url:'messageshowdb.php',
                       data:{page:page,num:num},
                       dataType:'json',
                       success: function(data,status)
                       {
                           str="";
                            $.each(data, function(key,value) {
                  str+="<div>"+[key]+":"+"标题:"+value.title+"-----"+"内容:"+value.content+"</div>";
                                  $("#div1").html(str);
               });
                       }
                   })
       showpage();
            }
（2）新建totaldb.php文件
<?php
include 'mysqli.php';
$num=$_GET["num"];//每页显示的个数
$sql="select * from msg";
$result=$mysqli->query($sql);
$totalnum=$result->num_rows;//总记录数
$totalpage=ceil($totalnum/$num);
echo $totalpage;
（3）修改messageshowdb.php
<?php
include 'mysqli.php';
$page= isset($_GET["page"])?$_GET["page"]:1;
$num=$_GET["num"];
$startnum=($page-1)*$num; //开始位置
$con=isset($_GET["con"])?$_GET["con"]:"";//搜索关键字
$content=isset($_GET["content"])?$_GET["content"]:"";
$sql="select * from message where 1=1";
$result=$mysqli->query($sql);
if($result->num_rows>0)
{
    while ($row=$result->fetch_assoc())
    {
        $arr[$row["id"]]["title"]=$row["title"];//$arr[1]["title"]=$row["title"]
        $arr[$row["id"]]["content"]=$row["content"];//$arr[1]["content"]=$arr["content"]
    }
}
echo json_encode($arr);
（4）加入分页加载页面
image.png
（5）效果展示
image.png

10、留言搜索设计

（1）在留言板新加搜索按钮index.php文件中
image.png 
<div>搜索:<input id="con" name="sousuo"><input id="sousuo" type="button" value="确定"></div>
（2）修改messageshowbd.php文件:
image.png
（3）效果展示
image.png

三、项目完整代码

1、项目所有文件

image.png

2、conn.inc.php

<?php
define("HOST",'localhost');
define("USER",'root');
define("PWD",'root');
define("DBNAME",'msg');

3、mysqli.php

<?php
include 'conn.inc.php';
$mysqli=new mysqli(HOST,USER,PWD,DBNAME);
if($mysqli->connect_errno){
    die('数据库链接出错'.$mysqli->connect_error);
}

4、insertdb.php

<?php
include './mysqli.php';
$tit=$_POST["title"];
$con=$_POST["content"];
$sql="insert into msg(title,content) values('$tit','$con')";
if($mysqli->query($sql))
{
    echo 1;
}
else{
    echo 0;
}
header("Refresh:3;url=index.php");

5、totaldb.php

<?php
include './mysqli.php';
$num=$_GET["num"];//每页显示的个数
$sql="select * from msg";
$result=$mysqli->query($sql);
$totalnum=$result->num_rows;//总记录数
$totalpage=ceil($totalnum/$num);
echo $totalpage;

6、index.php

<!DOCTYPE html>
<html>
<head>
    <title>留言板</title>
    <meta charset="UTF-8">
    <script src="jquery-1.11.0.js"></script>
    <script src="kindeditor/kindeditor-all.js"></script>
    <style>
        #div1 div{height: 30px; line-height: 30px; padding-left: 10px; background: #f0f0f0; margin-bottom: 1px}
    </style>
    <script>
        var page=1;
        var num=8;
        function load(page){
            function showpage() {
                //获取总页数
                $.ajax({
                    async:false,//设置成同步 函数内部变量 外部可以取到
                    type:'get',
                    url:'totaldb.php',
                    data:{page:page,num:num},
                    dataType:'text',
                    success: function(data,status)
                    {
                        totalpage=data;
                    }
                })
                var result="";
                //显示分页
                result="<input type='button' id='prev' value='上一页'></input>";
                result+='当前页：第'+page+'页/总共：'+totalpage+"页";
                result+="<input type='button' id='next'value='下一页'></input>";
                $('#page').html(result);
                //单击下一页 page递增 实现翻页
                $('#next').click(function(){
                    page++;
                    if(page>=totalpage)
                    {
                        page=totalpage;
                    }
                    load(page);
                })
                //单击上一页 page递减 实现翻页
                $('#prev').click(function(){
                    page--;
                    if(page<=1)
                    {
                        page=1;
                    }
                    load(page);
                })
            }
            //获取内容
            var str="";
            $.ajax({
                type:'get',
                url:'messageshowdb.php',
                data:{page:page,num:num},
                dataType:'json',
                success: function(data,status)
                {
                    //{
                    //  "1":{"title":"t1","content":"c1"},
                    //  "2":{"title":"t2","content":"c2"},
                    //  "3":{"title":"t3","content":"c3"},
                    //}
                    str="";
                    $.each(data, function(key,value) {
                        str+="<div>"+[key]+":"+"标题:"+value.title+"-----"+"内容:"+value.content+"</div>";
                        $("#div1").html(str);
                    });
                }
            })
            showpage();
        }
        //加载方法
        $(function(){
            load(page);
            $("#btn").click(function () {
                var title=$("#title").val();
                var content=$("#content").val();
                $.post("insertdb.php",{title:title,content:content},function (data) {
                    if(data){
                        alert("留言成功!");
                    }else{
                        alert("留言失败请重新输入!");
                    }
                    load(page);
                    location.href="index.php";
                },"text")
            })
            $("#sousuo").click(function () {
                str="";
                var con=$("#con").val();
                $.get("messageshowdb.php?content=sousuo",{con:con,page:page,num:num},function (data) {
                    $.each(data, function(key,value) {
                        str+="<div>"+[key]+":"+"标题:"+value.title+"-----"+"内容:"+value.content+"</div>";
                        $("#div1").html(str);
                    });
                },"json")
                showpage();
            })
        })
    </script>

</head>
<body>
<div><h1>留言板</h1></div>
<div>搜索:<input id="con" name="sousuo"><input id="sousuo" type="button" value="确定"></div>
<br><div id="div1"></div>
<div id="page"></div>
<div>
    标题:<input type="text" id="title" name="title"><br>
    内容:<br><span><textarea name="content" rows="13" cols="80" id="content"></textarea>
                <script>
                    KindEditor.ready(function(K) {
                        window.editor = K.create('#content',{
                            afterBlur:function(){this.sync();}
                        })
                    });
                </script>
                </span>
    <input type="submit" name="dosub" id="btn" value="上传留言">
</div>
</body>
</html>

7、messageshowdb

<?php
include 'mysqli.php';
$page= isset($_GET["page"])?$_GET["page"]:1;
$num=isset($_GET["num"])?$_GET["num"]:4;
$startnum=($page-1)*$num; //开始位置
$con=isset($_GET["con"])?$_GET["con"]:"";//搜索关键字
$content=isset($_GET["content"])?$_GET["content"]:"";
$sql="select * from message where 1=1";
if($content=="sousuo"){
    $sql.=" and title like '%$con%' or content like '%$con%'";
}
$sql.=" limit $startnum,$num";
$result=$mysqli->query($sql);
if($result->num_rows>0)
{
    while ($row=$result->fetch_assoc())
    {
        $arr[$row["id"]]["title"]=$row["title"];//$arr[1]["title"]=$row["title"]
        $arr[$row["id"]]["content"]=$row["content"];//$arr[1]["content"]=$arr["content"]
    }
}
echo json_encode($arr);

相关文章

  • PHP留言板案例

    一、项目效果展示1、留言板效果展示 2、留言板搜索功能 二、步骤讲解 1、创建数据库 创建msg数据表 2、创建c...

  • 实例：PHP+MySQL开发留言板

    2018.04.24，注意时间。。。。这次写一下使用PHP和MySQL开发留言板的方法，个人认为留言板这个实例是非...

  • 整理推荐一些b站的php学习视频

    php 基础： 手把手教你写留言板系统av78744637 HTML+PHP+Mysql实现网站注册登录av787...

  • 微型博客系统的开发（php+mysql）技术细节

    在学习php的时候，成功开发一个简单的，如留言板之类的系统，常常作为php初级入门的标志，鉴于此，作为一个php初...

  • 简单留言板

    此留言板非常简单，漏洞也非常多，主要目的就是为了简单学习一下php mysql html，写完留言板后，再学习sq...

  • PHP基础与案例开发详解

    《PHP基础与案例开发详解》本书以目前PHP的较新版本PHP为依托，结合PHP语言特性和实战案例，充分融入了企业开...

  • PHP 简易留言板

    创建数据库 SQL 引入数据库 incDB.php 显示主页面 index.php 操作数据库 InsetToDB...

  • 留言板的登陆页面

    1、要完成留言板的登陆和注册页面就需要对HT5(html5)，php，sql简单的应用。 在这个留言板小项目中我使...

  • 利用PHP实现简单留言板

    跟随bilibili教学视频一步一步实现简单的PHP留言板。 第一个代码文件item.php，创建了一个Messa...

  • php自动义异常类

    几种php异常类的案例

网友评论

      本文标题：PHP留言板案例

      本文链接：https://www.haomeiwen.com/subject/iqnmpctx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|PHP留言板案例|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！