html+php+mysql實現(xiàn)留言板功能

能描述：

1）實測鏈接的是遠程數(shù)據(jù)庫

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);

});

//將評論的內(nèi)容展出

$("#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("發(fā)表成功！").fadeOut(1000);

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

} else {

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

}

});

</script>

connect.php文件，用于連接數(shù)據(jù)庫

<?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);//連接數(shù)據(jù)庫主機

mysqli_select_db($link,$db_name);//選擇數(shù)據(jù)庫

mysqli_query($link,"SET names UTF8");//設置數(shù)據(jù)庫編碼格式

header("Content-Type: text/html; charset=utf-8");//設置頭部樣式

date_default_timezone_set($timezone); //北京時間

data.php,用于打開網(wǎng)頁時展示留言

<?php

include_once("connect.php");//連接數(shù)據(jù)庫

$q=mysqli_query($link,"select * from comments");//獲取數(shù)據(jù)庫的數(shù)據(jù)

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，用于將新的留言存入數(shù)據(jù)庫并展示在視圖上

<?php

include_once("connect.php");

//trim,返回字符串 str 去除首尾空白字符后的結果。如果不指定第二個參數(shù),則去除普通控制，制表符，換行符，回車符，空字節(jié)符，垂直制表符

//htmlspecialchars() 函數(shù)把預定義的字符轉(zhuǎn)換為 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"=>"內(nèi)容不能為空");

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);

}

另外，還有在數(shù)據(jù)庫中創(chuàng)建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;

言板功能在一些論壇網(wǎng)站是常見的一項功能塊，實現(xiàn)該功能的方法也很多，對于剛接觸前端學習的人來說，可以嘗試著用javascript來實現(xiàn)，實現(xiàn)效果如下：

輸入你要發(fā)表的內(nèi)容，點擊發(fā)表后，發(fā)布的內(nèi)容就可以展示在下面的裝載列表項中，還可以獲取當前的發(fā)布時間，當然你也可以用js判斷輸入的字數(shù)限制，然后做一個字數(shù)限制的發(fā)表說說功能，可以仿微博以前的發(fā)布功能！

下面說說實現(xiàn)的代碼

html結構：

css：

javascript：

言板是一個常見的Web應用程序，允許用戶在網(wǎng)站上發(fā)布和查看留言。在本文中，我們將使用PHP編寫一個簡單的留言板，介紹構建過程中的關鍵步驟和技巧。

一、準備工作

在開始編寫留言板之前，我們需要準備好以下工作：

1、一個Web服務器環(huán)境，例如Apache或Nginx。

2、PHP解釋器，確保PHP已經(jīng)正確安裝和配置。

3、一個MySQL數(shù)據(jù)庫，用于存儲留言信息。

二、數(shù)據(jù)庫設計

我們將使用MySQL數(shù)據(jù)庫來存儲留言信息。在數(shù)據(jù)庫中，我們需要創(chuàng)建一個表來存儲留言。下面是一個簡單的留言表設計：

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五個字段，分別表示留言的唯一標識符、留言者的姓名、郵箱、留言內(nèi)容和留言創(chuàng)建時間。

三、創(chuàng)建留言板頁面

1、創(chuàng)建一個名為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>

一段代碼創(chuàng)建了一個簡單的HTML表單，用于用戶輸入姓名、郵箱和留言內(nèi)容，并通過action屬性指定了提交表單時的處理頁面為submit.php。

2. 創(chuàng)建一個名為submit.php的文件，并在文件中添加以下代碼：

<?php
// 連接數(shù)據(jù)庫
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "messages";
$conn = new mysqli($servername, $username, $password, $dbname);
// 檢查連接是否成功
if ($conn->connect_error) {
 die("連接失敗: " . $conn->connect_error);
}
// 獲取表單數(shù)據(jù)
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
// 插入留言到數(shù)據(jù)庫
$sql = "INSERT INTO messages (name, email, message) VALUES ('$name', '$email', '$message')";
if ($conn->query($sql) === TRUE) {
 echo "留言提交成功！";
} else {
 echo "留言提交失敗：" . $conn->error;
}
// 關閉數(shù)據(jù)庫連接
$conn->close();
?>

這段代碼首先連接到數(shù)據(jù)庫，然后通過$_POST超全局變量獲取表單數(shù)據(jù)。接下來，將留言數(shù)據(jù)插入到數(shù)據(jù)庫表中，并根據(jù)插入結果輸出相應的提示信息。最后，關閉數(shù)據(jù)庫連接。

四、顯示留言列表

1、創(chuàng)建一個名為messages.php的文件，并在文件中添加以下代碼：

<?php
// 連接數(shù)據(jù)庫
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "messages";
$conn = new mysqli($servername, $username, $password, $dbname);
// 檢查連接是否成功
if ($conn->connect_error) {
    die("連接失敗: " . $conn->connect_error);
}
// 從數(shù)據(jù)庫中獲取留言數(shù)據(jù)
$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 "暫無留言";
}
// 關閉數(shù)據(jù)庫連接
$conn->close();
?>

這段代碼首先連接到數(shù)據(jù)庫，然后從數(shù)據(jù)庫中獲取留言數(shù)據(jù)，并按照創(chuàng)建時間的倒序進行排序。接下來，通過循環(huán)遍歷每條留言，并將其輸出到頁面上。如果數(shù)據(jù)庫中沒有任何留言，將輸出"暫無留言"的提示信息。最后，關閉數(shù)據(jù)庫連接。

2. 在index.php文件中添加一個鏈接到messages.php的超鏈接，以便用戶可以查看留言列表。在標簽中添加以下代碼：

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

以上代碼可能存在bug，請使用過程中自行確認是否滿足要求。

結論

通過以上步驟，我們成功地使用PHP編寫了一個簡單的留言板。用戶可以在留言板上提交留言，并在留言列表中查看所有留言。這個留言板只是一個基礎示例，你可以根據(jù)實際需求進行擴展和改進。希望本文對你理解如何使用PHP構建留言板有所幫助！

在線咨詢

上一篇：8款好用的Html5海報制作工具，讓你做出風靡朋友圈海報
下一篇：css中l(wèi)i標簽的符號名稱

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

html+php+mysql實現(xiàn)留言板功能

您的項目需求