Update chat แบบ simple ๆ ภาค2 + emoticon PHP, jQuery

ที่จริงวิธีสร้าง chat มีสองวิธี คือเก็บเป็นไฟล์ text กับเก็บลงฐานข้อมูล วิธีที่ผมเขียนบทความนี้เป็นวิธี เก็บลงฐานข้อมูล ส่วนวิธีเก็บเป็นไฟล์ text เอาไว้คราวหน้าครับ (ไม่แน่นอน^^)....

เริ่มเลยดีกว่าครับ
สิ่งที่ต้องมี

ผมจะเริ่มทำงานกับไฟล์ mychat.php ก่อนด้วยการใส่ตัว emoticon ลงไปพร้อมกับคลิกเพิ่มตัว
emoticon ลงในช่อง message ของเราดังนี้
ไฟล์ mychat.php
จากไฟล์เดิม

<div id="formsend">
<input type="text" id="msg" name="msg"/>
<button id="send" onclick="Send();">Send</button>
</div>

ท่านสังเกตุดูนะครับจากที่ผมเรียนมาเราจะใส่ input ใน form ใช่มั๊ยครับ แต่ไฟล์นี้ผมไม่ใส่
เพราะว่าพอผมใส่แล้ว chat มันจะกระพริบ แต่พอผมตัด form ออกมันไม่กระพริบ งงมั๊ยครับ
ถ้าท่านไม่ งง เอาเป็นว่าผม งง เองก็แล้วกัน อิอิ.. แสดงว่าเราไม่ควรยึดติดกับเรื่องนี้แแบบตายตัวมากนัก
เพราะมันเป็นเรื่องที่ยืดหยุ่นกันได้ ชักจะยาวแล้ว อิอิ.. ต่อเลยครับ
หลังจากนั้นผมเพิ่มตัว emoticon เข้าไปแบบนี้

<div id="emoticon">
<?php
$emoticon = 19 ;
for ($i = 0; $i <= $emoticon; $i++) {
?>
<img id="emotion" src="smiley/<?php echo $i ?>.gif" 
onclick ="msg.value+='[:<?php echo $i ?>:]';msg.focus();"/>

<?php
}
?>
</div>

ชื่อตัว emoticon ของท่านจะต้องเป็นตัวเลขนะครับเพราะว่า เราจะวนลูปด้วย for เพื่อเอาตัวเลข
มาเป็นชื่อครับ ก็จะใด้แบบนี้ [:0:],[:1:] เรียงกันไปเรื่อยๆ แล้วแต่ว่าเราจะมีตัว emoticon กี่ตัวครับ

แล้วเพิ่ม CSS ให้กับไอดี emotion เวลาที่เราเอาเมาส์ไปชี้ให้เป็นรูปมือแบบนี้

<style type="text/css">
    #emotion{
        cursor:pointer;
}
</style>

update เสร็จแล้วสำหรับไฟล์ mychat.php

หลังจากนั้นผมก็ไปอัพเดทเพิ่มเติมที่ไฟล์ chat_out.php
เพราะว่าเราจะต้องไป replace ตัว emoticon ให้ เครื่องหมาย [::] นี้กลายเป็นแท็ก img ครับ
แล้วก็เพิ่มเติมฟังก์ชั่น autolink() หมายถึงว่าเวลามีคนโพสลิงค์เข้ามาก็ให้สามารถใช้เมาส์กดเป็นลิงค์ส่ง
ไปเปิดอีกหน้าต่างหนึ่งครับ

ไฟล์ chat_out.php
ผมจะสร้างฟังก์ชั่น autolind ก่อนดังนี้

<?php
function autolink($msg) {
$msg = preg_replace
("#(^|[\n ])([a-z0-9&\-_.]+?)@([\w\-]+\.([\w\-\.]+\.)*[\w]+)#i",
"\\1<a href=\"mailto:\\2@\\3\"><font color=blue>\\2@\\3</font></a>"
, $msg);
$msg = preg_replace
("#(^|[\n ])([\w]+?://[^ \"\n\r\t<]*)#is",
"\\1<a href=\"\\2\" target=\"_blank\"><font color=blue>\\2</font></a>"
, $msg);
$msg = preg_replace
("#(^|[\n ])((www|ftp)\.[^ \"\t\n\r<]*)#is",
"\\1<a href=\"http://\\2\" target=\"_blank\"><font color=blue>\\2</font></a>"
, $msg);
return ( $msg );
}
?>

จากนั้นก็ตามด้วยการ replace ตัว emoticon แบบ Array ดังนี้

<?php
$pic = array("[:0:]", "[:1:]", "[:2:]", "[:3:]", "[:4:]", "[:5:]",
    "[:6:]", "[:7:]", "[:8:]", "[:9:]", "[:10:]","[:11:]", "[:12:]",
    "[:13:]", "[:14:]", "[:15:]", "[:16:]", "[:17:]", "[:18:]", "[:19:]"
);
$replace = array("<IMG SRC='smiley/0.gif'>", "<IMG SRC='smiley/1.gif'>"
, "<IMG SRC='smiley/2.gif'>", "<IMG SRC='smiley/3.gif'>"
, "<IMG SRC='smiley/4.gif'>", "<IMG SRC='smiley/5.gif'>"
, "<IMG SRC='smiley/6.gif'>", "<IMG SRC='smiley/7.gif'>"
, "<IMG SRC='smiley/8.gif'>", "<IMG SRC='smiley/9.gif'>"
, "<IMG SRC='smiley/10.gif'>", "<IMG SRC='smiley/11.gif'>"
, "<IMG SRC='smiley/12.gif'>", "<IMG SRC='smiley/13.gif'>"
, "<IMG SRC='smiley/14.gif'>", "<IMG SRC='smiley/15.gif'>"
, "<IMG SRC='smiley/16.gif'>", "<IMG SRC='smiley/17.gif'>"
, "<IMG SRC='smiley/18.gif'>", "<IMG SRC='smiley/19.gif'>"
);
?>

ถ้าท่านมีตัว emoticon มากกว่านี้ก็ใส่เพิ่มเข้าไปเลยครับ

แล้วผมก็กำหนดตัวแปร $msg เสียใหม่ดังนี้

<?php
$msg = $row[msg];
$msg = strip_tags($row[msg],"<img>,<a>,<b>");//กำหนดให้ตัดแท็ก html ทั้งหมดยกเว้น
//<img>,<a>,<b> เพื่อตัดปัญหาจากการโพสแท็ก html
$msglink = autolink($msg);
$msgout[] = str_replace($pic, $replace, $msglink);
?>

จากนั้นก็เปลี่ยนการวนลูปเพื่อการแสดงข้อมูลใหม่ดังนี้

<?php
for ($i = count($msgout) - 1; $i >= 0; $i--) {
echo "<div style='padding:5px;overflow:hidden;word-wrap:break-word;'>";
echo "<font style='color:#999999;font-size:9px;'>".$datechat[$i]."</font>";
echo "&nbsp;";
echo "<font color='#0000ff'>:: </font>";
echo "<font color='#29498B' size='2'><b>".$user[$i]."</b></font>";
echo "&nbsp;";
echo "<font color='#ff0000'>>></font>";
echo "&nbsp;";
echo $msgout[$i];
echo "</div>";
}
?>

ข้อสังเกตุ
จากฟังก์ชั่นการอนุญาติแท็ก html นี้ $msg = strip_tags($row[msg],"<img>,<a>,<b>");
ท่านอาจเปลี่ยนไปใช้ BBCODE ก็ได้ครับซึ่งส่วนใหญ่เป็นอย่างนั้น แต่บทความนี้ ผมเน้นแบบง่ายๆ
ที่เหลือท่านก็ไปพัฒนาต่อเติมเสริมแต่งกันไปครับ

ไฟล์ที่ให้ download มีแต่ตัว emoticon ส่วนที่เหลือท่านก็นำไฟล์จากบทความก่อนมาปรับปรุงเอานะครับ
ในที่สุดการอัพเดท Chat ของเราก็จบลงเท่านี้เชิญทดไปทดสอบครับ...