function js_thai_encode($data)
{	// fix all thai elements
	if (is_array($data))
	{
		foreach($data as $a => $b)
		{
			if (is_array($data[$a]))
			{
				$data[$a] = js_thai_encode($data[$a]);
			}
			else
			{
				$data[$a] = iconv("tis-620","utf-8",$b);
			}
		}
	}
	else
	{
		$data =iconv("tis-620","utf-8",$data);
	}
	return $data;
}

ไปดู LIVE DEMO กันเลย

BBCode เราเรียกได้ว่าเป็น lightweighted markup language ใช้สำหรับจัดรูปแบบข้อความตามเว็บบอร์ดต่าง ๆ ครับ มีลักษณะของแท็กอยู่ในเครื่องหมายก้ามปู เช่น [b]ตัวหนา[/b] ครับ เจ้าตัว BBCode นี่เว็บบราวเซอร์มันไม่รู้จักครับ ต้องทำการแปลไปเป็น markup language ที่ใช้ทั่ว ๆ ไปก่อนครับ นั่นก็คือ HTML หรือ XHTML ครับ เช่น จาก [b]ตัวหนา[/b] จะถูกแปลงไปเป็น <b>ตัวหนา</b> แล้วค่อยนำไปแสดงผลครับ

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

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

ทีนี้มาดูกันว่าปลั๊กอินตัวนี้จะทำงานยังไงครับ

ง่าย ๆ ครับ แค่เรียก $(<selector>).bbcode(); เท่านั้นครับ เช่น

$("div").bbcode();

ไอเดียของปลั๊กอินตัวนี้ผมได้มาจากตอนเขียนแก้บักการแสดงผล BBCode ให้เก็บเว็บไซต์หนึ่งครับ ปกติแล้วการ render จาก BBCode ไปเป็น HTML นั้น มักจะทำที่ Server และส่ง HTML ที่ได้มาให้บราวเซอร์แสดงผล แต่ผมต้องการที่จะลดโหลดฝั่ง Server ลง โดยจะย้ายการทำงานจากฝั่ง Server มาทำที่บราวเซอร์แทน

หลักการทำงานก็ไม่มีอะไรมากครับ ผมใช้วิธีการกำหนดค่า Pattern ในรูปแบบ Regular Expression และใช้ Regular Expression Engine ของ JavaScript ในการแสดงผลให้ถูกต้องเท่านั้นครับ

ลองไปดูที่ LIVE DEMO กันเลยครับ

อ้างอิง

• http://en.wikipedia.org/wiki/BBCode

วิธีการใช้งาน ก็ง่ายอย่างที่คิดนั่นแหละครับ

$.multicheck();  // ใช้สั่งให้ selector ที่เลือกใช้งาน shift+click ได้
$.checkall();    // เลือกทั้งหมด
$.checknone();   // ไม่เลือกเลย
$.invertcheck();   // สลับที่เลือก

ลองดูตัวอย่างที่ LIVE DEMO ได้เลยครับ

ส่วน source code ที่เป็น minified ก็ดาวน์โหลดได้จากที่นี่เลยครับ

// PHP

// ตัวอย่างที่ 1
$a = 1;
$b = 1;
if ($a == $b)
{
    // บล็อกนี้จะถูกทำเมื่อ $a มีค่าเท่ากับ $b
    echo "#1: a is equal to b\n";
}

// ตัวอย่างที่ 2
$a = 1;
$b = "1";
if ($a == $b)
{
    // บล็อกนี้จะถูกทำเมื่อ $a มีค่าเท่ากับ $b
    echo "#2: a is equal to b\n";
}

// ตัวอย่างที่ 3
$a = 0;
$b = false;
if ($a == $b)
{
    // บล็อกนี้จะถูกทำเมื่อ $a มีค่าเท่ากับ $b
    echo "#3: a is equal to b\n";
}

ผลลัพธ์

#1: a is equal to b
#2: a is equal to b
#3: a is equal to b

การเปรียบเทียบแบบนี้ ถือเป็นการเปรียบเทียบค่ากันระหว่าง operand 2 ตัว โดยจะเปรียบเทียบเฉพาะค่าของมันเท่านั้น เมื่อผลของการเปรียบเทียบมีค่าเป็น true นั่นคือ operand ทั้งสองตัวนั้น “เท่ากัน” (equal) ซึ่งจะแตกต่างจาก ===

=== เป็นการเปรียบเทียบที่จะเปรียบเทียบทั้งค่า และชนิดของ operand ทั้งสองตัวนั้นด้วย เมื่อผลจากการเปรียบเทียบด้วย === มีค่าเป็น true เราถือว่า operand ทั้ง 2 ตัวนั้น “เหมือนกัน” (identical) นั่นเอง

ลองมาดูตัวอย่างกัน

// PHP

// ตัวอย่างที่ 4
$a = 1;
$b = 1;
if ($a === $b)
{
    // บล็อกนี้จะถูกทำเมื่อ $a เหมือนกับ $b
    echo "#4: a is identical to b\n";
}

// ตัวอย่างที่ 5
$a = 1;
$b = "1";
if ($a === $b)
{
    // บล็อกนี้จะถูกทำเมื่อ $a เหมือนกับ $b
    echo "#5: a is identical to b\n";
}

// ตัวอย่างที่ 6
$a = 0;
$b = false;
if ($a === $b)
{
    // บล็อกนี้จะถูกทำเมื่อ $a เหมือนกับ $b
    echo "#6: a is identical to b\n";
}

ผลลัพธ์

#4: a is identical to b

หมายเหตุ

1. สำหรับการทำให้เป็น negative ด้วย ! นั้น เครื่องหมาย == เราจะใช้ != ในการเปรียบเทียบ “ไม่เท่ากัน” และ เครื่องหมาย === เราจะใช้ !== ในการเปรียบเทียบ “ไม่เหมือนกัน”
2. เครื่องหมาย === และ !== สามารถใช้ได้ทั้ง PHP และ Javascript
3. การใช้เครื่องหมาย = เพียงตัวเดียวนั้น หมายถึงการ “กำหนดค่าให้” (assign) ไม่ใช่การเปรียบเทียบ

อ้างอิง

• http://www.php.net/ternary
• http://www.w3schools.com/JS/js_comparisons.asp

หลังจากนั้น ก็มาถึงสิ่งที่ผมอยากให้ plugin ตัวนี้มี นั่นก็คือ การกำหนดความกว้าง หรือความสูงสูงสุด นั่นคือ ถ้าผมกำหนดให้ความกว้างที่มากที่สุดมีค่าเป็น 200 pixels และภาพต้นฉบับมีความกว้างเป็น 1024 pixels ภาพที่ย่อแล้ว จะเหลือความกว้างเป็น 200 pixels นั่นเอง

รูปแบบการใช้งาน

$.imgrescale(options);

โดยที่ options ในตอนนี้มีแค่ตัวเดียวครับ คือ maxsize ดังนั้นถ้าต้องการกำหนดค่า maxsize ก็จะเรียกแบบนี้ครับ

$.imgrescale({maxsize:200});

ลองดูตัวอย่างที่ LIVE DEMO ได้เลยครับ

สำหรับ source code ที่เป็น minified ก็ดาวน์โหลดได้จากที่นี่เลยครับ

ใช้ดีอย่าลืม feedback แล้วบอกต่อนะครับ

อ้างอิง

• Aspect Ratio: http://en.wikipedia.org/wiki/Aspect_ratio_(image)

ส่วนผสมของผม หลีกหนีไม่พ้น jQuery ครับ ร่วมกับการเขียน plugin โดยมีคอนเซปท์ว่า จับอะไรก็ได้ บนเว็บ เอามาทำเป็น  floating layer ได้หมด แล้วก็เลื่อนตาม scrollbar ได้ด้วย คิดไปคิดมาต่อยอดได้อีกว่า จะให้มันอยู่ตรงไหนของหน้าจอก็ได้ snap ซ้าย snap ขวา หรือจะอยู่มันตรงกลาง บนล่าง ได้หมด โอ้ว ชักน่าตื่นเต้นแล้วสิ

ในที่สุด ผมก็ลองทดสอบตัว prototype ของผมกับเว็บของผู้ว่าจ้างทันทีครับ (http://www.brendabence.com/media-room/) เออ พอใช้ได้แฮะ หลังจากนั้นก็เอามานั่งพัฒนาต่อยอดตามที่ตั้งใจไว้จนออกมาให้ได้ใช้งานกัน เสร็จแล้วก็ตั้งชื่อให้มันว่า scrollads plugin สำหรับ jQuery ครับ

รูปแบบการใช้งาน

$.scrollads(options);

โดยที่ options เนี่ย จะใส่หรือไม่ใส่ก็ได้ครับ ถ้าใส่ก็จะเขียนอยู่ในรูปแบบ JSON โดยที่มี key ตามนี้เลยครับ

closer เป็น selector ที่ระบุปุ่มที่ใช้ปิดตัว layer นี้
hsnap เป็นตัวบอกว่า layer จะอยู่ตำแหน่งไหนในแนวนอน มีค่าเป็น

• left ชิดซ้าย
• center อยู่ตรงกลาง
• right ชิดขวา
• custom อยู่ตำแหน่งที่ระบุไว้ใน left
• none อยู่ตำแหน่งตาม html

vsnap เป็นตัวบอกว่า layer จะอยู่ตำแหน่งไหนในแนวตั้ง มีค่าเป็น

• top ชิดด้านบน
• middle อยู่ตรงกลาง
• bottom ชิดด้านล่าง
• custom อยู่ตำแหน่งที่ระบุไว้ใน top
• none อยู่ตำแหน่งตาม html

เช่น

$("#floatme").scrollads();
$("#floatme").scrollads({closer:".close"});
$("#floatme").scrollads({closer:".close",hsnap:"center"});

ลองไปดู LIVE DEMO กันดีกว่าครับ

สำหรับ source code ตัวที่เป็น minified สามารถดาวน์โหลดได้จากที่นี่ครับ

ใช้ดีอย่าลืมมา feedback แล้วบอกต่อนะครับ

อัพเดท วันที่ 6 สิงหาคม 2552
+ ผมได้เพิ่ม option smooth ลงไปครับ เพื่อให้ scroll ได้ smooth ขึ้นครับ ถ้าไม่ใส่มันก็จะเลื่อนปึ๊ด ๆ แบบเดิม แต่ถ้าใส่ แล้วกำหนดเป็น “true” มันก็จะหยอด effect ลงไปหน่อย ทำให้เลื่อนแล้วดูเนียน ๆ ครับ ลองดูได้ครับ ขอบคุณครับ

นอกจากนี้แล้ว ในเวอร์ชั่นนี้ ยังได้มีการปรับปรุง รวมถึงการเพิ่มเติมฟีเจอร์ใหม่ ๆ ลงไปด้วย เช่น

• การปรับปรุงส่วน Tab ที่ให้คุณสามารถ ซ่อน Thumbnail ในหน้า Tab ได้
• เพิ่มฟีเจอร์ Full Screen อันนี้จะเหมือน IE ครับ คือกด F11 ก็เต็มจอได้ครับ เอาไว้สำหรับใครต้องการใช้งาน Presentation ผ่านเว็บ หรือต้องการดูหน้าเว็บเต็ม ๆ จอครับ
• Form autofill คือ เราสามารถตั้งให้ Chrome ทำการเติมค่าลงไปในช่องในฟอร์มได้อัตโนมัติ ฟีเจอร์นี้ช่วยลดเวลาการทำงานลงไปได้มากทีเดียวครับ

ดูวีดีโอเพิ่มเติมได้ที่นี่ครับ (โดยไบรอัน ราโควสกี้ ตำแหน่งผู้จัดการฝ่ายผลิตภัณฑ์ – Brian Rakowski, Product Manager)

ขั้นแรก ผมจะกำหนด data ที่จะใช้งานก่อนครับ

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 + ')';
    }
};

เสร็จแล้วก็มากำหนด Template

{#template MAIN}
<div id="header">{$T.name}</div>
<table>
{#foreach $T.table as r}
    {#include row root=$T.r}
{#/for}
</table>
{#/template MAIN}

{#template row}
<tr bgcolor="{#cycle values=['#AAAAEE','#CCCCFF']}">
    <td>{$T.name.bold()}</td>
    <td>{$T.age}</td>
    <td>{$T.mail.link('mailto:'+$T.mail)}</td>
</tr>
{#/template row}

ที่เหลือก็แค่เรียกใช้งาน plugin ตัวนี้เท่านั้นเองครับ ง่าย ๆ

$("#result").setTemplate($("textarea").text()).processTemplate(data);

ลองไปดูตัวอย่างที่ LIVE DEMO ได้เลยครับ

แหล่งอ้างอิงและ API

• http://jtemplates.tpython.com/
• http://www.jquerytips.com/2008/12/07/jtemplate-template-engine-in-javascript/

1. APC ย่อมาจาก Alternative PHP Cache ครับ ซึ่งจะมี library ที่ผมต้องการ นั่นคือ apc_fetch() ครับ Server ที่เราใช้จะต้องสนับสนุน APC ครับ ซึ่งเป็น PECL เข้าไปดาวน์โหลดได้จาก http://pecl.php.net/package/apc ครับ
2. Ajax ในที่นี้ ผมใช้ Ajax ควบคู่กับ JSON ครับ
3. Upload form ก็จะเป็น Form Upload ธรรมดานี่แหละครับ กำหนด enctypemultipart/form-data ให้เรียบร้อย และ method เป็น POST ให้เรียบร้อยเช่นกันครับ

สำหรับไฟล์ที่จำเป็นในการทำ Upload Progress ด้วยวิธีนี้ ก็จะมี 3 ส่วนเช่นกัน ง่าย ๆ ตามนี้เลยครับ

1. Upload Form จะเป็นหน้า Page ที่ User เห็นครับ เอาไว้สำหรับให้ User Browse File และกด Submit ครับ
2. Upload จะเป็นหน้า Page ที่เอาไว้สำหรับ Upload เลยครับ ในหน้านี้ ให้ทำการอัพโหลดเหมือนปกติครับ คือมีการ move_uploaded_file() อะไรเหมือนปกติืืทุกอย่างครับ
3. Progress จะเป็นส่วนที่เอาไว้สำหรับให้หน้า Form Upload มา poll ค่า status ของการ Upload ครับ ส่วนนี้แหละครับ ที่จะเป็นตัว return กลับไปว่า อัพโหลดอะไรได้ยังไงเท่าไหร่แล้วครับ

Upload Form

ทีนี้ เมื่อเรามีทุกอย่างพร้อม เราก็จะทำการกำหนด key สำหรับ Upload session เพื่อให้การ Poll ถามข้อมูลนั้นทำได้ถูกต้องครับ การกำหนดเราทำได้โดยการใส่ input hidden ที่ชื่อ APC_UPLOAD_PROGRESS ให้มีค่าเป็น key ที่เราต้องการครับ ผมสมมติให้มีค่าเป็น “abcd” ดังนั้น form ที่เราได้ควรจะมีหน้าตาประมาณแบบนี้ครับ (ชื่อ APC_UPLOAD_PROGRESS เราสามารถเปลี่ยนได้ใน php.ini ครับ)

<form enctype="multipart/form-data" action="upload.php" method="post">
    <input type="hidden" name="APC_UPLOAD_PROGRESS" value="abcd">
    <input name="upfile" type="file"></span>
    <input type="submit" value="Upload">
</form>

Upload

ในส่วนนี้ผมไม่พูดถึงนะครับ ทำการอัพโหลดไฟล์ตามปกติเลยครับ ในกรณีที่ไฟล์ใหญ่มาก อย่าลืม set ให้ไม่ต้องมี timeout ด้วย function set_time_limit(0) ด้วยนะครับ

Progress

สำหรับ Progress ไฟล์นั้น จะมีหน้าตาประมาณนี้ครับ

<?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";
}
?>

สิ่งที่เราต้องทำคือ ทำการ poll ข้อมูลการอัพโหลดของ key “abcd” จาก server เราก็ทำได้โดยเรียก function apc_fetch และกำหนด parameter เป็น string ขึ้นต้นด้วย “upload_” และตามด้วย key ของเรา คือ “abcd”

ค่าที่ return มาจาก apc_fetch จะได้เป็น associative array โดยมี key ที่เราจะเอามาใช้งานคือ

• total เป็นขนาดไฟล์
• current เป็นขนาดไฟล์ที่อัพโหลดได้แล้ว
• rate คือความเร็วในการอัพโหลดครับ
• filename เป็นชื่อไฟล์ในเครื่องเราครับ (เช่น C:\Download\file.txt)

คราวนี้ เราก็แค่ใช้ ajax มา poll ค่าเหล่านี้ออกไปแสดงเท่านั้นเองครับ ทีนี้ต้องพึ่งฝีมือ dhtml กับ graphic ของคุณเองแล้วล่ะครับ ว่าจะทำ progress bar ออกมาได้สวยแค่ไหน

บทความนี้ ผมไม่มี LIVE DEMO แต่มีตัวอย่างให้ลองดาวน์โหลดไปทดสอบกันได้ครับ ดาวน์โหลด กับเว็บที่ผมทำให้เอาไปใช้งานจริงครับ แวะลองไปทดสอบและใช้บริการกันได้ที่ http://www.zidoupload.com ครับ

อัลกอริธึมในการตรวจสอบหมายเลขบัตรประชาชน สามารถหาได้ตามเว็บทั่ว ๆ ไป ที่ผมได้มาก็จะประมาณนี้ครับ (Javascript)

function validate_thai_citizen_id(id)
{
    var b = 0;
    if (id.length < 13) return false;
    checksum = id.substring(12, 13);
    for (var i = 0; i < 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);
}

จาก code ด้านบน เราจะเห็นได้ว่าส่วนที่สำคัญที่สุดคือ digit สุดท้าย ซึ่งจะทำหน้าที่เป็น checksum digit ซึ่งเราสามารถคำนวณได้จาก 12 digits แรก

เมื่อเราเอามาจัดการเขียนให้เป็นเรื่องเป็นราวจะได้แบบนี้ครับ

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;
}

Code ด้านบนนี้ผมพอร์ตมาจาก Javascript version ที่ผมทำไว้ให้เป็น PHP ครับ

ลองดูหน้าที่ทำเสร็จแล้ว (PHP) ได้ที่ LIVE DEMO เลยครับ

ปล. หมายเลขบัตรประชาชนที่สร้างจาก LIVE DEMO สามารถนำไปใช้ได้จริงนะครับ ใช้ให้ถูกที่ถูกกฏหมายนะครับ
ปล. อีกที วันที่ 9 ก.ย. 52 ผมแก้ไข code ที่เป็น เวอร์ชั่น php ให้ถูกต้องครับ มีบักนิดหน่อย