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