การสร้าง Webboard ด้วย Dreamweaver 8

ขั้นตอนการทำ

0. ทำความเข้าใจพื้นฐานเบื่องต้น
*ถ้าสงสัยเรื่องการสร้างฐานข้อมูล อ่านบทความนี้ คลิกที่นี่
**ถ้าสงสัยเรื่องการจำลอง Web Server อ่านบทความนี้ คลิกที่นี่
***ข้อสงสัยอื่นๆ ในตอนนี้พูดคุย ปรึกษากันในบทความนี้ได้เลยครับ ^^!

1. สร้างฐานข้อมูล ชื่อ webboard
CREATE DATABASE `webboard` ;

2. สร้างตารางเก็ขข้อมูล tb_board_quiz
CREATE TABLE `tb_board_quiz` (
`id_quiz` INT( 11 ) NOT NULL AUTO_INCREMENT ,
`title` TINYTEXT NOT NULL ,
`message` TEXT NOT NULL ,
`name` TINYTEXT NOT NULL ,
`date` TINYTEXT NOT NULL ,
`num_read` TINYTEXT NOT NULL ,
`num_write` TINYTEXT NOT NULL ,
PRIMARY KEY ( `id_quiz` )
);

3. สร้างตารางเก็ขข้อมูล tb_board_ans
CREATE TABLE `tb_board_ans` (
`id_ans` INT( 11 ) NOT NULL AUTO_INCREMENT ,
`id_quiz` INT( 11 ) NOT NULL ,
`message` TEXT NOT NULL ,
`name` TINYTEXT NOT NULL ,
`date` TINYTEXT NOT NULL ,
PRIMARY KEY ( `id_ans` ) );

4. การติดต่อฐานข้อมูลโดย Dreamweaver 8 อ่านการเชื่อมต่อแบบละเอียด คลิกที่นี่
ทำตามรูปได้เลยครับ

ผลที่ได้จากการเชื่อมต่อฐานข้อมูล

ขั้นตอนการทำ

1. สร้างหน้า ตั้งกระทู้ใหม่ ชื่อไฟล์ new_post.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<title>Untitled Document</title>
</head>
<body>
<form id="form1" name="form1" method="POST" action="<?php echo $editFormAction; ?>">
<table width="500" border="0" align="center" cellpadding="1" cellspacing="0">
<tr>
<td colspan="2" scope="col"><div align="center">ตั้งกระทู้ใหม่</div></td>
</tr>
<tr>
<td width="84">ชื่อกระทู้</td>
<td width="416"><label>
<input name="title" type="text" id="title" />
</label></td>
</tr>
<tr>
<td>รายละเอียด</td>
<td><label>
<textarea name="message" cols="50" rows="4" id="message"></textarea>
</label></td>
</tr>
<tr>
<td>ผู้ตั้ง</td>
<td><label>
<input name="name" type="text" id="name" />
</label></td>
</tr>
<tr>
<td colspan="2"><div align="center">
<label>
<input type="submit" name="Submit" value="ตั้งกระทู้" />
</label>
</div></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
<input type="hidden" name="MM_insert" value="form1">
</form>
</body>
</html>

2. เริ่มการแทรกฐานข้อมูลดังนี้

1.ชื่อฟร์อมที่ต้องการส่งค่า
2.ชื่อการติดต่อฐานข้อมูล
3.ชื่อตารางที่ต้องการแทรกลงฐานข้อมูล
4.รายชื่อฟิลด์ต่างๆ ในตารางที่จะจับคู่กับ text field ที่เราสร้าง (การตั้งชื่อ text field ต้องตรงกับชื่อฟิลด์ในฐานข้อมูลด้วย)
5.ค่าที่ส่งไปไม่มี
6.หลังจากแทรกฐานข้อมูลเสร็จให้ไปหน้า webboard.php เพื่อแสดงกระทู้

เริ่มสร้างหน้าแสดงรายชื่อเว็บบอร์ดกันเลยนะครับ

1. สร้างไฟล์ webboard.php พิมพ์โค้ดดังนี้

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<title>Untitled Document</title>
</head>
<body>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th colspan="3" bgcolor="#CCCCCC" scope="col">รายชื่อกระทู้</th>
</tr>
<tr>
<td width="130" bgcolor="f2f2f2"><div align="center">รหัสกระทู้</div></td>
<td width="164" bgcolor="f2f2f2"><div align="center">ชื่อกระทู้</div></td>
<td width="206" bgcolor="f2f2f2"><div align="center">ผู้ตั้ง</div></td>
</tr>
<tr>
<td bgcolor="f2f2f2"><div align="center"></div></td>
<td bgcolor="f2f2f2"><div align="center"></div></td>
<td bgcolor="f2f2f2"><div align="center"></div></td>
</tr>
<tr>
<td colspan="3" bgcolor="#CCCCCC"><div align="center"></div></td>
</tr>
</table>
</body>
</html>

เริ่มการแสดงข้อมูลกระทู้จากฐานข้อมูล

ต่อด้วย

การดึงฟิลด์มาแสดงที่ ตารางที่เราออกแบบไว้โดยการเลือกชื่อฟิลด์ดังรูปข้างบนที่ต้องการมาใส่ได้เลย ดังรูป

ลองแสดงผลดูกันครับ

จะยังใช้ไม่ได้ เพราะจะแสดงเฉพาะกระทู้ที่ใหม่สุดอย่างเดียว ดังนั้นเราต้องทำตามด้านล่างนี้ต่ออีก

1.เลือกชุดข้อมูลที่เราต้องการดึงจากฐานข้อมูลออกมา
2.ให้เลือกว่าต้องการแสดงข้อมูล ตามจำนวนที่ต้องการในที่นี้ 10 รายชื่อกระทู้ หรือทั้งหมด มาดูผลกัน

ก่อนอื่นเราต้องปรับปรุงไฟล์ webboard.php เพื่อให้สามารถเปิดไฟล์ ans_webboard.php ได้ดังนี้

1. เลือกไฟล์ที่ต้องการลิงค์ไป
2. ผลจะเป็นดังรูป ด้านล่าง
3. เลือกเมนู Parameters จะปรากฎกรอบด้านบน
4. + เพิ่มตัวแปร - ลบตัวแปร
5. ใส่ชื่อตัวแปรที่ต้องการส่ง
6. ค่าที่ต้ิองการส่งไป ถ้าต้องการค่าจากฐานข้อมูล เลือกรูปสายฟ้าจะปรากฎดังรูปด้านล่าง

7. เลือกฟิลด์ที่ต้องการส่งค่าไป จะได้ผลดังรูป

8. ที่ชื่อกระทู้จะปรากฏลิงค์เพื่อไปหน้า ans_webboard.php

ส่วนไฟล์ ans_webboard.php พิมพ์โค้ดดังนี้
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<title>Untitled Document</title>
</head>

<body>
<div align="center">
<table width="633" border="0" cellspacing="1" cellpadding="1">
<tr>
<td bgcolor="#CCCCCC" scope="col">รหัสกระทู้</td>
<td bgcolor="#CCCCCC" scope="col">ผู้ตั้ง</td>
<td bgcolor="#CCCCCC" scope="col">รายละเอียด</td>
</tr>
<tr>
<th width="150" height="19" bgcolor="f2f2f2" scope="col"></th>
<th width="127" bgcolor="f2f2f2" scope="col"></th>
<th width="346" bgcolor="f2f2f2" scope="col"></th>
</tr>
</table>
<br />
<br />
<table width="633" border="0" cellspacing="1" cellpadding="1">
<tr>
<td bgcolor="#CCCCCC" scope="col">ผู้ตอบ</td>
<td width="490" bgcolor="#CCCCCC" scope="col">รายละเอียด</td>
</tr>
<tr>
<th width="136" height="19" bgcolor="f2f2f2" scope="col"></th>
<th bgcolor="f2f2f2" scope="col"></th>
</tr>
</table>
<br />
</div>
<form id="form1" name="form1" method="post" action="">
<table width="500" border="0" align="center" cellpadding="1" cellspacing="0">
<tr>
<td colspan="2" scope="col"><div align="center">ตอบกระทู้</div></td>
</tr>

<tr>
<td width="84">รายละเอียด</td>
<td width="416"><label>
<textarea name="message" cols="50" rows="4" id="message"></textarea>
</label></td>
</tr>
<tr>
<td>ผู้ตอบ</td>
<td><label>
<input name="name" type="text" id="name" />
<input name="id_quiz" type="hidden" id="id_quiz" value="<?php echo $row_Recordset1['id_quiz']; ?>">//ให้สร้างขึ้นแล้วลากค่าของ id_quiz มาใส่ในนี้ด้วย
</label></td>
</tr>
<tr>
<td colspan="2"><div align="center">
<label>
<input type="submit" name="Submit" value="ตอบกระทู้" />
</label>
</div></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
</form>
</body>
</html>

การแสดงข้อมูลกระทู้

1. ชื่อ Recorset1
2. ชื่อการติดต่อฐานข้อมูล
3. ชื่อตารางที่ต้องการดึงข้อมูลมาแสดง
4. เลือกการค้นหาแบบเจาะจง ในที่นี่ใช้ฟิลด์ id_quiz ให้ เท่ากับ ค่าที่ส่งมาในข้อที่ 5
5. ค่าที่ส่งมาจาก webboard ชื่อ id_quiz

การแสดงข้อมูลตอบกระทู้

ู้

1. ชื่อ Recorset2
2. ชื่อการติดต่อฐานข้อมูล
3. ชื่อตารางที่ต้องการดึงข้อมูลมาแสดง
4. เลือกการค้นหาแบบเจาะจง ในที่นี่ใช้ฟิลด์ id_quiz ให้ เท่ากับ ค่าที่ส่งมาในข้อที่ 5
5. ค่าที่ส่งมาจาก webboard ชื่อ id_quiz

ต่อด้วย เพื่อให้แสดงข้อมูลตอบกระทู้ทั้งหมด

ทำการแทรกลงฐานข้อมูล

1. ชื่อฟอร์มที่ต้องการส่งค่า
2. ชื่อการติดต่อฐานข้อมูล
3. ชื่อตาราง ที่จะแทรกฐานข้อมูล
4. รายชื่อฟิลด์
5. เมื่อแทรกฐานข้อมูล ให้มาหน้า ans_webboard.php และส่งค่าตัวแปร id_quiz รับค่าจาก id_quiz ในฐานข้อมูล
หน้า ans_webboard.php เมื่อเสร็จแล้ว

** ลากค่าของ id_quiz มาใส่ในนี้ด้วย **

เมื่อเสร็จสมบูรณ์ จะได้ผลามรูปด้านล่าง