为个人博客添加文章评论功能

个人博客已经实现了文章的书写和显示功能，为了方便作者与阅读者的交流，我们要实现文章的评论功能。

---

第一步：存储评论内容的数据库表的设计：

对于数据库表结构的设计，我们要包含一下内容：

1. 主键:id，自增，用来标识不同的评论,数据类型为INT。
2. 外键1—article_id,用来标识评论是哪一篇文章的，数据类型为INT。
3. 外键2—user_id,用来标识该评论是哪一位读者写的，数据类型为INT。
4. 评论的内容：comment，数据类型为TEXT。
5. 评论创建的时间：create_time，数据类型为DATE。

下面是数据库表的结构图：

---

第二步：评论区前端页面设计：

我们想要的效果就是在文章的下端有一个区域，为评论区，如下图所示：

要实现这个效果，我们要进行如下步骤：

 1. 一个<p>评论区</p> HTML元素。
 2. 一个<textarea></textarea>标签。
 3. 一个<button>按钮。

实现的HTML代码如下：

<div>
   <p class="small">评论区</p>
   <textarea id="texthelpblock" class="form-control" rows="3">
   </textarea>
   <p class="text-right"><button type="button" class="btn btn-primary btn-xs">提交评论</button></p>
</div>

HTML元素添加完毕以后，我们需要在提交评论前检查文本域内是否为空，当文本域中没有任何字符时，我们并不需要向后台提交数据，而且我们要告知用户，他们这次提交是无效的。这个功能我们使用jQuery来实现：
在< head>< /head>标签中键入一下代码

    <script     src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">

    $(document).ready(function(){
        $("#comment_sub").click(function(){
            if(!$('#comment_text').val())
              $('#warning').html("<div class='alert alert-warning' role='alert'>评论内容不能为空。</div>");
            else
            {
                //将警告区域的信息清除
                $('#warning').html("");
                var content = $('#comment_text').val();
                var mydate = new Date();

                //alert(content);
                                                       $('#content').append(mydate.toLocaleDateString() + "：<br>" + content + "<hr>");

                //清空文本域
                $('#comment_text').val("");

                var article_id = $('#article_id').text();

                //使用ajax来向后台传递数据
                $.ajax({
                        type: "post",
                 url: "scripts/preserve_comment.php",
                 data: {article_id: article_id, content: content, time: mydate},
                 datatype: "json", //回调函数接收数据的格式
                 //函数调用成功后
                 success: function(msg){
                     //什么也不用做
                 },
                 //函数调用失败后，
                 error: function(msg){
                     //弹窗，告知用户写入失败
                     //alert("评论内容写入失败");
                     alert(msg);
                 }
                 });
            } 
        });
    });
    </script>

当添加评论的文本域为空时，用户提交会出现如下图提示：

接着我们需要添加一个HTML元素，来存储文章的id(article_id)，是得ajax函数可以将此id传递到PHP中。

<p id="article_id" class="hidden"><?php echo $article_id ?></p>

---

第三步：提交评论的后端实现：

有了页面上的评论区，我们就可以在对应的文本域中写上自己的评论了，但是我们写上的评论如何保存起来呢，这时候就需要后端的实现了。我们对后端的要求如下：

1. 能够写入到数据库comment表中，记录书写评论的时间和用户名。
2. 只刷新部分页面，并将用户添加的新评论及时的显示到页面上(ajax技术)。
3. 防止SQL注入。

首先我们 创建了一个preserve_comment.php文件，用来将评论内容写入到数据库表中，代码如下：

<?php
header("content-Type: text/html; charset=utf-8");
require_once 'app_config.php';//链接数据库的两个文件
require_once 'database_connection.php';

//通过$_POST来获取信息
$content = trim($_POST['content']);
//$content = "茂升";
//$create_time = trim($_POST['time']);//评论存入时间。
$create_time = date("D F d Y", time());//文章的生成时间;
$user_id = 7;//初期先这么写，后期添加登陆模块以后再修改
$article_id = trim($_POST['article_id']);
//$article_id = 21;

//将ajax传递过来的数据写入到TXT文件中，测试传递数据是否正确
//$myfile = fopen("newfile.txt", "w")
        //or die("Unable to open file!");
//fwrite($myfile, $content);
//fwrite($myfile, $article_id);
//fwrite($myfile, $create_time);


$insert_sql = sprintf("INSERT INTO comment ".
                      "(article_id, user_id," .
                      " content, create_time) ".
                      "VALUES ('%s','%s', '%s', '%s');",
                      mysql_real_escape_string($article_id),
                      mysql_real_escape_string($user_id),
                      mysql_real_escape_string($content),
                      mysql_real_escape_string($create_time)
);

//设置读写数据库的编码方式
mysql_query("set character set 'utf8'");//读库 
mysql_query("set names 'utf8'");//写库 

//将读者评论数据插入到数据库中
mysql_query($insert_sql)
    or die(mysql_error());

?>

这样存储完毕后，我们需要修改index.php文件，保证在加载文章时加载相应的评论，添加代码如下：

//加载文章的评论内容
$comment_res = mysql_query("SELECT * FROM comment WHERE article_id = '$article_id'  ORDER BY create_time DESC");

在存放评论内容的HTML元素处，添加如下代码：

<div><p id="content" class="small">
<?php
    for($i = 0; $i < mysql_num_rows($comment_res); $i++)
    {
     $create_time = mysql_result($comment_res, $i, 'create_time');
     $comm_content = mysql_result($comment_res, $i, 'content');
     echo $create_time . "<br>" . $comm_content . "<hr>";
    }
?>
</p></div>

到这后端就实现了。
欢迎大家来访问我的个人博客：
http://yums467.sinaapp.com/