<?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>CMDEVHUB</title>
	<atom:link href="http://www.cmdevhub.com/feed" rel="self" type="application/rss+xml" />
	<link>http://www.cmdevhub.com</link>
	<description>โปรแกรมที่ไม่มีบั๊กคือโปรแกรมที่ยังไม่ได้เขียน</description>
	<lastBuildDate>Thu, 17 May 2012 17:35:52 +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>window.open</title>
		<link>http://www.cmdevhub.com/javascript/window-open?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=window-open</link>
		<comments>http://www.cmdevhub.com/javascript/window-open#comments</comments>
		<pubDate>Thu, 17 May 2012 17:35:52 +0000</pubDate>
		<dc:creator>shikima</dc:creator>
				<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.cmdevhub.com/?p=272</guid>
		<description><![CDATA[]]></description>
			<content:encoded><![CDATA[<pre class="brush: jscript; title: ; notranslate">
    &lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot;&gt;
    function popUpWindow(sURL, sName, width, height, menu, resize, scrollbar, status, title, toolbar)
    {
            // Detect Default Value
            menu = typeof(menu) == 'undefined'?0:menu;
            resize = typeof(resize) == 'undefined'?0:resize;
            scrollbar = typeof(scrollbar) == 'undefined'?0:scrollbar;
            status = typeof(status) == 'undefined'?0:status;
            title = typeof(title) == 'undefined'?0:title;
            toolbar = typeof(toolbar) == 'undefined'?0:toolbar;
            ////////////////////////////////////////////////////////////////

            screenwidth = window.screen.width;
            screenheight = window.screen.height;

            var left = (screenwidth/2) - (width/2);
            var top = (screenheight/2) - (height/2);

            var newwin = window.open(sURL, sName, &quot;top=&quot; + top + &quot;, left=&quot; + left + &quot;, height=&quot;+ height + &quot;, width=&quot; + width + &quot;, menubar=&quot; + menu + &quot;, resizable=&quot; + resize + &quot;, scrollbars=&quot; + scrollbar + &quot;, status=&quot; + status + &quot;, titlebar=&quot; + title + &quot;, toolbar=&quot; + toolbar + &quot;&quot;);
            newwin.focus();
    }
    &lt;/script&gt;
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.cmdevhub.com/javascript/window-open/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>number only สำหรับ textbox</title>
		<link>http://www.cmdevhub.com/javascript/number-only-%e0%b8%aa%e0%b8%b3%e0%b8%ab%e0%b8%a3%e0%b8%b1%e0%b8%9a-textbox?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=number-only-%25e0%25b8%25aa%25e0%25b8%25b3%25e0%25b8%25ab%25e0%25b8%25a3%25e0%25b8%25b1%25e0%25b8%259a-textbox</link>
		<comments>http://www.cmdevhub.com/javascript/number-only-%e0%b8%aa%e0%b8%b3%e0%b8%ab%e0%b8%a3%e0%b8%b1%e0%b8%9a-textbox#comments</comments>
		<pubDate>Wed, 16 May 2012 23:24:35 +0000</pubDate>
		<dc:creator>shikima</dc:creator>
				<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.cmdevhub.com/?p=263</guid>
		<description><![CDATA[<p>เขียนไว้นานแล้ว เอาไว้สำหรับตรวจสอบ text box ให้ป้อนข้อมูลเป็นตัวเลขเท่านั้น เอาตรงนี้ไปใส่ไว้ใน &#60;head&#62; ก่อน ตอนใช้งานก็เขียนแบบนี้ &#60;input type=&#8221;text&#8221; onKeyPress=&#8221;return numbersonly(event)&#8221; /&#62; สามารถใช้กับ type อื่นๆ เช่น number หรือ tel ก็ได้นะครับ html5 มี type ของ textbox เพิ่มขึ้นเยอะเลย</p>
]]></description>
			<content:encoded><![CDATA[<p>เขียนไว้นานแล้ว เอาไว้สำหรับตรวจสอบ text box ให้ป้อนข้อมูลเป็นตัวเลขเท่านั้น</p>
<p>เอาตรงนี้ไปใส่ไว้ใน &lt;head&gt; ก่อน</p>
<pre class="brush: jscript; title: ; notranslate">
    function numbersonly(e){
            var unicode=e.charCode? e.charCode : e.keyCode;
            if (unicode!=8){
                    if(unicode&lt;48 || unicode&gt;57){
                            return false
                    }
            }
    }
</pre>
<p>ตอนใช้งานก็เขียนแบบนี้</p>
<p>&lt;input type="text" onKeyPress="return numbersonly(event)" /&gt;</p>
<p>สามารถใช้กับ type อื่นๆ เช่น number หรือ tel ก็ได้นะครับ html5 มี type ของ textbox เพิ่มขึ้นเยอะเลย</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cmdevhub.com/javascript/number-only-%e0%b8%aa%e0%b8%b3%e0%b8%ab%e0%b8%a3%e0%b8%b1%e0%b8%9a-textbox/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ฟังก์ชั่น number_format สำหรับ java script</title>
		<link>http://www.cmdevhub.com/javascript/number_format?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=number_format</link>
		<comments>http://www.cmdevhub.com/javascript/number_format#comments</comments>
		<pubDate>Mon, 14 May 2012 17:31:15 +0000</pubDate>
		<dc:creator>shikima</dc:creator>
				<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.cmdevhub.com/?p=266</guid>
		<description><![CDATA[<p>ปกติใน PHP จะมีฟังก์ชั่น number_format() สำหรับเติ่มเครื่องหมาย , ให้กับตัวเลข และช่วยปัดเศษของทศนิยมตามตำแหน่งที่เราต้องการได้ด้วย แต่ว่า AJAX มันเป็น Java Script แล้วมันดันไม่มีฟังก์ชั่นนี้ด้วยสิ จะโยนให้ PHP ผ่าน XMLHttp ก็ใช่เรื่อง เลยเขียนเองเลยดีกว่า มั่วไป มั่วมาก็ได้ตามนี้แหละครับ วิธีการเรียกใช้งานก็ง่ายๆ เลยครับ number_format(ตัวเลข, จำนวนทศนิยม, เครื่องหมายทศนิยม, เครื่องหมายหลักพัน); เช่น จะเอาตัวเลข 20,000.00 ก็เขียนประมาณนี้ครับ number_format(20000,2,&#8217;.',&#8217;,'); สั้นๆ ง่ายๆ แต่มีประโยชน์เหลือหลายครับ เอาไปใช้กันได้ ไม่หวงครับ</p>
]]></description>
			<content:encoded><![CDATA[<p>ปกติใน PHP จะมีฟังก์ชั่น number_format() สำหรับเติ่มเครื่องหมาย , ให้กับตัวเลข และช่วยปัดเศษของทศนิยมตามตำแหน่งที่เราต้องการได้ด้วย แต่ว่า AJAX มันเป็น Java Script แล้วมันดันไม่มีฟังก์ชั่นนี้ด้วยสิ จะโยนให้ PHP ผ่าน XMLHttp ก็ใช่เรื่อง เลยเขียนเองเลยดีกว่า</p>
<p>มั่วไป มั่วมาก็ได้ตามนี้แหละครับ</p>
<pre class="brush: jscript; title: ; notranslate">
&lt;script type=&quot;text/javascript&quot;&gt;
   function number_format (number, decimals, dec_point, thousands_sep) {
      var exponent = &quot;&quot;;
      var numberstr = number.toString ();
      var eindex = numberstr.indexOf (&quot;e&quot;);
      if (eindex &gt; -1) {
         exponent = numberstr.substring (eindex);
         number = parseFloat (numberstr.substring (0, eindex));
      }
      if (decimals != null) {
         var temp = Math.pow (10, decimals);
         number = Math.round (number * temp) / temp;
      }
      var sign = number &lt; 0 ? &quot;-&quot; : &quot;&quot;;
      var integer = (number &gt; 0 ? Math.floor (number) : Math.abs (Math.ceil (number))).toString ();
      var fractional = number.toString ().substring (integer.length + sign.length);
      dec_point = dec_point != null ? dec_point : &quot;.&quot;;
      fractional = decimals != null &amp;&amp; decimals &gt; 0 || fractional.length &gt; 1 ? (dec_point + fractional.substring (1)) : &quot;&quot;;
      if (decimals != null &amp;&amp; decimals &gt; 0) {
         for (i = fractional.length - 1, z = decimals; i &lt; z; ++i) {
            fractional += &quot;0&quot;;
         }
      }
      thousands_sep = (thousands_sep != dec_point || fractional.length == 0) ? thousands_sep : null;
      if (thousands_sep != null &amp;&amp; thousands_sep != &quot;&quot;) {
         for (i = integer.length - 3; i &gt; 0; i -= 3){
            integer = integer.substring (0 , i) + thousands_sep + integer.substring (i);
         }
      }
      return sign + integer + fractional + exponent;
   }
&lt;/script&gt;
</pre>
<p>วิธีการเรียกใช้งานก็ง่ายๆ เลยครับ<br />
number_format(ตัวเลข, จำนวนทศนิยม, เครื่องหมายทศนิยม, เครื่องหมายหลักพัน);</p>
<p>เช่น จะเอาตัวเลข 20,000.00 ก็เขียนประมาณนี้ครับ</p>
<p>number_format(20000,2,'.',',');</p>
<p>สั้นๆ ง่ายๆ แต่มีประโยชน์เหลือหลายครับ</p>
<p>เอาไปใช้กันได้ ไม่หวงครับ</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cmdevhub.com/javascript/number_format/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ความแตกต่างระหว่าง isset กับ array_key_exists</title>
		<link>http://www.cmdevhub.com/uncategorized/%e0%b8%84%e0%b8%a7%e0%b8%b2%e0%b8%a1%e0%b9%81%e0%b8%95%e0%b8%81%e0%b8%95%e0%b9%88%e0%b8%b2%e0%b8%87%e0%b8%a3%e0%b8%b0%e0%b8%ab%e0%b8%a7%e0%b9%88%e0%b8%b2%e0%b8%87-isset-%e0%b8%81%e0%b8%b1%e0%b8%9a-arr?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=%25e0%25b8%2584%25e0%25b8%25a7%25e0%25b8%25b2%25e0%25b8%25a1%25e0%25b9%2581%25e0%25b8%2595%25e0%25b8%2581%25e0%25b8%2595%25e0%25b9%2588%25e0%25b8%25b2%25e0%25b8%2587%25e0%25b8%25a3%25e0%25b8%25b0%25e0%25b8%25ab%25e0%25b8%25a7%25e0%25b9%2588%25e0%25b8%25b2%25e0%25b8%2587-isset-%25e0%25b8%2581%25e0%25b8%25b1%25e0%25b8%259a-arr</link>
		<comments>http://www.cmdevhub.com/uncategorized/%e0%b8%84%e0%b8%a7%e0%b8%b2%e0%b8%a1%e0%b9%81%e0%b8%95%e0%b8%81%e0%b8%95%e0%b9%88%e0%b8%b2%e0%b8%87%e0%b8%a3%e0%b8%b0%e0%b8%ab%e0%b8%a7%e0%b9%88%e0%b8%b2%e0%b8%87-isset-%e0%b8%81%e0%b8%b1%e0%b8%9a-arr#comments</comments>
		<pubDate>Mon, 30 Apr 2012 12:35:53 +0000</pubDate>
		<dc:creator>shikima</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://www.cmdevhub.com/?p=260</guid>
		<description><![CDATA[<p>รอบนี้ก็มีทิปง่ายๆ แต่มีประโยชน์แน่นอน ในการเขียนโปรแกรม PHP บางครั้งเราต้องมีการตรวจสอบตัวแปรว่ามีอยู่หรือไม่ คำสั่งที่เราบ่อยๆ ก็คือ isset() คำสั่งนี้สามารถเช็คได้ทั้ง ตัวแปร และ อาเรย์สำหรับตัวแปรนั้นผลลัพท์ที่ได้ก็ตรงไปตรงมาคือ true กับ false แต่สำหรับ อาเรย์ เราจะใช้คำสั่งนี้ในการตรวจสอบว่ามี คีย์ หรือ อินเด็กซ์ นี้อยู่ภายในอาเรย์หรือไม่การตรวจสอบอาเรย์สามารถใช้คำสั่ง array_key_exists() ได้ด้วยเหมือนกัน แต่ความแตกต่างระหว่างสองคำสั่งนี้คือ ถ้าหากค่าที่เก็บเป็น NULLคำสั่ง isset() จะคืนค่าเป็น false แต่คำสั่ง array_key_exists() จะคืนค่าเป็น true ลองดูตัวอย่างได้ครับ สังเกตได้ว่าคำสั่ง isset จะตรวจสอบตัวแปรที่มีค่าเก็บไว้เท่านั้น ถ้าหากเป็น NULL &#8230; <a href="http://www.cmdevhub.com/uncategorized/%e0%b8%84%e0%b8%a7%e0%b8%b2%e0%b8%a1%e0%b9%81%e0%b8%95%e0%b8%81%e0%b8%95%e0%b9%88%e0%b8%b2%e0%b8%87%e0%b8%a3%e0%b8%b0%e0%b8%ab%e0%b8%a7%e0%b9%88%e0%b8%b2%e0%b8%87-isset-%e0%b8%81%e0%b8%b1%e0%b8%9a-arr">Continue reading <span class="meta-nav">&#8594;</span></a></p>
]]></description>
			<content:encoded><![CDATA[<p>รอบนี้ก็มีทิปง่ายๆ แต่มีประโยชน์แน่นอน</p>
<p>ในการเขียนโปรแกรม PHP บางครั้งเราต้องมีการตรวจสอบตัวแปรว่ามีอยู่หรือไม่ คำสั่งที่เราบ่อยๆ ก็คือ isset() คำสั่งนี้สามารถเช็คได้ทั้ง ตัวแปร และ อาเรย์สำหรับตัวแปรนั้นผลลัพท์ที่ได้ก็ตรงไปตรงมาคือ true กับ false แต่สำหรับ อาเรย์ เราจะใช้คำสั่งนี้ในการตรวจสอบว่ามี คีย์ หรือ อินเด็กซ์ นี้อยู่ภายในอาเรย์หรือไม่การตรวจสอบอาเรย์สามารถใช้คำสั่ง array_key_exists() ได้ด้วยเหมือนกัน แต่ความแตกต่างระหว่างสองคำสั่งนี้คือ ถ้าหากค่าที่เก็บเป็น NULLคำสั่ง isset() จะคืนค่าเป็น false แต่คำสั่ง array_key_exists() จะคืนค่าเป็น true</p>
<p>ลองดูตัวอย่างได้ครับ</p>
<pre class="brush: php; title: ; notranslate">
&lt;?php
$a = 10;

isset($a)  // true
isset($z)  // false

$b = array('a' =&gt; 10, 'b' =&gt; NULL);
isset($b['a'])  // true
isset($b['a'])  // false

array_key_exists('a', $b)  // true
array_key_exists('b', $b)  // true

$c = NULL
isset($c)  // NULL
?&gt;
</pre>
<p>สังเกตได้ว่าคำสั่ง isset จะตรวจสอบตัวแปรที่มีค่าเก็บไว้เท่านั้น ถ้าหากเป็น NULL คำสั่ง isset ก็จะคืนค่าเป็น false อยู่ดี</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cmdevhub.com/uncategorized/%e0%b8%84%e0%b8%a7%e0%b8%b2%e0%b8%a1%e0%b9%81%e0%b8%95%e0%b8%81%e0%b8%95%e0%b9%88%e0%b8%b2%e0%b8%87%e0%b8%a3%e0%b8%b0%e0%b8%ab%e0%b8%a7%e0%b9%88%e0%b8%b2%e0%b8%87-isset-%e0%b8%81%e0%b8%b1%e0%b8%9a-arr/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>mobile detect สำหรับ php แบบง่ายๆ</title>
		<link>http://www.cmdevhub.com/blog/mobile-detect-%e0%b8%aa%e0%b8%b3%e0%b8%ab%e0%b8%a3%e0%b8%b1%e0%b8%9a-php-%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b8%87%e0%b9%88%e0%b8%b2%e0%b8%a2%e0%b9%86?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=mobile-detect-%25e0%25b8%25aa%25e0%25b8%25b3%25e0%25b8%25ab%25e0%25b8%25a3%25e0%25b8%25b1%25e0%25b8%259a-php-%25e0%25b9%2581%25e0%25b8%259a%25e0%25b8%259a%25e0%25b8%2587%25e0%25b9%2588%25e0%25b8%25b2%25e0%25b8%25a2%25e0%25b9%2586</link>
		<comments>http://www.cmdevhub.com/blog/mobile-detect-%e0%b8%aa%e0%b8%b3%e0%b8%ab%e0%b8%a3%e0%b8%b1%e0%b8%9a-php-%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b8%87%e0%b9%88%e0%b8%b2%e0%b8%a2%e0%b9%86#comments</comments>
		<pubDate>Thu, 01 Mar 2012 05:20:46 +0000</pubDate>
		<dc:creator>shikima</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[mobile phone]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[php function]]></category>

		<guid isPermaLink="false">http://www.cmdevhub.com/?p=252</guid>
		<description><![CDATA[<p>ตอนนี้มือถือหรือ tablet กำลังเป็นที่นิยมมากมาย เวลาเขียนเว๊ปส่วนใหญ่เราก็จะแยกเป็นหน้าสำหรับมือถือซึ่งเราก็ต้องทำการตรวจสอบก่อนว่าคนที่เข้ามาดูใช้มือถือหรือ tablet หรือเข้ามาจาก pc ปกติ สำหรับคนที่ตั้ง server เอง เราสามารถลงโมดูล Apache Mobile Filter แล้วไปจับที่ AMFLightDetectionFilter แทน แต่ถ้าเราเช่าพื้นที่จากคนอื่นละ ก็ไม่ยากเลย ใช้ php นี่แหละจับเอา โดยจับเอาจากตัวแปร $_SERVER['HTTP_USER_AGENT'] แล้วเราก็มาแยกเอาว่าเป็นอุปกรณ์มือถือหรือเปล่าจากตรงนี้ได้ โค๊ดสำหรับตรวจสอบผมเขียนเป็นฟังก์ชั่นให้แล้ว สามารถใช้กับมือถือในปัจจุบันได้มากพอสมควร ส่วนรุ่นเก่าๆ คงปล่อยไป เพราะไม่ค่อยจะมีคนใช้กันละ ตอนนี้จับแต่เครื่องในกระแสก็พอ โค๊ดนี้ใช้งานจริง ใน spec เขาให้เก็บค่าลง session ด้วยเลยเขียนติดไปด้วยเลย เวลาใช้งานจริงเอาออกก็ได้เพราะไม่จำเป็น จบละครับ &#8230; <a href="http://www.cmdevhub.com/blog/mobile-detect-%e0%b8%aa%e0%b8%b3%e0%b8%ab%e0%b8%a3%e0%b8%b1%e0%b8%9a-php-%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b8%87%e0%b9%88%e0%b8%b2%e0%b8%a2%e0%b9%86">Continue reading <span class="meta-nav">&#8594;</span></a></p>
]]></description>
			<content:encoded><![CDATA[<p>ตอนนี้มือถือหรือ tablet กำลังเป็นที่นิยมมากมาย เวลาเขียนเว๊ปส่วนใหญ่เราก็จะแยกเป็นหน้าสำหรับมือถือซึ่งเราก็ต้องทำการตรวจสอบก่อนว่าคนที่เข้ามาดูใช้มือถือหรือ tablet หรือเข้ามาจาก pc ปกติ สำหรับคนที่ตั้ง server เอง เราสามารถลงโมดูล <a href="http://apachemobilefilter.org/" target="_blank">Apache Mobile Filter</a> แล้วไปจับที่ <strong>AMFLightDetectionFilter</strong> แทน แต่ถ้าเราเช่าพื้นที่จากคนอื่นละ ก็ไม่ยากเลย ใช้ php นี่แหละจับเอา โดยจับเอาจากตัวแปร $_SERVER['HTTP_USER_AGENT'] แล้วเราก็มาแยกเอาว่าเป็นอุปกรณ์มือถือหรือเปล่าจากตรงนี้ได้</p>
<p>โค๊ดสำหรับตรวจสอบผมเขียนเป็นฟังก์ชั่นให้แล้ว สามารถใช้กับมือถือในปัจจุบันได้มากพอสมควร ส่วนรุ่นเก่าๆ คงปล่อยไป เพราะไม่ค่อยจะมีคนใช้กันละ ตอนนี้จับแต่เครื่องในกระแสก็พอ <img src='http://www.cmdevhub.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<pre class="brush: php; title: ; notranslate">
	function mobileDetect() {
		$_SESSION['mobile-detect'] = array();
		switch(true) {
			case (preg_match(&quot;/ipad/i&quot;, $_SERVER['HTTP_USER_AGENT']));
				$_SESSION['mobile-detect']['device'] = 'iPad';
				$_SESSION['mobile-detect']['manu'] = &quot;Apple&quot;;
				return true;
			break;
			case (preg_match(&quot;/ipod/i&quot;, $_SERVER['HTTP_USER_AGENT']));
				$_SESSION['mobile-detect']['device'] = 'iPod';
				$_SESSION['mobile-detect']['manu'] = &quot;Apple&quot;;
				return true;
			break;
			case (preg_match(&quot;/iphone/i&quot;, $_SERVER['HTTP_USER_AGENT']));
				$_SESSION['mobile-detect']['device'] = 'iPhone';
				$_SESSION['mobile-detect']['manu'] = &quot;Apple&quot;;
				return true;
			break;
			case (preg_match(&quot;/android/i&quot;, $_SERVER['HTTP_USER_AGENT']));
				$_SESSION['mobile-detect']['device'] = 'Android';
				$_SESSION['mobile-detect']['manu'] = &quot;Google&quot;;
				return true;
			break;
			case (preg_match(&quot;/blackberry/i&quot;, $_SERVER['HTTP_USER_AGENT']));
				$_SESSION['mobile-detect']['device'] = 'Blackberry';
				$_SESSION['mobile-detect']['manu'] = &quot;RIM&quot;;
				return true;
			break;
			case (preg_match(&quot;/blackberry/i&quot;, $_SERVER['HTTP_USER_AGENT']));
				$_SESSION['mobile-detect']['device'] = 'Blackberry';
				$_SESSION['mobile-detect']['manu'] = &quot;RIM&quot;;
				return true;
			break;
			case (preg_match(&quot;/windows ce; smartphone;|windows ce; iemobile/i&quot;, $_SERVER['HTTP_USER_AGENT']));
				$_SESSION['mobile-detect']['device'] = 'WindowsCE';
				$_SESSION['mobile-detect']['manu'] = &quot;Microsoft&quot;;
				return true;
			break;
			case (preg_match(&quot;/touchpad|hpwos/i&quot;, $_SERVER['HTTP_USER_AGENT']));
				$_SESSION['mobile-detect']['device'] = 'HP TouchPad';
				$_SESSION['mobile-detect']['manu'] = &quot;HP&quot;;
				return true;
			break;
			default:
				return false;
			break;
		}
	}
</pre>
<p>โค๊ดนี้ใช้งานจริง ใน spec เขาให้เก็บค่าลง session ด้วยเลยเขียนติดไปด้วยเลย เวลาใช้งานจริงเอาออกก็ได้เพราะไม่จำเป็น</p>
<p>จบละครับ เขียนห้านาทีก่อนไปทานข้าวเที่ยง <img src='http://www.cmdevhub.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.cmdevhub.com/blog/mobile-detect-%e0%b8%aa%e0%b8%b3%e0%b8%ab%e0%b8%a3%e0%b8%b1%e0%b8%9a-php-%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b8%87%e0%b9%88%e0%b8%b2%e0%b8%a2%e0%b9%86/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ทำตารางสลับสีแนวตั้ง</title>
		<link>http://www.cmdevhub.com/blog/%e0%b8%97%e0%b8%b3%e0%b8%95%e0%b8%b2%e0%b8%a3%e0%b8%b2%e0%b8%87%e0%b8%aa%e0%b8%a5%e0%b8%b1%e0%b8%9a%e0%b8%aa%e0%b8%b5%e0%b9%81%e0%b8%99%e0%b8%a7%e0%b8%95%e0%b8%b1%e0%b9%89%e0%b8%87?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=%25e0%25b8%2597%25e0%25b8%25b3%25e0%25b8%2595%25e0%25b8%25b2%25e0%25b8%25a3%25e0%25b8%25b2%25e0%25b8%2587%25e0%25b8%25aa%25e0%25b8%25a5%25e0%25b8%25b1%25e0%25b8%259a%25e0%25b8%25aa%25e0%25b8%25b5%25e0%25b9%2581%25e0%25b8%2599%25e0%25b8%25a7%25e0%25b8%2595%25e0%25b8%25b1%25e0%25b9%2589%25e0%25b8%2587</link>
		<comments>http://www.cmdevhub.com/blog/%e0%b8%97%e0%b8%b3%e0%b8%95%e0%b8%b2%e0%b8%a3%e0%b8%b2%e0%b8%87%e0%b8%aa%e0%b8%a5%e0%b8%b1%e0%b8%9a%e0%b8%aa%e0%b8%b5%e0%b9%81%e0%b8%99%e0%b8%a7%e0%b8%95%e0%b8%b1%e0%b9%89%e0%b8%87#comments</comments>
		<pubDate>Wed, 29 Feb 2012 11:15:00 +0000</pubDate>
		<dc:creator>shikima</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[table]]></category>
		<category><![CDATA[ทำสีให้ตาราง]]></category>

		<guid isPermaLink="false">http://www.cmdevhub.com/?p=248</guid>
		<description><![CDATA[<p>จาก entry คราวที่แล้วเรื่องทำตารางสลับสีแบบง่ายๆ ก็เลยเกิดความสงสัยขึ้นมาว่า ถ้าจะทำตารางสลับสีแนวตั้งละ มันจะทำได้ไหม ถ้าคิดอะไรไม่ออกก็คงต้องใช้ php ลงสีเอาอีกแน่ๆ แบบนี้แหละที่เราต้องการ ถ้าเขียนโค๊ดก็คงประมาณนี้ ซึ่งมันดู&#8230; ธรรมดามากๆ แถมยังแก้ไขยากอีก ถ้าต้องการเปลี่ยนสีจาก CCC เป็นสีอื่นละ แล้วถ้ามันมีสัก 500 เซล&#8230; งานงอกกันทีเดียว วิธีแก้ปัญหา ไม่ยากเลย ใช้ tag &#60;col&#62; ที่มีมากับ HTML ตั้งแต่แรกแล้ว แต่เราไม่ค่อยได้ใช้กันน่ะสิ วิธีการก็แทรกหลังจาก &#60;table&#62; ก่อนที่จะเริ่ม &#60;tr&#62; เข้าไปตามจำนวคอลั่มที่เรามีแล้วก็กำหนดสีตรง &#60;col&#62; แทน พูดไปไม่ค่อยเข้าใจลองดูตัวอย่างดีกว่า จากตัวอย่างมีคอลั่มอยู่ห้าแถว เราก็สร้าง &#8230; <a href="http://www.cmdevhub.com/blog/%e0%b8%97%e0%b8%b3%e0%b8%95%e0%b8%b2%e0%b8%a3%e0%b8%b2%e0%b8%87%e0%b8%aa%e0%b8%a5%e0%b8%b1%e0%b8%9a%e0%b8%aa%e0%b8%b5%e0%b9%81%e0%b8%99%e0%b8%a7%e0%b8%95%e0%b8%b1%e0%b9%89%e0%b8%87">Continue reading <span class="meta-nav">&#8594;</span></a></p>
]]></description>
			<content:encoded><![CDATA[<p>จาก entry คราวที่แล้วเรื่องทำ<a href="http://www.cmdevhub.com/?p=235">ตารางสลับสีแบบง่ายๆ</a> ก็เลยเกิดความสงสัยขึ้นมาว่า ถ้าจะทำตารางสลับสีแนวตั้งละ มันจะทำได้ไหม ถ้าคิดอะไรไม่ออกก็คงต้องใช้ php ลงสีเอาอีกแน่ๆ</p>
<p><img class="alignnone" style="max-width: 358px;" src="https://lh6.googleusercontent.com/-8kZ-qLVEXzE/T030m5B9n4I/AAAAAAAAC9A/SSCVyhhnm6k/s800/col-color.png" alt="" width="100%" /></p>
<p>แบบนี้แหละที่เราต้องการ ถ้าเขียนโค๊ดก็คงประมาณนี้</p>
<pre class="brush: xml; title: ; notranslate">
&lt;table width=&quot;100%&quot; border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
  &lt;tr&gt;
    &lt;td&gt;COL1&lt;/td&gt;
    &lt;td bgcolor=&quot;#CCCCCC&quot;&gt;COL2&lt;/td&gt;
    &lt;td&gt;COL3&lt;/td&gt;
    &lt;td bgcolor=&quot;#CCCCCC&quot;&gt;COL4&lt;/td&gt;
    &lt;td&gt;COL5&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;01&lt;/td&gt;
    &lt;td bgcolor=&quot;#CCCCCC&quot;&gt;11&lt;/td&gt;
    &lt;td&gt;21&lt;/td&gt;
    &lt;td bgcolor=&quot;#CCCCCC&quot;&gt;31&lt;/td&gt;
    &lt;td&gt;41&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;02&lt;/td&gt;
    &lt;td bgcolor=&quot;#CCCCCC&quot;&gt;12&lt;/td&gt;
    &lt;td&gt;22&lt;/td&gt;
    &lt;td bgcolor=&quot;#CCCCCC&quot;&gt;32&lt;/td&gt;
    &lt;td&gt;42&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;03&lt;/td&gt;
    &lt;td bgcolor=&quot;#CCCCCC&quot;&gt;13&lt;/td&gt;
    &lt;td&gt;23&lt;/td&gt;
    &lt;td bgcolor=&quot;#CCCCCC&quot;&gt;33&lt;/td&gt;
    &lt;td&gt;43&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</pre>
<p>ซึ่งมันดู... ธรรมดามากๆ แถมยังแก้ไขยากอีก ถ้าต้องการเปลี่ยนสีจาก CCC เป็นสีอื่นละ แล้วถ้ามันมีสัก 500 เซล... งานงอกกันทีเดียว</p>
<p>วิธีแก้ปัญหา ไม่ยากเลย ใช้ tag &lt;col&gt; ที่มีมากับ HTML ตั้งแต่แรกแล้ว แต่เราไม่ค่อยได้ใช้กันน่ะสิ วิธีการก็แทรกหลังจาก &lt;table&gt; ก่อนที่จะเริ่ม &lt;tr&gt; เข้าไปตามจำนวคอลั่มที่เรามีแล้วก็กำหนดสีตรง &lt;col&gt; แทน พูดไปไม่ค่อยเข้าใจลองดูตัวอย่างดีกว่า</p>
<pre class="brush: xml; title: ; notranslate">
&lt;table width=&quot;100%&quot; border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
  &lt;colgroup&gt;
  	&lt;col /&gt;
    &lt;col style=&quot;background-color:#CCC;&quot; /&gt;
    &lt;col /&gt;
    &lt;col style=&quot;background-color:#CCC;&quot; /&gt;
    &lt;col /&gt;
  &lt;/colgroup&gt;
  &lt;tr&gt;
    &lt;td&gt;COL1&lt;/td&gt;
    &lt;td&gt;COL2&lt;/td&gt;
    &lt;td&gt;COL3&lt;/td&gt;
    &lt;td&gt;COL4&lt;/td&gt;
    &lt;td&gt;COL5&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;01&lt;/td&gt;
    &lt;td&gt;11&lt;/td&gt;
    &lt;td&gt;21&lt;/td&gt;
    &lt;td&gt;31&lt;/td&gt;
    &lt;td&gt;41&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;02&lt;/td&gt;
    &lt;td&gt;12&lt;/td&gt;
    &lt;td&gt;22&lt;/td&gt;
    &lt;td&gt;32&lt;/td&gt;
    &lt;td&gt;42&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;03&lt;/td&gt;
    &lt;td&gt;13&lt;/td&gt;
    &lt;td&gt;23&lt;/td&gt;
    &lt;td&gt;33&lt;/td&gt;
    &lt;td&gt;43&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</pre>
<p>จากตัวอย่างมีคอลั่มอยู่ห้าแถว เราก็สร้าง &lt;col&gt; มาห้าอัน ส่วน &lt;colgroup&gt; จะใส่หรือไม่ใส่ก็ได้ แต่ผมใส่เพื่อให้ง่ายต่อการเข้าใจว่า &lt;col&gt; เริ่มตรงไหน แล้วจบตรงไหน จากนั้นเราก็ทำการเขียน style เข้าไปในแต่ละคอลั่มเลย ผลลัพธ์ก็เหมือนข้างบนเป๊ะๆ</p>
<p>แต่ถ้ามีหลายคอลั่มละ เราก็ต้องสร้าง style มาเท่ากับจำนวนคอลั่มที่เราต้องการใส่สีเลยสิ มันก็มีปัญหาตอนเราแก้ไขเหมือนเดิม อ่ะ ใช้ style sheet คุมมันอีกทีก็ได้ ลองดูตัวอย่างกัน</p>
<pre class="brush: css; title: ; notranslate">
&lt;style type=&quot;text/css&quot;&gt;
.col-table col:nth-child(2n+1) {
	background-color:#9F0;
}
.col-table col:first-child {
	background-color:#CCC;
}
&lt;/style&gt;
</pre>
<p>&nbsp;</p>
<pre class="brush: xml; title: ; notranslate">
&lt;table width=&quot;100%&quot; border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; class=&quot;col-table&quot;&gt;
  &lt;colgroup&gt;
  	&lt;col /&gt;
    &lt;col /&gt;
    &lt;col /&gt;
    &lt;col /&gt;
    &lt;col /&gt;
    &lt;col /&gt;
    &lt;col /&gt;
    &lt;col /&gt;
  &lt;/colgroup&gt;
  &lt;tr&gt;
    &lt;td&gt;COL0&lt;/td&gt;
    &lt;td&gt;COL1&lt;/td&gt;
    &lt;td&gt;COL2&lt;/td&gt;
    &lt;td&gt;COL3&lt;/td&gt;
    &lt;td&gt;COL4&lt;/td&gt;
    &lt;td&gt;COL5&lt;/td&gt;
    &lt;td&gt;COL6&lt;/td&gt;
    &lt;td&gt;COL7&lt;/td&gt;
    &lt;td&gt;COL8&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;01&lt;/td&gt;
    &lt;td&gt;11&lt;/td&gt;
    &lt;td&gt;21&lt;/td&gt;
    &lt;td&gt;31&lt;/td&gt;
    &lt;td&gt;41&lt;/td&gt;
    &lt;td&gt;51&lt;/td&gt;
    &lt;td&gt;61&lt;/td&gt;
    &lt;td&gt;71&lt;/td&gt;
    &lt;td&gt;81&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;02&lt;/td&gt;
    &lt;td&gt;12&lt;/td&gt;
    &lt;td&gt;22&lt;/td&gt;
    &lt;td&gt;32&lt;/td&gt;
    &lt;td&gt;42&lt;/td&gt;
    &lt;td&gt;52&lt;/td&gt;
    &lt;td&gt;62&lt;/td&gt;
    &lt;td&gt;72&lt;/td&gt;
    &lt;td&gt;82&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;03&lt;/td&gt;
    &lt;td&gt;13&lt;/td&gt;
    &lt;td&gt;23&lt;/td&gt;
    &lt;td&gt;33&lt;/td&gt;
    &lt;td&gt;43&lt;/td&gt;
    &lt;td&gt;53&lt;/td&gt;
    &lt;td&gt;63&lt;/td&gt;
    &lt;td&gt;71&lt;/td&gt;
    &lt;td&gt;83&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</pre>
<p>เราก็จะได้ผลลัพธ์แบบนี้</p>
<p><img class="alignnone" style="max-width: 418px;" src="https://lh5.googleusercontent.com/-ItfTnEM0SeU/T04FMpTUp8I/AAAAAAAAC9M/jeyPB2OYcuc/s800/col-color.png" alt="" width="100%" /></p>
<p>แล้วทำไมแถวสุดท้ายถึงไม่เปลี่ยนสี ลองดูตรง &lt;col&gt; สิครับ ผมใส่ไปแค่แปดอันแต่จำนวนแถวมีเก้าแถว เพราะฉะนั้นเราจำเป็นจะต้องใส่ &lt;col&gt; ให้ครบตามจำนวนแถวที่เรามี ส่วน (2n+1) เป็นสมาการง่ายๆ ถ้าหากเราแทนที่ n ด้วยจำนวน 0,1,2,3 ... ผลลัพธ์ก็จะเป็นเลขคี่ ซึ่งก็คือหมายเลขของ &lt;col&gt; ที่เราต้องการเท่านั้นเอง ส่วนสาเหตุที่ต้องใส่ first-child ไปด้วยนั้น เพราะสมาการ 2n+1 ถ้า n=0 จะหมายถึงแถวแรกนั่นเอง แต่ถ้าไม่ต้องการเปลี่ยนสีแถวเราก็ไม่จำเป็นต้องใส่</p>
<p>ถ้าเราแทนที่ตัวเลขเข้าไปในสมาการเลย ก็จะเป็นการระบุตำแหน่งของ &lt;col&gt; ไปเลยก็สามารถทำได้เหมือนกัน</p>
<pre class="brush: css; title: ; notranslate">
&lt;style type=&quot;text/css&quot;&gt;
.col-table col:nth-child(2n+1) {
	background-color:#9F0;
}
.col-table col:first-child {
	background-color:#CCC;
}
.col-table col:nth-child(4) {
	background-color:#F00;
}
.col-table col:nth-child(6) {
	background-color:#99FFFF;
}
&lt;/style&gt;
</pre>
<p><img class="alignnone" style="max-width: 417px;" src="https://lh3.googleusercontent.com/-vVcvUd0axv0/T04HthvaTRI/AAAAAAAAC9Y/ioJ-2VT2Q_A/s800/col-color.png" alt="" width="100%" /></p>
<p>เห็นไหมไม่ยากเลย แถมโค๊ดยังดูสะอาดเรียบร้อยอีก เราสามารถประยุกต์ใช้งานกับ tag อื่นๆ อย่าง &lt;li&gt; ได้อีกไม่รู้จบเลย แล้วเจอกันใหม่คราวหน้าครับ <img src='http://www.cmdevhub.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.cmdevhub.com/blog/%e0%b8%97%e0%b8%b3%e0%b8%95%e0%b8%b2%e0%b8%a3%e0%b8%b2%e0%b8%87%e0%b8%aa%e0%b8%a5%e0%b8%b1%e0%b8%9a%e0%b8%aa%e0%b8%b5%e0%b9%81%e0%b8%99%e0%b8%a7%e0%b8%95%e0%b8%b1%e0%b9%89%e0%b8%87/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ตารางสลับสีแบบง้าย ง่าย</title>
		<link>http://www.cmdevhub.com/blog/%e0%b8%95%e0%b8%b2%e0%b8%a3%e0%b8%b2%e0%b8%87%e0%b8%aa%e0%b8%a5%e0%b8%b1%e0%b8%9a%e0%b8%aa%e0%b8%b5%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b8%87%e0%b9%89%e0%b8%b2%e0%b8%a2-%e0%b8%87%e0%b9%88%e0%b8%b2%e0%b8%a2?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=%25e0%25b8%2595%25e0%25b8%25b2%25e0%25b8%25a3%25e0%25b8%25b2%25e0%25b8%2587%25e0%25b8%25aa%25e0%25b8%25a5%25e0%25b8%25b1%25e0%25b8%259a%25e0%25b8%25aa%25e0%25b8%25b5%25e0%25b9%2581%25e0%25b8%259a%25e0%25b8%259a%25e0%25b8%2587%25e0%25b9%2589%25e0%25b8%25b2%25e0%25b8%25a2-%25e0%25b8%2587%25e0%25b9%2588%25e0%25b8%25b2%25e0%25b8%25a2</link>
		<comments>http://www.cmdevhub.com/blog/%e0%b8%95%e0%b8%b2%e0%b8%a3%e0%b8%b2%e0%b8%87%e0%b8%aa%e0%b8%a5%e0%b8%b1%e0%b8%9a%e0%b8%aa%e0%b8%b5%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b8%87%e0%b9%89%e0%b8%b2%e0%b8%a2-%e0%b8%87%e0%b9%88%e0%b8%b2%e0%b8%a2#comments</comments>
		<pubDate>Mon, 13 Feb 2012 10:57:28 +0000</pubDate>
		<dc:creator>shikima</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[table]]></category>
		<category><![CDATA[ทำสีให้ตาราง]]></category>

		<guid isPermaLink="false">http://www.cmdevhub.com/?p=235</guid>
		<description><![CDATA[<p>ปกติเวลาเราสร้างตาราง (table) สำหรับขึ้นมาสักอันหนึ่ง แล้วเราต้องการแยกสีสำหรับแต่ละแถว เราก็อาจจะเขียนโค๊ดในการวนลูปเพื่อให้แต่ละแถวมีสีไม่เหมือนกัน แต่ถ้าหากเราไม่สามารถให้สามารถวนลูปได้ คือ server รัน php หรือ asp ไม่ได้ เราจะมีวิธีแก้ปัญหายังไงดี ง่ายๆ เลย ก็ใส่สีในแต่ละแถวไปเลยสิ (ง่ายไหม) ได้แบบนี้เลย หรือถ้าหากเราสามารถใช้ php ได้ เราก็สามารถใช้วิธีการวนลูปก็ได้เหมือนกัน แถมยังสะดวกสบายด้วยสิถ้าหากเขียนโค๊ดก็ได้ประมาณนี้ ซึ่งผลลัพธ์ที่ได้ก็จะเหมือนกับตารางข้างบน แต่ถ้าหากเราไม่สามารถเขียนโค๊ดเพื่อใช้งานลูปได้ เราก็ต้องใช้วิธีแรกเอง ซึ่งถ้าหากต้องการเปลี่ยนสีละ จากขาวกับเทาเป็นสีแดงกับน้ำเงิน ทีนี้สิ งานเข้าแล้ว เราก็ต้องมาไล่แก้ทั้งหมดเลย คำตอบของเราคือ CSS แล้วใช้ยังไงละ? เราสามารถเพิ่ม nth-child เพิ่มเข้าไปเป็น attribute ของ &#8230; <a href="http://www.cmdevhub.com/blog/%e0%b8%95%e0%b8%b2%e0%b8%a3%e0%b8%b2%e0%b8%87%e0%b8%aa%e0%b8%a5%e0%b8%b1%e0%b8%9a%e0%b8%aa%e0%b8%b5%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b8%87%e0%b9%89%e0%b8%b2%e0%b8%a2-%e0%b8%87%e0%b9%88%e0%b8%b2%e0%b8%a2">Continue reading <span class="meta-nav">&#8594;</span></a></p>
]]></description>
			<content:encoded><![CDATA[<p>ปกติเวลาเราสร้างตาราง (table) สำหรับขึ้นมาสักอันหนึ่ง แล้วเราต้องการแยกสีสำหรับแต่ละแถว เราก็อาจจะเขียนโค๊ดในการวนลูปเพื่อให้แต่ละแถวมีสีไม่เหมือนกัน แต่ถ้าหากเราไม่สามารถให้สามารถวนลูปได้ คือ server รัน php หรือ asp ไม่ได้ เราจะมีวิธีแก้ปัญหายังไงดี</p>
<p>ง่ายๆ เลย ก็ใส่สีในแต่ละแถวไปเลยสิ (ง่ายไหม)</p>
<pre class="brush: xml; title: ; notranslate">
&lt;table width=&quot;300&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
  &lt;tr&gt;
    &lt;th scope=&quot;col&quot; width=&quot;33%&quot;&gt;ช่องที่&lt;/th&gt;
    &lt;th scope=&quot;col&quot; width=&quot;33%&quot;&gt;ตัวหนังสือ&lt;/th&gt;
    &lt;th scope=&quot;col&quot;&gt;ภาษาไทย&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr bgcolor=&quot;#999&quot;&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td&gt;A&lt;/td&gt;
    &lt;td&gt;ก&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;2&lt;/td&gt;
    &lt;td&gt;B&lt;/td&gt;
    &lt;td&gt;ข&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr bgcolor=&quot;#999&quot;&gt;
    &lt;td&gt;3&lt;/td&gt;
    &lt;td&gt;C&lt;/td&gt;
    &lt;td&gt;ฃ&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;4&lt;/td&gt;
    &lt;td&gt;D&lt;/td&gt;
    &lt;td&gt;ค&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr bgcolor=&quot;#999&quot;&gt;
    &lt;td&gt;5&lt;/td&gt;
    &lt;td&gt;E&lt;/td&gt;
    &lt;td&gt;ฅ&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;6&lt;/td&gt;
    &lt;td&gt;F&lt;/td&gt;
    &lt;td&gt;ฆ&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr bgcolor=&quot;#999&quot;&gt;
    &lt;td&gt;7&lt;/td&gt;
    &lt;td&gt;G&lt;/td&gt;
    &lt;td&gt;ง&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;8&lt;/td&gt;
    &lt;td&gt;H&lt;/td&gt;
    &lt;td&gt;จ&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr bgcolor=&quot;#999&quot;&gt;
    &lt;td&gt;9&lt;/td&gt;
    &lt;td&gt;I&lt;/td&gt;
    &lt;td&gt;ฉ&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</pre>
<p>ได้แบบนี้เลย<br />
<img style="max-width: 307px;" src="https://lh5.googleusercontent.com/-aw77RCdba3A/TzjhaedvmUI/AAAAAAAAC8o/vpW9DHj0ybs/s800/css-table-even-and-odd-rules-01.jpg" alt="cmdevhub" width="100%" /></p>
<p>หรือถ้าหากเราสามารถใช้ php ได้ เราก็สามารถใช้วิธีการวนลูปก็ได้เหมือนกัน แถมยังสะดวกสบายด้วยสิถ้าหากเขียนโค๊ดก็ได้ประมาณนี้</p>
<pre class="brush: php; title: ; notranslate">
&lt;?php
	$a = array(array(1,'A','ก'), array(2,'B','ข'), array(3,'C','ฃ'), array(4,'D','ค'), array(5,'E','ฅ'), array(6,'F','ฆ'), array(7,'G','ง'), array(8,'H','จ'), array(9,'I','ฉ'));
?&gt;
&lt;table width=&quot;300&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
  &lt;tr&gt;
    &lt;th scope=&quot;col&quot; width=&quot;33%&quot;&gt;ช่องที่&lt;/th&gt;
    &lt;th scope=&quot;col&quot; width=&quot;33%&quot;&gt;ตัวหนังสือ&lt;/th&gt;
    &lt;th scope=&quot;col&quot;&gt;ภาษาไทย&lt;/th&gt;
  &lt;/tr&gt;
&lt;?php
	$i = 0;
	foreach($a as $val) {
?&gt;
  &lt;tr &lt;?php echo $i % 2 == 0 ? &quot; bgcolor='#999' &quot; : &quot; bgcolor='#FFF' &quot;;?&gt;&gt;
    &lt;td&gt;&lt;?php echo $val[0];?&gt;&lt;/td&gt;
    &lt;td&gt;&lt;?php echo $val[1];?&gt;&lt;/td&gt;
    &lt;td&gt;&lt;?php echo $val[2];?&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;?php
		$i++;
	}
?&gt;
&lt;/table&gt;
</pre>
<p>ซึ่งผลลัพธ์ที่ได้ก็จะเหมือนกับตารางข้างบน แต่ถ้าหากเราไม่สามารถเขียนโค๊ดเพื่อใช้งานลูปได้ เราก็ต้องใช้วิธีแรกเอง ซึ่งถ้าหากต้องการเปลี่ยนสีละ จากขาวกับเทาเป็นสีแดงกับน้ำเงิน ทีนี้สิ งานเข้าแล้ว เราก็ต้องมาไล่แก้ทั้งหมดเลย</p>
<p>คำตอบของเราคือ CSS</p>
<p>แล้วใช้ยังไงละ?</p>
<p>เราสามารถเพิ่ม nth-child เพิ่มเข้าไปเป็น attribute ของ css ที่เราต้องการได้ ลองมาดูตัวอย่างเลยล่ะกัน ถ้าต้องการแยกสีให้เหมือนกับตารางข้างบนเราก็สามารถเขียนโค๊ดในส่วนของ CSS ได้ดังนี้</p>
<pre class="brush: css; title: ; notranslate">
&lt;style type=&quot;text/css&quot;&gt;
	tr:nth-child(even) { background-color:#0F0; }
	tr:nth-child(odd) { background-color:#F00; }
	tr:first-child {background-color:#FFFFFF;}
&lt;/style&gt;
</pre>
<pre class="brush: xml; title: ; notranslate">
&lt;table width=&quot;300&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
  &lt;tr&gt;
    &lt;th scope=&quot;col&quot; width=&quot;33%&quot;&gt;ช่องที่&lt;/th&gt;
    &lt;th scope=&quot;col&quot; width=&quot;33%&quot;&gt;ตัวหนังสือ&lt;/th&gt;
    &lt;th scope=&quot;col&quot;&gt;ภาษาไทย&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td&gt;A&lt;/td&gt;
    &lt;td&gt;ก&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;2&lt;/td&gt;
    &lt;td&gt;B&lt;/td&gt;
    &lt;td&gt;ข&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;3&lt;/td&gt;
    &lt;td&gt;C&lt;/td&gt;
    &lt;td&gt;ฃ&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;4&lt;/td&gt;
    &lt;td&gt;D&lt;/td&gt;
    &lt;td&gt;ค&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;5&lt;/td&gt;
    &lt;td&gt;E&lt;/td&gt;
    &lt;td&gt;ฅ&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;6&lt;/td&gt;
    &lt;td&gt;F&lt;/td&gt;
    &lt;td&gt;ฆ&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;7&lt;/td&gt;
    &lt;td&gt;G&lt;/td&gt;
    &lt;td&gt;ง&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;8&lt;/td&gt;
    &lt;td&gt;H&lt;/td&gt;
    &lt;td&gt;จ&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;9&lt;/td&gt;
    &lt;td&gt;I&lt;/td&gt;
    &lt;td&gt;ฉ&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</pre>
<p><img style="max-width: 302px;" src="https://lh4.googleusercontent.com/-kmX0VcKpBUY/TzjhaMNTCEI/AAAAAAAAC8s/M-qixzw27u4/s800/css-table-even-and-odd-rules-02.jpg" alt="cmdevhub" width="100%" /></p>
<p>เห็นไหม ได้ผลลัพธ์เหมือนกันเลยแต่ไม่ต้องพึ่งลูปเลยสักนิดเดียว ถ้าหากต้องการแก้สี ก็ทำได้ใน CSS ด้านบนที่เดียวเลยสบายเลยใช่ไหมละ <img src='http://www.cmdevhub.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>ส่วนสาเหตุที่ต้องใส่ first-child เข้าไปด้วย เพราะ tr มันจะนับตั้งแต่แถวแรกเลย</p>
<p>แล้วมันดียังไงเหรอ?</p>
<p>ลองคิดดูว่า ถ้าเราใช้คู่กับ jQuery แล้วถ้าต้องการลบข้อมูลทีละแถวโดยไม่ต้องทำการรีเฟรชหน้าจอ ถ้าหากเรากำหนดสีให้แต่ละแถวไปแล้วเมื่อเราทำการลบแถวนั้นๆ ออกไป สีมันจะเรียงไม่ถูกต้อง ไม่สวยงามแน่นอน ลองดูตัวอย่างข้างล่างละกันครับ</p>

<!-- Iframe plugin v.2.1 (wordpress.org/extend/plugins/iframe/) -->
<iframe src="http://cmdevhub.com/test/cssoddeven.html" width="100%" height="450" scrolling="no" class="iframe-class" frameborder="0"></iframe>
<p>เห็นหรือยังครับว่าง่าย แล้วสะดวกสบายแค่ไหน <img src='http://www.cmdevhub.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
<p>ปล. ทดสอบบน IE9, Firefox10, Chrome และ Android Browser เท่านั้นนะครับ ส่วนตัวอื่นๆ ยังไม่ได้ทำการทดสอบ</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cmdevhub.com/blog/%e0%b8%95%e0%b8%b2%e0%b8%a3%e0%b8%b2%e0%b8%87%e0%b8%aa%e0%b8%a5%e0%b8%b1%e0%b8%9a%e0%b8%aa%e0%b8%b5%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b8%87%e0%b9%89%e0%b8%b2%e0%b8%a2-%e0%b8%87%e0%b9%88%e0%b8%b2%e0%b8%a2/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>สามจีไทย ทำไมมันใช้ยากนักหนา</title>
		<link>http://www.cmdevhub.com/blog/%e0%b8%aa%e0%b8%b2%e0%b8%a1%e0%b8%88%e0%b8%b5%e0%b9%84%e0%b8%97%e0%b8%a2-%e0%b8%97%e0%b8%b3%e0%b9%84%e0%b8%a1%e0%b8%a1%e0%b8%b1%e0%b8%99%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b8%a2%e0%b8%b2%e0%b8%81%e0%b8%99?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=%25e0%25b8%25aa%25e0%25b8%25b2%25e0%25b8%25a1%25e0%25b8%2588%25e0%25b8%25b5%25e0%25b9%2584%25e0%25b8%2597%25e0%25b8%25a2-%25e0%25b8%2597%25e0%25b8%25b3%25e0%25b9%2584%25e0%25b8%25a1%25e0%25b8%25a1%25e0%25b8%25b1%25e0%25b8%2599%25e0%25b9%2583%25e0%25b8%258a%25e0%25b9%2589%25e0%25b8%25a2%25e0%25b8%25b2%25e0%25b8%2581%25e0%25b8%2599</link>
		<comments>http://www.cmdevhub.com/blog/%e0%b8%aa%e0%b8%b2%e0%b8%a1%e0%b8%88%e0%b8%b5%e0%b9%84%e0%b8%97%e0%b8%a2-%e0%b8%97%e0%b8%b3%e0%b9%84%e0%b8%a1%e0%b8%a1%e0%b8%b1%e0%b8%99%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b8%a2%e0%b8%b2%e0%b8%81%e0%b8%99#comments</comments>
		<pubDate>Fri, 27 Jan 2012 09:10:30 +0000</pubDate>
		<dc:creator>shikima</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[3g]]></category>
		<category><![CDATA[mobile phone]]></category>
		<category><![CDATA[บ่น]]></category>

		<guid isPermaLink="false">http://www.cmdevhub.com/?p=180</guid>
		<description><![CDATA[<p>สิ้นสุดการรอคอยกันแล้วกับสามจีประเทศไทยตอนนี้เรามีให้ใช้งานได้แล้วทุกค่าย ซึ่งก็เป็นที่น่ายินดีเสียยิ่งนักสำหรับประเทศไทยทั้งๆ ที่ประเทศรอบข้างเรา ไปกันไกลลิบแล้วเราจะเริ่มตอนนี้ก็ยังไม่สาย มองโลกในแง่ดีซะว่าดีกว่ายังไม่เริ่ม จริงไหม มาตรฐานสามจีของประเทศไทยมีสองระบบคือ CDMA สำหรับค่าย hutch เดิมหรือตอนนี้กลายเป็น Truemove H ไปแล้ว กับระบบ HSPA ที่เป็นระบบของค่ายอื่นๆ ที่ใช้งานกันอยู่แล้วก็เป็นระบบที่มีอยู่ในโทรศัพท์มือถือแทบทุกเครื่องที่ใช้งานสามจีได้อยู่แล้ว แต่ปัญหามันไม่ใช่แค่นี้สิ มาตรฐานโลกสามจีเขาใช้งานกันที่ความถี่ 900MHz กับ 2100MHz แต่เนื่องจากมีแมวมาขวางโลกอยู่ทำให้การประมูลคลื่น 2100MHz เมื่อปี 2553 ไม่สามารถทำได้ ดึงเรื่องมาจนปี 2555 ก็ยังคงไม่เริ่มการประมูลเสียที ทำให้ผู้ให้บริการแต่ละรายต้องใช้วิธีซิกแซกใช้ความถี่อันน้อยนิดของตัวเองมาให้บริการสามจี สำหรับ AIS นั้นไม่มีปัญหาอยู่แล้วเพราะเดิมได้ให้บริการมือถือบนความถี่ 900MHz ก็เลยสามารถให้บริการสามจีบนความถี่นี้ได้ทันที แต่สำหรับ Truemove และ &#8230; <a href="http://www.cmdevhub.com/blog/%e0%b8%aa%e0%b8%b2%e0%b8%a1%e0%b8%88%e0%b8%b5%e0%b9%84%e0%b8%97%e0%b8%a2-%e0%b8%97%e0%b8%b3%e0%b9%84%e0%b8%a1%e0%b8%a1%e0%b8%b1%e0%b8%99%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b8%a2%e0%b8%b2%e0%b8%81%e0%b8%99">Continue reading <span class="meta-nav">&#8594;</span></a></p>
]]></description>
			<content:encoded><![CDATA[<p>สิ้นสุดการรอคอยกันแล้วกับสามจีประเทศไทยตอนนี้เรามีให้ใช้งานได้แล้วทุกค่าย ซึ่งก็เป็นที่น่ายินดีเสียยิ่งนักสำหรับประเทศไทยทั้งๆ ที่ประเทศรอบข้างเรา ไปกันไกลลิบแล้วเราจะเริ่มตอนนี้ก็ยังไม่สาย มองโลกในแง่ดีซะว่าดีกว่ายังไม่เริ่ม จริงไหม <img src='http://www.cmdevhub.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>มาตรฐานสามจีของประเทศไทยมีสองระบบคือ CDMA สำหรับค่าย hutch เดิมหรือตอนนี้กลายเป็น Truemove H ไปแล้ว กับระบบ HSPA ที่เป็นระบบของค่ายอื่นๆ ที่ใช้งานกันอยู่แล้วก็เป็นระบบที่มีอยู่ในโทรศัพท์มือถือแทบทุกเครื่องที่ใช้งานสามจีได้อยู่แล้ว</p>
<p>แต่ปัญหามันไม่ใช่แค่นี้สิ มาตรฐานโลกสามจีเขาใช้งานกันที่ความถี่ 900MHz กับ 2100MHz แต่เนื่องจากมีแมวมาขวางโลกอยู่ทำให้การประมูลคลื่น 2100MHz เมื่อปี 2553 ไม่สามารถทำได้ ดึงเรื่องมาจนปี 2555 ก็ยังคงไม่เริ่มการประมูลเสียที ทำให้ผู้ให้บริการแต่ละรายต้องใช้วิธีซิกแซกใช้ความถี่อันน้อยนิดของตัวเองมาให้บริการสามจี สำหรับ AIS นั้นไม่มีปัญหาอยู่แล้วเพราะเดิมได้ให้บริการมือถือบนความถี่ 900MHz ก็เลยสามารถให้บริการสามจีบนความถี่นี้ได้ทันที แต่สำหรับ Truemove และ Dtac เดิมทีได้ให้บริการบนความถี่ 1800MHz แต่พอมาใช้งานสามจีแล้ว จำเป็นต้องเปลี่ยนมาใช้ที่ 850MHz แทน เนื่องจากอุปกรณ์ที่รองรับ HSPA 1800MHz มีไม่มาก</p>
<p>ดูเหมือนว่าปัญหามันจะจบแล้ว แต่มันยังไม่จบ เนื่องจากว่า มือถือทุกวันนี้รองรับระบบ GSM ที่ความถี่ 850/900/1800/1900 กันครบอยู่แล้ว แต่สิ่งที่เราต้องสนใจคือ UMTS เพื่อที่จะใช้งานสามจีในระบบ HSPA ซึ่งส่วนใหญ่จะสนับสนุนกันที่ 900/2100 ถ้าเป็นรุ่นกลางๆ ก็ได้ 1900 เพิ่มขึ้นมา แต่ถ้าจะเอา 850/900/1900/2100 ละก็ เป็นรุ่นใหญ่เท่านั้น อย่างเช่น Galaxy S2 หรือ iPhone4 ขึ้นไป ซึ่งราคามันก็แตะๆ สองหมื่นทั้งนั้น สำหรับชาวรากหญ้าอย่างเราคงไม่มีเงินมากพอสำหรับมือถือเครื่องละเกือบๆ สองหมื่น แต่อยากสัมผัสสามจีบ้างเวลาที่จะเปลี่ยนมือถือใหม่ก็ต้องดูด้วยว่ามันรองรับหรือเปล่า</p>
<p>สำหรับเพื่อนๆ ที่ใช้ซิมของ AIS หยิบเครื่องไหนในประเทศไทยก็ได้ มากกว่า 90% ใช้ได้หมด แต่ถ้าใช้ Truemove หรือ Dtac อันนี้คงต้องดูให้มากละว่าจะเอาเครื่องไหน วิธีการดูถ้าหากเราไม่มีกล่องเดิมของมัน เราก็คงต้องใช้วิธีเปิดเครื่องแล้วค้นหาเครือข่าย ลองมาดูตัวอย่างจากรูปข้างล่างเลย</p>
<p><a href="https://picasaweb.google.com/lh/photo/oEzGvyIVnjHmK58qptWG4tMTjNZETYmyPJy0liipFm0?feat=embedwebsite"><img style="max-width: 320px;" src="https://lh4.googleusercontent.com/-cmKOS6Y1GtM/TyJo-dsoZJI/AAAAAAAAC8Y/TsHuGFejl5k/s800/3G%2520850.png" alt="" width="100%" /></a></p>
<p>ถ้าเจอ 52000 แบบนี้แสดงว่าสนับสนุน 850MHz</p>
<p><a href="https://picasaweb.google.com/lh/photo/8lk60HvLgDKivH6HLag_-NMTjNZETYmyPJy0liipFm0?feat=embedwebsite"><img style="max-width: 320px;" src="https://lh3.googleusercontent.com/-9aSfJm5aLLo/TyJo-YIr7sI/AAAAAAAAC8U/B8cBFE1kXqo/s800/3G%2520900.png" alt="" width="100%" /></a></p>
<p>ถ้าไม่เจอจะใช้งานได้แค่ 900MHz</p>
<p>เครื่องที่ทดสอบเป็น Galaxy Cooper ที่ซื้อมาจากศูนย์ Samsung ที่สนับสนุนความถี่ 900/2100 และ Galaxy Cooper เหมือนกันที่ซื้อมาจากศูนย์ Dtac ที่สนับสนุนความถี่ 850/2100 ถ้าหากเราทดลองค้นหาเครือข่ายแล้วเจอเครือข่าย 52000 ก็แสดงว่าเครื่องเราสนับสนุนความถี่ 850MHz ด้วย ทีนี้เราก็สามารถใช้งานสามจีของ Truemove และ Dtac ได้อย่างสบายใจ แต่จะไม่สามารถใช้งานของ AIS ได้นะ</p>
<p>หมายเหตุ เครือข่าย 52000 คือ Truemove H นะ ครอบคลุมทั่วประเทศไทย</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cmdevhub.com/blog/%e0%b8%aa%e0%b8%b2%e0%b8%a1%e0%b8%88%e0%b8%b5%e0%b9%84%e0%b8%97%e0%b8%a2-%e0%b8%97%e0%b8%b3%e0%b9%84%e0%b8%a1%e0%b8%a1%e0%b8%b1%e0%b8%99%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b8%a2%e0%b8%b2%e0%b8%81%e0%b8%99/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>แก้ขนาด facebook comment</title>
		<link>http://www.cmdevhub.com/blog/%e0%b9%81%e0%b8%81%e0%b9%89%e0%b8%82%e0%b8%99%e0%b8%b2%e0%b8%94-facebook-comment?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=%25e0%25b9%2581%25e0%25b8%2581%25e0%25b9%2589%25e0%25b8%2582%25e0%25b8%2599%25e0%25b8%25b2%25e0%25b8%2594-facebook-comment</link>
		<comments>http://www.cmdevhub.com/blog/%e0%b9%81%e0%b8%81%e0%b9%89%e0%b8%82%e0%b8%99%e0%b8%b2%e0%b8%94-facebook-comment#comments</comments>
		<pubDate>Thu, 26 Jan 2012 08:34:40 +0000</pubDate>
		<dc:creator>shikima</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[tip]]></category>

		<guid isPermaLink="false">http://www.cmdevhub.com/?p=152</guid>
		<description><![CDATA[<p>สำหรับคนที่ทำเว๊ปแบบ responsive แล้วใช้ facebook comment แล้ว ปัญหาใหญ่คือ เมื่อแสดงผลในมือถือหรือถ้า block ที่เราออกแบบไว้เปลี่ยนขนาด คงจะมีปัญหาเรื่อง block ของ facebook comment ไม่ปรับขนาดตาม วิธีแก้ปัญหาง่ายๆ เลย เราก็แค่เพิ่ม css นี้เข้าไป แค่นี้ก็ใช้งานได้แล้ว แค่นี้ขนาดของ facebook comment ก็เปลี่ยนไปตามขนาดหน้าจอแล้ว สบายๆ เลย</p>
]]></description>
			<content:encoded><![CDATA[<p>สำหรับคนที่ทำเว๊ปแบบ responsive แล้วใช้ facebook comment แล้ว ปัญหาใหญ่คือ เมื่อแสดงผลในมือถือหรือถ้า block ที่เราออกแบบไว้เปลี่ยนขนาด คงจะมีปัญหาเรื่อง block ของ facebook comment ไม่ปรับขนาดตาม วิธีแก้ปัญหาง่ายๆ เลย เราก็แค่เพิ่ม css นี้เข้าไป แค่นี้ก็ใช้งานได้แล้ว</p>
<pre class="brush: css; title: ; notranslate">
.fb-comments, .fb-comments iframe[style] {
   width: 100% !important;
}
</pre>
<p>แค่นี้ขนาดของ facebook comment ก็เปลี่ยนไปตามขนาดหน้าจอแล้ว สบายๆ เลย <img src='http://www.cmdevhub.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.cmdevhub.com/blog/%e0%b9%81%e0%b8%81%e0%b9%89%e0%b8%82%e0%b8%99%e0%b8%b2%e0%b8%94-facebook-comment/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>บทที่ 10 การติดต่อฐานข้อมูล MySQL</title>
		<link>http://www.cmdevhub.com/tutorial/%e0%b8%9a%e0%b8%97%e0%b8%97%e0%b8%b5%e0%b9%88-10-%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%95%e0%b8%b4%e0%b8%94%e0%b8%95%e0%b9%88%e0%b8%ad%e0%b8%90%e0%b8%b2%e0%b8%99%e0%b8%82%e0%b9%89%e0%b8%ad%e0%b8%a1?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=%25e0%25b8%259a%25e0%25b8%2597%25e0%25b8%2597%25e0%25b8%25b5%25e0%25b9%2588-10-%25e0%25b8%2581%25e0%25b8%25b2%25e0%25b8%25a3%25e0%25b8%2595%25e0%25b8%25b4%25e0%25b8%2594%25e0%25b8%2595%25e0%25b9%2588%25e0%25b8%25ad%25e0%25b8%2590%25e0%25b8%25b2%25e0%25b8%2599%25e0%25b8%2582%25e0%25b9%2589%25e0%25b8%25ad%25e0%25b8%25a1</link>
		<comments>http://www.cmdevhub.com/tutorial/%e0%b8%9a%e0%b8%97%e0%b8%97%e0%b8%b5%e0%b9%88-10-%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%95%e0%b8%b4%e0%b8%94%e0%b8%95%e0%b9%88%e0%b8%ad%e0%b8%90%e0%b8%b2%e0%b8%99%e0%b8%82%e0%b9%89%e0%b8%ad%e0%b8%a1#comments</comments>
		<pubDate>Thu, 26 Jan 2012 08:21:32 +0000</pubDate>
		<dc:creator>shikima</dc:creator>
				<category><![CDATA[php]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[mysql]]></category>

		<guid isPermaLink="false">http://www.cmdevhub.com/?p=149</guid>
		<description><![CDATA[<p>หลังจากบทที่แล้วเราติดตั้งฐานข้อมูล MySQL เสร็จเรียบร้อยแล้ว และทำให้ใช้งานร่วมกับ PHP ได้แล้ว ทีนี้เราจะเริ่มใช้งานมันได้ยังไง เดี๋ยวมาดูกันครับ การติดต่อ MySQL จาก PHP จากที่เคยทำมามันก็มี 2 วิธีหลักๆ คือ ติดต่อโดยตรงโดยผ่าน Native Driver ที่มาพร้อมกับ PHP เลย กับอีกวิธีคือใช้ PDO (PHP Data Object) จริงๆ ผมไม่อยากเรียก PDO ว่าเป็น Native Driver เท่าไหร่ เพราะมันติดต่อฐานข้อมูลได้หลายแบบเหลือเกิน แต่ในเว๊ปของ MySQL บอกไว้แบบนั้นงะ ลำดับการทำงานของทั้งสองขั้นตอนจะคล้ายๆ กันคือ &#8230; <a href="http://www.cmdevhub.com/tutorial/%e0%b8%9a%e0%b8%97%e0%b8%97%e0%b8%b5%e0%b9%88-10-%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%95%e0%b8%b4%e0%b8%94%e0%b8%95%e0%b9%88%e0%b8%ad%e0%b8%90%e0%b8%b2%e0%b8%99%e0%b8%82%e0%b9%89%e0%b8%ad%e0%b8%a1">Continue reading <span class="meta-nav">&#8594;</span></a></p>
]]></description>
			<content:encoded><![CDATA[<p>
หลังจากบทที่แล้วเราติดตั้งฐานข้อมูล MySQL เสร็จเรียบร้อยแล้ว และทำให้ใช้งานร่วมกับ PHP ได้แล้ว ทีนี้เราจะเริ่มใช้งานมันได้ยังไง เดี๋ยวมาดูกันครับ
</p>
<p>
การติดต่อ MySQL จาก PHP จากที่เคยทำมามันก็มี 2 วิธีหลักๆ คือ ติดต่อโดยตรงโดยผ่าน Native Driver ที่มาพร้อมกับ PHP เลย กับอีกวิธีคือใช้ PDO (PHP Data Object) จริงๆ ผมไม่อยากเรียก PDO ว่าเป็น Native Driver เท่าไหร่ เพราะมันติดต่อฐานข้อมูลได้หลายแบบเหลือเกิน แต่ในเว๊ปของ MySQL บอกไว้แบบนั้นงะ
</p>
<p>
ลำดับการทำงานของทั้งสองขั้นตอนจะคล้ายๆ กันคือ</p>
<ul>
<ol>สร้างการเชื่อมต่อกับ MySQL</ol>
<ol>ติดต่อกับฐานข้อมูลที่จะใช้งาน</ol>
<ol>ปิดการเชื่อมต่อกับ MySQL</ol>
</ul>
<p>ผมจะอธิบายรายละเอียดเฉพาะแบบแรกนะครับ ส่วนแบบที่สองจะให้ตัวอย่างแล้วอธิบายนิดหน่อย เพราะถ้าเข้าใจเรื่อง OOP แล้ว PDO มันไม่ยากเลย บางทีอ่านแค่ Class กับ Method ก็เอาไปใช้งานได้แหละ อีกอย่างเซิร์ฟเวอร์ที่เราเช่าบางทีไม่เปิดใช้งาน PDO ก็มี แอบเศร้าเลย
</p>
<p>
<b>ขั้นตอนที่ 1 เชื่อมต่อฐานข้อมูล</b>
</p>
<p>
ทำได้โดยใช้ฟังก์ชั่น mysql_connect โดยค่าทีต้องส่งจะมีสามค่าคือ</p>
<ul>
<li><i>string</i> Host (IP ของ MySQL ในกรณีที่อยู่ในเครื่องเดียวกันให้ใส่ localhost)</li>
<li><i>string</i> MySQL username</li>
<li><i>string</i> MySQL password</li>
</ul>
<p>เขียนได้ตามตัวอย่างนี้</p>
<pre class="brush: php; title: ; notranslate">&lt;?php
   mysql_connect(&quot;host&quot;, &quot;mysql_username&quot;, &quot;mysql_password&quot;);
?&gt;</pre>
</p>
<p>
<b>ขั้นตอนที่ 2 ติดต่อกับฐานข้อมูลที่เราจะใช้งาน</b>
</p>
<p>
โดยใช้คำสั่ง mysql_select_db โดยมีค่าที่ต้องใ่ส่คือ</p>
<ul>
<li><i>string</i> ชื่อฐานข้อมูล</li>
<li>link identifier (จะใส่หรือไม่ใส่ก็ได้)</li>
</ul>
<p>เขียนได้ตามตัวอย่างนี้</p>
<pre class="brush: php; title: ; notranslate">&lt;?php
   mysql_select_db(&quot;database&quot;, [$link]);
?&gt;
</pre>
<p><b>ขอเน้นนิดนึง</b><br />
<br />
ตรงที่ผมเขียนว่า $link ผมใส่ bucket ไว้หมายความว่า จะใส่หรือไม่ใส่ก็ได้ ใส่แล้วมันก็ไม่ได้ทำงานเร็วขึ้นหรือดีขึ้น แต่ผมแนะนำให้ใส่ทุกครั้ง และให้ทำจนเป็นนิสัยเลย... ทำไมอ่า เมื่อกี้ยังบอกว่า "ไม่ใส่ก็ได้" เลย คืองี้ครับ ถ้าหากเราทำงานกับฐานข้อมูลหลายๆ ตัว และอยู่คนละโฮส เอาง่ายๆ ถ้าต้องการติดต่อฐานข้อมูลใน<u>เครื่องเรา</u> และ<u>เครื่องที่ทำงาน</u> เราต้องเขียนการเชื่อมต่อสองครั้ง แล้วถ้าเราต้องการ query ล่ะ จะรู้ได้ไงว่าเอามาจากไหน มันก็เลยต้องมีตัวเชื่อมต่อเพื่อบอกว่าเราจะเอาจากเครื่องของเรา หรือจากเครื่องที่ทำงานไงครับ...<br />
<br />
แต่ถ้าเกิดเหตุการณ์ที่ต้องเอาฐานข้อมูลจากสองที่คนละโฮส เมื่อก่อนผมก็ทำแบบที่ผมว่าข้างบน แต่เดี๋ยวนี้เขียน XML นิดๆ หน่อยๆ สะดวกกว่าครับ อาจไม่เร็วเท่าต่อโดยตรง แต่ปลอดภัยกว่า
</p>
<p>
<b>ขั้นตอนที่ 3 ปิดการเชื่อมต่อ</b>
</p>
<p>
ในเมื่อมีการเชื่อมต่อแล้วก็ต้องทำการปิดการเชื่อมต่อด้วยสิ ถ้าหากรอ session ใน MySQL หมดแล้วให้มันตัดการเชื่อมต่อเองเดี๋ยวหน่วยความจำของเซิร์ฟเวอร์จะหมดเกลี้ยงเสียก่อน ถ้าหากเราใช้งานแค่คนเดียวก็ไม่เท่าไหร่ แต่เข้ามาสัก 1000 คน 1000 connections 1000 processes ถ้าไม่คืนหน่วยความจำให้หลังจากใช้งานเสร็จหน่วยความจำเท่าไหร่ก็ไม่พออ่ะครับ วิธีการคืนหน่วยความจำก็ง่ายๆ เลย</p>
<pre class="brush: php; title: ; notranslate">&lt;?php
   mysql_close([$link]);
?&gt;
</pre>
<p>ผมใส่ bucket อีกแล้ว คำสั่งนี้จะมีตัวที่เชื่อมต่อส่งเข้าไปด้วยหรือไม่ก็ได้ ถ้าหากเราส่งตัวเชื่อมต่อเข้าไป มันก็จะปิดตัวเชื่อมต่อตัวนั้น แต่ถ้าไม่ใส่เข้าไป มันจะปิดตัวเชื่อมต่อตัวล่าสุดที่ทำการสร้างการเชื่อมต่อ ... งง ไหมเนี่ย เอาเป็นว่า อย่างที่บอกอ่ะครับ ควรกำหนดตัวเชื่อมต่อให้เป็นนิัสัยเลย เวลาปิดจะได้กำหนดไปเลยว่าจะปิดตัวไหน
</p>
<p>
ทีนี้ลองเอามาใช้งานจริงกัน<br />
<br />
ในฐานข้อมูล MySQL จะมีฐานข้อมูลชื่อ mysql อยู่แล้ว เราก็ลองเรียกดูข้อมูลผ่าน PHP ล่ะกัน แต่ <b>อย่าไปแก้ไขอะไรมันนะครับ เดี๋ยวเจ้งเอา</b></p>
<pre class="brush: php; title: ; notranslate">
&lt;?php
   $connect = mysql_connect(&quot;localhost&quot;, &quot;root&quot;, &quot;cmdevhub&quot;) or die(&quot;ติดต่อ MySQL ไม่ได้&quot;); // เก็บการเชื่อมต่อไว้ที่ตัวแปร $connect
   mysql_select_db(&quot;mysql&quot;, $connect) or die(&quot;ติดต่อฐานข้อมูลไม่ได้&quot;); // ทำการติดต่อฐานข้อมูล

   $SQLCom = &quot;select * from user&quot;; // สร้างคำสั่ง SQL เก็บไว้ในตัวแปรชื่อ $SQLCom
   $query = mysql_query($SQLCom, $connect); // ทำการคิวรี่
   $rs = mysql_fetch_assoc($query); // เอาออกมาแค่แถวเดียวก็พอ
   print_r($rs); // พิมพ์ออกหน้าจอ
   mysql_close($connect); // ปิดการเชื่อมต่อ
?&gt;
</pre>
<p>ผลลัพท์ที่ได้ก็จะเป็นแบบนี้<br />
<br />
<a href="http://picasaweb.google.com/lh/photo/gHPQQX3_w6yik3hZQ1bZvw?feat=embedwebsite"><img src="http://lh3.ggpht.com/_htdy5nkYie0/SuDvT9AjAPI/AAAAAAAAB7c/T2xH_9xdfAg/s800/mysql01.JPG" width="100%" style="max-width:512px;" /></a><br />
<br />
ถ้าหากได้ผลลัพท์ประมาณนี้แสดงว่าคุณเชื่อมต่อกับฐานข้อมูลได้แล้วและพร้อมจะเขียนโปรแกรมที่ใช้งานจริงได้แล้วทันที (ง่ายไหม) ส่วนคำสั่งอื่นๆ ยังไม่ต้องสนใจครับ เอาไว้มาคุยรายละเอียดกันทีหลัง</p>
<p>การเชื่อมต่อฐานข้อมูลเราต้องทำการเชื่อมต่อทุกครั้งในทุกๆ หน้าที่มีการเชื่อมต่อกับฐานข้อมูล (งงไหมเนี่ย) ตีความง่ายๆ คือ ถ้าหากมีไฟล์ในเว๊ปของเรา 100 ไฟล์ เราก็ต้องเขียนการเชื่อมต่อทั้ง 100 ไฟล์เลย เราขยันอยู่แล้ว ไม่ใช่ปัญหา แต่ปัญหาจะเกิดขึ้นทันทีเมื่อ เราเอางานของเราไปไว้ที่อื่น ตัวอย่างง่ายๆ ก็คือการอัพโหลไปไว้ในโฮส แน่นอนฐานข้อมูลต้องไม่ใช่ชื่อเดิม username และ password ก็ต้องเปลี่ยน ทีนี้เราก็ต้องไล่เปลี่ยนทั้ง 100 ไฟล์เลย สนุกสนานแน่นอน...
</p>
<p>
เพราะงั้นเรามาทำให้ชีวิตเราง่ายขึ้นดีกว่า จาก <a href='http://www.cmdevhub.com/tutorial/php-function'>บทที่ 8 เรื่องฟังก์ชั่น</a> (ดูจากข้างๆ หรือจิ้มที่ลิงค์เลย) เราสามารถเขียนฟังก์ชั่นครั้งเดียวแล้วเรียกใช้กี่ทีก็ได้ โอ้ว ทำไมช่างสะดวกเช่นนี้
</p>
<p>
ผมจะใช้วิธีสร้างไฟล์ขึ้นมาไฟล์หนึ่งเก็บฟังก์ชั่นไว้แล้วถ้าต้องการติดต่อฐานข้อมูลก็แค่ include เข้าไป (จะใช้ require ก็ได้ไม่ว่ากัน) จากนั้นก็เรียกฟังก์ชั่นติดต่อฐานข้อมูลเอา เท่านี้ก็เสร็จแล้ว ตัวอย่างตามนี้เลยครับ</p>
<pre class="brush: php; title: ; notranslate">&lt;?php
   // ไฟล์ชื่อ function.inc.php

   function connect() {
      global $connect;
      $connect = mysql_connect(&quot;localhost&quot;, &quot;root&quot;, &quot;cmdevhub&quot;) or die(&quot;ติดต่อ MySQL ไม่ได้&quot;);
      mysql_select_db(&quot;mysql&quot;, $connect) or die(&quot;ติดต่อฐานข้อมูลไม่ได้&quot;);
   }

   function disconnect() {
      global $connect;
      mysql_close($connect);
   }
?&gt;
</pre>
<p>ไฟล์ function.inc.php สร้างไว้สำหรับ include อย่างเดียว มี 2 ฟังก์ชั้นคือ connect() และ disconnect()</p>
<pre class="brush: php; title: ; notranslate">&lt;?php
   // ไฟล์ชื่อ testmysql.php

   require_once('function.inc.php'); // อย่าลืมเอาไฟล์นี้ไว้ที่เดียวกันนะครับ
   connect();
   $SQLCom = &quot;select * from user&quot;;
   $query = mysql_query($SQLCom, $connect);
   $rs = mysql_fetch_assoc($query);
   print_r($rs);
   disconnect();
?&gt;
</pre>
<p>ผลลัพท์ที่ได้ก็เหมือนเดิมทุกอย่าง แต่ถ้าเราย้ายโฮสปุ๊ป ก็แค่ไปแก้ไข username และ password ในไฟล์ function.inc.php เท่านั้นเอง ไฟล์อื่นๆ เราไม่ต้องไปยุ่งอะไรกับมันเลย ชีวิตสบายขึ้นอีกเยอะเลย หุหุ
</p>
<p></p>
<p>
<b>ทำให้ดูเป็นมืออาชีพขึ้นหน่อยไหม</b><br />
<br /> ในเมื่อ PHP สามารถเขียนเป็น OO ได้ (Object Oriented) ทำไมเราจะไม่เขียนให้มันเป็น OO หน่อยล่ะ หุหุ (เนื่องจากมันไม่มีอะไรมาก ผมไม่เอา Class Diagram ลงเนอะ มีแค่ 2 Class เอง)
</p>
<p>
เพื่อให้ (ดูเหมือน) เป็นมืออาชีพ เวลาผมเขียนโปรแกรมผมชอบที่จะแยกไฟล์สำหรับเก็บ Constant Variable, Class ไว้แยกกัน ก็เอาตามนี้เลยครับ</p>
<pre class="brush: php; title: ; notranslate">&lt;?php
   // ไฟล์ชื่อ user.inc.php

   define(&quot;DBHOST&quot;, &quot;localhost&quot;);
   define(&quot;DBUSER&quot;, &quot;root&quot;);
   define(&quot;DBPASS&quot;, &quot;cmdevhub&quot;);
   define(&quot;DBNAME&quot;, &quot;mysql&quot;);
?&gt;
</pre>
<p></p>
<pre class="brush: php; title: ; notranslate">
&lt;?php
   // ไฟล์ชื่อ class.inc.php

   require_once(&quot;user.inc.php&quot;);

   class mysql {
      private $connect;
      private $query;
      private $result;

      public function connect() {
         if(!$this-&gt;connect = mysql_connect(DBHOST, DBUSER, DBPASS)) {
            echo get_class($this) . &quot;::connect() Error Connect MySQL &quot; . mysql_error();
            return false;
         }
         else {
            if(!mysql_select_db(DBNAME, $this-&gt;connect)) {
               echo get_class($this) . &quot;::connect Error Select Database &quot; . mysql_error();
               mysql_query(&quot;set names utf8&quot;, $this-&gt;connect);
            }
         }
      }

      public function query($command) {
         if (!$this-&gt;connect) {
            $this-&gt;connect();
         }
         if (!$this-&gt;query = mysql_query($command, $this-&gt;connect)) {
            echo get_class($this) . &quot;::query() SQL Command invalid &quot; . mysql_error();
         }
         else {
            return $this-&gt;query;
         }
      }

      public function fetch_assoc($query = '') {
         if ($query == NULL) {
            $result = mysql_fetch_assoc($this-&gt;query);
         }
         else {
            $result = mysql_fetch_assoc($query);
         }

         if (is_null($result)) {
            echo get_class($this) . &quot;::fetch_assoc() Error fetch result&quot;;
         }
         else {
            return $result;
         }
      }

      public function num_rows($query = '') {
         if ($query == NULL) {
            return mysql_num_rows($this-&gt;query);
         }
         else {
            return mysql_num_rows($query);
         }
      }

      function __destruct() {
         if($this-&gt;connect) {
            mysql_close($this-&gt;connect);
         }
      }
   }
?&gt;
</pre>
<p>ไฟล์นี้ผมไม่ขออธิบายเนอะ ไว้ค่อยคุยกันวันหลัง แต่เป็นการเชื่อมต่อฐานข้อมูลที่ผมใช้งานจริงๆ อยู่อ่ะ (เอาไปใช้ได้นะ)<br />
<br />
วิธีการใช้งานก็ง่ายๆ แบบนี้เลยครับ</p>
<pre class="brush: php; title: ; notranslate">&lt;?php
   require_once(&quot;class.inc.php&quot;);

   $mysql = new mysql();
   $SQLCom = &quot;select * from user&quot;;
   $mysql-&gt;query($SQLCom);
   $rs = $mysql-&gt;fetch_assoc();
   print_r($rs);
?&gt;
</pre>
<p>ง่ายใช่ไหมครับ ตอนนี้เราโยนทุกอย่างให้เป็นหน้าที่ของคลาส mysql ส่งคำสั่งไปคิวรี่โดยไม่ต้องสร้างการเชื่อมต่อ โดยเมธอด query จะทำการตรวจสอบเองว่ามีการสร้างการเชื่อมต่อมาแล้วหรือยัง แล้วพอจบหน้าก็ไม่ต้องทำการตัดการเชื่อมต่อ destructor จะตัดการเชื่อมต่อเองโดยอัตโนมัติ (สบายเลย)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cmdevhub.com/tutorial/%e0%b8%9a%e0%b8%97%e0%b8%97%e0%b8%b5%e0%b9%88-10-%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%95%e0%b8%b4%e0%b8%94%e0%b8%95%e0%b9%88%e0%b8%ad%e0%b8%90%e0%b8%b2%e0%b8%99%e0%b8%82%e0%b9%89%e0%b8%ad%e0%b8%a1/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

