Mandmod's Blog

ถ้าไม่ก้าวเท้าไปข้างหน้า แล้วเมื่อไรจะถึงจุดหมาย

การสร้าง webboard

http://www.webthaidd.com/php/webthaidd_article_61_4.html

การสร้าง webboard ตอนที่ 1 (ฐานข้อมูล มีทั้งหมด 7 ตอน)

การสร้าง webboard ตอนที่ 1 เนื่องจากบทเรียนนี้ยาวผมก็เลยตัดเป็นตอนๆ เพื่อความเข้าใจ *เว็บบอร์ดนี้ไม่เน้นสวย
ผมขอเน้นหลักการในการสร้าง เพื่อความเข้าใจนำไปพัฒนาเป็นเว็บบอร์ดอื่นๆ ต่อไป
มาดูขั้นตอนการทำเลยดีกว่า
สร้างฐานข้อมูล
ฐานข้อมูล Quiz
เป็นตารางที่เราใช้สำหรับเก็บข้อมูลคำถาม

 

CREATE TABLE quiz (
id_quiz int(11) NOT NULL auto_increment,
title varchar(50) NOT NULL,
name varchar(30) NOT NULL,
message text NOT NULL,
email varchar(50) NOT NULL,
date_q varchar(10) NOT NULL,
count_q int(11) DEFAULT ’0′ NOT NULL,
PRIMARY KEY (id_quiz)
);


ฐานข้อมูล Ans
เป็นตารางที่ใช้สำหรับเก็บคำตอบที่ผู้ใช้ตอบ

CREATE TABLE ans (
id_ans int(11) NOT NULL auto_increment,
id_quiz int(11) DEFAULT ’0′ NOT NULL,
name varchar(30) NOT NULL,
message text NOT NULL,
email varchar(50) NOT NULL,
date_a varchar(10) NOT NULL,
PRIMARY KEY (id_ans)
);


ขั้นตอนการสร้างฐานข้อมูลโดยใช้คำสั่ง SQL
1. เปิด phpmyadmin ขึ้นมา
พร้อมกับใส่ชื่อฐานข้อมูลที่เราต้องการสร้างลงในช่อง
สร้างฐานข้อมูล


2. หลังจากนั้นเราก็จะได้ฐาานข้อมูลที่ชื่อ
webboard
ขึ้นมาจากนั้นให้เลือกที่ SQL เพื่อที่จะสร้างตารางต่อไป


3. หลังจากนั้นนำคำสั่ง SQL ด้านบนใส่ลงในช่อง SQL แล้วกดที่ปุ่ม
ลงมือ


4. หลังจากนั้นก็จะมีหน้าต่างแจ้งการสร้างตาราง


5. เพียงเท่านี้เราก็จะได้ตารางที่นำไว้สำหรับเก็บข้อมูลเว็บบอร์ด ที่เราจะสร้างต่อไป

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

http://www.webthaidd.com/php/webthaidd_article_62_4.html

การสร้าง webboard ตอนที่ 2 (config.inc.php)

การสร้าง webboard ตอนที่ 2 เป็นการสร้างไฟล์ config.inc.php เพื่อใช้ในการติดต่อฐานข้อมูลเพื่อที่เราจะได้ไม่ต้องประกาศฐานข้อมูลบ่อยครั้งขั้นตอนการทำ
1. สร้างไฟล์เอกสาร php ขึ้นมาแล้วทำการ save ให้เป็นไฟล์
config.inc.php
แล้วทำการเขีนโค้ดดังนี้

 

<?
$host = “127.0.0.1″;
$user = “”;
//user ฐานข้อมูล
$passwd = “”;
//pass ฐานข้อมูล
$dbname = “webboard”;
mysql_connect($host,$user,$passwd) or die(“ติดต่อ Host ไม่ได้”);
mysql_select_db($dbname) or die(“ติดต่อฐานข้อมูลไม่ได้”);
?>

2. หลังจากนั้นเวลาที่เราเรียกใช้ให้ใช้คำสั่ง
include();
รูปแบบการใช้

include(‘config.inc.php‘);


3. ดังนั้นทุกหน้าถ้ามีการใช้ฐานข้อมูลก็ใช้คำสั่งนี้ทุกครั้ง
ในตอนต่อไปเป็นการสร้างคำสั่งการตั้งคำถาม

 

 

 

 

 

 

http://www.webthaidd.com/php/webthaidd_article_63_4.html

การสร้าง weboard ตอน 3 (ตั้งกระทู้)

การสร้าง weboard ตอน 3 ในตอนนี้จะเป็นการเขียนโค้ดเพื่อใช้ในการ Post ข้อความลงใน
เพื่อใช้ในการตั้งกระทู้
ขั้นตอนการทำ
1. หลังจากที่เราได้สร้างฐานข้อมูลเรียบร้อยแล้ว เราก็สร้าง
Form
เพื่อใช้ในการตั้งคำถาม ในที่นี้ผมตั้งชื่อไฟล์ว่า
post.php

 


โค้ดที่ใช้ในการสร้าง Form
post.php

<html>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-874″>
</head>

<body>
<form name=”form1″ method=”post” action=”post_q.php”>
<strong><u>ร่วมตั้งคำถาม</u></strong><br>
หัวข้อกระทู้<br>
<input name=”title” type=”text” id=”title” size=”30″>
<br>
ชื่อ<br>
<input name=”name” type=”text” id=”name” size=”30″>
<br>
รายละเอียด<br>
<textarea name=”message” cols=”30″ rows=”5″ wrap=”VIRTUAL” id=”message”></textarea>
<br>
อีเมล์<br>
<input name=”email” type=”text” id=”email” size=”30″>
<br>
<input type=”submit” name=”Submit” value=”ตั้งคำถาม”>
<input type=”reset” name=”Submit2″ value=”ยกเลิก”>
</form>
</body>
</html>


3. หลังจากนั้นเรามาเขียนโค้ด PHP เพื่อใช้ในการ Post ข้อความผมตั้งชื่อไฟล์ว่า
post_q.php

<?
include(‘config.inc.php’);
$date_q=date(“d/m/y”);
$sql = “insert into quiz (title, name, message, email, date_q) values (‘$title’, ‘$name’, ‘$message’, ‘$email’, ‘$date_q’)”;
// กำหนดคำสั่ง SQL เพื่อเพิ่มข้อมูลแบบคีย์ในคำสั่ง SQL
$dbquery = mysql_db_query($dbname, $sql);

// ปิดการติดต่อฐานข้อมูล
mysql_close();
echo “<Font Size=4><B>คำถามของ $name ถูกตั้งเรียบร้อยแล้ว</B><BR>”;
echo “<A HREF=\”webboard.php\”>กลับไปหน้ากระทู้หลัก</A>”;
?>


4. หลังจากนั้นลองทดสอบ Post ข้อความ


5. เป็นอย่างไรกันบ้าง
ตอนนี้ก็เป็นโครงสร้างมาบางส่วนแล้ว
ก็ติดตามตอนต่อไปนะครับเป็นการแสดงผล

 

http://www.webthaidd.com/php/webthaidd_article_64_4.html

การสร้าง webboard ตอน 4 (แสดงกระทู้)

การสร้าง webboard ตอน 4 หลังจากที่ผ่านมา 3 ตอนแล้ว
ตอนนี้เป็นการเขียนคำสั่งเพื่อนำข้อมูลจากกระทู้ที่เราตั้งมาแสดงผล
*แต่ยัง link ไม่ได้นะครับตอนนี้เพื่อแสดงผลก่อนเพื่อความเข้าใจ
ขั้นตอนการทำ
1. สร้างไฟล์เอกสาร php ขึ้นมาตั้งชื่อว่า
webboard.php
แล้วเขียนโค้ดดังนี้

 

<html>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-874″>
</head>

<body>
<u><strong>แสดงกระทู้ webthaidd.com</strong></u><strong> </strong>[<a href=”post.php”>ตั้งกระทู้ใหม่</a>]<br>
<?
include(‘config.inc.php’);
$sql = “select * from quiz order by id_quiz desc”;
$dbquery = mysql_db_query($dbname, $sql);

// หาจำนวนเรกคอร์ดข้อมูลในตาราง
$num_rows = mysql_num_rows($dbquery);
// เริ่มวนรอบแสดงข้อมูล
$i=0;
while ($i < $num_rows)
{
$result = mysql_fetch_array($dbquery);
$id_quiz = $result[id_quiz];
$title = $result[title];
$name = $result[name];
$message = $result[message];
$email = $result[email];
$date_q = $result[date_q];
$count_q = $result[count_q];

echo “<FONT COLOR=\”red\”><b>”.sprintf(“%05d”, $id_quiz).”</b></FONT>”; //แสดงหมายเลขแบบมีเงื่อนไข
echo ” $title <FONT COLOR=\”blue\”>$date_q</FONT> $name<BR>”;

$i++;
}
// ปิดการติดต่อฐานข้อมูล
mysql_close();
?>
</body>
</html>


2. หลังจากนั้นลองทดสอบ


3. เป็นอย่างไรกันบ้างครับมาถึงตอนนี้แล้ว คอยติดตามในตอนต่อไปนะครับเป็นการสร้าง
Link จากกระทู้เพื่อไปตอบคำถาม

 

 

http://www.webthaidd.com/php/webthaidd_article_65_4.html

การสร้าง webboard ตอน 5 (การสร้าง Link ให้กับกระทู้)

การสร้าง webboard ตอน 5 เป็นการสร้าง Link ให้กับกระทู้เพื่อที่เราจะได้เข้าไปตอบคำถามได้
โดยการเขียนจะต่อจากตอนที่แล้วนะครับ เราจะแก้ไขไฟล์ webboard.php นะครับ
มาดูการทำกันเลยนะครับ
ขั้นตอนการทำ
1. เปิดไฟล์ webboard.php ขึ้นมาเพื่อทำการแก้ไข
*ผมจะมาร์คส่วนที่ต้องแก้ให้นะครับเพื่อไม่ให้เป็นการงง

 

<html>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-874″>
</head>

<body>
<u><strong>แสดงกระทู้ webthaidd.com</strong></u><strong> </strong>[<a href=”post.php”>ตั้งกระทู้ใหม่</a>]<br>
<?
include(‘config.inc.php’);
$sql = “select * from quiz order by id_quiz desc”;
$dbquery = mysql_db_query($dbname, $sql);

// หาจำนวนเรกคอร์ดข้อมูลในตาราง
$num_rows = mysql_num_rows($dbquery);
// เริ่มวนรอบแสดงข้อมูล
$i=0;
while ($i < $num_rows)
{
$result = mysql_fetch_array($dbquery);
$id_quiz = $result[id_quiz];
$title = $result[title];
$name = $result[name];
$message = $result[message];
$email = $result[email];
$date_q = $result[date_q];
$count_q = $result[count_q];

echo “<FONT COLOR=\”red\”><b>”.sprintf(“%05d”, $id_quiz).”</b></FONT>”; //แสดงหมายเลขแบบมีเงื่อนไข
echo ”
<A HREF=\”show_ans.php?id_quiz=$id_quiz\” target=\”$id_quiz\”>$title</A> <FONT COLOR=\”blue\”>$date_q</FONT> $name<BR>”; //เราใส่ Tag Link ลงไปนะครับ
แต่เราฝากค่ากระทู้ไปด้วยนะครับจะได้ตอบถูกข้อ

$i++;
}
// ปิดการติดต่อฐานข้อมูล
mysql_close();
?>
</body>
</html>

2. หลังจากนั้นลองทดสอบดูนะครับ ลองสังเกตุที่ Status นะครับเวลาที่เราเอา mouse ไปชี้ที่ link จะบอกหมายเลขกระทู้

Staus Link

3. ครับก็ลองใส่ link ดูนะครับ ในตอนจบการสร้างเว็บบอร์ด
ก็คอยติดตามกันนะครับ

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

http://www.webthaidd.com/php/webthaidd_article_66_4.html

การสร้าง webboard ตอน 6 (การตอบกระทู้)

การสร้าง webboard ตอน 6 ก็เป็นการสร้างในส่วนการตอบกระทู้
ในส่วนนี้อาจจะยาวหน่อยแต่จะเป็นโค้ดเสียส่วนใหญ่
มาดูการทำเลยดีกว่า
ขั้นตอนการทำ
1. สร้างไฟล์เอกสาร
show_ans.php
แล้วเขียนโค้ดดังนี้

 

<html>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-874″>
</head>

<body>
<u><strong>แสดงกระทู้ webthaidd.com</strong></u><strong> </strong>[<a href=”post.php”>ตั้งกระทู้ใหม่</a>]<br>
<?
include(‘config.inc.php’);
//หารายระเอียดของคำถาม
$sql = “select * from quiz where id_quiz=$id_quiz”;
$dbquery = mysql_db_query($dbname, $sql);
$result = mysql_fetch_array($dbquery);
$id_quiz = $result[id_quiz];
$title = $result[title];
$name = $result[name];
$message = $result[message];
$email = $result[email];
$date_q = $result[date_q];
echo sprintf(“<B><FONT COLOR=\”Blue\”>%05d</FONT></B>”, $id_quiz). ” คำถามจาก $name <FONT COLOR=\”Red\”>$date_q</FONT><BR>”;
echo “<u>รายละเอียดคำถาม</u> : $message<HR>”;

//แสดงคำตอบ
$sql = “select * from ans where id_quiz=$id_quiz order by id_ans”;
$dbquery = mysql_db_query($dbname, $sql);

// หาจำนวนเรกคอร์ดข้อมูลในตาราง
$num_rows = mysql_num_rows($dbquery);
if($num_rows==”){
echo “ยังไม่มีใครตอบคำถาม”;
}
$i=0;
while ($i < $num_rows)
{
$result = mysql_fetch_array($dbquery);
$id_ans = $result[id_ans];
$id_quiz = $result[id_quiz];
$name = $result[name];
$message = $result[message];
$email = $result[email];
$date_a = $result[date_a];
$n++;
echo “<FONT COLOR=\”red\”><b>คำตอบที่ $n</b></FONT> จาก $name <FONT COLOR=\”#FF6600\”>$date_a</FONT><BR>”;
echo “<u>รายละเอียดคำตอบ</u> : $message<HR color=#FFCC00>”;

$i++;
}
// ปิดการติดต่อฐานข้อมูล
mysql_close();
?>
<form name=”form1″ method=”post” action=”reply.php”>
<strong><u>ร่วมตอบคำถาม</u></strong><br>
ชื่อ<br>
<input name=”name” type=”text” id=”name” size=”30″>
<br>
รายละเอียด<br>
<textarea name=”message” cols=”30″ rows=”5″ wrap=”VIRTUAL” id=”message”></textarea>
<br>
อีเมล์<br>
<input name=”email” type=”text” id=”email” size=”30″>
<br>
<input type=”submit” name=”Submit” value=”ตั้งคำถาม”>
<input type=”reset” name=”Submit2″ value=”ยกเลิก”>
<input type=”hidden” name=”id_quiz” value=”<? echo $id_quiz;?>”>
</form>
</body>
</html>


2. หลังจากนั้นสร้างไฟล์เพิ่มข้อมูลลงในตาราง ans ผมให้ชื่อไฟล์ว่า
reply.php

<?
include(‘config.inc.php’);
$date_a=date(“d/m/y”);
$sql = “insert into ans (id_quiz, name, message, email, date_a) values ($id_quiz, ‘$name’, ‘$message’, ‘$email’, ‘$date_a’)”; // กำหนดคำสั่ง SQL เพื่อเพิ่มข้อมูลแบบคีย์ในคำสั่ง SQL
$dbquery = mysql_db_query($dbname, $sql);

// ปิดการติดต่อฐานข้อมูล
mysql_close();
echo “<Font Size=4><B>ขอบคุณสำหรับคำตอบ $name </B><BR>”;
echo “<A HREF=\”show_ans.php?id_quiz=$id_quiz\”>กลับไปหน้ากระทู้ “.sprintf(“<B><FONT COLOR=\”Blue\”>%05d</FONT></B>”, $id_quiz).”</A>”;
?>

3. หลังจากนั้นลองทดสอบ


4. ก็จบลงไปแล้วนะครับเกี่ยวกับการสร้างเว็บบอร์ด
ใครเสร็จแล้วก็ส่งกันมาให้ดูบ้างนะครับ
ขอให้สนุกกับการทำเว็บ

 

 

 

 

 

 

 

 

 

 

 

http://www.webthaidd.com/php/webthaidd_article_75_3.html

การสร้าง New เมือมีคนตั้งกระทู้ ตอนที่ 7

การสร้าง New เมือมีคนตั้งกระทู้ ตอนที่ 7 หลายคนคงจะรอกันนานกับบทความ จริงๆ โปรเจ็คยังไม่จบแต่มาเขียนบทความให้อ่านกันก่อน
ในบทความนี้ก็เป็นบทความเกี่ยวกับการสร้าง New เมื่อมีคนเข้ามาโพสต์กระทู้ในเว็บบอร์ดของเราจะ new ยังไงก็ต้องมีโค้ดเดิมกันก่อนนะครับ ผมจะขอเขียนเสริมจากเดิมเลยละกัน ^^
ขั้นตอนการทำ
1. ก่อนอื่นมาดู Field ที่เราจะนำมาใช้กันก่อน

 

date_q = วันที่ผู้ใช้โพสต์ข้อความลงบอร์ด

2. เตรียมรูปภาพ

//อาจจะใช้รูปอื่นก็ได้นะครับ

3. หลังจากนั้นเขียนโค้ดไว้ในหน้า
webboard.php

<html>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-874″>
</head>

<body>
<u><strong>แสดงกระทู้ webthaidd.com</strong></u><strong> </strong>[<a href=”post.php”>ตั้งกระทู้ใหม่</a>]<br>
<?
include(‘config.inc.php’);
$sql = “select * from quiz order by id_quiz desc”;
$dbquery = mysql_db_query($dbname, $sql);
$date_check=date(“d/m/y”); //หาวันที่ปัจจุบัน [ส่วนที่เพิ่ม]
// หาจำนวนเรกคอร์ดข้อมูลในตาราง
$num_rows = mysql_num_rows($dbquery);
// เริ่มวนรอบแสดงข้อมูล
$i=0;
while ($i < $num_rows)
{
$result = mysql_fetch_array($dbquery);
$id_quiz = $result[id_quiz];
$title = $result[title];
$name = $result[name];
$message = $result[message];
$email = $result[email];
$date_q = $result[date_q];
$count_q = $result[count_q];

//check วันที่ เพิ่ม Script
if($date_check==$date_q){
$img_new=”<img src=\”new.gif\” width=\”28\” height=\”11\”>”;
}else {
$img_new=””;
}

echo “<FONT COLOR=\”red\”><b>”.sprintf(“%05d”, $id_quiz).”</b></FONT>”; //แสดงหมายเลขแบบมีเงื่อนไข
echo ” <A HREF=\”show_ans.php?id_quiz=$id_quiz\” target=\”$id_quiz\”>$title</A> <FONT COLOR=\”blue\”>$date_q
$img_new</FONT> $name<BR>”; //นำตัวแปลวางต่อคำถาม

$i++;
}
// ปิดการติดต่อฐานข้อมูล
mysql_close();
?>
</body>
</html>

4. ผลที่ได้

5. ลองนำไปใช้กันดูนะครับ ^^! ใครเขียนต่อดีๆ
สามารถส่งมาร่วมได้นะครับ

 

About these ads

ตุลาคม 27, 2009 - Posted by | PHP

ยังไม่มีความเห็น

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

ติดตาม

Get every new post delivered to your Inbox.

%d bloggers like this: