php博客小作业

来源:互联网 发布:淘宝网大码女装店连衣裙 编辑:程序博客网 时间:2024/06/05 03:34

用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

<?phpheader("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> &nbsp;<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博客小作业,这个过程中遇到了一些编码问题~~