Construct ฟังก์ชั่นพิเศษ OOP PHP

ใน PHP5 Construct เป็นฟังก์ชั่นพิเศษ ที่จะถูกเรียกใช้งานทันทีเมื่อเราสร้างอ๊อบเจ็คจากคลาส

รูปแบบการเขียน

class Human
{
    function __construct()
    {
        echo "My name is Bookneo";
    }
}

เรียกใช้งาน

$name = new Human();

อีกวิธีหนึ่งก็คือ การสร้าง function ที่มีชื่อเดียวกันกับ class ตัวอย่าง

class Human
{
    function human()
    {
        echo "My name is Bookneo";
    }
}

เรียกใช้งาน

$name = new Human();

ทีนี้ผมจะสร้าง file ขึ้นมา 2 ไฟล์ คือ
Myclass.php เพื่อเก็บ function ต่างๆ
myview.php สำหรับเรียกใช้งาน function หรือเป็น html page สำหรับแสดงข้อมูลออกทางจอภาพ

ไฟล์ Myclass.php ผมจะเขียนโค้ดแบบนี้

<?php
class Human
{
    function __construct()
    {
        echo "<font color='blue'><h2>My name is Bookneo</h2></font>";
    }
}

?>

ไฟล์ myview.php 

<html>
    <head>
        <title></title>
    </head>
    
    <body>
        <?php
        
        require_once('Myclass.php');//นำเข้าไฟล์ Myclass.php
        
        $name = new Human();
        
        ?>
    </body>
    
</html>

Read More

"สวัสดีชาวโลก" กับ OOP PHP

หลังจากที่หายไปนาน ในที่สุดผมก็ปรับปรุงเว็บใหม่เสร็จ แต่อาจจะยังไม่เรียบร้อยเท่าไหร่ ไม่เป็นไรปรับปรุงกันไป เรื่อยๆก็แล้วกัน ขอออกตัวก่อนว่าผมไม่ได้เก่ง ผมยังเรียนอยู่เลย ผมเพียงแต่บันทึก ร่องรอยการเรียนรู้ของผม ที่อาจเป็นประโยชน์สำหรับท่าน ผู้เดินทางด้วยกันเท่านั้น บทความที่ผมเขียนจะไม่มีหลักในทางวิชาการใดๆทั้งสิ้น ผมเน้นในเรื่องของการปฏิบัติ อย่างเดียว เขียนแบบนี้แล้ว จะเกิดผลอย่างนี้ จากนั้นก็นำไปใช้งานจริง เอ้า! มาว่าเรื่อง OOP PHP กันต่อ...

คำหลักๆ ที่เราจะได้รู้จักก็มี  class, function, this และ parent

 เราจะเริ่มด้วยการสร้าง  class ขึ้นมาก่อน
 จากนั้นก็สร้าง function เรียกแบบ oop ว่า Method แต่ผมขอเรียกว่าฟังก์ชั่นก็แล้วกัน
 ผมจะตั้งชื่อ class นี้ว่า Human รูปแบบของ class Human จะเป็นแบบนี้

<?php
 class Human {
     
 }
 ?>

จากนั้น ผมก็จะสร้าง function talk() ไว้ภายใน class แบบนี้

<?php
 class Human {
     function talk(){
         echo "Hello World";
     }
 }
?>

ตอนนี้เราไม่สามารถจะเรียกใช้งาน function talk() ได้ จนกว่าเราจะประกาศเสียก่อนว่า ใครคือ Human
ผมขออธิบายแบบง่ายๆ ไม่ว่า ใครหรือสิ่งใดก็ตามเมื่อถูกประกาศว่าเป็น Human
ก็สามาถใช้งาน function talk() ได้ทั้งนั้น
วิธีการประกาศ ผมจะประกาศว่า นาย $bookneo เป็น Human รูปแบบ
$bookneo = new Human();

นาย $bookneo ก็สามารถเรียกใช้งาน function talk() ได้ดังนี้
$bookneo->talk();

รูปแบบเต็ม

<?php
 class Human {
     function talk(){
         echo "Hello World";
     }
 }

$bookneo = new Human();
$bookneo->talk();

?>

ใน class Human เราจะเพิ่ม function กี่ฟังก์ชั่น ก็ได้ เวลาเรียกใช้ เราก็ประกาศ Human แค่ครั้งเดียว
ตัวอย่าง

<?php

class Human {

    function talk() {
        echo "Hello World";
    }

    function name() {
        echo " <font color='blue'>My name is bookneo</font>";
    }

}

$bookneo = new Human();
$bookneo->talk();
$bookneo->name();

?>

สำหรับบทความนี้ก็ขอจบเพียงเท่านี้ก่อน ไว้เจอกันในบทความต่อไปครับ....

Read More

OOP การเขียนโปรแกรมเชิงวัตถุ PHP (เกริ่นนำ)

การเขียนโปรแกรมเชิงวัตถุ (อังกฤษ: Object-oriented programming, OOP) คือหนึ่งในรูปแบบการเขียนโปรแกรมคอมพิวเตอร์ ที่ให้ความสำคัญกับ วัตถุ ซึ่งสามารถนำมาประกอบกันและนำมาทำงานรวมกันได้ โดยการแลกเปลี่ยนข่าวสารเพื่อนำมาประมวลผลและส่งข่าวสารที่ได้ไปให้ วัตถุ อื่นๆที่เกี่ยวข้องเพื่อให้ทำงานต่อไป....

Object Oriented Programming หรือ OOP หรือ การเขียนโปรแกรมเชิงวัตถุ หมายถึง การเขียนโปรแกรมโดยการมองว่าโปรแกรมใดๆเป็นวัตถุชนิดหนึ่ง ที่ประกอบไปด้วย คุณสมบัติ(property) และ วิธีการ(method)

เช่น คลาสรถ ประกอบด้วย คุณสมบัติ สี จำนวนล้อ และ วิธีการ เช่น วิธีขับ วิธีจอด เป็นต้น นอกจากนี้ OOP ที่ดี ยังต้องมีคุณสมบัติการสืบทอด(inherited) เช่น คลาสรถยนต์ สืบทอดมาจากคลาสรถ และ คลาสรถมอเตอร์ไซต์ ก็สืบทอดมาจากคลาสรถเช่นเดียวกัน แต่ทั้ง 2 คลาส(ซึ่งเรียกว่าคลาสลูก หรือ sub class) ก็อาจมีคุณสมบัติบางอย่างที่แตกต่างจาก คลาสรถ(คลาสแม่ หรือ base class) เช่น คลาสรถยนต์ มี 4 ล้อ และ คลาสรถมอเตอร์ไซต์ มี 2 ล้อ เป็นต้นโปรแกรมเชิงวัตถุOOP ช่วยให้เขียนโปรแกรมได้อย่างสง่างาม ตรวจสอบได้ง่าย สามารถนำโค้ดที่เขียนไว้ กลับมาใช้ใหม่ได้

เขียนโดย yaninee แห่ง http://iamjomjung.blogspot.com

---

โดยทั่วไปแล้วสำหรับโปรแกรมเมอร์ทั่วไปที่รู้จักภาษา PHP มักจะไม่เขียนโปรแกรมของตน เป็นรูปแบบ OOP แต่หากรู้ว่าการเขียนโปรแกรมแบบ OOP สามารถช่วยทำให้สามารถ เพิ่มประสิทธิภาพของโปรแกรมของตนอย่างไรล่ะก็ เราทุกคนคงคิดที่จะเปลี่ยนมาเขียนเป็น OOP แน่นอน

ในพื้นฐานของการเขียนและออกแบบโปรแกรม โปรแกรมเมอร์ทุกคนรู้ดีว่า วิธีการที่จะเขียนโปรแกรม ให้สามารถแก้ไข และ ทำงานอย่างเป็นระบบ และรวดเร็ว คือการเขียนโปรแกรมแบบ Object-Oriented Programing (OOP) หรือ การเขียนโปรแกรมเชิงวัตถุ ซึ่งมีประโยชน์ต่างๆ เช่น การเขียนโปรแกรมครั้งเดียวแต่ใช้ซ้ำหลาย ๆ รอบ, การทดสอบระบบ, การแก้ไขโค้ดโปรแกรมที่ตรงจุด ซึ่งหากว่าเรา เคยเขียนโปรแกรมที่เป็นภาษา OOP อื่นๆ เช่น C++, Object Pascal (Borland Delphi), Visual Basic .Net ก็สามารถนำมาใช้กับการเขียนโปรแกรม OOP ใน PHP ได้เหมือนๆ กัน

หากลองคิดดูว่า เราเป็นโปรแกรมเมอร์ ที่ต้องนั่งเขียนโปรแกรมกว่าสิบๆ โปรแกรม โดยมีพื้นฐานคล้ายๆ เช่น การติดต่อฐานข้อมูล, การจัดเก็บระบบสมาชิค, การติดต่อปฏิสัมพันธ์ระหว่างผู้ใช้ (Webboard, Forum) แบบเดียวกัน แต่มีระบบย่อยๆ ต่างกัน นั่นอาจทำให้เราเขียนโค้ดแล้วเกิดอาการสับสนขึ้นได้ เช่น หน้าแรกเรียกฐานข้อมูลดึงหาข้อมูลสมาชิค เขียนโค้ด 10 บรรทัด, หน้าสมาชิค เขียนโค้ดดึงข้อมูลสมาชิคอีก 10 บรรทัด และเป็นอยากนี้อีกหลายๆ หน้า นั้นคือ "การเขียนโค้ดซ้ำโดยไม่จำเป็น" หากเรานำ OOP มาประยุกต์ใช้ จะทำให้เราสามารถลดการเขียนโปรแกรม จาก 10 บรรทักในแต่ล่ะหน้า เหลือเพียงบรรทัดเดียว และเก็บโค้ดที่เหมือนๆ กันในไฟล์ๆ หนึ่ง ที่จะนำมาเรียกใช้ภายหลัง และเมื่อเก็บความผิดพลาด เราก็แก้แค่เพียงจุดเดียว แล้วทุกๆ หน้าก็จะแก้ไปเหมือนๆ กัน

มาจนถึงจุดนี้เราคงรู้แล้วว่า การเขียน OOP จะช่วยเรา ในการเขียนโปรแกรมได้อย่างไรแล้วนะครับ

เขียนโดย phpsec แห่ง http://phpsec.exteen.com

---

- การเขียนโปรแกรมเชิงวัตถุ นั้นมีความปลอดภัยสูง ปลอดภัยจากอะไร ก็ปลอดภัยจากผลกระทบของการแก้ไข เพิ่มเติม เปลี่ยนแปลงโค้ด โปรแกรมของเราในภายหลังได้
- ช่วยให้เราสามารถทำงานเป็นทีมได้ง่ายขึ้น
- ช่วยให้เราไปเรียนรู้ต่อยอด เกี่ยวกับ php framework เช่น Zend, Cakephp, Codeigniter อื่นๆ ได้ง่ายขึ้น
- ช่วยให้เราไม่ต้องเขียนโค้ดซ้ำๆ เดิมๆ ทุกครั้ง ให้เพื่อนเอาไปใช้ก็ได้ หรือเอาของเพื่อนมาใช้ก็ได้ อันนี้ดีมาก อิอิ..

แค่นี้ก่อน ไว้บทความหน้า ไปภาคปฏิบัติกันครับ...

Read More

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 ของเราก็จบลงเท่านี้เชิญทดไปทดสอบครับ...

Read More

การสร้าง chat แบบ simple ๆ ภาค1 PHP, jQuery

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

สิ่งที่ต้องมี

เอาละครับมาสร้างฐานข้อมูลกันก่อนดังนี้

CREATE TABLE `mychat` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user` varchar(255) NOT NULL DEFAULT '',
  `msg` text NOT NULL,
  `datetime` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
  `date` char(5) NOT NULL DEFAULT '',
  PRIMARY KEY (`id`)
);

สร้างไฟล์ mychat.php
จากนั้นผมก็จะเริ่มด้วยการสร้างฟอร์มสำหรับส่งข้อความไปเก็บยังฐานข้อมูลก่อนดังนี้

<table>
    <tbody><tr>
        <td>ตรงนี้เอาไว้เรียกไฟล์ chat_out.php</td>
    </tr>
    <tr>
        <td>
            <div id="formsend">
                <input id="msg" name="msg" type="text">
                <button id="send" onclick="Send();">Send</button>
            </div>
        </td>
    </tr>
</tbody></table>

กำหนด css

<style type="text/css">
#msg{
width:450px;
}
</style>

จากนั้นก็สร้าง function javascript ลงไปเพื่อส่งข้อมูลไปยังไฟล์ chat_in.php เพื่อบันทึกลงฐานข้อมูล
ไฟล์ mychat.php

<script type="text/javascript">
function Send(){
var msg = $('#msg').val();
//alert(msg);
var str = Math.random();
var dataString = 'str='+str + '&msg='+msg;
$.ajax({
type: 'POST',
url: 'chat_in.php',
data: dataString,
success:function(data){
document.getElementById('msg').value="";//ล้างค่าใน id msg
}
});
}
</script>

สร้างไฟล์ chat_in.php

<?php
include'../config/config.php';
$msg = $_POST['msg'];
$user = $_COOKIE['']; //เก็บชื่อ user จาก cookie นะครับ
$datetime = date("Y-m-d H:i:s");
$date = date("d");
if($msg != "" && $user != ""){
$sql = "insert into mychat (user,msg,datetime,date) values ('$user','$msg','$datetime','$date')";
mysql_query($sql, $link);


mysql_close();
}
?>

เสร็จแล้วง่ายๆสำหรับไฟล์ chat_in.php

หลังจากนั้นผมก็สร้างไฟล์ chat_out.php ขึ้นมาเพื่อเรียกข้อมูลจากฐานข้อมูลมาแสดง
ไฟล์ chat_out.php

<div id="chatout">
<?php
include '../config/config.php';
$sql = "select * from mychat order by id DESC limit 0,20";//เรียกข้อมูล
$result = mysql_query($sql,$link);
$num = mysql_num_rows($result);
while($row = mysql_fetch_array($result)){
$user[] = $row[user];
$msg[] = $row[msg];
$datetime = $row[datetime];

list($date,$time) = split(' ',$datetime);
list($Y,$m,$d) = split('-',$date);
list($H,$i,$s) = split(':',$time);

switch($m)
{
case "01":$m = "ม.ค."; break;case "02":$m = "ก.พ."; break;
case "03":$m = "มี.ค."; break;case "04":$m = "เม.ย."; break;case "05":
$m = "พ.ค."; break;case "06":$m = "มิ.ย."; break;case "07":$m = "ก.ค."; break;
case "08":$m = "ส.ค."; break;case "09":$m = "ก.ย."; break;case "10":
$m = "ต.ค."; break;case "11":$m = "พ.ย."; break;case "12":$m = "ธ.ค."; break;
}

$Y = $Y+543;
$Y = substr($Y,2);
$date = "$d $m $Y";
$time = "$H:$i";
$datechat[] = $date.' '.$time;
}
?>
</div>

ข้อสังเกตุ
ผมจะรับค่าที่ดึงออกมาจากฐานข้อมูลแบบ array ด้วยการเติม [] ไว้หลังตัวแปร เช่น $user[]
ยกเว้น $datetime เพราะว่าผมต้องการแปลง เดือนและปี มาเป็นแบบไทยก่อน ด้วยการใช้คำสั่ง split()
แยก วัน เดือน ปี ออกเป็นส่วนๆ แล้วนำตัวแปรเดือนมาทำเป็นไทย ด้วย switch() case แล้วก็ทำปีเป็นไทย
ด้วยการนำ 543 มาบวกเข้าไป จากนั้นก็ใช้ฟังก์ชั่น substr() เพื่อทำให้ปีแสดงแค่สองต้วหลังคือ 54
แล้วผมก็นำมาทำเป็น array แบบนี้ $datechat[] = $date.' '.$time;

เมื่อเสร็จแล้วก็สั่ง echo ออกมาด้วยการวนลูปด้วย for

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

ท้ายสุดของไฟล์นี้ ผมก็เขียนโค้ดสั่งให้ลบข้อมูล chat ของเมื่อวานทิ้งไปเสีย ด้วยโค้ดนี้

<?php
$today = date("d");
$sql = "delete from mychat where date != '$today'";
mysql_query($sql, $link);
mysql_close();
?>

แล้วก็กำหนด css ให้กับ div
ไฟล์ chat_out.php

<style>
#chatout{
width:500px;
height:450px;
word-wrap:break-word;
overflow-y:auto;
border:1px solid #000000;
padding:10px;
}
</style>

ข้อสังเกตุ
word-wrap:break-word; เป็นการกำหนดให้ตัวหนังสืออยู่ในกรอบของ div
overflow-y:auto; เป็นการกำหนดให้มี scrollbar ในแนวตั้ง

เมื่อมี scrollbar แล้ว ก็ต้องมากำหนดให้ scrollbar อยู่ติดด้านล่างของ div ตลอดด้วย javascript
ดังนี้

<script type="text/javascript">
$(document).ready(function(){
var scroll = document.getElementById('chatout');
scroll.scrollTop = scroll.scrollHeight;
});
</script>

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

แล้วผมก็ย้อนกลับไปทำงานกับไฟล์ mychat.php ต่อ ด้วยการใช้คำสั่ง javascript
เรียกไฟล์ chat_out.php ขึ้นมาแสดงตอนเรียกเพจครั้งแรกก่อนดังนี้

<script type="text/javascript">
$(document).ready(function() {
$("#mychat").load('chat_out.php');
});
</script>

หลังจากนั้นก็ตั้งเวลาให้กับการเรียกไฟล์ chat_out.php ขึ้นมาแสดงเพื่ออัพเดทข้อมูลแบบ auto ด้วย
การใช้ฟังก์ชั่น setInterval() ของ javascript ดังนี้
( หน่วยของเวลาคือ มิลลิวินาที โดย 1 วินาที = 1000 มิลลิวินาที )

<script type="text/javascript">
$(document).ready(function() {
var refreshId = setInterval(function() {
$("#mychat").load('chat_out.php').fadeIn("slow");
}, 5000);
});
</script>

ยังเหลืออีกนิดหนึ่งสำหรับไฟล์นี้ นั่นก็คือตอนที่เราพิมพ์ข้อความเสร็จแล้ว ไม่อยากลากเมาส์ไปกด send ให้
เสียอารมณ์ แต่เคาะ enter ไปเลยด้วยความมันส์ในอารมณ์ ก็ต้องเพิ่มโค้ด javascript เข้าไปแบบนี้

<script type="text/javascript">
 $('#msg').bind('keypress', function(e) {
        if(e.keyCode==13){
                Send();
        }
});
</script>

เสร็จแล้วสำหรับ chat แบบ simple ของเรา ขอเรียนเชิญไปทดสอบได้เลยครับ....

Read More

Comments Box แสดงความคิดเห็นแบบไม่ต้องรีเฟรชเพจ jQuery, PHP, HTML

เมื่อหลายวันก่อนมีสมาชิก ท่านหนึ่ง.. ถามผมว่ามีคอมเม้นแบบไม่ต้อง Refresh หรือเปล่า ผมตอบว่าไม่มีแต่ก็ได้ สัญญาไว้ว่าจะมาเขียนให้ได้อ่านกัน วันนี้ก็เลยเขียนบทความคั่นรายการ Listbox ด้วย Comments box สักบทความก็แล้วกัน...

บทความนี้มีไฟล์ 3 ไฟล์ ดังนี้
jquery.js
newcomment.php
commentajax.php

ผมจะเริ่มด้วยการเขียน form ก่อน
ไฟล์ newcomment.php

<div class="main">
<div class="formcomment">
  
<form action="#" method="post">
<input name="title" id="name" type="text">
Name<span class="star">*</span>
<input name="email" id="email" type="text">
Email<span class="star">*</span><br>
<br>
<textarea name="comment" id="comment"></textarea><br>
<input class="submit" value="Submit" type="submit">
</form>
  
</div>
</div>

จากนั้นผมก็สร้าง div สำหรับโชว์คอมเม้น อยู่ภายในคลาสเมน

<div id="showcomment"></div>

ตรงนี้ท่านก็เขียนโค้ดเพื่อดึงข้อมูลคอมเม้นที่บันทึกแล้วขึ้นมาแสดงก่อนอยู่ภายในไอดีโชว์คอมเม้น
ตรงนี้ผมแค่แสดงตัวอย่างให้ท่านดูเท่านั้น

<table><tbody><tr><td valign="top">
<img src="http://www.bookneo.com/images_user/admin.png" style="float:left;
 width:60px; margin-right:20px">
</td><td>
<div style="border:2px dashed #dddddd;padding:5px;width:300px;">
<span style="font-size:16px; color:#663399; font-weight:bold"></span>
<span>
<?php echo "<font color='#1BAFD5'--><b>admin</b>";//$name ?>
</span> <br><br>
<?php echo " ตรงนี้ท่านก็เขียนโค้ดเพื่อดึงข้อมูลคอมเม้นที่บันทึกแล้วขึ้นมาแสดงก่อน";//$comment ?>
</div>
</td></tr></tbody></table>

แล้วผมก็สร้าง แท็ก ol ขึ้นมาเพื่ออัพเดทคอมเม้นที่มาใหม่พร้อมกับ แท็ก li จากไฟล์ commentajax.php

<ol id="update" class="showcomment"></ol>

แล้วผมก็ใส่ CSS ให้กับไฟล์ newcomment.php

.main{
    margin-left:250px;
    }
  
    .submit{
    margin-left:330px;
    background: #2B417D;
    font-weight: bold;
    color:white;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    padding: 3px 3px 3px 3px;
    }
    textarea
    {
    color:#000000;
    font-size:14px;
    border:#1BAFD5 solid 2px;
    height:124px;
    margin-bottom:10px;
    width:400px;
    height:80px;
    }
    .star
    {
    color:#FF0000;
    font-size:16px;
    font-weight:bold;
    padding-left:5px;
    }
    #email{
  
    }
    .cleaner_h5{
    height:5px;
    }
    #update{
    border:0px solid #dddddd;
    width:398px;
    padding:10px;
    word-wrap:break-word;
    overflow: hidden;
    }
    ol.showcomment{
     list-style:none;
     font-size:1.2em;
     margin-left: -10px;
    }
    ol.showcomment li{
    display:none;
    position:relative;
    padding:.7em 0 .6em 0;
    }
    ol.oldcomment{
    list-style:none;
    font-size:1.2em;
    margin-left: 0px;
    }
    ol.oldcomment li{
    position:relative;
    padding:.7em 0 .6em 0;
    }

จากนั้นก็มาถึงคิวของ jQuery ที่เราจะส่งข้อมูลแบบไม่ต้อง refresh กัน

$(function() {
  
$(".submit").click(function() {
  
var name = $("#name").val();
var email = $("#email").val();
var comment = $("#comment").val();
var dataString = 'name='+ name + '&email=' + email + '&comment=' + comment;
//alert(dataString);
if(name=='' || email=='' || comment=='')
{
alert('กรุณากรอกข้อมูลให้ครบด้วยนะกรึ๊บ!');
}
else
{
  
$.ajax({
type: "POST",
url: "commentajax.php",
data: dataString,
cache: false,
success: function(data){
$("ol#update").append(data);
$("ol#update li:last").fadeIn("slow"); //นำข้อมูลมาแสดงด้วยการต่อท้าย li ตัวล่าสุด
document.getElementById('email').value='';//สั่งให้ form ทั้งหมดว่างเปล่า
document.getElementById('name').value='';
document.getElementById('comment').value='';
}
});
}
return false;
});
});

ไปที่ไฟล์ commentajax.php
รับข้อมูลเพื่อเก็บลงฐานข้อมูล

if($_POST)
{
$name=$_POST['name'];
$email=$_POST['email'];
$comment=$_POST['comment'];
  
//เขียนโค้ดบันทึกลงฐานข้อมูลตรงนี้ครับ
  
}
  
else { }

จากนั้นก็นำข้อมูลที่รับมานำมาแสดงเพื่อ return ค่าส่งกลับไปให้กับ javascript นำไปแสดง

<li class="box" valign="top">
<table><tbody><tr><td valign="top">
<img src="http://www.bookneo.com/images/default_avatar.gif" style="float:left;
 width:60px; margin-right:20px">
</td><td>
<div style="border:2px dashed #dddddd;padding:5px;width:300px;">
<span style="font-size:16px; color:#3859BB; font-weight:bold">
<?php echo $name;?></span> <br><br>
<?php echo $comment; ?>
  
</div>
</td></tr></tbody></table>
</li>

โค้ดที่เสร็จแล้ว
ไฟล์ newcomment.php

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
  
$(".submit").click(function() {
  
var name = $("#name").val();
var email = $("#email").val();
var comment = $("#comment").val();
var dataString = 'name='+ name + '&email=' + email + '&comment=' + comment;
//alert(dataString);
if(name=='' || email=='' || comment=='')
{
alert('กรุณากรอกข้อมูลให้ครบด้วยนะกรึ๊บ!');
}
else
{
  
$.ajax({
type: "POST",
url: "commentajax.php",
data: dataString,
cache: false,
  
success: function(data){
$("ol#update").append(data);
$("ol#update li:last").fadeIn("slow");
document.getElementById('email').value='';
document.getElementById('name').value='';
document.getElementById('comment').value='';
}
});
}
return false;
});
});
  
</script>
    <style type="text/css">
    .main{
    margin-left:250px;
    }
  
    .submit{
    margin-left:330px;
    background: #2B417D;
    font-weight: bold;
    color:white;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    padding: 3px 3px 3px 3px;
    }
    textarea
    {
    color:#000000;
    font-size:14px;
    border:#1BAFD5 solid 2px;
    height:124px;
    margin-bottom:10px;
    width:400px;
    height:80px;
    }
    .star
    {
    color:#FF0000;
    font-size:16px;
    font-weight:bold;
    padding-left:5px;
    }
    #email{
    
    }
    .cleaner_h5{
    height:5px;
    }
    #update{
    border:0px solid #dddddd;
    width:398px;
    padding:10px;
    word-wrap:break-word;
    overflow: hidden;
    }
    ol.showcomment{
     list-style:none;
     font-size:1.2em;
     margin-left: -10px;
    }
    ol.showcomment li{
    display:none;
    position:relative;
    padding:.7em 0 .6em 0;
    }
    ol.oldcomment{
    list-style:none;
    font-size:1.2em;
    margin-left: 0px;
    }
    ol.oldcomment li{
    position:relative;
    padding:.7em 0 .6em 0;
    }
  
    </style>
      
      
      
  
<div class="main">
  
<div id="showcomment">
  
  
<table><tbody><tr><td valign="top">
<img src="http://www.bookneo.com/images_user/admin.png" style="float:left;
 width:60px; margin-right:20px">
</td><td>
<div style="border:2px dashed #dddddd;padding:5px;width:300px;">
<span style="font-size:16px; color:#663399; font-weight:bold"></span>
<span>
<?php echo "<font color='#1BAFD5'><b>admin</b>";//$name ?>
</span> <br><br>
<?php echo " ตรงนี้ท่านก็เขียนโค้ดเพื่อดึงข้อมูลคอมเม้นที่บันทึกแล้วขึ้นมาแสดงก่อน";//$comment ?>
</div>
</td></tr></tbody></table>
  
  
<div style="margin-top:-20px;"></div>
  
<ol id="update" class="showcomment"></ol>
</div>
  
<div class="formcomment">
<div id="loading"></div>
<form action="#" method="post">
  
<input name="title" id="name" type="text">
Name<span class="star">*</span>
<input name="email" id="email" type="text">
Email<span class="star">*</span><br>
<br>
<textarea name="comment" id="comment"></textarea><br>
<input class="submit" value="Submit" type="submit">
  
</form>
  
</div>
</div>

ไฟล์ commentajax.php

<?php

if($_POST)
{
$name=$_POST['name'];
$email=$_POST['email'];
$comment=$_POST['comment'];
    
//เขียนโค้ดบันทึกลงฐานข้อมูลตรงนี้ครับ
  
}
  
else { }
  
?>
<li class="box" valign="top">
<table><tbody><tr><td valign="top">
<img src="http://www.bookneo.com/images/default_avatar.gif" style="float:left;
 width:60px; margin-right:20px">
</td><td>
<div style="border:2px dashed #dddddd;padding:5px;width:300px;">
<span style="font-size:16px; color:#3859BB; font-weight:bold">
<?php echo $name;?></span> <br><br>
<?php echo $comment;?>
  
</div>
</td></tr></tbody></table>
</li>

บทความนี้ก็จบลงเพียงเท่านี้ครับ ผิดพลาดยังไง ขออภัยด้วยครับ

Read More

วิธีการส่งค่าจาก Multiple Listbox ด้วย PHP, jQuery, jSon

เป็นบทความต่อเนื่องจากบทความก่อนหน้า เป็นการส่งค่าแบบ Multiple Listbox ซึ่งสามารถส่งค่าได้ หลายๆตัวในการกด Submit เพียงครั้งเดียว ด้วยการส่งค่าแบบ Array ด้วย PHP, jQuery, jSon...

รูปแบบการส่งค่าด้วย PHP

test1
test2
test3
test4
test5
test6

ข้อสังเกตุ
ท่านสังเกตุดูนะครับตรง name="multiplelisbox[]" ตรงนี้เป็นการส่งค่าแบบ Array ไปให้
PHP ประมวลผลนะครับ

รูปแบบการส่งค่าด้วย jQuery + jSon
jQuery

ข้อสังเกตุ
เก็บค่าแบบ value -> $(selected).val();
เก็บค่าแบบ text -> $(selected).text();
ตรงนี้ var datastring = {'textvalues':JSON.stringify(textvalues)} เป็นการสร้างตัวแปรข้อมูลแบบ jSon ครับ
HTML

Multiple Listbox



test1
test2
test3
test4
test5
test6

รูปแบบการส่งค่าด้วย jQuery
jQuery

ข้อสังเกตุ
เก็บค่าแบบ value -> document.formjquery.listboxjquery[i].value ;
เก็บค่าแบบ text -> document.formjquery.listboxjquery[i].text ;
ตรงนี้ document.formjquery.listboxjquery.length; นับแถวใน from ก่อนจากนั้นก็วนลูป
เฉพาะตัวที่ selected ออกมาครับ
HTML Multiple Listbox

test1 test2 test3 test4 test5 test6

ไฟล์ listboxphp.php สำหรับการรับค่าจาก Listbox

/*---- รับค่าจากการส่งแบบ PHP ----*/
if(isset($_POST['multiplelisboxphp'])){
$text = array($_POST['multiplelisboxphp']);
echo "
";
echo  "textvalues = ";
foreach ($text as $key => $textvalues){
for($i=0; $i< count($textvalues); $i++){
echo  $textvalues[$i];
echo " ";
}
echo "
";
echo "เป็นการเก็บค่าของ value นะครับ";
}
}
/*---- รับค่าจากการส่งแบบ jQuery + jSon ----*/
if($_POST['textvalues']){
$textvalues = $_POST['textvalues'];
$find = array('\\','"','[',']');
$replace = array("","","","");
$textvalues = str_replace($find, $replace, $textvalues);
echo $textvalues;
//print_r($textvalues);
}

/*---- รับค่าจากการส่งแบบ jQuery ----*/
if($_POST['textval']){
  $textval =   $_POST['textval'];
  echo $textval;
}
?>

บทความนี้ก็ขอจบเพียงเท่านี้ครับ ผิดพลาดยังไง ขออภัยด้วยครับ

Read More