HTML+CSS+PHP实现网页留言板功能(需要创建数据库)

话说前头,我这方面很菜滴。这是我网页作业的一部分。

1.body部分效果展示(不包括footer)

2、代码

2.1 leaving.php(看到的网页)

复制代码
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>留言板</title>  
    <link rel="stylesheet" href="leaving_styles.css">  
</head>  
<body>  
    <header >  
        <h1>............</h1>  
    </header> 
    
  <div class="le">
    <h2>留言板</h2>  
    <div class="in">
    <form action="post_message.php" method="post">  
        <textarea name="message" rows="5"  placeholder="输入你的留言..."></textarea> 
        <br>
        <input class="in" type="submit" value="提交">  
    </form> 
    </div>
    
    <table> 
        <tr><td>
        <div id="message-container" >  
        <?php include 'display_messages.php'; ?>  
        </div>
        </td></tr>
    </table>
  </div>
    <footer>  
        <p>留言板 &copy; 2024 草海桐</p>  
    </footer>  
</body>  
</html>

2.2 leaving_styles.css

php 复制代码
body {  
    font-family: Arial, sans-serif;  
    margin: 0;  
    padding: 0; 
    justify-content: center;  
    align-items: center;  
    background-color: rgba(224, 255, 255, 1);
}  
  
header {  
    width: 100%;
    height: 200px;
    background-image: url('.jpg');  
    background-size: cover; 
    background-position: center; 
    text-align: center;
    margin: auto;
} 

h1{

}

h2{
    display: flex;
    justify-content: center; 
    padding: 0;
    margin: 0;
}

/*.le{
    margin: 0; 
    padding: 20px; 
    text-align: center;
    align-items: center;
    background-color: rgba(224, 255, 255, 1);    
}*/
.le{
    width: auto;
    top: 200px;
    bottom: 0;
    left: 0;
    text-align: center;
    align-items: center;
    margin: 0;
    padding: 10px;
    background-size:cover;
    position: absolute;
    right: 0;
}   
.in{
    justify-content: center;
}
textarea{
    width: 65%;
}


form{
    text-align: center;
    padding: 10px; 
    align-items: center;
}
table{
    border-collapse: collapse; 
    align-items: center;
    text-align: center;
    bottom: 0;
} 
tr{
    align-items: center;
    text-align: center;
}
td{
    text-align:center ;
    align-items: center;
}
#message-container{  
    text-align: center;
    align-items: center;
    max-height: 350px;
    overflow-y: auto; 
    padding: 0;
    border: 2px solid black; 
    background-color: rgba(255, 255, 255, 1);  
}

@media screen and (max-width: 400px) {  
    #message-container{  
    align-items: center;
    text-align: center;
    max-height: 220px;
    width: auto;
    overflow-y: auto; 
    padding: 0;
    border: 2px solid black; 
    background-color: rgba(255, 255, 255, 1);  
    }
}

footer {  
    background-color: #333;  
    color: #fff;  
    text-align: center;  
    position: fixed;  
    left: 0;  
    bottom: 0;  
    width: 100%;  
}  

2.3 post_massages.php

php 复制代码
<?php  
$servername = "localhost"; 
$username = "";//用户名
$password = "";//密码
$dbname = "";//数据库名称
  
$conn = new mysqli($servername, $username, $password, $dbname);  
  
if ($conn->connect_error) {  
    die("连接失败: " . $conn->connect_error);  
}  
  
$message = $conn->real_escape_string($_POST['message']);  
  
$sql = "INSERT INTO messages (content) VALUES ('$message')";  
if ($conn->query($sql) === TRUE) {  
    echo "留言成功添加!";  
    header("Location: leaving.php");
    exit();  
} else {  
    echo "Error: " . $sql . "<br>" . $conn->error;  
}  
  
$conn->close();  
?>

2.4 display_massages.php

php 复制代码
<?php  
$servername = "localhost";  
$username = "";//用户名  
$password = "";//密码
$dbname = "";//数据库名称

$conn = new mysqli($servername, $username, $password, $dbname);  
  
if ($conn->connect_error) {  
    die("连接失败: " . $conn->connect_error);  
}  
  
$sql = "SELECT * FROM messages ORDER BY timestamp DESC";  
$result = $conn->query($sql);  
  
if ($result->num_rows > 0) {  
    while ($row = $result->fetch_assoc()) {  
        echo "<p>提交时间:" . $row["timestamp"]  . "<br>". nl2br($row["content"])."<hr></p>";  
    }  
} else {  
    echo "目前还没有留言。";  
}  

$conn->close();  
?>
相关推荐
Hilaku13 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
拜无忧15 小时前
html,svg,花海扩散效果
前端·css·svg
华仔啊20 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
在云端易逍遥21 小时前
前端必学的 CSS Grid 布局体系
前端·css
BingoGo21 小时前
PHP 如何利用 Opcache 来实现保护源码
后端·php
进阶的鱼1 天前
(4种场景)单行、多行文本超出省略号隐藏
前端·css·面试
石金龙2 天前
[译] Composition in CSS
前端·css
天天扭码2 天前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153172 天前
CSS特异性:如何精准控制样式而不失控?
前端·css
葡萄城技术团队2 天前
所有网站通用:6 行 HTML 代码搞定页面加载提速
html