webboard - itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี https://www.itoffside.com ข้อมูลข่าวสารและเรื่องราวบนโลกของไอทีที่ ล้ำหน้า พร้อมสาระการเขียนโปรแกรมคอมพิวเตอร์ Wed, 09 Nov 2016 12:36:28 +0000 th hourly 1 https://wordpress.org/?v=7.0 https://www.itoffside.com/wp-content/uploads/2020/04/cropped-favicon-96x96-1-32x32.png webboard - itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี https://www.itoffside.com 32 32 Workshop VDO ระบบ Webboard ง่ายๆ https://www.itoffside.com/vdo-workshop-webboard-simple/ https://www.itoffside.com/vdo-workshop-webboard-simple/#comments Wed, 09 Nov 2016 12:35:23 +0000 https://www.itoffside.com/?p=2644 สวัสดีครับ วันนี้ผมมาเสนอการทำระบบ Webboard ง่ายๆ ด้วยการถ่ายทอดผ่านวิดีโอดูบ้างอาจจะพูดไม่ค่อยชัดเจนเท่าไหร ระบบเว็บบอร์ดของผมเป็นเว็บบอร์ดง่ายๆโดยจะมีการตั้งคำถามและตอบคำถาม ซึ่ง workshop webboard นี้ สามารถนำไปต่อยอดได้ ลองเข้ามาชมก่อนนะครับ ต่อตอนที่ 2 ครับ ดาวน์โหลดไฟล์ Source code ประกอบ คลิกเ...

The post Workshop VDO ระบบ Webboard ง่ายๆ first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> สวัสดีครับ วันนี้ผมมาเสนอการทำระบบ Webboard ง่ายๆ ด้วยการถ่ายทอดผ่านวิดีโอดูบ้างอาจจะพูดไม่ค่อยชัดเจนเท่าไหร

ระบบเว็บบอร์ดของผมเป็นเว็บบอร์ดง่ายๆโดยจะมีการตั้งคำถามและตอบคำถาม
ซึ่ง workshop webboard นี้ สามารถนำไปต่อยอดได้

ลองเข้ามาชมก่อนนะครับ

ต่อตอนที่ 2 ครับ

ดาวน์โหลดไฟล์ Source code ประกอบ คลิกเพื่อดาวน์โหลด

The post Workshop VDO ระบบ Webboard ง่ายๆ first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> https://www.itoffside.com/vdo-workshop-webboard-simple/feed/ 4 PHP Workshop ระบบกระทู้ ถาม ตอบ (Webboard) https://www.itoffside.com/php-workshop-webboard/ https://www.itoffside.com/php-workshop-webboard/#comments Wed, 29 Oct 2014 16:13:44 +0000 https://www.itoffside.com/?p=2385 ในปัจจุบันระบบ Webboard หรือกระทู้ถามตอบเป็นที่นิยมใช้งานเป็นอย่างมาก เนื่องจากเป็นระบบที่โต้ตอบระหว่างผู้ตั้งคำถามและผู้ตอบคำถาม ทำให้ผู้ตั้งคำถามและผู้เข้ามาอ่านใน Webboard ได้รับประโยชน์ ซึ่งในบทความนี้ผมทำเป็นระบบ Webboard อย่างง่ายๆเพื่อให้ผู้อ่านทุกคน ได้เข้าใจการทำงานและนำไปประยุกต์ใช้งานให้เ...

The post PHP Workshop ระบบกระทู้ ถาม ตอบ (Webboard) first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> ในปัจจุบันระบบ 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 ด้านล่าง ครับ

The post PHP Workshop ระบบกระทู้ ถาม ตอบ (Webboard) first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> https://www.itoffside.com/php-workshop-webboard/feed/ 35