<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>jQuery, Ajax, PHP, JSON, XML, Web Technologies &#187; Souce Code</title>
	<atom:link href="http://blog.chonla.com/category/souce-code/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.chonla.com</link>
	<description>คุยกันเรื่อง jQuery, Ajax, PHP, JSON, XML และ Web Technologies เป็นภาษาไทยกันดีกว่า</description>
	<lastBuildDate>Tue, 17 Jan 2012 18:27:02 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>วันแรกของเดือน วันสุดท้ายของเดือน เป็นวันอะไรนะ</title>
		<link>http://blog.chonla.com/2012/01/%e0%b8%a7%e0%b8%b1%e0%b8%99%e0%b9%81%e0%b8%a3%e0%b8%81%e0%b8%82%e0%b8%ad%e0%b8%87%e0%b9%80%e0%b8%94%e0%b8%b7%e0%b8%ad%e0%b8%99-%e0%b8%a7%e0%b8%b1%e0%b8%99%e0%b8%aa%e0%b8%b8%e0%b8%94%e0%b8%97%e0%b9%89/</link>
		<comments>http://blog.chonla.com/2012/01/%e0%b8%a7%e0%b8%b1%e0%b8%99%e0%b9%81%e0%b8%a3%e0%b8%81%e0%b8%82%e0%b8%ad%e0%b8%87%e0%b9%80%e0%b8%94%e0%b8%b7%e0%b8%ad%e0%b8%99-%e0%b8%a7%e0%b8%b1%e0%b8%99%e0%b8%aa%e0%b8%b8%e0%b8%94%e0%b8%97%e0%b9%89/#comments</comments>
		<pubDate>Tue, 17 Jan 2012 18:22:22 +0000</pubDate>
		<dc:creator>chonla</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Souce Code]]></category>
		<category><![CDATA[Date]]></category>

		<guid isPermaLink="false">http://blog.chonla.com/?p=350</guid>
		<description><![CDATA[วิธีหาว่าวันแรกของเดือนเป็นวันอะไร หรือวันสุดท้ายของเดือนเป็นวันอะไร ง่ายมาก วิธีตรงไปตรงมา เราประยุกต์ใช้ฟังก์ชั่น 2 ฟังก์ชั่นคือ strtotime() กับ date() ผลที่ได้จะออกมาแบบนี้ function firstDayOfMonth($monthstamp) { // $monthstamp มีหน้าตาเป็น mmyyyy ครับ // เช่น เราต้องการทราบว่าเดือนมกราคม ปี 2012 เป็นวันอะไร ก็ใช้ firstDayOfMonth('012012') // ปีที่ใช้ก็ใช้เป็นปี ค.ศ. นะครับ     $mm = substr($monthstamp,0,2); $yyyy = substr($monthstamp,-4); return date('w',strtotime("{$mm}/01/{$yyyy} 00:00:00")); } ส่วนวิธีหาวันสุดท้ายของเดือนก็ทำแบบเดียวกันครับ ซับซ้อนขึ้นอีกแค่นิดเดียวเอง function lastDayOfMonth($monthstamp) {     $mm = substr($monthstamp,0,2); $yyyy = substr($monthstamp,-4); return [...]]]></description>
			<content:encoded><![CDATA[<p>วิธีหาว่าวันแรกของเดือนเป็นวันอะไร หรือวันสุดท้ายของเดือนเป็นวันอะไร ง่ายมาก วิธีตรงไปตรงมา เราประยุกต์ใช้ฟังก์ชั่น 2 ฟังก์ชั่นคือ strtotime() กับ date() ผลที่ได้จะออกมาแบบนี้</p>
<p><span id="more-350"></span></p>
<pre name="code" class="js">function firstDayOfMonth($monthstamp) {
    // $monthstamp มีหน้าตาเป็น mmyyyy ครับ
    // เช่น เราต้องการทราบว่าเดือนมกราคม ปี 2012 เป็นวันอะไร ก็ใช้ firstDayOfMonth('012012')
    // ปีที่ใช้ก็ใช้เป็นปี ค.ศ. นะครับ
    $mm = substr($monthstamp,0,2);
    $yyyy = substr($monthstamp,-4);
    return date('w',strtotime("{$mm}/01/{$yyyy} 00:00:00"));
}</pre>
<p>ส่วนวิธีหาวันสุดท้ายของเดือนก็ทำแบบเดียวกันครับ ซับซ้อนขึ้นอีกแค่นิดเดียวเอง</p>
<pre name="code" class="js">function lastDayOfMonth($monthstamp) {
    $mm = substr($monthstamp,0,2);
    $yyyy = substr($monthstamp,-4);
    return date('w',strtotime('-1 second', strtotime('+1 month', strtotime("{$mm}/01/{$yyyy} 00:00:00"))));
}</pre>
<p>ค่าที่ได้จะมีค่าตั้งแต่ 0 ถึง 6 มีความหมายตั้งแต่วันอาทิตย์ (0) ถึงเสาร์ (6) ครับ</p>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fblog.chonla.com%2F2012%2F01%2F%25e0%25b8%25a7%25e0%25b8%25b1%25e0%25b8%2599%25e0%25b9%2581%25e0%25b8%25a3%25e0%25b8%2581%25e0%25b8%2582%25e0%25b8%25ad%25e0%25b8%2587%25e0%25b9%2580%25e0%25b8%2594%25e0%25b8%25b7%25e0%25b8%25ad%25e0%25b8%2599-%25e0%25b8%25a7%25e0%25b8%25b1%25e0%25b8%2599%25e0%25b8%25aa%25e0%25b8%25b8%25e0%25b8%2594%25e0%25b8%2597%25e0%25b9%2589%2F&amp;title=%E0%B8%A7%E0%B8%B1%E0%B8%99%E0%B9%81%E0%B8%A3%E0%B8%81%E0%B8%82%E0%B8%AD%E0%B8%87%E0%B9%80%E0%B8%94%E0%B8%B7%E0%B8%AD%E0%B8%99%20%E0%B8%A7%E0%B8%B1%E0%B8%99%E0%B8%AA%E0%B8%B8%E0%B8%94%E0%B8%97%E0%B9%89%E0%B8%B2%E0%B8%A2%E0%B8%82%E0%B8%AD%E0%B8%87%E0%B9%80%E0%B8%94%E0%B8%B7%E0%B8%AD%E0%B8%99%20%E0%B9%80%E0%B8%9B%E0%B9%87%E0%B8%99%E0%B8%A7%E0%B8%B1%E0%B8%99%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3%E0%B8%99%E0%B8%B0" id="wpa2a_2"><img src="http://blog.chonla.com/wp-content/plugins/add-to-any/share_save_171_16.gif" width="171" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.chonla.com/2012/01/%e0%b8%a7%e0%b8%b1%e0%b8%99%e0%b9%81%e0%b8%a3%e0%b8%81%e0%b8%82%e0%b8%ad%e0%b8%87%e0%b9%80%e0%b8%94%e0%b8%b7%e0%b8%ad%e0%b8%99-%e0%b8%a7%e0%b8%b1%e0%b8%99%e0%b8%aa%e0%b8%b8%e0%b8%94%e0%b8%97%e0%b9%89/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>สร้าง dynamic object แบบ runtime</title>
		<link>http://blog.chonla.com/2011/05/%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2%e0%b8%87-dynamic-object-%e0%b9%81%e0%b8%9a%e0%b8%9a-runtime/</link>
		<comments>http://blog.chonla.com/2011/05/%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2%e0%b8%87-dynamic-object-%e0%b9%81%e0%b8%9a%e0%b8%9a-runtime/#comments</comments>
		<pubDate>Mon, 23 May 2011 17:58:17 +0000</pubDate>
		<dc:creator>chonla</dc:creator>
				<category><![CDATA[Performance Tuning]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Souce Code]]></category>
		<category><![CDATA[class]]></category>
		<category><![CDATA[factory]]></category>
		<category><![CDATA[instantiate]]></category>
		<category><![CDATA[Run-Time]]></category>

		<guid isPermaLink="false">http://blog.chonla.com/?p=319</guid>
		<description><![CDATA[จริง ๆ ใน php วิธีการสร้าง object นั้น สำหรับคนที่เคยเขียน class มาแล้ว มันไม่ใช่เรื่องยากอะไรเลย แค่ใช้ keyword ว่า new เท่านั้นเองครับ เรื่องที่ผมจะคุยต่อจากนี้ เป็นเรื่องที่ไม่ได้ใหม่เลย แต่เป็นการนำสิ่งที่รู้อยู่แล้วมาประยุกต์ใช้ร่วมกันในกรอบที่หลาย ๆ คนอาจจะรู้จักดีอยู่แล้ว&#8230; Factory นั่นเองครับ Factory pattern เป็นรูปแบบที่ทำให้เราสามารถสร้าง object (instantiate) ได้ในช่วง runtime โดยการส่ง parameter ที่เป็นชื่อ class name เข้าไปเท่านั้น ไอเดียตรงนี้ ใครเคยเขียนโค๊ดใน Joomla อาจจะเคยเห็นชื่อ JFactory กันมาบ้าง จากเดิมที่เราเคยเขียนโค๊ดเพื่อที่จะเลือกสร้าง object ประมาณนี้ include_once ('class/object.class.php'); $obj = new ClassName(); $obj-&#62;display(); หรือ จะเป็นแบบที่ dynamic [...]]]></description>
			<content:encoded><![CDATA[<p>จริง ๆ ใน php วิธีการสร้าง object นั้น สำหรับคนที่เคยเขียน class มาแล้ว มันไม่ใช่เรื่องยากอะไรเลย แค่ใช้ keyword ว่า new เท่านั้นเองครับ เรื่องที่ผมจะคุยต่อจากนี้ เป็นเรื่องที่ไม่ได้ใหม่เลย แต่เป็นการนำสิ่งที่รู้อยู่แล้วมาประยุกต์ใช้ร่วมกันในกรอบที่หลาย ๆ คนอาจจะรู้จักดีอยู่แล้ว&#8230; Factory นั่นเองครับ</p>
<p><span id="more-319"></span>Factory pattern เป็นรูปแบบที่ทำให้เราสามารถสร้าง object (instantiate) ได้ในช่วง runtime โดยการส่ง parameter ที่เป็นชื่อ class name เข้าไปเท่านั้น ไอเดียตรงนี้ ใครเคยเขียนโค๊ดใน Joomla อาจจะเคยเห็นชื่อ JFactory กันมาบ้าง</p>
<p>จากเดิมที่เราเคยเขียนโค๊ดเพื่อที่จะเลือกสร้าง object ประมาณนี้</p>
<pre class="js">include_once ('class/object.class.php');
$obj = new ClassName();
$obj-&gt;display();</pre>
<p>หรือ จะเป็นแบบที่ dynamic ขึ้นกว่าเดิมอีกนิดนึง</p>
<pre class="js">$obj = null;
if ($action == 'check') {
include_once ('class/check.class.php');
$obj = new ClassCheck();
} elseif ($action == 'dispatch') {
include_once ('class/dispatch.class.php');
$obj = new ClassDispatch();
} else {
include_once ('class/default.class.php');
$obj = new ClassDefault();
}
$obj-&gt;execute();</pre>
<p>จะเห็นว่าแบบที่ 2 จะ dynamic กว่าแบบ 1 แต่ยาวเหยียด เราจะรวบรัดแก้ไขปัญหาเรื่องนี้โดยการใช้ Factory Pattern โดยการสร้าง class ขึ้นมา 1 class และมี static function 1 ตัว ชื่อ create (จริง ๆ จะใช้ชื่ออื่นก็ได้) ยกตัวอย่างเช่น</p>
<pre class="js">class XFactory {
public static function create($classname) {
if (include_once 'classpath/'.$classname) {
$clsn = 'Class' . ucfirst($classname);
if (class_exists($clsn)) {
return new $clsn;
} else {
throw new Exception('Class not found');
}
} else {
throw new Exception('Class not found');
}
}
}</pre>
<p>ทีนี้เวลาเราจะใช้งานก็เรียกใช้แค่นี้ครับ</p>
<pre class="js">$chkobj = XFactory::create('check');
$dspobj = XFactory::create('dispatch');</pre>
<p>คราวนี้ง่ายขึ้นมั๊ยครับ <img src='http://blog.chonla.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>อ้างอิง</p>
<ul>
<li><span style="color: #0000ee;"><a href="http://php.net/manual/en/language.oop5.patterns.php">http://php.net/manual/en/language.oop5.patterns.php</a></span></li>
<li><a href="http://truelogic.org/wordpress/2011/03/27/a-very-efficient-way-of-instantiating-a-class-dynamically-in-php/">http://truelogic.org/wordpress/2011/03/27/a-very-efficient-way-of-instantiating-a-class-dynamically-in-php/</a></li>
</ul>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fblog.chonla.com%2F2011%2F05%2F%25e0%25b8%25aa%25e0%25b8%25a3%25e0%25b9%2589%25e0%25b8%25b2%25e0%25b8%2587-dynamic-object-%25e0%25b9%2581%25e0%25b8%259a%25e0%25b8%259a-runtime%2F&amp;title=%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%20dynamic%20object%20%E0%B9%81%E0%B8%9A%E0%B8%9A%20runtime" id="wpa2a_4"><img src="http://blog.chonla.com/wp-content/plugins/add-to-any/share_save_171_16.gif" width="171" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.chonla.com/2011/05/%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2%e0%b8%87-dynamic-object-%e0%b9%81%e0%b8%9a%e0%b8%9a-runtime/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>เลิกใช้เหอะไอ้ .inc น่ะ</title>
		<link>http://blog.chonla.com/2010/09/%e0%b9%80%e0%b8%a5%e0%b8%b4%e0%b8%81%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b9%80%e0%b8%ab%e0%b8%ad%e0%b8%b0%e0%b9%84%e0%b8%ad%e0%b9%89-inc-%e0%b8%99%e0%b9%88%e0%b8%b0/</link>
		<comments>http://blog.chonla.com/2010/09/%e0%b9%80%e0%b8%a5%e0%b8%b4%e0%b8%81%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b9%80%e0%b8%ab%e0%b8%ad%e0%b8%b0%e0%b9%84%e0%b8%ad%e0%b9%89-inc-%e0%b8%99%e0%b9%88%e0%b8%b0/#comments</comments>
		<pubDate>Thu, 02 Sep 2010 18:43:00 +0000</pubDate>
		<dc:creator>chonla</dc:creator>
				<category><![CDATA[Apache]]></category>
		<category><![CDATA[Performance Tuning]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Security]]></category>
		<category><![CDATA[Souce Code]]></category>
		<category><![CDATA[Extension]]></category>

		<guid isPermaLink="false">http://blog.chonla.com/?p=293</guid>
		<description><![CDATA[เคยเขียนเว็บที่เป็น แล้วมีหน้าที่ต้อง include เข้ามาใช่มั๊ยครับ หน้า include ที่ว่านี้ ผมไม่ได้หมายถึงแค่ส่วนประกอบบนหน้าเว็บอย่างเดียวนะครับ แต่ผมรวมถึงพวกค่า config, ค่า constant, function ต่าง ๆ ที่ทำเป็น library ไว้ ฯลฯ ตั้งชื่อนามสกุลไฟล์พวกนั้นไว้ว่าอะไรครับ .inc หรือเปล่า เลิกใช้เถอะครับ ใส่นามสกุลอย่างที่มันควรจะเป็นเถอะครับ ผมเคยเห็นคนใช้ไฟล์นามสกุล .inc ครั้งแรกตอนสมัยเขียน ASP สมัยนั้นผมยังเป็นเด็กเอ๊าะ ๆ วัยละอ่อนที่ไม่รู้ประสีประสาอะไร มันจะมีไฟล์ที่ผมใช้ประจำอยู่ไฟล์นึงที่ผมโหลดมาจากในเน็ต มันมีชื่อเต็ม ๆ ว่า adodb.inc ครับ ไฟล์นี้เป็น text file ธรรมดานี่แหละ ข้างในเป็น ASP Script (Server-Sided VBScript) ที่มีการประกาศค่าคงที่ต่าง ๆ มากมาย ที่ช่วยให้ชีวิตในการเขียน ASP สะดวกขึ้นอย่างมาก ผมใช้มันมาตลอดเวลาที่ผมเขียน ASP จนกระทั่งผมเลิกเขียน [...]]]></description>
			<content:encoded><![CDATA[<p>เคยเขียนเว็บที่เป็น แล้วมีหน้าที่ต้อง include เข้ามาใช่มั๊ยครับ หน้า include ที่ว่านี้ ผมไม่ได้หมายถึงแค่ส่วนประกอบบนหน้าเว็บอย่างเดียวนะครับ แต่ผมรวมถึงพวกค่า config, ค่า constant, function ต่าง ๆ ที่ทำเป็น library ไว้ ฯลฯ ตั้งชื่อนามสกุลไฟล์พวกนั้นไว้ว่าอะไรครับ .inc หรือเปล่า เลิกใช้เถอะครับ ใส่นามสกุลอย่างที่มันควรจะเป็นเถอะครับ</p>
<p><span id="more-293"></span>ผมเคยเห็นคนใช้ไฟล์นามสกุล .inc ครั้งแรกตอนสมัยเขียน ASP สมัยนั้นผมยังเป็นเด็กเอ๊าะ ๆ วัยละอ่อนที่ไม่รู้ประสีประสาอะไร มันจะมีไฟล์ที่ผมใช้ประจำอยู่ไฟล์นึงที่ผมโหลดมาจากในเน็ต มันมีชื่อเต็ม ๆ ว่า adodb.inc ครับ ไฟล์นี้เป็น text file ธรรมดานี่แหละ ข้างในเป็น ASP Script (Server-Sided VBScript) ที่มีการประกาศค่าคงที่ต่าง ๆ มากมาย ที่ช่วยให้ชีวิตในการเขียน ASP สะดวกขึ้นอย่างมาก ผมใช้มันมาตลอดเวลาที่ผมเขียน ASP จนกระทั่งผมเลิกเขียน ASP ไป</p>
<p>จริง ๆ ผมไม่ได้หมายถึงแค่ .inc อย่างเดียวหรอกครับ ผมหมายถึง text file ทุกชนิดที่ server มันไม่รู้จัก หรือประมวลผลไม่ได้ ไม่ว่าจะเป็น .txt, .conf, .config, .inc, .duck, .dat, .ini หรือแม้กระทั่งไม่ใส่นามสกุลให้มันเลยก็ตาม ถ้าข้อความข้างในเป็น text มันก็คือ text file อยู่วันยังค่ำ</p>
<p>ปัญหามันอยู่ที่ไหนเหรอครับ ยังมีเว็บโปรแกรมเมอร์หลายคนที่ยังตั้งนามสกุลไฟล์เป็นพวกนี้อยู่ และมิหนำซ้ำ ยังเอาไป include ใช้งานจริงเสียด้วย ผมยกตัวอย่างกรณีของ php ละกันครับ ตัว php web server เอง (เช่น Apache) ปกติแล้วมันไม่ประมวลผลไฟล์นามสกุลพวกนี้หรอกครับ ยกเว้นแต่เราไป include ไฟล์พวกนั้นลงไปใน script ที่เราเขียน เช่นถ้าเป็น php มันก็จะประมวลผลไฟล์นามสกุลพวก .php, .php4, .php5 (หรืออะไรก็แล้วแต่ตามที่ตั้งไว้) ถ้าเราสั่ง include(&#8220;test.inc&#8221;) แบบนี้มันจะประมวลผล test.inc ให้ครับ แต่ถ้าเราลองเรียก test.inc ตรง ๆ ผ่าน browser มันไม่ประมวลผลหรอกครับ ทีนี้พอ server มันไม่ประมวลผล สิ่งที่มันคืนกลับมาให้เราเห็น มันก็คือข้อความข้างในไฟล์นั่นเอง ค่าต่าง ๆ ที่เราตั้งไว้เก็บไว้กะว่าจะดูคนเดียว ทั้ง username กับ password ของ database ทั้งโน่น ทั้งนี่ ตั้งหลายอย่าง ถูกเผยแพร่ไปง่าย ๆ ด้วยเหตุผลเพียงการตั้งนามสกุลไฟล์แบบนี้เท่านั้นเอง</p>
<p>พอมองเห็นปัญหาแล้วใช่มั๊ยครับ หลายคนตั้งนามสกุลไฟล์เป็นแบบนี้ เพื่อที่จะให้สื่อความหมายว่ามันเป็น include file นะ ก็ย่อว่า inc ไง หรือ config file นะ ก็ย่อว่า conf ไง ใช่ครับ มันสื่อ แต่มันไม่ได้เรื่องครับ อยากจะตั้งให้สื่อ แล้วยังจะให้ server ประมวลผล ก็ง่ายนิดเดียวครับ แค่เติมนามสกุลมันลงไปอีกหน่อยก็ได้ครับ เป็น .inc.php ก็ได้ เป็น .conf.php ก็ได้ สมัยไหนแล้ว ไม่ใช่ DOS นะครับ จะตั้งชื่อมีจุดหลาย ๆ จุดไม่ได้</p>
<p>แล้วคนอื่นจะรู้ได้ไงว่าเราตั้งนามสกุลไว้แบบนี้น่ะเหรอครับ ก็ตอนที่ server ล่ม หรือ script เจ๊งไงครับ เคยเห็นมั๊ยครับ ที่ script ทำงานไม่ถูกต้อง แล้วมัน report error ออกมา พร้อมชื่อไฟล์ที่มีปัญหา คิดว่ามันจะไม่มีวันเกิดขึ้นเลย 100% เหรอครับ กันไว้ก่อนดีกว่าครับ ดีกว่าจะมานั่งเสียใจทีหลังเพราะความเลินเล่อเล็ก ๆ น้อย ๆ</p>
<p>(entry นี้ เหมือนจะเป็นการบ่นเลยแฮะ แต่เพิ่งไปเจอคนตั้งชื่อไฟล์นามสกุลแบบนี้มา แล้ววันก่อนเว็บมันเจ๊งพอดี เลยเข้าไปดู เห็นอะไรหลายอย่างที่ไม่ควรให้เห็นเลยเชียว เฮ้อ&#8230; เห็นแล้วกลุ้ม เอามาบ่นหน่อยดีกว่า XD)</p>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fblog.chonla.com%2F2010%2F09%2F%25e0%25b9%2580%25e0%25b8%25a5%25e0%25b8%25b4%25e0%25b8%2581%25e0%25b9%2583%25e0%25b8%258a%25e0%25b9%2589%25e0%25b9%2580%25e0%25b8%25ab%25e0%25b8%25ad%25e0%25b8%25b0%25e0%25b9%2584%25e0%25b8%25ad%25e0%25b9%2589-inc-%25e0%25b8%2599%25e0%25b9%2588%25e0%25b8%25b0%2F&amp;title=%E0%B9%80%E0%B8%A5%E0%B8%B4%E0%B8%81%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B9%80%E0%B8%AB%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%AD%E0%B9%89%20.inc%20%E0%B8%99%E0%B9%88%E0%B8%B0" id="wpa2a_6"><img src="http://blog.chonla.com/wp-content/plugins/add-to-any/share_save_171_16.gif" width="171" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.chonla.com/2010/09/%e0%b9%80%e0%b8%a5%e0%b8%b4%e0%b8%81%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b9%80%e0%b8%ab%e0%b8%ad%e0%b8%b0%e0%b9%84%e0%b8%ad%e0%b9%89-inc-%e0%b8%99%e0%b9%88%e0%b8%b0/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>ปลั๊กอิน BBCode สำหรับ jQuery</title>
		<link>http://blog.chonla.com/2009/11/%e0%b8%9b%e0%b8%a5%e0%b8%b1%e0%b9%8a%e0%b8%81%e0%b8%ad%e0%b8%b4%e0%b8%99-bbcode-%e0%b8%aa%e0%b8%b3%e0%b8%ab%e0%b8%a3%e0%b8%b1%e0%b8%9a-jquery/</link>
		<comments>http://blog.chonla.com/2009/11/%e0%b8%9b%e0%b8%a5%e0%b8%b1%e0%b9%8a%e0%b8%81%e0%b8%ad%e0%b8%b4%e0%b8%99-bbcode-%e0%b8%aa%e0%b8%b3%e0%b8%ab%e0%b8%a3%e0%b8%b1%e0%b8%9a-jquery/#comments</comments>
		<pubDate>Mon, 16 Nov 2009 10:33:23 +0000</pubDate>
		<dc:creator>chonla</dc:creator>
				<category><![CDATA[Homemade Plugin]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Plugins]]></category>
		<category><![CDATA[Souce Code]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[BBCode]]></category>
		<category><![CDATA[Plugin]]></category>
		<category><![CDATA[Regular Expression]]></category>

		<guid isPermaLink="false">http://blog.chonla.com/?p=245</guid>
		<description><![CDATA[วันนี้ผมลองเขียน plugin แก้ขัดที่หายหน้าหายตาไปนานมาให้ลองกันครับ นั่นก็คือปลั๊กอินที่ใช้ render BBCode ครับ ใครที่เป็นนักโพสเว็บบอร์ดคงจะรู้จักกันดีว่า BBCode คืออะไร สำหรับใครที่ยังไม่รู้จักก็อ่านย่อหน้าถัดไปได้เลยครับ BBCode เราเรียกได้ว่าเป็น lightweighted markup language ใช้สำหรับจัดรูปแบบข้อความตามเว็บบอร์ดต่าง ๆ ครับ มีลักษณะของแท็กอยู่ในเครื่องหมายก้ามปู เช่น [b]ตัวหนา[/b] ครับ เจ้าตัว BBCode นี่เว็บบราวเซอร์มันไม่รู้จักครับ ต้องทำการแปลไปเป็น markup language ที่ใช้ทั่ว ๆ ไปก่อนครับ นั่นก็คือ HTML หรือ XHTML ครับ เช่น จาก [b]ตัวหนา[/b] จะถูกแปลงไปเป็น &#60;b&#62;ตัวหนา&#60;/b&#62; แล้วค่อยนำไปแสดงผลครับ จุดประสงค์หลัก ๆ ของ BBCode คือ เพื่อให้ผู้ใช้สามารถจัดรูปแบบข้อความได้ง่ายขึ้น รวมไปถึงเพื่อความปลอดภัยของการแสดงผลข้อความที่โพสโดยผู้ใช้ด้วยครับ เช่น การควบคุมการใช้งาน javascript การควบคุมให้ใช้ tag [...]]]></description>
			<content:encoded><![CDATA[<p>วันนี้ผมลองเขียน plugin แก้ขัดที่หายหน้าหายตาไปนานมาให้ลองกันครับ นั่นก็คือปลั๊กอินที่ใช้ render BBCode ครับ ใครที่เป็นนักโพสเว็บบอร์ดคงจะรู้จักกันดีว่า BBCode คืออะไร สำหรับใครที่ยังไม่รู้จักก็อ่านย่อหน้าถัดไปได้เลยครับ</p>
<p>BBCode เราเรียกได้ว่าเป็น lightweighted markup language ใช้สำหรับจัดรูปแบบข้อความตามเว็บบอร์ดต่าง ๆ ครับ มีลักษณะของแท็กอยู่ในเครื่องหมายก้ามปู เช่น [b]ตัวหนา[/b] ครับ เจ้าตัว BBCode นี่เว็บบราวเซอร์มันไม่รู้จักครับ ต้องทำการแปลไปเป็น markup language ที่ใช้ทั่ว ๆ ไปก่อนครับ นั่นก็คือ HTML หรือ XHTML ครับ เช่น จาก [b]ตัวหนา[/b] จะถูกแปลงไปเป็น &lt;b&gt;ตัวหนา&lt;/b&gt; แล้วค่อยนำไปแสดงผลครับ<br />
<span id="more-245"></span><br />
จุดประสงค์หลัก ๆ ของ BBCode คือ เพื่อให้ผู้ใช้สามารถจัดรูปแบบข้อความได้ง่ายขึ้น รวมไปถึงเพื่อความปลอดภัยของการแสดงผลข้อความที่โพสโดยผู้ใช้ด้วยครับ เช่น การควบคุมการใช้งาน javascript การควบคุมให้ใช้ tag ภายในข้อกำหนด เป็นต้น</p>
<p>เจ้าตัว BBCode เนี่ย มันไม่มีข้อกำหนดเป็นมาตรฐาน เพียงแค่มีการใช้งานโดยทั่วไปตามเว็บบอร์ดเวอร์ชั่นใหม่ ๆ ทั่วไปครับ รายละเอียดรูปแบบคำสั่ง สามารถตามไปดูในหัวข้ออ้างอิงท้ายบทความได้เลยครับ</p>
<p>ทีนี้มาดูกันว่าปลั๊กอินตัวนี้จะทำงานยังไงครับ</p>
<p>ง่าย ๆ ครับ แค่เรียก $(&lt;selector&gt;).bbcode(); เท่านั้นครับ เช่น</p>
<pre class="js">$("div").bbcode();</pre>
<p>ไอเดียของปลั๊กอินตัวนี้ผมได้มาจากตอนเขียนแก้บักการแสดงผล BBCode ให้เก็บเว็บไซต์หนึ่งครับ ปกติแล้วการ render จาก BBCode ไปเป็น HTML นั้น มักจะทำที่ Server และส่ง HTML ที่ได้มาให้บราวเซอร์แสดงผล แต่ผมต้องการที่จะลดโหลดฝั่ง Server ลง โดยจะย้ายการทำงานจากฝั่ง Server มาทำที่บราวเซอร์แทน</p>
<p>หลักการทำงานก็ไม่มีอะไรมากครับ ผมใช้วิธีการกำหนดค่า Pattern ในรูปแบบ Regular Expression และใช้ Regular Expression Engine ของ JavaScript ในการแสดงผลให้ถูกต้องเท่านั้นครับ</p>
<p>ลองไปดูที่ <a title="BBCode Plugin for jQuery" href="http://sandbox.chonla.com/bbcode/" target="_blank">LIVE DEMO</a> กันเลยครับ</p>
<p><span style="text-decoration: underline;">อ้างอิง</span></p>
<ul>
<li><span style="background-color: #ffffff;"><a title="BBCode" href="http://en.wikipedia.org/wiki/BBCode" target="_blank">http://en.wikipedia.org/wiki/BBCode</a></span></li>
</ul>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fblog.chonla.com%2F2009%2F11%2F%25e0%25b8%259b%25e0%25b8%25a5%25e0%25b8%25b1%25e0%25b9%258a%25e0%25b8%2581%25e0%25b8%25ad%25e0%25b8%25b4%25e0%25b8%2599-bbcode-%25e0%25b8%25aa%25e0%25b8%25b3%25e0%25b8%25ab%25e0%25b8%25a3%25e0%25b8%25b1%25e0%25b8%259a-jquery%2F&amp;title=%E0%B8%9B%E0%B8%A5%E0%B8%B1%E0%B9%8A%E0%B8%81%E0%B8%AD%E0%B8%B4%E0%B8%99%20BBCode%20%E0%B8%AA%E0%B8%B3%E0%B8%AB%E0%B8%A3%E0%B8%B1%E0%B8%9A%20jQuery" id="wpa2a_8"><img src="http://blog.chonla.com/wp-content/plugins/add-to-any/share_save_171_16.gif" width="171" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.chonla.com/2009/11/%e0%b8%9b%e0%b8%a5%e0%b8%b1%e0%b9%8a%e0%b8%81%e0%b8%ad%e0%b8%b4%e0%b8%99-bbcode-%e0%b8%aa%e0%b8%b3%e0%b8%ab%e0%b8%a3%e0%b8%b1%e0%b8%9a-jquery/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>ปลั๊กอิน Multiple Checkboxes สำหรับ jQuery</title>
		<link>http://blog.chonla.com/2009/09/%e0%b8%9b%e0%b8%a5%e0%b8%b1%e0%b9%8a%e0%b8%81%e0%b8%ad%e0%b8%b4%e0%b8%99-multiple-checkboxes-%e0%b8%aa%e0%b8%b3%e0%b8%ab%e0%b8%a3%e0%b8%b1%e0%b8%9a-jquery/</link>
		<comments>http://blog.chonla.com/2009/09/%e0%b8%9b%e0%b8%a5%e0%b8%b1%e0%b9%8a%e0%b8%81%e0%b8%ad%e0%b8%b4%e0%b8%99-multiple-checkboxes-%e0%b8%aa%e0%b8%b3%e0%b8%ab%e0%b8%a3%e0%b8%b1%e0%b8%9a-jquery/#comments</comments>
		<pubDate>Wed, 02 Sep 2009 18:00:38 +0000</pubDate>
		<dc:creator>chonla</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Plugins]]></category>
		<category><![CDATA[Souce Code]]></category>
		<category><![CDATA[Checkbox]]></category>
		<category><![CDATA[Homemade Plugin]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Plugin]]></category>

		<guid isPermaLink="false">http://blog.chonla.com/?p=218</guid>
		<description><![CDATA[เหมือนอย่างที่เคยเล่าให้ฟังในโพสต์ก่อนหน้านี้ครับว่าช่วงนี้ได้ลองทำปลั๊กอินสำหรับ jQuery ออกมาหลายตัว นี่ก็เป็นอีกตัวนึงครับ ได้แนวคิดมาจาก checkbox ใน gmail ครับ หลายคนอาจจะยังไม่รู้ว่า เราสามารถเลือกหลาย ๆ mail ใน gmail ได้โดยการกด Shift ค้างไว้แล้วคลิก มันดูเท่ไม่เบาครับ นอกจากนี้แล้วยังมีคุณสมบัติพื้นฐานของที่ checkbox ควรจะมี ซึ่งก็คือ เลือกทั้งหมด หรือไม่เลือกเลย ในปลั๊กอินตัวนี้ ผมทำให้มันสามารถทำได้อย่างที่ผมเล่ามา รวมถึงการทำ invert selection ด้วยครับ นั่นก็คือ การสลับที่เลือกไว้นั่นเองครับ วิธีการใช้งาน ก็ง่ายอย่างที่คิดนั่นแหละครับ $.multicheck(); // ใช้สั่งให้ selector ที่เลือกใช้งาน shift+click ได้ $.checkall(); // เลือกทั้งหมด $.checknone(); // ไม่เลือกเลย $.invertcheck(); // สลับที่เลือก ลองดูตัวอย่างที่ LIVE DEMO ได้เลยครับ [...]]]></description>
			<content:encoded><![CDATA[<p>เหมือนอย่างที่เคยเล่าให้ฟังในโพสต์ก่อนหน้านี้ครับว่าช่วงนี้ได้ลองทำปลั๊กอินสำหรับ jQuery ออกมาหลายตัว นี่ก็เป็นอีกตัวนึงครับ ได้แนวคิดมาจาก checkbox ใน gmail ครับ หลายคนอาจจะยังไม่รู้ว่า เราสามารถเลือกหลาย ๆ mail ใน gmail ได้โดยการกด Shift ค้างไว้แล้วคลิก มันดูเท่ไม่เบาครับ นอกจากนี้แล้วยังมีคุณสมบัติพื้นฐานของที่ checkbox ควรจะมี ซึ่งก็คือ เลือกทั้งหมด หรือไม่เลือกเลย ในปลั๊กอินตัวนี้ ผมทำให้มันสามารถทำได้อย่างที่ผมเล่ามา รวมถึงการทำ invert selection ด้วยครับ นั่นก็คือ การสลับที่เลือกไว้นั่นเองครับ<br />
<span id="more-218"></span></p>
<p>วิธีการใช้งาน ก็ง่ายอย่างที่คิดนั่นแหละครับ</p>
<pre name="code" class="js">
$.multicheck();  // ใช้สั่งให้ selector ที่เลือกใช้งาน shift+click ได้
$.checkall();    // เลือกทั้งหมด
$.checknone();   // ไม่เลือกเลย
$.invertcheck();   // สลับที่เลือก
</pre>
<p>ลองดูตัวอย่างที่ <a title="LIVE DEMO: Multiple Checkboxes plugin with jQuery" href="http://sandbox.chonla.com/multicheck" target="_blank">LIVE DEMO</a> ได้เลยครับ</p>
<p>ส่วน source code ที่เป็น minified ก็<a title="jQuery Plugin : MINIFIED MULTIPLE CHECKBOXES PLUGIN JS" href="http://sandbox.chonla.com/multicheck/jquery.multicheck.min.js" target="_blank">ดาวน์โหลดได้จากที่นี่เลยครับ</a></p>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fblog.chonla.com%2F2009%2F09%2F%25e0%25b8%259b%25e0%25b8%25a5%25e0%25b8%25b1%25e0%25b9%258a%25e0%25b8%2581%25e0%25b8%25ad%25e0%25b8%25b4%25e0%25b8%2599-multiple-checkboxes-%25e0%25b8%25aa%25e0%25b8%25b3%25e0%25b8%25ab%25e0%25b8%25a3%25e0%25b8%25b1%25e0%25b8%259a-jquery%2F&amp;title=%E0%B8%9B%E0%B8%A5%E0%B8%B1%E0%B9%8A%E0%B8%81%E0%B8%AD%E0%B8%B4%E0%B8%99%20Multiple%20Checkboxes%20%E0%B8%AA%E0%B8%B3%E0%B8%AB%E0%B8%A3%E0%B8%B1%E0%B8%9A%20jQuery" id="wpa2a_10"><img src="http://blog.chonla.com/wp-content/plugins/add-to-any/share_save_171_16.gif" width="171" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.chonla.com/2009/09/%e0%b8%9b%e0%b8%a5%e0%b8%b1%e0%b9%8a%e0%b8%81%e0%b8%ad%e0%b8%b4%e0%b8%99-multiple-checkboxes-%e0%b8%aa%e0%b8%b3%e0%b8%ab%e0%b8%a3%e0%b8%b1%e0%b8%9a-jquery/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>ทำ floating ads ไว้ใช้เอง</title>
		<link>http://blog.chonla.com/2009/07/%e0%b8%97%e0%b8%b3-scroll-ads-%e0%b9%84%e0%b8%a7%e0%b9%89%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b9%80%e0%b8%ad%e0%b8%87/</link>
		<comments>http://blog.chonla.com/2009/07/%e0%b8%97%e0%b8%b3-scroll-ads-%e0%b9%84%e0%b8%a7%e0%b9%89%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b9%80%e0%b8%ad%e0%b8%87/#comments</comments>
		<pubDate>Mon, 13 Jul 2009 17:13:37 +0000</pubDate>
		<dc:creator>chonla</dc:creator>
				<category><![CDATA[Homemade Plugin]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Plugins]]></category>
		<category><![CDATA[Souce Code]]></category>
		<category><![CDATA[floating layers]]></category>
		<category><![CDATA[Plugin]]></category>

		<guid isPermaLink="false">http://blog.chonla.com/?p=201</guid>
		<description><![CDATA[เดิมที ผมได้โปรเจคจากผู้ว่าจ้างให้ทำ floating video เหมือนในเว็บ http://www.radiopublicity.com/ พอได้ลองเข้าไปดู code ที่เค้าเขียน รู้สึกว่ามันช่างซับซ้อนซ่อนเงื่อนเหลือเกิน ไม่ต้องพูดถึงเรื่อง reusability ครับ ยุ่งยากชิบ(หรือความจริงแล้ว ผมอาจจะโง่เกินกว่าจะเข้าใจ code อัน advanced ของมันก็ได้ครับ) พอนึกออกแล้วใช่มั๊ยครับ ว่าผมจะทำอะไรต่อไป&#8230; ใช่ครับ ทำเองครับ ส่วนผสมของผม หลีกหนีไม่พ้น jQuery ครับ ร่วมกับการเขียน plugin โดยมีคอนเซปท์ว่า จับอะไรก็ได้ บนเว็บ เอามาทำเป็น  floating layer ได้หมด แล้วก็เลื่อนตาม scrollbar ได้ด้วย คิดไปคิดมาต่อยอดได้อีกว่า จะให้มันอยู่ตรงไหนของหน้าจอก็ได้ snap ซ้าย snap ขวา หรือจะอยู่มันตรงกลาง บนล่าง ได้หมด โอ้ว ชักน่าตื่นเต้นแล้วสิ ในที่สุด ผมก็ลองทดสอบตัว prototype ของผมกับเว็บของผู้ว่าจ้างทันทีครับ (http://www.brendabence.com/media-room/) เออ พอใช้ได้แฮะ หลังจากนั้นก็เอามานั่งพัฒนาต่อยอดตามที่ตั้งใจไว้จนออกมาให้ได้ใช้งานกัน [...]]]></description>
			<content:encoded><![CDATA[<p>เดิมที ผมได้โปรเจคจากผู้ว่าจ้างให้ทำ floating video เหมือนในเว็บ <a href="http://www.radiopublicity.com/">http://www.radiopublicity.com/</a> พอได้ลองเข้าไปดู code ที่เค้าเขียน รู้สึกว่ามันช่างซับซ้อนซ่อนเงื่อนเหลือเกิน ไม่ต้องพูดถึงเรื่อง reusability ครับ ยุ่งยากชิบ(หรือความจริงแล้ว ผมอาจจะโง่เกินกว่าจะเข้าใจ code อัน advanced ของมันก็ได้ครับ) พอนึกออกแล้วใช่มั๊ยครับ ว่าผมจะทำอะไรต่อไป&#8230; ใช่ครับ ทำเองครับ</p>
<p>ส่วนผสมของผม หลีกหนีไม่พ้น jQuery ครับ ร่วมกับการเขียน plugin โดยมีคอนเซปท์ว่า จับอะไรก็ได้ บนเว็บ เอามาทำเป็น  floating layer ได้หมด แล้วก็เลื่อนตาม scrollbar ได้ด้วย คิดไปคิดมาต่อยอดได้อีกว่า จะให้มันอยู่ตรงไหนของหน้าจอก็ได้ snap ซ้าย snap ขวา หรือจะอยู่มันตรงกลาง บนล่าง ได้หมด โอ้ว ชักน่าตื่นเต้นแล้วสิ</p>
<p><span id="more-201"></span>ในที่สุด ผมก็ลองทดสอบตัว prototype ของผมกับเว็บของผู้ว่าจ้างทันทีครับ (<a href="http://www.brendabence.com/media-room/">http://www.brendabence.com/media-room/</a>) เออ พอใช้ได้แฮะ หลังจากนั้นก็เอามานั่งพัฒนาต่อยอดตามที่ตั้งใจไว้จนออกมาให้ได้ใช้งานกัน เสร็จแล้วก็ตั้งชื่อให้มันว่า scrollads plugin สำหรับ jQuery ครับ</p>
<p>รูปแบบการใช้งาน</p>
<pre name="code" class="js">
$.scrollads(options);
</pre>
<p>โดยที่ options เนี่ย จะใส่หรือไม่ใส่ก็ได้ครับ ถ้าใส่ก็จะเขียนอยู่ในรูปแบบ JSON โดยที่มี key ตามนี้เลยครับ</p>
<p>closer เป็น selector ที่ระบุปุ่มที่ใช้ปิดตัว layer นี้<br />
hsnap เป็นตัวบอกว่า layer จะอยู่ตำแหน่งไหนในแนวนอน มีค่าเป็น</p>
<ul>
<li>left ชิดซ้าย</li>
<li>center อยู่ตรงกลาง</li>
<li>right ชิดขวา</li>
<li>custom อยู่ตำแหน่งที่ระบุไว้ใน left</li>
<li>none อยู่ตำแหน่งตาม html</li>
</ul>
<p>vsnap เป็นตัวบอกว่า layer จะอยู่ตำแหน่งไหนในแนวตั้ง มีค่าเป็น</p>
<ul>
<li>top ชิดด้านบน</li>
<li>middle อยู่ตรงกลาง</li>
<li>bottom ชิดด้านล่าง</li>
<li>custom อยู่ตำแหน่งที่ระบุไว้ใน top</li>
<li>none อยู่ตำแหน่งตาม html</li>
</ul>
<p>เช่น</p>
<pre name="code" class="js">
$("#floatme").scrollads();
$("#floatme").scrollads({closer:".close"});
$("#floatme").scrollads({closer:".close",hsnap:"center"});
</pre>
<p>ลองไปดู <a title="LIVE DEMO: Floating Layer" href="http://sandbox.chonla.com/scrollads/" target="_blank">LIVE DEMO</a> กันดีกว่าครับ</p>
<p>สำหรับ source code ตัวที่เป็น minified <a title="jQuery Plugin : MINIFIED FLOATING LAYER JS" href="http://sandbox.chonla.com/scrollads/jquery.scrollads.min.js" target="_blank">สามารถดาวน์โหลดได้จากที่นี่ครับ</a></p>
<p>ใช้ดีอย่าลืมมา feedback แล้วบอกต่อนะครับ <img src='http://blog.chonla.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p>อัพเดท วันที่ 6 สิงหาคม 2552<br />
+ ผมได้เพิ่ม option smooth ลงไปครับ เพื่อให้ scroll ได้ smooth ขึ้นครับ ถ้าไม่ใส่มันก็จะเลื่อนปึ๊ด ๆ แบบเดิม แต่ถ้าใส่ แล้วกำหนดเป็น &#8220;true&#8221; มันก็จะหยอด effect ลงไปหน่อย ทำให้เลื่อนแล้วดูเนียน ๆ ครับ ลองดูได้ครับ ขอบคุณครับ</p>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fblog.chonla.com%2F2009%2F07%2F%25e0%25b8%2597%25e0%25b8%25b3-scroll-ads-%25e0%25b9%2584%25e0%25b8%25a7%25e0%25b9%2589%25e0%25b9%2583%25e0%25b8%258a%25e0%25b9%2589%25e0%25b9%2580%25e0%25b8%25ad%25e0%25b8%2587%2F&amp;title=%E0%B8%97%E0%B8%B3%20floating%20ads%20%E0%B9%84%E0%B8%A7%E0%B9%89%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B9%80%E0%B8%AD%E0%B8%87" id="wpa2a_12"><img src="http://blog.chonla.com/wp-content/plugins/add-to-any/share_save_171_16.gif" width="171" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.chonla.com/2009/07/%e0%b8%97%e0%b8%b3-scroll-ads-%e0%b9%84%e0%b8%a7%e0%b9%89%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b9%80%e0%b8%ad%e0%b8%87/feed/</wfw:commentRss>
		<slash:comments>33</slash:comments>
		</item>
		<item>
		<title>jTemplates, Template Engine ของ jQuery</title>
		<link>http://blog.chonla.com/2009/05/jtemplates-template-engine-%e0%b8%82%e0%b8%ad%e0%b8%87-jquery/</link>
		<comments>http://blog.chonla.com/2009/05/jtemplates-template-engine-%e0%b8%82%e0%b8%ad%e0%b8%87-jquery/#comments</comments>
		<pubDate>Tue, 19 May 2009 17:10:30 +0000</pubDate>
		<dc:creator>chonla</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[JSON]]></category>
		<category><![CDATA[Plugins]]></category>
		<category><![CDATA[Souce Code]]></category>
		<category><![CDATA[Template Engine]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[jTemplate]]></category>
		<category><![CDATA[Plugin]]></category>
		<category><![CDATA[Template]]></category>

		<guid isPermaLink="false">http://blog.chonla.com/?p=149</guid>
		<description><![CDATA[ได้ไปอ่านบทความเกี่ยวกับ Template Engine ที่เว็บ jquerytips เป็น Template Engine ที่เป็น plugin ของ jQuery น่าสนใจดีครับ เลยเอามาแบ่งปันกัน jTemplate เป็น Template Engine ที่มีลักษณะการเขียน (Syntax) ที่เรียกได้ว่าลอกแบบกันมาจาก Smarty เลยทีเดียว ทำให้คนที่มีพื้นฐานของ Smarty อยู่แล้ว สามารถเรียนรู้ jTemplate ได้โดยง่าย ส่วนรูปแบบของข้อมูลที่รองรับก็จะอยู่ในรูปแบบของ JSON มาดูตัวอย่างการเขียนกันครับ ขั้นแรก ผมจะกำหนด data ที่จะใช้งานก่อนครับ var data = { id: 4, name: "User List", table: [ {id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com'}, [...]]]></description>
			<content:encoded><![CDATA[<p>ได้ไปอ่านบทความเกี่ยวกับ Template Engine ที่เว็บ <a href="http://www.jquerytips.com" target="_blank">jquerytips</a> เป็น Template Engine ที่เป็น plugin ของ jQuery น่าสนใจดีครับ เลยเอามาแบ่งปันกัน<br />
<span id="more-149"></span><br />
jTemplate เป็น Template Engine ที่มีลักษณะการเขียน (Syntax) ที่เรียกได้ว่าลอกแบบกันมาจาก Smarty เลยทีเดียว ทำให้คนที่มีพื้นฐานของ Smarty อยู่แล้ว สามารถเรียนรู้ jTemplate ได้โดยง่าย ส่วนรูปแบบของข้อมูลที่รองรับก็จะอยู่ในรูปแบบของ JSON มาดูตัวอย่างการเขียนกันครับ</p>
<p>ขั้นแรก ผมจะกำหนด data ที่จะใช้งานก่อนครับ</p>
<pre class="js">var data = {
    id: 4,
    name: "User List",
    table: [
        {id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com'},
        {id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain.com'},
        {id: 3, name: 'Polly', age: 18, mail: 'polly@domain.com'},
        {id: 4, name: 'Alice', age: 26, mail: 'alice@domain.com'},
        {id: 5, name: 'Martha', age: 25, mail: 'martha@domain.com'}
    ],
    toString: function() {
        return this.name.bold() + ' (count: ' + this.table.length + ')';
    }
};</pre>
<p>เสร็จแล้วก็มากำหนด Template</p>
<pre class="js">{#template MAIN}
&lt;div id="header"&gt;{$T.name}&lt;/div&gt;
&lt;table&gt;
{#foreach $T.table as r}
    {#include row root=$T.r}
{#/for}
&lt;/table&gt;
{#/template MAIN}

{#template row}
&lt;tr bgcolor="{#cycle values=['#AAAAEE','#CCCCFF']}"&gt;
    &lt;td&gt;{$T.name.bold()}&lt;/td&gt;
    &lt;td&gt;{$T.age}&lt;/td&gt;
    &lt;td&gt;{$T.mail.link('mailto:'+$T.mail)}&lt;/td&gt;
&lt;/tr&gt;
{#/template row}</pre>
<p>ที่เหลือก็แค่เรียกใช้งาน plugin ตัวนี้เท่านั้นเองครับ ง่าย ๆ</p>
<pre class="js">$("#result").setTemplate($("textarea").text()).processTemplate(data);</pre>
<p>ลองไปดูตัวอย่างที่ <a title="LIVE DEMO : jTemplate for jQuery" href="http://sandbox.chonla.com/jtemplate" target="_blank">LIVE DEMO</a> ได้เลยครับ</p>
<p>แหล่งอ้างอิงและ API</p>
<ul>
<li><a href="http://jtemplates.tpython.com/">http://jtemplates.tpython.com/</a></li>
<li><a href="http://www.jquerytips.com/2008/12/07/jtemplate-template-engine-in-javascript/">http://www.jquerytips.com/2008/12/07/jtemplate-template-engine-in-javascript/</a></li>
</ul>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fblog.chonla.com%2F2009%2F05%2Fjtemplates-template-engine-%25e0%25b8%2582%25e0%25b8%25ad%25e0%25b8%2587-jquery%2F&amp;title=jTemplates%2C%20Template%20Engine%20%E0%B8%82%E0%B8%AD%E0%B8%87%20jQuery" id="wpa2a_14"><img src="http://blog.chonla.com/wp-content/plugins/add-to-any/share_save_171_16.gif" width="171" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.chonla.com/2009/05/jtemplates-template-engine-%e0%b8%82%e0%b8%ad%e0%b8%87-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ไอเดีย Template Engine แบบ Basic</title>
		<link>http://blog.chonla.com/2009/05/%e0%b9%84%e0%b8%ad%e0%b9%80%e0%b8%94%e0%b8%b5%e0%b8%a2-template-%e0%b9%81%e0%b8%9a%e0%b8%9a-basic/</link>
		<comments>http://blog.chonla.com/2009/05/%e0%b9%84%e0%b8%ad%e0%b9%80%e0%b8%94%e0%b8%b5%e0%b8%a2-template-%e0%b9%81%e0%b8%9a%e0%b8%9a-basic/#comments</comments>
		<pubDate>Thu, 14 May 2009 15:41:49 +0000</pubDate>
		<dc:creator>chonla</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Souce Code]]></category>
		<category><![CDATA[Template Engine]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Template]]></category>

		<guid isPermaLink="false">http://blog.chonla.com/?p=171</guid>
		<description><![CDATA[ใน framework ที่มีการแยก View ออกมาอย่างชัดเจน อย่างเช่น MVC จะมีการใช้ Template เข้ามาเป็นตัวช่วยในการช่วยแสดงผล ไม่ว่าจะเป็นการใช้ Template Engine อย่างเช่น smarty เป็นต้น ทีนี้ ผมก็มาคิด ๆ ดูว่าไอ้เจ้า Template เนี่ย มันมีไอเดียการทำงานยังไง ลองมาดูกัน หลักการง่าย ๆ ของการทำ Template คือ การแยกแนวคิดให้ตัว Template ทำหน้าที่แสดงผลอย่างเดียว โดยไม่มี Logic อื่น ๆ มาเกี่ยวข้อง เราอาจจะมี condition บางอย่างอยู่ใน template ได้ แต่ก็เฉพาะในส่วนที่เกี่ยวข้องกับการแสดงผลเท่านั้น ดังนั้น สิ่งที่จำเป็นก่อนการแสดงผลนั่นก็คือ การเตรียมข้อมูลที่จะแสดงให้พร้อมนั่นเอง ต่อจากนั้นเราก็นำข้อมูลที่เราเตรียมไว้ ไปยัดใส่ template ที่เราเตรียมไว้ เป็นอันเรียบร้อย เรามาสร้าง template engine แบบง่ายที่สุดในโลกกันดีกว่า function [...]]]></description>
			<content:encoded><![CDATA[<p>ใน framework ที่มีการแยก View ออกมาอย่างชัดเจน อย่างเช่น MVC จะมีการใช้ Template เข้ามาเป็นตัวช่วยในการช่วยแสดงผล ไม่ว่าจะเป็นการใช้ Template Engine อย่างเช่น <a title="Smarty Template Engine" href="http://www.smarty.net/" target="_blank">smarty</a> เป็นต้น</p>
<p>ทีนี้ ผมก็มาคิด ๆ ดูว่าไอ้เจ้า Template เนี่ย มันมีไอเดียการทำงานยังไง ลองมาดูกัน</p>
<p><span id="more-171"></span>หลักการง่าย ๆ ของการทำ Template คือ การแยกแนวคิดให้ตัว Template ทำหน้าที่แสดงผลอย่างเดียว โดยไม่มี Logic อื่น ๆ มาเกี่ยวข้อง เราอาจจะมี condition บางอย่างอยู่ใน template ได้ แต่ก็เฉพาะในส่วนที่เกี่ยวข้องกับการแสดงผลเท่านั้น ดังนั้น สิ่งที่จำเป็นก่อนการแสดงผลนั่นก็คือ การเตรียมข้อมูลที่จะแสดงให้พร้อมนั่นเอง ต่อจากนั้นเราก็นำข้อมูลที่เราเตรียมไว้ ไปยัดใส่ template ที่เราเตรียมไว้ เป็นอันเรียบร้อย</p>
<p>เรามาสร้าง template engine แบบง่ายที่สุดในโลกกันดีกว่า</p>
<pre name="code" class="js">
function apply_template($data, $template)
{
    ob_start();
    include ($template);
    $output = ob_get_clean();
    return $output;
} 
</pre>
<p>ดูเหมือนง่ายมั๊ยครับ แค่ไม่กี่บรรทัดเอง ส่วนของ template file เราก็จะมีตัวแปรไว้ใช้งานตัวนึง ชื่อว่า $data นั่นเองครับ เวลาเราส่งค่าเข้า template ก็ให้ส่งผ่านตัวแปรตัวเดียวครับ (อาจจะทำเป็น array หรือ object ก็ได้ครับ)</p>
<p>ลองดูตัวอย่างใน <a title="LIVE DEMO : Basic Template Engine" href="http://sandbox.chonla.com/template/" target="_blank">LIVE DEMO</a> นะครับ</p>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fblog.chonla.com%2F2009%2F05%2F%25e0%25b9%2584%25e0%25b8%25ad%25e0%25b9%2580%25e0%25b8%2594%25e0%25b8%25b5%25e0%25b8%25a2-template-%25e0%25b9%2581%25e0%25b8%259a%25e0%25b8%259a-basic%2F&amp;title=%E0%B9%84%E0%B8%AD%E0%B9%80%E0%B8%94%E0%B8%B5%E0%B8%A2%20Template%20Engine%20%E0%B9%81%E0%B8%9A%E0%B8%9A%20Basic" id="wpa2a_16"><img src="http://blog.chonla.com/wp-content/plugins/add-to-any/share_save_171_16.gif" width="171" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.chonla.com/2009/05/%e0%b9%84%e0%b8%ad%e0%b9%80%e0%b8%94%e0%b8%b5%e0%b8%a2-template-%e0%b9%81%e0%b8%9a%e0%b8%9a-basic/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Upload progress อัพไปเท่าไหร่แล้ว บอกหน่อยซิ</title>
		<link>http://blog.chonla.com/2009/04/upload-progress-%e0%b8%ad%e0%b8%b1%e0%b8%9e%e0%b9%84%e0%b8%9b%e0%b9%80%e0%b8%97%e0%b9%88%e0%b8%b2%e0%b9%84%e0%b8%ab%e0%b8%a3%e0%b9%88%e0%b9%81%e0%b8%a5%e0%b9%89%e0%b8%a7-%e0%b8%9a%e0%b8%ad%e0%b8%81/</link>
		<comments>http://blog.chonla.com/2009/04/upload-progress-%e0%b8%ad%e0%b8%b1%e0%b8%9e%e0%b9%84%e0%b8%9b%e0%b9%80%e0%b8%97%e0%b9%88%e0%b8%b2%e0%b9%84%e0%b8%ab%e0%b8%a3%e0%b9%88%e0%b9%81%e0%b8%a5%e0%b9%89%e0%b8%a7-%e0%b8%9a%e0%b8%ad%e0%b8%81/#comments</comments>
		<pubDate>Mon, 13 Apr 2009 18:35:26 +0000</pubDate>
		<dc:creator>chonla</dc:creator>
				<category><![CDATA[Ajax]]></category>
		<category><![CDATA[APC]]></category>
		<category><![CDATA[HTTP]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Souce Code]]></category>
		<category><![CDATA[Progress]]></category>
		<category><![CDATA[Upload]]></category>
		<category><![CDATA[อัพโหลด]]></category>
		<category><![CDATA[เปอร์เซนต์]]></category>
		<category><![CDATA[แถบ]]></category>

		<guid isPermaLink="false">http://blog.chonla.com/?p=163</guid>
		<description><![CDATA[ลองแวะไปดูที่ http://www.zidoupload.com แล้วลองอัพโหลดไฟล์อะไรก็ได้ซักไฟล์นึง จะเห็นว่าระหว่างที่รอ มันจะมีการแสดงผลเป็นแถบว่าตอนนี้เราอัพโหลดไปแล้วกี่เปอร์เซนต์ รวมถึงยังบอกอีกว่า Transfer rate เป็นเท่าไหร่ ตรงนี้แหละครับที่ผมจะมาพูดถึงในวันนี้ การจะทำ Upload progress ด้วย PHP นั้น ส่วนประกอบที่ผมเลือกใช้จะประกอบด้วยส่วนหลัก ๆ อยู่ 3 ส่วนครับ คือ APC ย่อมาจาก Alternative PHP Cache ครับ ซึ่งจะมี library ที่ผมต้องการ นั่นคือ apc_fetch() ครับ Server ที่เราใช้จะต้องสนับสนุน APC ครับ ซึ่งเป็น PECL เข้าไปดาวน์โหลดได้จาก http://pecl.php.net/package/apc ครับ Ajax ในที่นี้ ผมใช้ Ajax ควบคู่กับ JSON ครับ Upload form ก็จะเป็น Form Upload ธรรมดานี่แหละครับ [...]]]></description>
			<content:encoded><![CDATA[<p>ลองแวะไปดูที่ <a title="ZidoUpload.com สุดยอดสังคมเพื่อการแบ่งปัน" href="http://www.zidoupload.com" target="_blank">http://www.zidoupload.co</a>m แล้วลองอัพโหลดไฟล์อะไรก็ได้ซักไฟล์นึง จะเห็นว่าระหว่างที่รอ มันจะมีการแสดงผลเป็นแถบว่าตอนนี้เราอัพโหลดไปแล้วกี่เปอร์เซนต์ รวมถึงยังบอกอีกว่า Transfer rate เป็นเท่าไหร่ ตรงนี้แหละครับที่ผมจะมาพูดถึงในวันนี้<br />
<span id="more-163"></span><br />
การจะทำ Upload progress ด้วย PHP นั้น ส่วนประกอบที่ผมเลือกใช้จะประกอบด้วยส่วนหลัก ๆ อยู่ 3 ส่วนครับ คือ</p>
<ol>
<li>APC ย่อมาจาก Alternative PHP Cache ครับ ซึ่งจะมี library ที่ผมต้องการ นั่นคือ apc_fetch() ครับ Server ที่เราใช้จะต้องสนับสนุน APC ครับ ซึ่งเป็น PECL เข้าไปดาวน์โหลดได้จาก <a title="APC Information" href="http://pecl.php.net/package/apc" target="_blank">http://pecl.php.net/package/apc</a> ครับ</li>
<li>Ajax ในที่นี้ ผมใช้ Ajax ควบคู่กับ JSON ครับ</li>
<li>Upload form ก็จะเป็น Form Upload ธรรมดานี่แหละครับ กำหนด enctypemultipart/form-data ให้เรียบร้อย และ method เป็น POST ให้เรียบร้อยเช่นกันครับ</li>
</ol>
<p>สำหรับไฟล์ที่จำเป็นในการทำ Upload Progress ด้วยวิธีนี้ ก็จะมี 3 ส่วนเช่นกัน ง่าย ๆ ตามนี้เลยครับ</p>
<ol>
<li>Upload Form จะเป็นหน้า Page ที่ User เห็นครับ เอาไว้สำหรับให้ User Browse File และกด Submit ครับ</li>
<li>Upload จะเป็นหน้า Page ที่เอาไว้สำหรับ Upload เลยครับ ในหน้านี้ ให้ทำการอัพโหลดเหมือนปกติครับ คือมีการ move_uploaded_file() อะไรเหมือนปกติืืทุกอย่างครับ</li>
<li>Progress จะเป็นส่วนที่เอาไว้สำหรับให้หน้า Form Upload มา poll ค่า status ของการ Upload ครับ ส่วนนี้แหละครับ ที่จะเป็นตัว return กลับไปว่า อัพโหลดอะไรได้ยังไงเท่าไหร่แล้วครับ</li>
</ol>
<p> </p>
<p><strong>Upload Form</strong></p>
<p>ทีนี้ เมื่อเรามีทุกอย่างพร้อม เราก็จะทำการกำหนด key สำหรับ Upload session เพื่อให้การ Poll ถามข้อมูลนั้นทำได้ถูกต้องครับ การกำหนดเราทำได้โดยการใส่ input hidden ที่ชื่อ APC_UPLOAD_PROGRESS ให้มีค่าเป็น key ที่เราต้องการครับ ผมสมมติให้มีค่าเป็น &#8220;abcd&#8221; ดังนั้น form ที่เราได้ควรจะมีหน้าตาประมาณแบบนี้ครับ (ชื่อ APC_UPLOAD_PROGRESS เราสามารถเปลี่ยนได้ใน php.ini ครับ)</p>
<p> </p>
<pre class="html" name="code">&lt;form enctype="multipart/form-data" action="upload.php" method="post"&gt;
    &lt;input type="hidden" name="APC_UPLOAD_PROGRESS" value="abcd"&gt;
    &lt;input name="upfile" type="file"&gt;&lt;/span&gt;
    &lt;input type="submit" value="Upload"&gt;
&lt;/form&gt;</pre>
<p> </p>
<p><strong>Upload</strong></p>
<p>ในส่วนนี้ผมไม่พูดถึงนะครับ ทำการอัพโหลดไฟล์ตามปกติเลยครับ ในกรณีที่ไฟล์ใหญ่มาก อย่าลืม set ให้ไม่ต้องมี timeout ด้วย function set_time_limit(0) ด้วยนะครับ</p>
<p> </p>
<p><strong>Progress</strong></p>
<p>สำหรับ Progress ไฟล์นั้น จะมีหน้าตาประมาณนี้ครับ</p>
<pre class="php" name="code">&lt;?php
header("content-type:application/json");
$stat = apc_fetch('upload_abcd');
if ($stat)
{
    if (!isset($stat["total"])) $stat["total"] = 0;
    if (!isset($stat["current"])) $stat["current"] = 0;
    if (!isset($stat["rate"])) $stat["rate"] = 0;
    if (!isset($stat["cancel_upload"])) $stat["cancel_upload"] = 0;
    if (!isset($stat["done"])) $stat["done"] = 0;
    f (!isset($stat["filename"])) $stat["filename"] = "";
    printf("[%0d,%0d,%0d,%0d,%0d,\"%s\"]",
    $stat["total"] ,
    $stat["current"] ,
    $stat["rate"] ,
    $stat["cancel_upload"] ,
    $stat["done"],
    addslashes($stat["filename"]));
}
else
{
    echo "null";
}
?&gt;</pre>
<p> </p>
<p>สิ่งที่เราต้องทำคือ ทำการ poll ข้อมูลการอัพโหลดของ key &#8220;abcd&#8221; จาก server เราก็ทำได้โดยเรียก function apc_fetch และกำหนด parameter เป็น string ขึ้นต้นด้วย &#8220;upload_&#8221; และตามด้วย key ของเรา คือ &#8220;abcd&#8221;</p>
<p>ค่าที่ return มาจาก apc_fetch จะได้เป็น associative array โดยมี key ที่เราจะเอามาใช้งานคือ</p>
<ul>
<li>total เป็นขนาดไฟล์</li>
<li>current เป็นขนาดไฟล์ที่อัพโหลดได้แล้ว</li>
<li>rate คือความเร็วในการอัพโหลดครับ</li>
<li>filename เป็นชื่อไฟล์ในเครื่องเราครับ (เช่น C:\Download\file.txt)</li>
</ul>
<p>คราวนี้ เราก็แค่ใช้ ajax มา poll ค่าเหล่านี้ออกไปแสดงเท่านั้นเองครับ ทีนี้ต้องพึ่งฝีมือ dhtml กับ graphic ของคุณเองแล้วล่ะครับ ว่าจะทำ progress bar ออกมาได้สวยแค่ไหน</p>
<p> </p>
<p>บทความนี้ ผมไม่มี LIVE DEMO แต่มีตัวอย่างให้ลองดาวน์โหลดไปทดสอบกันได้ครับ <a href="http://sandbox.chonla.com/uploadprogress/" title="SAMPLE DOWNLOAD : Download Progress">ดาวน์โหลด</a> กับเว็บที่ผมทำให้เอาไปใช้งานจริงครับ แวะลองไปทดสอบและใช้บริการกันได้ที่ <a title="ZidoUpload.com สุดยอดสังคมเพื่อการแบ่งปัน" href="http://www.zidoupload.com" target="_blank">http://www.zidoupload.com</a> ครับ</p>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fblog.chonla.com%2F2009%2F04%2Fupload-progress-%25e0%25b8%25ad%25e0%25b8%25b1%25e0%25b8%259e%25e0%25b9%2584%25e0%25b8%259b%25e0%25b9%2580%25e0%25b8%2597%25e0%25b9%2588%25e0%25b8%25b2%25e0%25b9%2584%25e0%25b8%25ab%25e0%25b8%25a3%25e0%25b9%2588%25e0%25b9%2581%25e0%25b8%25a5%25e0%25b9%2589%25e0%25b8%25a7-%25e0%25b8%259a%25e0%25b8%25ad%25e0%25b8%2581%2F&amp;title=Upload%20progress%20%E0%B8%AD%E0%B8%B1%E0%B8%9E%E0%B9%84%E0%B8%9B%E0%B9%80%E0%B8%97%E0%B9%88%E0%B8%B2%E0%B9%84%E0%B8%AB%E0%B8%A3%E0%B9%88%E0%B9%81%E0%B8%A5%E0%B9%89%E0%B8%A7%20%E0%B8%9A%E0%B8%AD%E0%B8%81%E0%B8%AB%E0%B8%99%E0%B9%88%E0%B8%AD%E0%B8%A2%E0%B8%8B%E0%B8%B4" id="wpa2a_18"><img src="http://blog.chonla.com/wp-content/plugins/add-to-any/share_save_171_16.gif" width="171" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.chonla.com/2009/04/upload-progress-%e0%b8%ad%e0%b8%b1%e0%b8%9e%e0%b9%84%e0%b8%9b%e0%b9%80%e0%b8%97%e0%b9%88%e0%b8%b2%e0%b9%84%e0%b8%ab%e0%b8%a3%e0%b9%88%e0%b9%81%e0%b8%a5%e0%b9%89%e0%b8%a7-%e0%b8%9a%e0%b8%ad%e0%b8%81/feed/</wfw:commentRss>
		<slash:comments>49</slash:comments>
		</item>
		<item>
		<title>หมายเลขบัตรประชาชน? สร้างเองดีกว่า</title>
		<link>http://blog.chonla.com/2009/04/%e0%b8%ab%e0%b8%a1%e0%b8%b2%e0%b8%a2%e0%b9%80%e0%b8%a5%e0%b8%82%e0%b8%9a%e0%b8%b1%e0%b8%95%e0%b8%a3%e0%b8%9b%e0%b8%a3%e0%b8%b0%e0%b8%8a%e0%b8%b2%e0%b8%8a%e0%b8%99-%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2/</link>
		<comments>http://blog.chonla.com/2009/04/%e0%b8%ab%e0%b8%a1%e0%b8%b2%e0%b8%a2%e0%b9%80%e0%b8%a5%e0%b8%82%e0%b8%9a%e0%b8%b1%e0%b8%95%e0%b8%a3%e0%b8%9b%e0%b8%a3%e0%b8%b0%e0%b8%8a%e0%b8%b2%e0%b8%8a%e0%b8%99-%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2/#comments</comments>
		<pubDate>Wed, 01 Apr 2009 08:14:57 +0000</pubDate>
		<dc:creator>chonla</dc:creator>
				<category><![CDATA[Algorithm]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Souce Code]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Utility]]></category>

		<guid isPermaLink="false">http://blog.chonla.com/?p=155</guid>
		<description><![CDATA[สาเหตุที่ผมเขียนบทความนี้ขึ้นมา เพราะว่ามันจะมีบางช่วงเวลาที่ผมจำเป็นต้องใช้หมายเลขบัตรประชาชนในการทำอะไรหลาย ๆ อย่าง ไม่ว่าจะเป็นเรื่องของการทำระบบ verify หมายเลขบัตรประชาชน หรือเอาไปใช้สมัครโน่นสมัครนี่ บางครั้งผมแค่อยากลองเฉย ๆ แต่ไม่ได้อยากใช้หมายเลขบัตรของผมจริง ๆ ด้วยเหตุผลด้านความปลอดภัยของผมเอง ผมเลยลองสร้างหมายเลขบัตรประชาชนจากอัลกอริธึมในการตรวจสอบหมายเลขบัตรประชาชนขึ้นมา อัลกอริธึมในการตรวจสอบหมายเลขบัตรประชาชน สามารถหาได้ตามเว็บทั่ว ๆ ไป ที่ผมได้มาก็จะประมาณนี้ครับ (Javascript) function validate_thai_citizen_id(id) { var b = 0; if (id.length &#60; 13) return false; checksum = id.substring(12, 13); for (var i = 0; i &#60; 12; i++) { b += parseInt(id.substring(i, i+1)) * (13 - i); [...]]]></description>
			<content:encoded><![CDATA[<p>สาเหตุที่ผมเขียนบทความนี้ขึ้นมา เพราะว่ามันจะมีบางช่วงเวลาที่ผมจำเป็นต้องใช้หมายเลขบัตรประชาชนในการทำอะไรหลาย ๆ อย่าง ไม่ว่าจะเป็นเรื่องของการทำระบบ verify หมายเลขบัตรประชาชน หรือเอาไปใช้สมัครโน่นสมัครนี่ บางครั้งผมแค่อยากลองเฉย ๆ แต่ไม่ได้อยากใช้หมายเลขบัตรของผมจริง ๆ ด้วยเหตุผลด้านความปลอดภัยของผมเอง ผมเลยลองสร้างหมายเลขบัตรประชาชนจากอัลกอริธึมในการตรวจสอบหมายเลขบัตรประชาชนขึ้นมา</p>
<p><span id="more-155"></span>อัลกอริธึมในการตรวจสอบหมายเลขบัตรประชาชน สามารถหาได้ตามเว็บทั่ว ๆ ไป ที่ผมได้มาก็จะประมาณนี้ครับ (Javascript)</p>
<pre name="code" class="js">
function validate_thai_citizen_id(id)
{
    var b = 0;
    if (id.length &lt; 13) return false;
    checksum = id.substring(12, 13);
    for (var i = 0; i &lt; 12; i++)
    {
        b += parseInt(id.substring(i, i+1)) * (13 - i);
    }
    tmp = 11 - (b % 11);
    switch(tmp)
    {
        case 11: check = 1; break;
        case 10: check = 0; break;
        default: check = tmp;
    }
    return (check == checksum);
}
</pre>
<p>จาก code ด้านบน เราจะเห็นได้ว่าส่วนที่สำคัญที่สุดคือ digit สุดท้าย ซึ่งจะทำหน้าที่เป็น checksum digit ซึ่งเราสามารถคำนวณได้จาก 12 digits แรก</p>
<p>เมื่อเราเอามาจัดการเขียนให้เป็นเรื่องเป็นราวจะได้แบบนี้ครับ</p>
<pre name="code" class="php">
function generate_thai_citizen_id()
{
	$checksum = 0;
	$b = 0;
	$r = 0;
	$t = "";
	mt_srand();
	for ($i = 0; $i < 12; $i ++)
	{
		$r = mt_rand(0, 9);
		$b += $r * (13 - $i);
		$t .= "$r";
	}
	$tmp = 11 - ($b % 11);
	switch($tmp)
	{
		case 11: $check = 1; break;
		case 10: $check = 0; break;
		default: $check = $tmp;
	}
	$t .= $check;
	return $t;
}
</pre>
<p>Code ด้านบนนี้ผมพอร์ตมาจาก Javascript version ที่ผมทำไว้ให้เป็น PHP ครับ</p>
<p>ลองดูหน้าที่ทำเสร็จแล้ว (PHP) ได้ที่ <a title="LIVE DEMO: Randomly create citizen ID" href="http://sandbox.chonla.com/citizenid/" target="_blank">LIVE DEMO</a> เลยครับ</p>
<p>ปล. หมายเลขบัตรประชาชนที่สร้างจาก <a title="LIVE DEMO: Randomly create citizen ID" href="http://sandbox.chonla.com/citizenid/" target="_blank">LIVE DEMO</a> สามารถนำไปใช้ได้จริงนะครับ ใช้ให้ถูกที่ถูกกฏหมายนะครับ<br />
ปล. อีกที วันที่ 9 ก.ย. 52 ผมแก้ไข code ที่เป็น เวอร์ชั่น php ให้ถูกต้องครับ มีบักนิดหน่อย</p>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fblog.chonla.com%2F2009%2F04%2F%25e0%25b8%25ab%25e0%25b8%25a1%25e0%25b8%25b2%25e0%25b8%25a2%25e0%25b9%2580%25e0%25b8%25a5%25e0%25b8%2582%25e0%25b8%259a%25e0%25b8%25b1%25e0%25b8%2595%25e0%25b8%25a3%25e0%25b8%259b%25e0%25b8%25a3%25e0%25b8%25b0%25e0%25b8%258a%25e0%25b8%25b2%25e0%25b8%258a%25e0%25b8%2599-%25e0%25b8%25aa%25e0%25b8%25a3%25e0%25b9%2589%25e0%25b8%25b2%2F&amp;title=%E0%B8%AB%E0%B8%A1%E0%B8%B2%E0%B8%A2%E0%B9%80%E0%B8%A5%E0%B8%82%E0%B8%9A%E0%B8%B1%E0%B8%95%E0%B8%A3%E0%B8%9B%E0%B8%A3%E0%B8%B0%E0%B8%8A%E0%B8%B2%E0%B8%8A%E0%B8%99%3F%20%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B9%80%E0%B8%AD%E0%B8%87%E0%B8%94%E0%B8%B5%E0%B8%81%E0%B8%A7%E0%B9%88%E0%B8%B2" id="wpa2a_20"><img src="http://blog.chonla.com/wp-content/plugins/add-to-any/share_save_171_16.gif" width="171" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.chonla.com/2009/04/%e0%b8%ab%e0%b8%a1%e0%b8%b2%e0%b8%a2%e0%b9%80%e0%b8%a5%e0%b8%82%e0%b8%9a%e0%b8%b1%e0%b8%95%e0%b8%a3%e0%b8%9b%e0%b8%a3%e0%b8%b0%e0%b8%8a%e0%b8%b2%e0%b8%8a%e0%b8%99-%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>

