用php实现写博客,查看列表,编辑博客,删除博客的小功能,用了bootstrap框架,用了ueditor编辑器。
主要代码如下:
博客编辑页面
效果图
主要代码
blog.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<title>博客</title>
</head>
<body>
<div class="container">
<!-- <form> 标签的 enctype 属性规定了在提交表单时要使用哪种内容类型。在表单需要二进制数据时,比如文件内容,请使用 "multipart/form-data"。 -->
<!--点击保存修改就跳转到add.php-->
<form class="form-horizontal" action="add.php" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="blogTitle" class="col-sm-2 control-label">博文标题</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="blogTitle" placeholder="博文标题" name="title">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">文章类别</label>
<div class="col-sm-10">
<select class="form-control" name="leibie">
<option>-选择文章类别-</option>
<option>Web前端</option>
<option>后台开发</option>
<option>架构设计</option>
<option>UI</option>
<option>项目需求</option>
</select>
</div>
</div>
<div class="form-group">
<label for="author" class="col-sm-2 control-label">作者</label>
<div class="col-sm-10">
<input type="text" name="author" class="form-control" id="author" placeholder="作者">
</div>
</div>
<div class="form-group">
<label for="cover" class="col-sm-2 control-label">封面图</label>
<div class="col-sm-10">
<!-- <input> 标签的 type="file" 属性规定了应该把输入作为文件来处理。举例来说,当在浏览器中预览时,会看到输入框旁边有一个浏览按钮。 -->
<input type="file" name="fileUpload" />
</div>
</div>
<div class="form-group">
<label for="author" class="col-sm-2 control-label">博文简介</label>
<div class="col-sm-10">
<textarea class="form-control" rows="3" placeholder="输入博文简介" name="jianjie"></textarea>
</div>
</div>
<div class="form-group">
<label for="author" class="col-sm-2 control-label">博文内容</label>
<div class="col-sm-10">
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</div>
</div>
<div class="form-group">
<div class="col-sm-2 col-sm-offset-6 ">
<button type="submit" class="btn btn-primary">保存修改</button>
</div>
</div>
</form>
</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</html>
写入数据库
点击发表博客后跳转到add.php,写入数据库
效果图
主要代码
add.php
<?php
header("Content-type:text/html;charset=utf-8");
// 保持格式的统一性
echo "<pre>";
// var_dump() 函数返回变量的数据类型和值
// 预定义的 $_POST 变量用于收集来自 method="post" 的表单中的值。
var_dump($_POST);
echo "</br>";
// 通过使用 PHP 的全局数组 $_FILES,你可以从客户计算机向远程服务器上传文件。这里指的是图片
var_dump($_FILES);
// 通过年月日加随机数给图片命名
$img=date("Ymn",time()).rand(100,999);
// 移动位置
move_uploaded_file($_FILES["fileUpload"]["tmp_name"], "./image/{$img}.png");
// 获取内容
$_POST['content']=htmlspecialchars($_POST['content']);
// 数据库
$servername = "";
$username = "";
$password = "";
$dbname = "";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检测连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// 设置编码格式
$conn->query('set names utf8');
// sql语句
$sql = "insert into blog (title, leibie, author, cover,jianjie,content) values('{$_POST['title']}','{$_POST['leibie']}','{$_POST['author']}','./image/{$img}.png','{$_POST['jianjie']}','{$_POST['content']}')";
if ($conn->query($sql) === TRUE) {
echo "新记录插入成功";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
// 跳转到列表页
header("location:http://localhost/blog/liebiao.php");
$conn->close();
列表页
写入数据库后跳转到列表页
效果图
主要代码
列表页代码:
liebiao.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<title>文章列表</title>
</head>
<body>
<div class="container">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>博文标题</th>
<th>文章类别</th>
<th>作者</th>
<th>博文简介</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- html代码中嵌套php -->
<?php
header("Content-type:text/html;charset=utf-8");
//数据库
$servername = "";
$username = "";
$password = "";
$dbname = "";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// sql语句
$sql = "SELECT * FROM blog";
// 设置编码格式
$conn->query('set names utf8');
$result = $conn->query($sql);
$data = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$data[] = $row;
}
} else {
echo "0 结果";
}
$conn->close();
// 获取数据库内容
// 关联数组
// <a href='bianji.php?id={$data[$i]['id']}'>编辑</a>跳转,并传一个参数
// <a href='delete.php?id={$data[$i]['id']}'>删除</a>
for($i=0;$i<count($data);$i++){
echo "<tr><th scope='row'>{$data[$i]['id']}</th><td>{$data[$i]['title']}</td><td>{$data[$i]['leibie']}</td><td>{$data[$i]['author']}</td><td>{$data[$i]['jianjie']}</td><td><button type='button' class='btn btn-info'><a href='bianji.php?id={$data[$i]['id']}'>编辑</a></button> <button type='button' class='btn btn-danger'><a href='delete.php?id={$data[$i]['id']}'>删除</a></button></td></tr>";
}
?>
</tbody>
</table>
</div>
</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</html>
编辑页面
点击编辑就会跳转到编辑页面
效果图
主要代码
bianji.php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<title>博客</title>
</head>
<body>
<div class="container">
<!-- 点击保存修改就会跳转到update.php,并更新数据库 -->
<form class="form-horizontal" action="update.php" method="post" enctype="multipart/form-data">
<!-- html代码中嵌套php代码 -->
<?php
header("Content-type:text/html;charset=utf-8");
// 数据库
$servername = "";
$username = "";
$password = "";
$dbname = "";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// sql语句,获取接收到的id对应的内容
$sql = "SELECT * FROM blog WHERE id={$_GET['id']}";
// 设置编码格式
$conn->query('set names utf8');
$result = $conn->query($sql);
$data = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$data[] = $row;
}
} else {
echo "0 结果";
}
$conn->close();
?>
<!-- 把获取的内容输出 -->
<input type="hidden" value="<?php echo $data[0]['id']?>" name='id'>
<div class="form-group">
<label for="blogTitle" class="col-sm-2 control-label">博文标题</label>
<div class="col-sm-10">
<input type="text" value="<?php echo $data[0]['title']?>" class="form-control" id="blogTitle" placeholder="博文标题" name="title">
</div>
</div>
<!-- 文章类别这个太麻烦了,就没有实现输出-->
<div class="form-group">
<label class="col-sm-2 control-label">文章类别</label>
<div class="col-sm-10">
<select class="form-control" name="leibie" >
<option>-选择文章类别-</option>
<option>Web前端</option>
<option>后台开发</option>
<option>架构设计</option>
<option>UI</option>
<option>项目需求</option>
</select>
</div>
</div>
<div class="form-group">
<label for="author" class="col-sm-2 control-label">作者</label>
<div class="col-sm-10">
<input type="text" value="<?php echo $data[0]['author']?>" name="author" class="form-control" id="author" placeholder="作者">
</div>
</div>
<!-- 封面图这个太麻烦了,就没有实现输出-->
<div class="form-group">
<label for="cover" class="col-sm-2 control-label" >封面图</label>
<div class="col-sm-10">
<input type="file" name="fileUpload" text="<?php echo $data[0]['cover']?>" />
</div>
</div>
<div class="form-group">
<label for="author" class="col-sm-2 control-label" >博文简介</label>
<div class="col-sm-10">
<textarea class="form-control" rows="3" placeholder="输入博文简介" name="jianjie" ><?php echo $data[0]['jianjie']?></textarea>
</div>
</div>
<div class="form-group">
<label for="author" class="col-sm-2 control-label">博文内容</label>
<div class="col-sm-6">
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
<?php echo htmlspecialchars_decode($data[0]['content'])?>
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-6 ">
<button type="submit" class="btn btn-primary">保存修改</button>
</div>
</div>
</form>
</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</html>
编辑功能(更新)
点击保存修改后会跳转到update.php,更新数据库后跳转到列表页
主要代码
liebiao.php
<?php
// 设置编码格式
header("content-type:text/html;charset=utf-8");
// 数据库
$servername = "";
$username = "";
$password = "";
$dbname = "";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// 设置编码格式
$con->query("set names utf8");
// 获取修改后的内容
$_POST['content']=htmlspecialchars($_POST['content']);
// 如果没有重新选择图片,则把封面图以外的信息更新到数据库
if($_FILES['fileUpload']['size']==0){
mysqli_query($con,"UPDATE blog SET title='{$_POST['title']}',leibie='{$_POST['leibie']}',author='{$_POST['author']}',jianjie='{$_POST['jianjie']}',content='{$_POST['content']}' WHERE id={$_POST['id']}");
}
// 如果重新选择图片,则把新的封面图和其他信息更新到数据库
else{
$img=date("Ymn",time()).rand(100,999);
move_uploaded_file($_FILES["fileUpload"]["tmp_name"], "./image/{$img}.png");
mysqli_query($con,"UPDATE blog SET title={$_POST['title']},leibie={$_POST['leibie']},author={$_POST['author']},cover='./image/{$img}.png',jianjie={$_POST['jianjie']},content={$_POST['content']} WHERE id={$_POST['id']}");
header("location:http://localhost:8080/20170701php/liebiao.php");
}
// 输出提示信息
echo "修改成功 ";
// 跳转页面
// header("location:http://localhost/blog/liebiao.php");
mysqli_close($con);
?>
删除功能
点击删除按钮就会跳转到delete.php,删除成功后跳转到liebiao.php
主要代码
<?php
// 数据库
$servername = "";
$username = "";
$password = "";
$dbname = "";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检测连接
if (mysqli_connect_errno())
{
echo "连接失败: " . mysqli_connect_error();
}
//var_dump($_GET['id']);
mysqli_query($con,"DELETE FROM blog WHERE id={$_GET['id']}");
echo "删除成功" ;
header("location:http://localhost/blog/liebiao.php");
mysqli_close($con);
?>
删除后的列表页
php博客小作业,这个过程中遇到了一些编码问题~~