网页制作实现评论comment功能

从网上找到一个能实现简单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 文件，程序从这里开始运行。

    
    
    
    


    

        
Instant Comment System Using Ajax,PHP and MySQL
        

            
            

            
            

            
        
        

            query($query);
while($row = $qresult->fetch(PDO::FETCH_ASSOC)) {
    //$result[] = $row;
      $name=$row['name'];
      $comment=$row['comment'];
      $time=$row['post_time'];
      ?>
                

                    
Posted By:
                        
                    
                    

                        
                    
                    

                        
                    
                
                closeCursor();
$dbo = null;
 ?>
        
    

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

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;
}

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

更多内容请关注我的网站 www.emiluo.com