Ajax Template Parser : เรียกใช้งานเทมเพลต CodeIgniter ด้วย Ajax

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

หลักการของซอร์สโค๊ดนี้ก็คือ การแยกข้อมูลดิบที่ PHP สร้างขึ้นมา หรือดึงจากฐานข้อมูล ออกจากโค๊ด HTML โดยการเขียนแยกเป็น 1) หน้าควบคุม หรือเรียกใช้งาน 2) ส่วนของการสร้างข้อมูล 3) ส่วนของการแสดงผล

หากใครได้ลองใช้งาน CodeIgniter มาบ้างแล้ว ก็คงพอจะเข้าใจในส่วนของการแยก HTML ออกจาก PHP ที่ผมชอบใช้คือ Template Parser Class เลยลองนำมาประยุกต์ใช้ดู สำหรับคราวหน้าอาจจะลองทดสอบใช้งานจริงกับ CodeIgniter ดูบ้าง ว่าจะใช้งานได้ดีหรือไม่

สังเกตจากบทความที่ผ่านๆมา ผมจะเน้นไปเรื่องของการประหยัดทรัพยากรเป็นหลัก ทั้งที่สมัยนี้เทคโนโลยีก้าวไกล ไปถึงระดับก้อนเมฆแล้วแต่คนงบน้อย ก็ยังไม่สามารถมองข้ามปัญหาแบนด์วิธไปได้ โดยเฉพาะคนที่ชอบทดสอบซอร์สโค๊ดกับฟรีโฮสติ้งอย่างผม (เพราะถูกบล็อคไอดี และลบข้อมูลโฮสมาหลายครั้งแล้ว ^^")

สำหรับรูปแบบเทมเพลตให้ดูจาก

http://codeigniter.in.th/user_guide/libraries/parser.html

ไฟล์ jsParser.js

function getJSON(pUrl, pData, pSuccessJSON){

$.ajax({

dataType: "json",

url: pUrl,

data: pData,

success: pSuccessJSON

});

}

function loadContent(xFileName,xDir)

{

var tempContent;

var xViewDir = "view/";//templete directory

if(xDir != undefined && xDir != '') xViewDir += xDir + "/";

$.ajax({

type: "GET",

url: xViewDir + xFileName,

dataType: "text",

async : false, //synchronous requests

success : function(data){tempContent = data;}

});

return tempContent;

}

/*** Matching & Replace ***/

function parseArray(text, xDataArray, mKey)

{

var str = text;

var regex = /{(.+?)}/g;

$.each( xDataArray, function( key, value ){

if(mKey) str = str.replace("{"+ mKey +"}", "").replace("{/"+ mKey +"}", "");

if(typeof value == 'object'){

text += parseArray(str, value);

}else{

text = str.replace(regex, function($0, $1){return xDataArray[$1];});

}

});

return text;

}

function parseHtml(xTemplate, xData){

var result = xTemplate;

$.each( xData, function( key, value ) {

if($.isArray(value)){

var patt = '/{'+key+'}([\\S\\s]*){\\/'+key+'}/g';// key

var patt = eval(patt);

var text_array = result.match(patt);//array

if(text_array != null){

var textList = parseArray(text_array[0], value, key);

textList = textList.replace(text_array[0], '');

result = result.replace(text_array[0], textList);

}

}else{

result = result.replace(eval('/{' + key + '}/g'), value);

}

});

return result;

}

วิธีเรียกใช้งาน

1. สร้าง View โดยใช้รูปแบบเดียวกับ codeigniter (ในตัวอย่างให้เป็น test.php)

<h1>

{blog_title}

</h1>

<h3>

{blog_heading}

</h3>

{blog_entries}

<hr>

<h5>{title}</h5>

<p>

{body}

</p>

{/blog_entries}

2. สร้างหน้าเพจ หรือตัว Control สำหรับเรียกข้อมูล

<h2>ตัวอย่างการสร้างปฏิทินด้วย PHP (Optimize with JavaScript)</h2>

<a href="javascript:jsMonCalen()">เดือน</a> | <a href="javascript:loadWeekCalendar()">สัปดาห์</a> | <a href="javascript:void(0)">วัน</a> | <a href="javascript:void(0)">แผนงาน</a>

</div>

</div>

jsMonCalen();

</script>

3. สร้างไฟล์ Javascript สำหรับเรียกใช้ jQuery Ajax (ตามตัวอย่างคือไฟล์ themes/example/js/calendar.js)

var ajaxURL = 'ajax_service.php?source=calendar';

var templateTest = loadContent('test.php');

function loadContent(data){

if(!data) return;
var obj = jQuery.parseJSON(data); // <--- เพิ่มส่วนของการแปลง json กลับไปเป็นอาร์เรย์

$('#my_calendar').html(parseHtml(templateTest, obj ));

}

function loadContent(date){

var param = '';

if(date != undefined) param = '&date=' + date;

getJSON(ajaxURL, 'action=load_content' + param, successDayCalen);

}

4. สร้างไฟล์ PHP สำหรับดึงข้อมูลที่จะส่งไปยังเทมเพลตที่เราเตรียมไว้ (ในตัวอย่างให้เป็น calendar_ajax.php)

function loadContent()

{

$json = array(

'blog_title' => 'My Blog Title',

'blog_heading' => 'My Blog Heading',

'blog_entries' => array(

array('title' => 'Title 1', 'body' => 'Body 1'),

array('title' => 'Title 2', 'body' => 'Body 2'),

array('title' => 'Title 3', 'body' => 'Body 3'),

array('title' => 'Title 4', 'body' => 'Body 4'),

array('title' => 'Title 5', 'body' => 'Body 5')

)

);

echo json_encode($json);

}

/***** Call Function *****/

$action = isset($_POST['action']) ? $_POST['action'] : '';

if($action == '') $action = isset($_GET['action']) ? $_GET['action'] : '';

switch( $action ){

case 'month_js':

genMonthCalendarJS();

break;

case 'week_calen':

genWeekCalenForJS();

break;

case 'load_content':

loadContent();

break;

case 'plan':

break;

}

สำหรับผลลัพธ์ที่ได้สามารถทดลองได้ที่ ตัวอย่างปฏิทิน PHP

หมายเหตุ
2014-05-01 แก้ส่วนที่ผิดก่อนเรียก parseHtml(templateTest, obj )
ตัวแปร data ต้องแปลงเป็นอาร์เรย์ก่อนครับ
var obj = jQuery.parseJSON(data);

บทความที่เกี่ยวข้อง

PHP วิถีเริ่มต้นของโปรแกรมเมอร์ รับทำเว็บไซต์

ค้นหาบล็อกนี้