Template ตามความคิดของผม แบ่งออกเป็น 3 แบบ มาดูแบบแรกกัน

Template แบบที่แทรกเนื้อหาด้วย Javascript

Template ในลักษณะนี้ ได้แก่ Template สำหรับ Chat Room ซึ่งลักษณะของ Chat Room นี้เนื้อหาจะถูกแทรกโดย Javascript หรือ Ajax ทำให้การสร้าง Template ในลักษณะนี้ค่อนข้างง่าย ด้วยการสร้างพื้นที่สำหรับแสดงผลเท่านั้น

ทำความเข้าใจเกี่ยวกับ Javascript กันก่อน
โดยปกติแล้วเราสามารถแทรกเนื้อหาลงในส่วนต่างๆของเพจได้อยู่แล้ว โดยอาศัยโครงสร้าง DOM ของเว็บเพจเช่น การแทรกเนื้อหาลงใน DIV หรือ P หรือ Span ที่ต้องมี Tag ปิด เราจะใช้คำสั่ง innerHTML เช่น

document.getElementById( 'idname' ).innerHTML = 'xxx';

หรือถ้าเป็น Input ที่ไม่ต้องมี Tag ปิด เราจะใช้ Value เข่น

from.inputname.value = 'xxx';

(การใช้ document.getElementById หรือ from.inputname อาจใช้กรณีไหนก็ได้ แล้วแต่การออกแบบ นะครับ)

การออกแบบ Template ในลักษณะนี้ ทำได้ง่ายๆโดยการสร้าง layer ที่ต้องการ แล้วกำหนด id หรือ name ให้ แล้วใช้ Javascript แทรกเนื้อหาขณะทำงานเท่านั้น

<div style="border: 1px solid navy; padding: 10px; width: 100px; height: 100px;" id="test"></div>

โค้ดส่วน Template จะเห็นว่ามีแค่ DIV กับ CSS เท่านั้น

<input type="button" onclick="document.getElementById('test').innerHTML = 'ข้อความ ส่วนที่เป็นเนื้อหา ที่ใช้ใส่ลงใน Skin อาจมาจาก Ajax ก็ได้';" value="Insert" />

โค้ดส่วน Javascript ที่ใช้สำหรับแทรกเนื้อหาลงใน Template