html+php+mysql实现留言板功能

能描述：

1）实测链接的是远程数据库

2）打开留言板加载留言

3）新添加的留言显示在下方

css代码，用于设置弹框和新添加的留言样式等

#comments{

margin:10px auto;

}

#post{

margin-top:10px;

}

#comments p,

#post p{

line-height:30px;

}

#comments p span{

margin:4px;

color:#bdb8b8;

}

#message{

position: absolute;

top: 40%;

left: 100px;

width: 200px;

height: 50px;

background: #f2f2f2;

border: 1px solid;

border-radius: 3px;

line-height: 50px;

text-align: center;

display: none;

}

</style>

html代码：

<div>

</div>

</div>

js代码，用于加载留言

$(function() {

var comments = $("#comments");

$.getJSON("data.php", function(json) {

$.each(json, function(index, array) {

var txt = "<p><strong>" + array["user"] + "</strong>：" + array["comment"] + "<span>" + array["addtime"] + "</span></p>";

comments.append(txt);

});

//将评论的内容展出

$("#add").click(function() {

var user = $("#user").val();

var txt = $("#txt").val();

$.ajax({

type: "POST",

url: "comment.php",

data: "user=" + user + "&txt=" + txt,

dataType : 'JSON',

success: function(res) {

if (res.code == 1) {

var str = "<p><strong>" + res.user + "</strong>：" + res.txt + "<span>刚刚</span></p>";

comments.append(str);

$("#message").show().html("发表成功！").fadeOut(1000);

$("#txt").attr("value", "");

} else {

$("#message").show().html(res.message).fadeOut(1000);

}

});

</script>

connect.php文件，用于连接数据库

<?php

$host="your db host";

$db_user="your db";

$db_pass="your db password";

$db_name="your db name";

$timezone="Asia/Shanghai";

$link=mysqli_connect($host,$db_user,$db_pass);//连接数据库主机

mysqli_select_db($link,$db_name);//选择数据库

mysqli_query($link,"SET names UTF8");//设置数据库编码格式

header("Content-Type: text/html; charset=utf-8");//设置头部样式

date_default_timezone_set($timezone); //北京时间

data.php,用于打开网页时展示留言

<?php

include_once("connect.php");//连接数据库

$q=mysqli_query($link,"select * from comments");//获取数据库的数据

while($row=mysqli_fetch_array($q)){

$comments[] = array("id"=>$row['id'],"user"=>$row['user'],"comment"=>$row['comment'],"addtime"=>$row['addtime']);

}

echo json_encode($comments);//以json格式编码

comment.php，用于将新的留言存入数据库并展示在视图上

<?php

include_once("connect.php");

//trim,返回字符串 str 去除首尾空白字符后的结果。如果不指定第二个参数,则去除普通控制，制表符，换行符，回车符，空字节符，垂直制表符

//htmlspecialchars() 函数把预定义的字符转换为 HTML 实体

$user = htmlspecialchars(trim($_POST['user']));

$txt = htmlspecialchars(trim($_POST['txt']));

if(empty($user)){

$data = array("code"=>355,"message"=>"昵称不能为空！");

echo json_encode($data);

exit;

}

if(empty($txt)){

$data = array("code"=>356,"message"=>"内容不能为空");

echo json_encode($data);

exit;

}

$time = date("Y-m-d H:i:s");

$query=mysqli_query($link,"insert into comments(user,comment,addtime)values('$user','$txt','$time')");

if($query) {

$data = array("code" => 1, "message"=>"success","user" => $user , "txt" => $txt);

echo json_encode($data);

}

另外，还有在数据库中创建comment的sql命令

CREATE TABLE `comments`(

`id` int(4) NOT NULL AUTO_INCREMENT PRIMARY KEY,

`user` varchar(50),

`comment` varchar(200),

`addtime` datetime not null

)engine=MYISAM CHARACTER SET UTF8 COLLATE utf8_unicode_ci;

言板功能在一些论坛网站是常见的一项功能块，实现该功能的方法也很多，对于刚接触前端学习的人来说，可以尝试着用javascript来实现，实现效果如下：

输入你要发表的内容，点击发表后，发布的内容就可以展示在下面的装载列表项中，还可以获取当前的发布时间，当然你也可以用js判断输入的字数限制，然后做一个字数限制的发表说说功能，可以仿微博以前的发布功能！

下面说说实现的代码

html结构：

css：

javascript：

言板是一个常见的Web应用程序，允许用户在网站上发布和查看留言。在本文中，我们将使用PHP编写一个简单的留言板，介绍构建过程中的关键步骤和技巧。

一、准备工作

在开始编写留言板之前，我们需要准备好以下工作：

1、一个Web服务器环境，例如Apache或Nginx。

2、PHP解释器，确保PHP已经正确安装和配置。

3、一个MySQL数据库，用于存储留言信息。

二、数据库设计

我们将使用MySQL数据库来存储留言信息。在数据库中，我们需要创建一个表来存储留言。下面是一个简单的留言表设计：

CREATE TABLE messages (
id INT(11) AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(50) NOT NULL,
email VARCHAR(50) NOT NULL,
message TEXT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

这个表包含了id、name、email、message和created_at五个字段，分别表示留言的唯一标识符、留言者的姓名、邮箱、留言内容和留言创建时间。

三、创建留言板页面

1、创建一个名为index.php的文件，并在文件中添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>留言板</title>
</head>
<body>
    <h1>留言板</h1>
    <form action="submit.php" method="post">
        <label for="name">姓名：</label>
        <input type="text" name="name" id="name" required><br><br>
        <label for="email">邮箱：</label>
        <input type="email" name="email" id="email" required><br><br>
        <label for="message">留言：</label><br>
        <textarea name="message" id="message" rows="4" cols="50" required></textarea><br><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

一段代码创建了一个简单的HTML表单，用于用户输入姓名、邮箱和留言内容，并通过action属性指定了提交表单时的处理页面为submit.php。

2. 创建一个名为submit.php的文件，并在文件中添加以下代码：

<?php
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "messages";
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接是否成功
if ($conn->connect_error) {
 die("连接失败: " . $conn->connect_error);
}
// 获取表单数据
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
// 插入留言到数据库
$sql = "INSERT INTO messages (name, email, message) VALUES ('$name', '$email', '$message')";
if ($conn->query($sql) === TRUE) {
 echo "留言提交成功！";
} else {
 echo "留言提交失败：" . $conn->error;
}
// 关闭数据库连接
$conn->close();
?>

这段代码首先连接到数据库，然后通过$_POST超全局变量获取表单数据。接下来，将留言数据插入到数据库表中，并根据插入结果输出相应的提示信息。最后，关闭数据库连接。

四、显示留言列表

1、创建一个名为messages.php的文件，并在文件中添加以下代码：

<?php
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "messages";
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
// 从数据库中获取留言数据
$sql = "SELECT * FROM messages ORDER BY created_at DESC";
$result = $conn->query($sql);
// 输出留言列表
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "<p><strong>姓名：</strong>" . $row["name"] . "</p>";
        echo "<p><strong>邮箱：</strong>" . $row["email"] . "</p>";
        echo "<p><strong>留言：</strong>" . $row["message"] . "</p>";
        echo "<hr>";
    }
} else {
    echo "暂无留言";
}
// 关闭数据库连接
$conn->close();
?>

这段代码首先连接到数据库，然后从数据库中获取留言数据，并按照创建时间的倒序进行排序。接下来，通过循环遍历每条留言，并将其输出到页面上。如果数据库中没有任何留言，将输出"暂无留言"的提示信息。最后，关闭数据库连接。

2. 在index.php文件中添加一个链接到messages.php的超链接，以便用户可以查看留言列表。在标签中添加以下代码：

<a href="messages.php">查看留言</a>

以上代码可能存在bug，请使用过程中自行确认是否满足要求。

结论

通过以上步骤，我们成功地使用PHP编写了一个简单的留言板。用户可以在留言板上提交留言，并在留言列表中查看所有留言。这个留言板只是一个基础示例，你可以根据实际需求进行扩展和改进。希望本文对你理解如何使用PHP构建留言板有所帮助！

在线咨询

上一篇：8款好用的Html5海报制作工具，让你做出风靡朋友圈海报
下一篇：css中li标签的符号名称

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html+php+mysql实现留言板功能

您的项目需求