從網上找到一個能實現簡單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;
}
不積跬步，無以至千里，讓我們一起前進！
