ข้ามไปยังเนื้อหาหลัก
itOffside
Onmobile อ่าน 13 นาที 35 ความเห็น

PHP Workshop ระบบกระทู้ ถาม ตอบ (Webboard)

PHP
PHP Workshop ระบบกระทู้ ถาม ตอบ (Webboard)

ในปัจจุบันระบบ Webboard หรือกระทู้ถามตอบเป็นที่นิยมใช้งานเป็นอย่างมาก เนื่องจากเป็นระบบที่โต้ตอบระหว่างผู้ตั้งคำถามและผู้ตอบคำถาม ทำให้ผู้ตั้งคำถามและผู้เข้ามาอ่านใน Webboard ได้รับประโยชน์ ซึ่งในบทความนี้ผมทำเป็นระบบ Webboard อย่างง่ายๆเพื่อให้ผู้อ่านทุกคน ได้เข้าใจการทำงานและนำไปประยุกต์ใช้งานให้เหมาะสมกับระบบของคุณ

ภาพรวมของไฟล์ที่จำเป็นต้องสร้างมีดังนี้

1. new_topic.php
2. add_new_topic.php
3. main_webboard.php
4. view_topic.php
5. add_answer.php

ขั้นตอน
1. สร้างฐานข้อมูลชื่อ webboard และสร้างตาราง 2 ตารางชื่อ questions และ answers ตามลำดับ

php-workshop-webboard
รูปภาพการสร้างฐานข้อมูลและตารางข้อมูล

Script สำหรับ สร้างตาราง

--
-- Table structure for table `answers`
--

CREATE TABLE IF NOT EXISTS `answers` (
`id` int(11) NOT NULL,
  `name` varchar(70) COLLATE utf8_unicode_ci NOT NULL,
  `email` varchar(70) COLLATE utf8_unicode_ci NOT NULL,
  `detail` longtext COLLATE utf8_unicode_ci NOT NULL,
  `question_id` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;

-- --------------------------------------------------------

--
-- Table structure for table `questions`
--

CREATE TABLE IF NOT EXISTS `questions` (
`id` int(11) NOT NULL,
  `topic` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `detail` longtext COLLATE utf8_unicode_ci NOT NULL,
  `name` varchar(70) COLLATE utf8_unicode_ci NOT NULL,
  `email` varchar(70) COLLATE utf8_unicode_ci NOT NULL,
  `created` datetime NOT NULL,
  `view` int(4) NOT NULL,
  `reply` int(4) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;

--
-- Indexes for table `answers`
--
ALTER TABLE `answers`
 ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `answers`
--
ALTER TABLE `answers`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
--
-- AUTO_INCREMENT for table `questions`
--
ALTER TABLE `questions`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- Indexes for table `questions`
--
ALTER TABLE `questions`
 ADD PRIMARY KEY (`id`);

2. สร้างโปรเจ็คงานชื่อ webboard ขึ้นมาจากโปรแกรม netbeansIDE (วิธีการสร้างโปรเจคงานคลิกที่นี้)

รูปภาพการสร้างโปรเจค
รูปภาพการสร้างโปรเจค

3. สร้างไฟล์ connect.php เพื่อเชื่อมต่อฐานข้อมูล

<?php
/*
* connection database
*/
$Connect = mysql_connect('localhost', 'root', '') or die('Error connecting to MySQL');
mysql_select_db('webboard', $Connect) or die('Database sysapp does not exist!');
mysql_query('SET NAMES UTF8');
?>

4. สร้างไฟล์ new_topic.php แล้วนำ Code ด้านล่างใส่ลงไปในไฟล์

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="language" content="en" />
 <title>ตั้งกระทู้</title>
 </head>
 <body>
 <form id="new_topic" name="new_topic" method="post" action="add_new_topic.php">
 <table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#000000">
 <tr>
 <td>
 <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
 <tr>
 <td colspan="3" bgcolor="#000000"><b style="color: #FFFFFF;">ตั้งกระทู้</b> </td>
 </tr>
 <tr>
 <td width="30%" style="text-align: right;"><strong>ชื่อหัวข้อกระทู้</strong></td>
 <td width="70%"><input name="topic" type="text" id="topic" size="50" /></td>
 </tr>
 <tr>
 <td valign="top" style="text-align: right;"><strong>รายละเอียด</strong></td>
 <td><textarea name="detail" cols="50" rows="5" id="detail"></textarea></td>
 </tr>
 <tr>
 <td style="text-align: right;"><strong>ชื่อผู้ตั้งกระทู้</strong></td>
 <td><input name="name" type="text" id="name" size="50" /></td>
 </tr>
 <tr>
 <td style="text-align: right;"><strong>อีเมล์ผู้ตั้งกระทู้</strong></td>
 <td><input name="email" type="text" id="email" size="50" /></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td><input type="submit" name="Submit" value="บันทึกข้อมูล" /> 
 <input type="reset" name="Submit2" value="ล้างข้อมูล" /></td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 </form>
 </body>
</html>

ผลลัพธ์

รูปภาพจากไฟล์ add_topic.php
รูปภาพจากไฟล์ new_topic.php

คำอธิบายการทำงานในไฟล์นี้ : ไฟล์นี้มีหน้าที่สร้างหน้าจอการตั้งกระทู้ เพื่อส่งข้อมูลฟอร์มให้กับไฟล์ add_new_topic.php

5. สร้างไฟล์ add_new_topic.php แล้วนำ code ด้านล่างไปใส่

<?php

require 'connect.php';
$topic = trim($_POST['topic']);
$detail = trim($_POST['detail']);
$name = trim($_POST['name']);
$email = trim($_POST['email']);
$created = date('Y-m-d H:i:s');

$sql = "INSERT INTO questions (topic,detail,name,email,created) VALUES ";
$sql .= "('{$topic}','{$detail}','{$name}','{$email}','{$created}')";
$query = mysql_query($sql);
if ($query == TRUE) {
 echo "Success!<BR>";
 echo "<a href='main_webboard.php'>Back to view your topic.</a>";
}
mysql_close();

ผลลัพธ์

เมื่อผู้ใช้กรอกข้อมูล
เมื่อผู้ใช้กรอกข้อมูล
ระบบทำการบันทึกข้อมูลแล้วและแจ้งให้ผู้ใช้รับทราบ
ระบบทำการบันทึกข้อมูลแล้วและแจ้งให้ผู้ใช้รับทราบ

คำอธิบายการทำงานในไฟล์นี้ : ไฟล์นี้ทำหน้าที่บันทึกข้อมูลลงฐานข้อมูล(Mysql) ถ้าหากบันทึกข้อมูลสำเร็จจะแสดงหน้าจอแจ้งว่าสำเร็จ(Success!) และแสดงลิงค์ให้ผู้ใช้กดกลับไปหน้าหลักของระบบ Webboard

6. สร้างไฟล์ main_webboard.php แล้วนำ code ด้านล่างไปใส่ ซึ่งหน้าที่ของไฟล์นี้คือเป็นหน้าจอแสดงหัวข้อกระทู้ต่างๆ

<?php
require 'connect.php';
$sql = "SELECT * FROM questions ORDER BY id DESC ";
$query = mysql_query($sql);
?>
<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="language" content="en" />
 <title>ระบบ Webboard กระทู้ ถาม ตอบ</title>
 <style type="text/css">
 a{
 text-decoration: none;
 color: #666666;
 }
 a:hover{
 color: yellowgreen;
 }
 .table{
 padding: 0;
 width: 800px;
 font-size: 13px;
 }
 table.table thead tr{
 background-color: #000000;
 color: #FFFFFF;
 }
 table.table thead tr th{
 border: 1px solid #CCCCCC;
 padding: 5px;
 margin: 0px;
 }
 table.table tbody tr td{
 border-bottom: 1px solid #CCCCCC;
 padding: 5px;
 }
 </style>
 </head>
 <body>
 <a href="new_topic.php">ตั้งกระทู้ คลิกที่นี้</a>
 <table border="0" cellpadding="0" cellspacing="0" align="center" class="table">
 <thead>
 <tr>
 <th style="width: 30px;">ลำดับ</th>
 <th>หัวข้อกระทู้</th>
 <th style="width: 50px;">อ่าน</th>
 <th style="width: 50px;">ตอบ</th>
 <th style="width: 150px;">วันที่ตั้งกระทู้</th>
 </tr>
 </thead>
 <tbody>
 <?php
 $i = 1;
 while ($result = mysql_fetch_assoc($query)) {
 ?>
 <tr>
 <td style="text-align: center;"><?php echo $i; ?></td>
 <td><a href="view_topic.php?id=<?php echo $result['id']; ?>"><?php echo $result['topic']; ?></a></td>
 <td style="text-align: center;"><?php echo $result['view']; ?></td>
 <td style="text-align: center;"><?php echo $result['reply']; ?></td>
 <td style="text-align: center;"><?php echo $result['created']; ?></td>
 </tr>
 <?php
 $i++;
 }
 ?>
 </tbody>
 </table>

 </body>
</html>
<?php
mysql_close();
?>

ผลลัพธ์

php-workshop-webboard-06
แสดงรายละเอียดกระทู้ต่างๆ

7. สร้างไฟล์ view_topic.php แล้วนำ code ด้านล่างใส่

<?php
require 'connect.php';
//question
$sql = "SELECT * FROM questions WHERE id='{$_GET['id']}' ";
$query = mysql_query($sql);
$result = mysql_fetch_assoc($query);

// answer
$sql_a = "SELECT * FROM answers WHERE question_id='{$_GET['id']}' ";
$query_a = mysql_query($sql_a);
$rows_a = mysql_num_rows($query_a);

// update view
$sql_u = "UPDATE questions SET view=view+1 WHERE id='{$_GET['id']}' ";
mysql_query($sql_u);
?>
<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="language" content="en" />
 <title>รายละเอียดกระทู้</title>
 <style type="text/css">
 body{
 font-size: 13px;
 }
 </style>
 </head>
 <body>
 <table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#000000">
 <tr>
 <td>
 <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
 <tr>
 <td colspan="3" bgcolor="#000000">
 <b style="color: #FFFFFF;"><?php echo $result['topic']; ?></b></td>
 </tr>
 <tr>
 <td valign="top"><?php echo nl2br($result['detail']); ?></td>
 </tr>
 <tr>
 <td>
 <strong>ชื่อผู้ตั้งกระทู้ :</strong> <?php echo $result['name']; ?>
 <strong>อีเมล์ผู้ตั้งกระทู้ :</strong> <?php echo $result['email']; ?>
 </td>
 </tr>
 <tr>
 <td style="text-align: right;">
 <strong>วันที่ตั้งกระทู้ :</strong> <?php echo $result['created']; ?>
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <?php
 if ($rows_a > 0) {
 $i = 1;
 while ($result_a = mysql_fetch_assoc($query_a)) {
 ?>
 <table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#000000" style="margin-top:10px;">
 <tr>
 <td>
 <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
 <tr>
 <td width="30%" style="text-align: right;"><strong>ชื่อผู้ตอบ</strong></td>
 <td width="70%"><?php echo $result_a['name']; ?></td>
 </tr>
 <tr>
 <td valign="top" style="text-align: right;"><strong>อีเมล์</strong></td>
 <td><?php echo $result_a['email']; ?></td>
 </tr>
 <tr>
 <td style="text-align: right;"><strong>รายละเอียดคำตอบ</strong></td>
 <td><?php echo nl2br($result_a['detail']); ?></td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <?php
 }
 } else {
 ?>
 <p style="text-align: center;color: red;">ไม่มีคำตอบ</p>
 <?php
 }
 ?>

 <form id="add_answer" name="add_answer" method="post" action="add_answer.php">
 <table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="blue" style="margin-top:15px;">
 <tr>
 <td>
 <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
 <tr>
 <td colspan="3" bgcolor="blue"><b style="color: #FFFFFF;">ตอบคำถาม</b> </td>
 </tr>
 <tr>
 <td valign="top" style="text-align: right;"><strong>รายละเอียด</strong></td>
 <td><textarea name="detail" cols="50" rows="5" id="detail"></textarea></td>
 </tr>
 <tr>
 <td style="text-align: right;"><strong>ชื่อผู้ตอบ</strong></td>
 <td><input name="name" type="text" id="name" size="50" /></td>
 </tr>
 <tr>
 <td style="text-align: right;"><strong>อีเมล์ผู้ตอบ</strong></td>
 <td><input name="email" type="text" id="email" size="50" /></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>
 <input type="submit" name="submit" value="บันทึกข้อมูล" /> 
 <input type="button" name="Submit2" value="กลับ" onclick="history.back();" />
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <input type="hidden" name="id" value="<?php echo $result['id']; ?>">
 </form>
 </body>
</html>
<?php
mysql_close();

ผลลัพธ์
php-workshop-webboard-07

คำอธิบาย code : ไฟล์ view_topic.php มีหน้าที่แสดงรายละเอียดกระทู้และคำตอบที่ตอบในกระทู้นั้นๆ และระบบยังมีกล่องข้อความให้ผู้ใช้งานเขียนคำตอบเข้ามาตอบได้

8. สร้างไฟล์ add_answer.php แล้วนำ code ด้านล่างใส่

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    require 'connect.php';
    $detail = trim($_POST['detail']);
    $name = trim($_POST['name']);
    $email = trim($_POST['email']);

    $sql = "INSERT INTO answers (detail,name,email,question_id) VALUES ";
    $sql .= "('{$detail}','{$name}','{$email}','{$_POST['id']}')";
    $query = mysql_query($sql);
    
    // update
    mysql_query("UPDATE questions SET reply=reply+1 WHERE id='{$_POST['id']}' ");
    if ($query == TRUE) {
        echo "Success!<BR>";
        echo "<a href='view_topic.php?id=$_POST[id]'>Back to view your topic.</a>";
    }
    mysql_close();
}

คำอธิบาย : หลังจากมีผู้ใช้เขียนคำตอบลงไปในฟอร์ม ไฟล์นี้จะทำหน้าที่บันทึกเข้าสู่ฐานข้อมูล

ดาวน์โหลดไฟล์และฐานข้อมูล(Database Mysql) ได้ คลิกที่นี้

จบแล้วเรียบร้อยสำหรับระบบ Webboard กระทู้ ถาม ตอบ แบบง่ายๆที่ผู้อ่านสามารถเข้าใจง่าย หากมีข้อสงสัยหรือปัญหา เขียน comment ด้านล่าง ครับ

#php #php5 #netbeans #MySQL #database #php workshop #webboard

แชร์บทความนี้

แชร์ไปยัง Facebook แชร์ไปยัง X แชร์ไปยัง LINE
Onmobile

โปรแกรมเมอร์

ความเห็น (35)

  • Fonrary
    ทำไมผมแอดคำถามแล้วมันเด้งไปหน้าสีขาวๆอะไม่มีอะไรเกิดขึ้นเลยแก้ยังไงเหรอครับ ขอบคุณครับ
    • Onmobile ผู้เขียน
      code ผิด ครับอาจเกิดจาก การเชื่อมต่อฐานข้อมูลไม่ได้หรือ query ผิด ครับ ลองเช็คดูอีกรอบครับ
  • sabarahay
    ขอบคุณมากครับ เอาไปใช้งานแล้วได้จริงๆ^^ สุดยอดครับที่แบ่งปัน
  • Gna
    ขอบคุณมากค่ะ พี่เก่งมากๆ
  • มือใหม่
    แล้วจะลบกระทู้ยังไงหรอครับ ทำไม่เป็นอ่า
  • Onmobile ผู้เขียน
    นำไปประยุกต์ใช้ครับ เช่นสร้างหน้า delete ขึ้นมาแล้วเขียนคำสั่ง delete from....
  • jj
    คือว่าพอเพิ่มคำตอบแล้วคำตอบที่มีอยู่ก่อนหน้ามันรีค่าเป็นอันใหม่ที่เราเพิ่มเข้าไปหมดเลย แก้ไงอ่า
  • supian
    ขอคุณมากครับ สำหรับ ความรู้ดีๆ เอาใว้ศึกษา ครับ ปล:
  • Ekkaphon Saenphan
    สอบถามหน่อยครับ พอจะมีวิธีการสร้าง กระดาน comment แบบเว็บนี้ไหมครับต้องทำอย่างไรบ้างครับที่มี reply แบบที่ comment อยู่นี่น่ะครับ
  • SSSSS
    ทำไหมมัน Eroro ขึ้นว่า Not Fount The requested URL /webboard/view_topic.php was not found on this server. เหมือนใันเกี่ยวกับผิดพลาดอะไรกับดาต้าเบสเลย
  • วุฒิชัย
    สอบถามครับ Code เป็น html นำมาใช้กับ Php ไห้ไหมครับ
    • Onmobile ผู้เขียน
      html กับ php เป็นภาษา เอามาใช้ร่วมกันได้ครับ
  • Soraya asigun
    พี่คะ อาจารย์หนูทำอันนี้ไปเป็นข้อสอบวิชาphp. แต่คือหนูกับเพื่อนรันกี่รอบก็ไม่ผ่าน ตรวจโค๊ดซ้ำไปซ้ำมา ที่สงสัยคือข้อสองจำเป็นต้องสร้างขึ้นมาไหมคะที่สร้างในเน็ตบีนอะค่ะ
    • Onmobile ผู้เขียน
      ถ้ามีโปรเจคอยู่แล้วไม่ต้องสร้างครับ
  • M
    ดั่งฟ้ามาโปรด ขอบุณมากครับพี่
  • mos
    พี่ครับ root ผมใส่หรัสผ่านจะต้องเพิ่มอะไรไหม
    • Onmobile ผู้เขียน
      แก้ไขรหัสที่ไฟล์ connect.php ครับ
  • mos
    ใช่ครับต้องเพิ่มตรงไหนอ่าครับ
  • หญิง
    พี่ค่ะ จะลบกะทู้ต้องทำไงค่ะ
    • Onmobile ผู้เขียน
      ต้องทำระบบสมาชิกเพิ่มโดยให้ มีสิทธิ์ในการลบกระทู้ ครับ คำสั่งในการลบกระทู้ประมาณนี้นะ delete from quations where id='1'
      • หญิง
        พี่มีตัวอย่างระบบสมาชิกไหมค่ะ
  • popcorn
    มันขึ้นหน้าจอสีขาวหมดเลย คะ
  • ยิ้มยิ้ม
    ทำไมเวลาเวลาตอบกระทู้ ตรงหน้า mainwebboard มันไม่ขึ้น ยอด ตอบ คะ มันขึ้นค่าเป็น 0
  • mhadee
    พี่ เเล้ว ไฟล์ mail ล่ะไว้ส่งเมลล์ ใช่ไหม ครับเเต่ทำไหม ของผมส่งไม่ได้ล่ะครับ
    • Onmobile ผู้เขียน
      บทความนี้ไม่มีเนื้อหากับส่งเมล์นะครับ มีแต่เนื้อหาสร้างกระทู้อย่างเดียว
  • สุ
    Error connecting to MySQL เปนงี้
  • mint
    สอบถามค่ะ ถ้าเรามีเว็บของเราอยู่แล้ว เราจะเอาwebboardไปเชื่อมกับเว็บเรายังไงคะ แล้วจะอัพขึ้นโฮสยังไงคะ
    • Onmobile ผู้เขียน
      เพิ่มเมนูแล้วก็ให้ชี้ไปที่ลิงค์ไฟล์ครับ เราอาจจะเปลี่ยนชื่อไฟล์ให้เหมาะสม ด้วยครับ
  • ดูความเห็นเพิ่มเติม

แสดงความเห็น

ไม่แสดงบนหน้าเว็บ

บทความที่เกี่ยวข้อง