วิธีการสร้าง Comment Box สำหรับการแสดงความคิดเห็น ของผู้อ่านบทความ ~ Bookneo

ตอนนี้สิ่งที่เรามีจากบทความที่ผ่านมา คือเรามี CKEditor สำหรับเขียนบทความแล้ว เราก็เรียกบทความจากฐาน ข้อมูลขึ้นมาแสดงได้แล้ว แต่เรายังขาดเครื่องมือที่ทำให้เกิดการแลกเปลี่ยน หรือสอบถามข้อสงสัย หรือคำขอบคุณ ของผู้อ่าน และหรือ อะไรก็แล้วแต่ที่ผู้อ่านบทความของเราต้องการ แสดงความคิดเห็น นั่นก็คือ Comment Box มาดูกันเลยครับ.....

บทความต่อจากนี้ไปผมจะใช้บทความที่ผ่านมาเป็นหลักยึด ในการสร้างบทความต่อๆไป
หากท่านเกิดข้อสงสัยตรงส่วน ใดก็กลับไปเช็คที่บทความก่อนหน้าเอานะครับ....

ในบทความนี้ ผมจะนำเอาสิ่งที่เรามีอยู่แล้วในบทความก่อนๆ สองเรื่องมารวมกันนั่นก็คือ
เรื่อง "วิธีการดึงบทความจาก Database มาแสดงหน้าเว็บไซต์" และ
เรื่อง "UPDATE CKEditor ด้วยการ Config แบบ PHP + เพิ่ม Emotion"
เพื่อให้ง่ายต่อความเข้าใจของเรา..ท่านต้องมีไฟล์ และ โฟล์เดอร์ ตามภาพตัวอย่าง...

โดยสร้างไฟล์เพิ่มขึ้นมาอีก 2ไฟล์ คือ
write_comment.php และ show_comment.php

เริ่มต้นด้วยการสร้างฐานข้อมูลกันก่อน ฐานข้อมูลนี้แยกต่างหากจากฐานข้อมูล ของการเขียนบทความ แต่จะมี
การดึงเอาไอดี (id_article) ของฐานข้อมูลบทความเพื่อเก็บค่าลง ฐานข้อมูลการแสดงความคิดเห็น
(ar_comment) เอาไว้บ่งบอกว่า ความคิดเห็นนี้เป็นของบทความใหน ก็จะไปแสดงที่บทความนั้นๆ....

SQL สร้างตารางฐานข้อมูลสำหรับทดสอบ

CREATE TABLE `ar_comments` (
`id_comment` int(11) NOT NULL AUTO_INCREMENT,
`id_article` int(11) NOT NULL DEFAULT 0,
`name` varchar(255) NOT NULL DEFAULT '',
`email` varchar(255) NOT NULL DEFAULT '',
`comment` text NOT NULL,
`datetime` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
PRIMARY KEY (`id_comment`)
);

จากนั้นก็เปิดไฟล์ show_article_full.php ขึ้นมา แล้วก็ใส่ <div id="showcomment"></div>
เอาไว้รองรับ comment ที่จะนำมาแสดง แล้วก็ include show_comment.php เข้าไป
จากนั้นก็ include ไฟล์ ckemotion.php เข้ามาด้านล่างสุด ดังนี้

<div id="showcomment">
<?php include 'show_comment.php';?>
</div>
<div>    
<?php include 'ckemotion.php';?>   
</div>

Code ที่เสร็จแล้ว
ไฟล์ show_article_full.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="content">
<div><h1>วิธีการดึงบทความจาก Database มาแสดงหน้าเว็บไซต์</h1></div>
<?php
include 'config.php';

$id_article = $_GET['id_article'];//รับค่า id_article

$sql = "select * from myarticles where id_article = '$id_article'
order by id_article";
$result = mysql_query($sql);

$row = mysql_fetch_array($result);
$id_article = $row['id_article'];
$author = $row['author'];
$title = $row['title'];
$article = $row['article'];
$datetime = $row['datetime'];
?>

<table>
<?php
echo "<tr>";
echo "<td>";

echo "<div id='date'>$datetime</div>";
echo "<div id='title'><h2>$title</h2></div>";
echo "<div id='article'>$article</div>";
echo "<div id='float_r'><font color='#64711F'>Post By:</font>
$author</div>";

echo "</td>";
echo "</tr>";
?>
</table>

<br/>
<div id="showcomment">
<?php include 'show_comment.php';?>
</div>
<div>
<?php include 'ckemotion.php';?>
</div>

</div>
</body>
</html>

จากนั้นก็ไปเพิ่มเติม ไฟล์ ckemotion.php ดังนี้
เพิ่มเติม action="write_comment.php" พ่วง id_article เข้าไปด้วย

<form name="myform" method="post" 
action="write_comment.php?id_article=<?=$id_article;?>">....</form>

เมื่อเรากด submit แล้วไฟล์ ckemotion.php ก็จะส่งค่ามาที่ไฟล์ write_comment.php

กรณีที่1
หากว่าท่านต้องการให้บุคคลทั่วไป สามารถโพสแสดงความคิดเห็นได้ ท่านก็ใส่ตรงส่วนนี้เข้าไปด้วย...
เพิ่มเติม name ของผู้แสดงความคิดเห็น ดังนี้

<div id="name">
Name: <input type="text" name="name" size="30"/>
</div>

เพิ่มเติม email ของผู้แสดงความคิดเห็น ดังนี้

<div id="email">
Email: <input type="text" name="email" size="30"/>
</div>

กรณีที่2
แต่ถ้าหากว่าท่านต้องการให้สมาชิกเท่านั้นที่สามารถจะแสดงความคิดเห็นได้ ตรงส่วนนี้ท่านก็ไม่ต้องเพิ่มเติมลงไป
ให้ไปเช็คจากฐานข้อมูลว่าเป็นสมาชิกหรือไม่ ที่ไฟล์ write_comment.php แทน
ในบทความนี้ผมจะเน้นที่ สมาชิกเท่านั้นที่สามารถจะแสดงความคิดเห็นได้....

เสร็จแล้วก็มาสร้างไฟล์ write_comment.php กันก่อน
ไฟล์นี้ทำอะไร!... ไฟล์นี้ไว้สำหรับ รับค่า หรือ ข้อมูลจาก form ckedtor เข้ามาแล้วบันทึกลงฐานข้อมูล
ที่เราได้เตรียมไว้แล้ว สร้างไฟล์ write_comment.php ดังนี้

ไฟล์ write_comment.php
ใส่ <?php ob_start(); ?> ไว้ที่ห้วเพจก่อน เพราะเราต้องส่ง header ออกไป
เริ่มด้วยนำเข้าไฟล์ติดต่อฐานข้อมูล

<?php include 'config.php';?>

ติดต่อฐานข้อมูล table members ว่าเป็นสมาชิกหรือไม่

$id_article = $_GET[id_article]; //รับค่า id_article ที่ส่งมา แบบ GET
$username = $_COOKIE['username'];//เก็บค่า cookie จากการ login ของสมาชิก
$sql = "select * from members where username = '$username'";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
if($num < 1){
//ดักไว้ด้วย javascript ว่าถ้านับแถวในตารางแล้วน้อยกว่า 1 ก็ alert ออกมาว่า....
//แล้วก็ส่งกลับไปที่เดิม
echo "<script type='text/javascript'>alert('กรุณา Login ก่อน');</script>";
echo "<script type='text/javascript'>window.location.href=
'show_article_full.php?id_article=$id_article';</script>";
}

ถ้าไม่ตรงกับเงื่อนไข if ก็รับค่าที่ส่งมาจาก ckeditor แบบ post

else{

$editor1 = $_POST[editor1];
$datetime = date("Y-m-d H:i:s"); //เก็บวันเดือนปีและเวลาด้วย function date
$sql = "insert into ar_comments (id_article,name,comment,datetime) values
('$id_article','$usermane','$editor1','$datetime')";
mysql_query($sql);
mysql_close();//ปิดการเชื่อมต่อฐานข้อมูล แล้วก็ส่งกลับไปที่เดิม
echo "<script type='text/javascript'>window.location.href=
'show_article_full.php?id_article=$id_article';</script>";
}

จบแล้วในเรื่องของการ submit comment ลงฐานข้อมูล
ต่อไปเป็นเรื่องของการดึงข้อมูล comment จาก database มาแสดงที่บทความนั้นๆ ตาม id_article
ตอนเริ่มต้นเราได้สร้าง<div id="showcomment"><?php include 'show_comment.php';?>
</div> เอาไว้แล้ว แต่เรายังไม่มีไฟล์ show_comment.php ดังนั้นเราก็มาสร้างไฟล์นี้กัน

เริ่มด้วยนำเข้าไฟล์ติดต่อฐานข้อมูลเหมือนเดิม...
<?php include 'config.php';?>
แล้วก็รับค่า id_article แบบ GET เพื่อค้นหา comment ของแต่ละ id_article มาแสดง
จากนั้นก็วนลูปออกมาแสดงตามแต่ละบทความต่างๆโดยกำหนดด้วย id_article

Code ที่เสร็จแล้ว
ไฟล์ show_comment.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<?php
include 'config.php';
$id_article = $_GET['id_article'];
$sql = "select * from ar_comments where id_article = '$id_article'
order by id_article ASC";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
$i=0;
while($num > $i){
$row = mysql_fetch_array($result);
$id_comment = $row['id_comment'];
$id_aritcle = $row['id_article'];
$name = $row['name'];
$comment = $row['comment'];
$datetime = $row['datetime'];

echo "<div style='padding-top:20px;'>$comment</div>";
echo "<div style='float:right;'><font color='blue'>$name</font>
<font size='2'>$datetime</font></div>";
echo "<div style='border-bottom:1px dotted #999999;'>&nbsp;</div>";
$i++;
}
?>
</body>
</html>