留言板最重要的还是留言功能，所以现在需要开发添加留言功能。
MySQL设置
添加留言的本质也是数据库的插入操作，所以新建一个message数据库，并用以下SQL语句建立message表：
CREATE TABLE `message` (
`id` int(32) NOT NULL AUTO_INCREMENT,
`user` varchar(30) DEFAULT NULL,
`title` nvarchar(100) DEFAULT NULL,
`content` nvarchar(4000) DEFAULT NULL,
`time` datetime DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
添加留言界面的前端设计
先上效果图。添加留言的界面采用了跟注册、登录页面类似的设计：
HTML
add.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>添加留言</title>
<link rel="stylesheet" href="../css/add.css">
</head>
<body>
<div class="topbar">
<a href="../index.php" class="indexbtn">首页</a>
</div>
<div class="bigbox">
<div class="addBox">
<form class="addForm" id="addForm" action="../add.php" method="post">
<div class="title">添加留言</div>
<div class="inputarea">
<input id="title" class="textbox" type="text" placeholder="标题" name="title">
<input id="content" class="content" type="text" placeholder="内容" name="content">
<input id="submitbtn" class="submitbtn" type="submit" value="提交">
</div>
</form>
</div>
</div>
<script src="../js/add.js"></script>
</body>
</html>
CSS
add.css
* {
margin: 0;
padding: 0;
}
html {
font-family: DengXian, "Microsoft YaHei";
background-color: #dFdFdF;
}
.topbar {
display: flex;
width: 100%;
height: 40px;
background-color: #036;
position: fixed;
}
.indexbtn {
display: flex;
align-items: center;
justify-content: center;
padding-left: 30px;
padding-right: 30px;
font-size: 1.2em;
color: white;
text-decoration: none;
}
.bigbox {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
/*background-color: #dFdFdF;*/
/*background: linear-gradient(45deg, #9CBFFD, #C4ECFB);*/
}
.addBox {
display: flex;
align-items: center;
justify-content: center;
width: 800px;
height: 540px;
box-shadow: 0 5px 10px grey;
background-color: white;
}
.title {
font-size: 3em;
font-weight: 800;
text-align: center;
margin-bottom: 50px;
padding-bottom: 10px;
color: #036;
border-bottom: 1px solid #003366;
}
.submitbtn {
display: block;
outline: none;
border: none;
width: 600px;
height: 30px;
color: white;
font-weight: 700;
margin: 10px;
border-radius: 5px;
text-align: center;
background-color: #036;
}
.submitbtn:hover {
cursor: pointer;
}
.textbox {
display: block;
outline: none;
border: none;
/*background-color: cornflowerblue;*/
width: 600px;
height: 30px;
color: #036;
margin: 10px;
border-radius: 5px;
text-align: center;
box-shadow: 0 0 10px darkgrey inset;
}
.content {
display: block;
outline: none;
border: none;
/*background-color: cornflowerblue;*/
width: 600px;
height: 300px;
color: #036;
margin: 10px;
border-radius: 5px;
text-align: center;
font-size: 1.1em;
box-shadow: 0 0 10px darkgrey inset;
}
JavaScript
这个JavaScript脚本的主要作用是防止按下回车键的时候表单提交，以及检查输入内容是否为空。
var addForm = document.getElementById('addForm')
var title = document.getElementById('title')
var content = document.getElementById('content')
addForm.onkeydown = function (ev) {
if (ev.keyCode === 13) {
return false
}
}
addForm.onsubmit = function () {
if (title.value === '') {
alert('标题不能为空！')
return false
} else if (content.value === '') {
alert('内容不能为空！')
return false
} else {
return true
}
}
添加留言功能的实现
前面提到了，添加留言的本质与注册一样是向数据库中插入信息，所以把register.php改了改就拿来用了。
这里多了一个checkBlank()函数，用于检查输入的内容是否为空。
add.php
<?php
/**
* 添加留言
* @Author NullP0
*/
session_start();
include_once 'connect.php';
function checkBlank($content) {
if ($content === '') {
die('输入的内容不能为空！');
}
}
if (!isset($_SESSION['username'])) {
die('<script>alert("请先登录！"); document.location.href = "./html/login.html"</script>');
}
// 用户的数据：用户名、标题、内容
$user = $_SESSION['username'];
$title = $_POST['title'];
$content = $_POST['content'];
checkBlank($title);
checkBlank($content);
mysqli_select_db($con, 'message'); // 选择数据库
mysqli_set_charset($con, 'utf-8'); // 选择字符集
// 当用户点击提交按钮时，向数据库插入留言信息，并返回提示信息、回到首页
if ($_POST['title'] && $_POST['content']) {
$sql = "insert into message(user, title, content, time)values('$user','$title','$content',now())";
$result = mysqli_query($con, $sql);
if ($result) {
echo '<script>alert("添加成功！"); document.location.href = "index.php"</script>';
mysqli_close($con);
} else {
die('添加失败！');
}
}
?>
网友评论