网页制作实现评论comment功能

作者: Emily的生活部落格 | 来源:发表于2017-05-07 00:29 被阅读0次

网页制作实现评论comment功能
Hexo评论功能的实现：Gitalk
【35】Wordpres评论回复表单跟随
在Django的textField中添加表情符号
在Django的textField中添加表情符号
【一】初识JavaScript
JavaScript相关知识介绍
《网页制作》在线练习14
《网页制作》在线练习17
《网页制作》在线练习②

从网上找到一个能实现简单comment功能的教程，有See Demo可以提前预览效果，而且作者也很贴心地在网页下方公布了完整的code, 所以我最终决定使用这个教程。

网址：http://talkerscode.com/webtricks/simple-instant-comment-system-using-ajax.php

这个实时评论功能使用到Ajax、PHP 和 MySQL 三部分知识。在前一个有关 XAMPP 的教程的基础上，我对 PHP 和 MySQL 有了一点了解，至于 Ajax 我是完全不了解，基础功不扎实导致即使拷贝下程序放到 IDE 中编译，也遇到各种各样的问题。

我不是一个会看参考书的人，我学知识都是基于自己的兴趣，然后再借助网络的力量，遇到不懂的就问
google 老师（至于为什么不问度娘？我总是找不到答案），循序渐进地把各个知识点补全。

在这样一个看似都准备好一切，只需轻点“运行”按钮，就可以看到结果的程序，我也花费了一些时间去调试。原因在我看来，有以下几点：

编译环境不同
文件放置路径不同
语法过时，需要更新

图一

在编译过程中，我遇到了许多障碍，现在我把遇到的问题和解决方法总结下来，希望可以为使用这份教程的学友提供帮助。

问题一：comments.php 文件无法引用 comment_style.css 文件。后来发现是路径需要修改。
问题一参考资料：
https://segmentfault.com/q/1010000004438063/a-1020000004438890

问题二：缺少显示已有评论内容部分。

图二
考虑出现这样的问题，可能是由于我使用的编译环境不能完整显示代码的初衷，或者部分代码已过时，需要进一步更新。于是我选择一步步调试程序，找到问题所在。我使用的编译工具是 Brackets, 可在Extension Manager 中下载 PHP Debugger 插件。安装插件的过程参见：https://www.youtube.com/watch?v=ejbWCxpejhI
我在安装 PHP Debugger 过程中遇到了一点小麻烦，就是 php.ini 文件中缺失 xdebug 部分，因此无法对其进行修改。在大量查阅网上资料后，我认定我下载的 XAMPP 版本可能取消了 xdebug，我试了下 XAMPP for Windows 5.6.12 版本 xdebug 可用。但是这个版本的Apache 会与 xdebug 的 port 冲突，需要响应进行修改。
问题二参考资料：
安装 xdebug
http://stackoverflow.com/questions/41368941/xdebug-configuration-missing-from-php-ini-in-xampp
https://gist.github.com/odan/1abe76d373a9cbb15bed
https://netbeans.org/kb/docs/php/configure-php-environment-windows_zh_CN.html
https://community.apachefriends.org/viewtopic.php?p=249717&sid=10911a8aaef96ea15b541060b9d47e2c
修改 Apache 配置
http://stackoverflow.com/questions/18300377/xampp-apache-error-apache-shutdown-unexpectedly

问题三：调试后发现 mysql_query() 函数没有起到查询数据库的作用，于是选择用 PDO 代替。
问题三参考资料：
http://stackoverflow.com/questions/21353448/how-to-do-mysql-query-to-pdo

问题四：修改自闭合script标签
问题三参考资料：https://www.zhihu.com/question/36774461

问题五：注意 $.ajax() 方法中的 URL 路径
问题五参考资料：
https://openenergymonitor.org/forum-archive/node/107.html

综上所述，我把修改好的 code 贴出来，学友们可在此基础上自由发挥！

步骤一：建立数据库存储 comment 内容，方便调取和查找。

CREATE DATABASE `testdb`;
USE `testdb`;
CREATE TABLE IF NOT EXISTS `users` (
 `id` int(8) NOT NULL AUTO_INCREMENT,
 `name` varchar(30) NOT NULL,
 `email` varchar(60) NOT NULL,
 `password` varchar(40) NOT NULL,
 PRIMARY KEY (`id`),
 UNIQUE KEY `email` (`email`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

步骤二：建立 PHP 文件，程序从这里开始运行。

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="../test/css/comment_style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        function post() {
            var comment = document.forms["myForm"]["fcomment"].value
            var name = document.forms["myForm"]["fname"].value
            if (comment && name) {
                $.ajax({
                    url: 'post_comments.php',
                    type: 'post',
                    //  dataType:'json',
                    data: {
                        user_comm: comment,
                        user_name: name
                    },
                    success: function(response) {
                        document.getElementById("all_comments").innerHTML = response + document.getElementById("all_comments").innerHTML;
                        document.getElementById("comment").value = "";
                        document.getElementById("username").value = "";
                    }
                });
            }
        }
    </script>
    <!--
<script>
function post()
    {
  var comment = document.getElementById("comment").value;
  var name = document.getElementById("username").value;
  if(comment && name)
  {
   alert("Name must be filled out");
    };
  }
</script>
-->
</head>
<body>
    <div class="col-md-12 colcol">
        <h1>Instant Comment System Using Ajax,PHP and MySQL</h1>
        <form name="myForm" method="post" action="" onsubmit="return post()">
            <textarea id="comment" name="fcomment" placeholder="Write Your Comment Here....."></textarea>
            <br>
            <input type="text" id="username" name="fname" placeholder="Your Name">
            <br>
            <input id="submit" type="submit" value="Post Comment">
        </form>
        <div id="all_comments">
            <?php
    $host="localhost";
    $username="root";
    $password="";
    $databasename="testdb";

//   $connect=mysql_connect($host,$username,$password);
//    if (!$connect) {
//    die('Not connected : ' . mysql_error());
//}
//    $db=mysql_select_db("testdb");
//    if (!$db) {
//    die ('Can\'t use testdb : ' . mysql_error());
//}     
//    $comm = mysql_query('SELECT name FROM `comments`');
      
$dbo = new PDO("mysql:host=localhost;dbname=testdb", "root", "");
// Construct a query
$query = "SELECT * FROM comments";
// Send the query
$qresult = $dbo->query($query);
while($row = $qresult->fetch(PDO::FETCH_ASSOC)) {
    //$result[] = $row;
      $name=$row['name'];
      $comment=$row['comment'];
      $time=$row['post_time'];
      ?>
                <div class="comment_div">
                    <p class="name">Posted By:
                        <?php echo $name;?>
                    </p>
                    <p class="comment">
                        <?php echo $comment;?>
                    </p>
                    <p class="time">
                        <?php echo $time;?>
                    </p>
                </div>
                <?php
}
// Free used resources
$qresult->closeCursor();
$dbo = null;
 ?>
        </div>
    </div>
</body>
</html>

步骤三：建立执行存储 comment 的 PHP 文件，便于步骤二的 $.ajax() 方法使用。

<?php
$host="localhost";
$username="root";
$password="";
$databasename="testdb";
$link = new PDO("mysql:host=localhost;dbname=testdb", "root", "");
 if (!$link) {
    die('Not connected : ' . mysql_error());
 }     
if(isset($_POST['user_comm']) && isset($_POST['user_name']) )
{
  $statement = $link->prepare("INSERT INTO comments(name, comment, post_time)VALUES(:name,:comment, CURRENT_TIMESTAMP)");
  $statement->bindParam(':name',$_POST['user_name']);
  $statement->bindParam(':comment',$_POST['user_comm']);
  $statement->execute();  
}
// Step 5: Free used resources
//$statement->closeCursor();
//$link = null;
 ?>

步骤四：创建 CSS 文件，为网页“化个妆”。

body
{
    text-align:center;
    font-family:helvetica;
    background-color:#A9D0F5;
}
h1
{
    color:blue;
    text-align:center;
    margin-top:100px;
}
textarea
{
    width:500px;
    height:100px;
    border:1px solid silver;
    border-radius:5px;
    font-size:17px;
    padding:10px;
    font-family:helvetica;
}
input[type="text"]
{
    width:500px;
    height:35px;
    border:1px solid silver;
    margin-top:10px;
    border-radius:5px;
    font-size:17px;
    padding:10px;
    font-family:helvetica;
}
input[type="submit"]
{
    width:150px;
    height:40px;
    border:none;
    background-color:#2E64FE;
    color:white;
    margin-top:10px;
    border-radius:5px;
    font-size:17px;
}
.comment_div
{
    width:500px;
    background-color:white;
    margin:auto;    
}
.comment_div .name
{
    height:30px;
    line-height:30px;
    padding:10px;
    background-color:grey;
    color:white;
    text-align:left;
   
}
.comment_div .comment
{
    padding:10px;
    text-align:left;
}
.comment_div .time
{
    font-style:italic;
    padding:10px;
    background-color:grey;
    color:white;
    text-align:left;
}

不积跬步，无以至千里，让我们一起前进！