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

ไอเดียหลัก ๆ ของการทำ chaining ก็คือ การทำให้มันสามารถเรียกต่อกันได้เป็นทอด ๆ นั่นเอง ยกตัวอย่างใน jQuery ซึ่งมีคุณสมบัติที่เรียกว่า chainability อยู่ ทำให้เราสามารถเรียกคำสั่งได้แบบนี้

$("#submenu").addClass("whitemenu").show("slow");

จะเห็นได้ว่า เราสามารถเรียก .show ต่อเนื่องได้เลย นี่เองที่ทำให้เกิดการเรียกอย่างต่อเนื่อง หรือ การทำ Method chaining นั่นเอง

ใน PHP เราสามารถทำให้ object มีคุณสมบัติเดียวกันนี้ได้เช่นกัน เพียงแต่น่าเสียดายที่คุณสมบัตินี้ มีอยู่ใน PHP ตั้งแต่เวอร์ชั่น 5 ขึ้นไปเท่านั้น สำหรับคนที่ยังใช้ PHP4 อยู่ ผมต้องขอแสดงความเสียใจด้วยครับ ฮ่า ๆ และคาดว่าเหตุนี้เองที่ทำให้ kohana สามารถใช้งานได้กับ PHP5 ขึ้นไปเท่านั้น

หลักการง่าย ๆ ที่ทำให้เราสามารถทำ Method chaining ได้ก็คือ การเขียน class และทำการคืนค่าของ object มันเองกลับออกมาหลังจากที่จบ method ทำนองเดียวกับใน jQuery ตอนที่เขียน plugin

ตอนจบ เราก็จะทำการ return jQuery object กลับออกมาให้เช่นเดียวกัน

ลองมาดูตัวอย่างใน PHP กันดีกว่าครับ

// php5 only
class Database
{
	private $link;

	private $table;
	private $field;
	private $condition;
	private $order;
	private $result;

	// connection functions
	function __construct($config)
	{
		$this->flush();
		$this->link = null;
		$this->connect($config["hostname"],
				$config["username"],
				$config["password"],
				$config["database"]);
	}

	function __destruct()
	{
		$this->disconnect();
	}

	function connect($host = "",
				$user = "",
				$password = "",
				$db = "")
	{
		if ($this->link !== null)
			$this->disconnect();

		$this->link = mysql_connect($host, $user, $password);

		if ($this->link === FALSE)
		{
			echo $this->err();
		}
		else
		{
			if ($db !== "")
			{
				return $this->db($db);
			}
		}
		return $this;
	}

	function disconnect()
	{	// break chain
		if ($this->link !== null)
			mysql_close($this->link);
		$this->link = null;
	}

	function db($db)
	{
		if (mysql_select_db($db, $this->link) === FALSE)
			echo $this->err();
		return $this;
	}

	function errno()
	{
		return mysql_errno($this->link);
	}

	function ok()
	{
		return ($this->errno() == 0);
	}

	function err()
	{	// break chain
		return mysql_error($this->link);
	}

	function execute($sql)
	{
		$this->result = mysql_query($sql, $this->link);
		return $this;
	}

	function records()
	{
		$result = array();
		if ($this->result !== FALSE)
		{
			while (($row = mysql_fetch_assoc($this->result)) !== FALSE)
			{
				$result[] = $row;
			}
		}
		return $result;
	}

	function flush()
	{
		$this->table = "";
		$this->field = "";
		$this->condition = "";
		$this->order = "";
		$this->result = null;
		return $this;
	}

	function safe($value)
	{
		if (!get_magic_quotes_gpc())
		{
			$value = addslashes($value);
		}
		return "'$value'";
	}

	function table($table)
	{
		$this->table = $table;
		return $this;
	}

	function field($field)
	{
		$this->field = $field;
		return $this;
	}

	function condition($condition)
	{
		if (is_array($condition))
		{
			$cond = array();
			foreach ($condition as $f => $v)
			{
				$cond[] = "($f = " . $this->safe($v) . ")";
			}
			$condition = implode(" AND ", $cond);
		}
		$this->condition = $condition;
		return $this;
	}

	function top($num = 1)
	{
		$field = $this->field;
		if ($field == "") $field = "*";
		$sql = "SELECT {$field} FROM {$this->table}";
		if ($this->condition !== "")
			$sql .= " WHERE {$this->condition}";
		if ($this->order !== "")
			$sql .= " ORDER BY {$this->order}";
		$sql .= " LIMIT 0, {$num}";
		return $this->execute($sql)->records();
	}

	function all()
	{
		$field = $this->field;
		if ($field == "") $field = "*";
		$sql = "SELECT {$field} FROM {$this->table}";
		if ($this->condition !== "")
			$sql .= " WHERE {$this->condition}";
		if ($this->order !== "")
			$sql .= " ORDER BY {$this->order}";
		return $this->execute($sql)->records();
	}

	function order($order)
	{
		$this->order = $order;
		return $this;
	}
}

code ด้านบนนี้ เป็น code ที่ผมทดสอบ โดยทำเป็นไอเดียเริ่มต้นง่าย ๆ สำหรับการทำ query builder จะเห็นได้ว่า หลาย ๆ method จะมีการ return ตัว object มันเอง ($this) ไอเดียหลักในการกำหนดว่า method ไหนที่ผม return หรือไม่ return $this ก็คือ มีความจำเป็นในการเรียก method ต่อจากนี้หรือไม่นั่นเอง

การใช้งานก็ไม่ได้ยุ่งยากอะไร

$dbconf = array(
	"hostname" => "localhost",
	"username" => "root",
	"password" => "123456",
	"database" => "test"
);
$db = new Database($dbconf);
$rows = $db->table("products")
		->field("product_id, product_name")
		->condition(array(
				"product_group"=>"tyre",
				"product_model"=>"Eagle"))
		->top();
print_r($rows);

จากตัวอย่างด้านบน เป็นการ select หา product จาก table products โดยกำหนด criteria ในการค้นหาเป็น product_group = ‘tyre’ และ product_model = ‘Eagle’ โดยจะเลือกเอาเฉพาะ record แรกสุดเท่านั้น

เห็นมั๊ยครับ หลักการง่าย ๆ แค่ return $this เองครับ ที่สำคัญ อย่าลืมนะครับ PHP5 ขึ้นไปนะครับ

ขอให้สนุกกับการเขียนโปรแกรมครับ

ขั้นแรก ผมจะกำหนด 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/

ทีนี้ ผมก็มาคิด ๆ ดูว่าไอ้เจ้า Template เนี่ย มันมีไอเดียการทำงานยังไง ลองมาดูกัน

หลักการง่าย ๆ ของการทำ Template คือ การแยกแนวคิดให้ตัว Template ทำหน้าที่แสดงผลอย่างเดียว โดยไม่มี Logic อื่น ๆ มาเกี่ยวข้อง เราอาจจะมี condition บางอย่างอยู่ใน template ได้ แต่ก็เฉพาะในส่วนที่เกี่ยวข้องกับการแสดงผลเท่านั้น ดังนั้น สิ่งที่จำเป็นก่อนการแสดงผลนั่นก็คือ การเตรียมข้อมูลที่จะแสดงให้พร้อมนั่นเอง ต่อจากนั้นเราก็นำข้อมูลที่เราเตรียมไว้ ไปยัดใส่ template ที่เราเตรียมไว้ เป็นอันเรียบร้อย

เรามาสร้าง template engine แบบง่ายที่สุดในโลกกันดีกว่า

function apply_template($data, $template)
{
    ob_start();
    include ($template);
    $output = ob_get_clean();
    return $output;
} 

ดูเหมือนง่ายมั๊ยครับ แค่ไม่กี่บรรทัดเอง ส่วนของ template file เราก็จะมีตัวแปรไว้ใช้งานตัวนึง ชื่อว่า $data นั่นเองครับ เวลาเราส่งค่าเข้า template ก็ให้ส่งผ่านตัวแปรตัวเดียวครับ (อาจจะทำเป็น array หรือ object ก็ได้ครับ)

ลองดูตัวอย่างใน LIVE DEMO นะครับ

อัลกอริธึมในการตรวจสอบหมายเลขบัตรประชาชน สามารถหาได้ตามเว็บทั่ว ๆ ไป ที่ผมได้มาก็จะประมาณนี้ครับ (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 ให้ถูกต้องครับ มีบักนิดหน่อย

1. Model  จะหมายถึง Object ที่แทนข้อมูล หรือกิจกรรมต่าง ๆ ในระบบ เช่น ตารางใน database หรือจะเป็นโพรเซสงานหนึ่ง ๆ ก็ได้ครับ เราจะไม่นับข้อมูลดิบในระบบเป็น Model เพราะข้อมูลเหล่านั้นจะถูกครอบ (Encapsulated) ด้วย Model นั่นเองครับ ถ้าใครเคยเรียน Object Oriented มาน่าจะพอเข้าใจได้ดีนะครับ
2. View จะหมายถึงการแสดงผลข้อมูลต่าง ๆ ที่ได้รับมาจาก Model ครับ ไม่ว่าจะอยู่ในรูปแบบของรูปภาพกราฟิคต่าง ๆ หรือข้อความก็ตาม นอกจากนี้เรายังสามารถแสดงผลที่ได้รับจาก Model หนึ่ง ๆ ได้หลายรูปแบบอีกด้วย
3. Controller จะหมายถึง กิจกรรม การกระทำ หรือการตอบสนองต่อเหตุการณ์ต่าง ๆ ที่เกิดขึ้น โดยอาจจะมีผลทำให้ข้อมูลใน Model เปลี่ยนสถานะไปได้ครับ

MVC diagram

รูปภาพด้านบนจะแสดงให้เห็นถึงความสัมพันธ์ระหว่าง Model, View และ Controller ในรูปแบบ Diagram (ขอบคุณภาพจาก http://www.tonymarston.net/php-mysql/model-view-controller.html ด้วยครับ)

ข้อดีของการออกแบบระบบด้วย MVC Pattern

• การออกแบบที่ชัดเจน เมื่อเรากำหนดให้ Model อยู่ในรูปแบบของ Object ในระบบ ส่งผลให้เราสามารถมองภาพระบบโดยรวมได้ชัดเจนมากขึ้นว่า Model ใด สัมพันธ์กับ Model ใดในลักษณะใด รวมไปถึงคำสั่งต่าง ๆ ใน Object ที่เราสามารถเรียกใช้งานได้ จะทำให้เรามองเห็นภาพของพฤติกรรมของ Model นั้น ๆ อีกด้วย
• การปรับปรุง/แก้ไขได้โดยง่าย เมื่อเราออกแบบตาม MVC Pattern ทำให้เราสามารถปรับปรุง แก้ไขส่วนใด ๆ ได้อย่างง่ายดายโดยที่ไม่กระทบกับส่วนที่เหลือ เนื่องจากทั้ง 3 ส่วนต่างอิสระต่อกัน เพียงเรากำหนด Interface ของแต่ละส่วนให้ชัดเจน และทำการพัฒนา แก้ไข หรือปรับปรุงภายใต้ Interface ที่กำหนดเท่านั้น
• View ที่หลากหลาย หลังจากที่เราแยก View กับ Model ออกจากกัน ทำให้เราสามารถออกแบบ View ได้หลายรูปแบบ เปรียบเทียบได้กับ Model หนึ่งที่คอย Generate XML Data รายงานดัชนีหุ้น และมี View ที่นำข้อมูล XML ไปใช้สร้างเป็นกราฟ หรือตารางนั้นเอง
• Maintain ระบบได้ง่าย เพราะเราได้ออกแบบระบบที่มีโครงสร้างชัดเจน ทำให้ยืดหยุ่นต่อการเพิ่มเติม รวมไปถึงการนำส่วนใด ๆ กลับมาใช้ซ้ำได้อีกด้วย (Reusability)

แล้วข้อเสียล่ะ?

เมื่อพูดถึงข้อดีแล้ว ต่อไปเราก็มาพูดถึงข้อเสียกันบ้าง ข้อเสียหนึ่งที่เห็นได้ชัดเลยคือ มันซับซ้อนเกินไป ถ้าเราจะนำมาใช้กับระบบขนาดเล็ก เทียบง่าย ๆ มันก็คงไม่ต่างจากภาษิตที่ว่า ขี่ช้างจับตั๊กแตน นั่นเองครับ

นอกจากนี้แล้ว

นอกจากนี้แล้ว ทางฝั่งภาษา PHP เองก็มี Framework ที่สนับสนุนการพัฒนาระบบที่มีพื้นฐาน MVC design pattern อยู่หลายตัวครับ ผมขออนุญาตลอกมาจาก Wiki ให้ดูกัน (http://en.wikipedia.org/wiki/Model-view-controller#PHP)

• Akelos PHP Framework – a Ruby on Rails port to PHP4/5.
• CakePHP – webapplication framework modeled after the concepts of Ruby on Rails.
• CodeIgniter – A PHP MVC framework.
• FUSE – A powerful but easy-to-use PHP 5 Framework for MVC development modeled after the concepts of Ruby on Rails.
• Jelix (web framework)
• Jaws – is a Framework and Content Management System for building dynamic web sites.
• Joomla v1.5.x – is an open source Content Management System that employs the MVC model for its extensions, called components and modules.
• Kohana – is an open source MVC oriented framework, originally forked from CodeIgniter.
• LISA MVC – is an open source object oriented web application framework.
• Odin Assemble – Small footprint PHP based MVC Framework.
• Orinoco Framework – is a full-stack yet lightweight framework written in PHP5. It implements the Model 2 design paradigm.
• PHPonTrax – A PHP 5 MVC framework modeled after Ruby on Rails.
• phpXCore – A MVC design pattern based PHP content management framework compatible with PHP4 and PHP5.
• Prado – A PHP 5 MVC framework modeled after ASP.NET web forms.
• Qcodo – is an open-source PHP 5 web application framework
• SilverStripe – contains a fully fledged PHP 5.2 ORM/MVC Framework focused on building websites. Much like Ruby on Rails.
• Solar
• Switch board (framework) – with Routing PHP 5 MVC Framework with Routing.
• Symfony Framework- PHP 5 MVC Framework modeled after the concepts of Ruby on Rails.
• Zend Framework – A PHP 5-based MVC framework modeled after the concepts of Ruby on Rails.
• ZNF – PHP5 MVC framework for enterprise web applications
• Zoop – Framework A Mature PHP 4/5 MVC framework.
• PureMVC – Framework for PHP

เอกสารอ้างอิง 

• http://en.wikipedia.org/wiki/Model-view-controller
• http://www.tonymarston.net/php-mysql/model-view-controller.html
• http://cristobal.baray.com/indiana/projects/mvc.html
• http://aspalliance.com/1562_Implementing_the_MVC_Design_Pattern_in_ASPNET.1