A-AA+then

Shout box เนี่ยน้องๆ Chat เลยละครับ คือมีการโพสต์ข้อความ แล้วก็แสดงผลโดยอัตโนมัติ ข้อดีคือ เมื่อเรากดส่งข้อความ ข้อมูลจะถูกส่งไปบันทึกโดยที่ไม่ต้อง Reload หน้าทั้งหน้าใหม่ นอกจากนี้ในการอ่านข้อความมาแสดง ยังเป็นการอ่านด้วย AJAX อีกที เรียกได้ว่า เพิ่มระบบ User อีกอย่างก็เป็น Chat แล้วละครับ เหมาะสำหรับศึกษาการทำงานของ Chat Room ได้ดีเลยครับ

คุณสมบัติ เก็บข้อมูลในแบบ Text รองรับหลายภาษา มีระบบป้องกันการ Post ซ้ำ เป็น module ใช้งานให้เรียกใช้แสดงบนหน้าอื่นได้ สามารถปรับแต่งรูปแบบ (theme) ได้อย่างอิสระ ด้วย CSS ในไฟล์ shoutbox.php และ style.css

การนำไปใช้ ให้ปรับ chmod ให้ไดเร็คทอรี่ shout/ เป็น 777 ครับ ดูตัวอย่างการเรียกใช้ที่ index.php ครับ

หลักการ การทำงานจะแบ่งออกเป็น 2 ส่วนหลักๆครับ คือส่วนการโพสต์ และส่วนในการอ่านข้อมูลมาแสดง โดยในส่วนของการโพสต์ข้อความจะเป็นการโพสต์โดย AJAX ไปยัง Server เพื่อบันทึกลงฐานข้อมูล(ไฟล์) เมื่อทำงานเสร็จจะเป็นอันจบกระบวนการในส่วนนี้ และในส่วนที่ 2 เป็นการใช้ AJAX เพื่อทำการอ่านข้อมูลจากฐานข้อมูล แล้วมาแสดงผลเป็นวงรอบไปเรื่อยๆ

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

โค้ดในส่วนแรกเป็นไฟล์ shoutbox.php ไฟล์นี้เป็นไฟล์หลักของโปรแกรมซึ่งจะต้องถูกเรียกครับ ในไฟล์นี้ประกอบด้วย

<?
  include("config.php");
?>

ส่วนแรกเป็นการกำหนดเรียกไฟล์ config ครับ ไฟล์นี้ต้องกำหนดให้ถูกต้องครับในครั้งแรก ว่าเรียกมาจากที่ไหน โดยการกำหนด path ให้ถูกต้องครับ เช่น ../shout/config.php

<script language=Javascript src="<?=$shout_path.'shoutbox.js'?>"></script>
<link href="<?=$shout_path.'style.css'?>" rel=stylesheet type=text/css>

2 บรรทัดนี้เป็นการเรียกใช้ไฟล์ Javascript หลักของระบบ และไฟล์รูปแบบ CSS ครับ

<div id=shout_box>
  <form name=shout_form onSubmit="return shoutsubmit(this)" action="" method="POST">
  <table>
  <tr><td colspan=2><h1><font color=red>AJAX</font> Shout Box</h1></td></tr>
  <tr><td colspan=2><div id="shout_content"></div></td></tr>
  <tr><td align=center colspan=2 bgcolor=#DDDDDD><a href=Javascript:shoutnext('-1') title=ก่อนหน้า><</a> <a href="<?=$shout_path.'shoutlist.php'?>" target=_blank>ดูทั้งหมด</a> <a href=Javascript:shoutnext('+1') title=ถัดไป>></a></td></tr>
  <tr><td align=right valign=top><nobr>ข้อความ : </nobr></td><td><input size=20 maxlength=50 type=text name=text id=text></td></tr>
  <tr><td align=right>ชื่อ : </td><td><input size=20 type=text name=user id=user maxlength=10></td></tr>
  <tr><td colspan=2><table border="0" cellpadding="0" cellspacing="0" width=100%><tr><td><a href=http://goragod.saiyaithai.org target=_blank title="power by goragod.com"><font class=silver>g-<font class=red>O</font>-r-a-g-o-d.com</font></td><td align=right><input type=submit name=submit value=ส่ง></td></tr></table></td></tr>
  </table>
  </form>
</div>

ในส่วนนี้เป็นหน้าตาของ Shout box ครับ ID shout_box เป็นการกำหนดเื่พื่อแยกรูปแบบออกจาก ID อื่นๆ เพื่อการอ้างอิง Style ครับรวมทั้งเพื่อกำหนดกรอบให้กับ Shout box ด้วย โดยใช้การอ้างอิงเป็นลำดับครับ เช่น

#shout_box a {
  กำหนดรูปแบบให้กับ tag A เฉพาะที่อยู่ภายใน shout_box เท่านั้น
}

ส่วน ID shout_content เป็นพื้นทีส่วนแสดงผลข้อมูลครับ ซึ่งจะใช้เป็นส่วนแสดงผลข้อความที่โพสต์ ลองดูการกำหนดรูปร่างหน้าตาได้ที่ style.css ครับ

<?
  echo "<script language=Javascript> ";
  echo "var shout_interval=$shout_interval; ";
  echo "var shout_path='$shout_path'; ";
  echo "shoutStart(); ";
  echo "</script>
";
?>

และส่วนสุดท้ายของหน้านี้เป็นการกำหนตัวแปรที่ต้องใช้ของโปรแกรม และ เรียกใช้การอ่านข้อความในครั้งแรกครับ (ฟังก์ชั่น shoutStart)



หน้าตาก็ออกมาดังรูปนี่แหละครับ

AJAX

Relate

^