การใช้งาน Template กับเว็บไซต์ (ตอนที่ 2)
Template ตามความคิดของผม แบ่งออกเป็น 3 แบบ มาดูแบบแรกกัน
Template แบบที่แทรกเนื้อหาด้วย Javascript
Template ในลักษณะนี้ ได้แก่ Template สำหรับ Chat Room ซึ่งลักษณะของ Chat Room นี้เนื้อหาจะถูกแทรกโดย Javascript หรือ Ajax ทำให้การสร้าง Template ในลักษณะนี้ค่อนข้างง่าย ด้วยการสร้างพื้นที่สำหรับแสดงผลเท่านั้น
ทำความเข้าใจเกี่ยวกับ Javascript กันก่อน
โดยปกติแล้วเราสามารถแทรกเนื้อหาลงในส่วนต่างๆของเพจได้อยู่แล้ว โดยอาศัยโครงสร้าง DOM ของเว็บเพจเช่น การแทรกเนื้อหาลงใน DIV หรือ P หรือ Span ที่ต้องมี Tag ปิด เราจะใช้คำสั่ง innerHTML เช่น
หรือถ้าเป็น Input ที่ไม่ต้องมี Tag ปิด เราจะใช้ Value เข่น
(การใช้ document.getElementById หรือ from.inputname อาจใช้กรณีไหนก็ได้ แล้วแต่การออกแบบ นะครับ)
การออกแบบ Template ในลักษณะนี้ ทำได้ง่ายๆโดยการสร้าง layer ที่ต้องการ แล้วกำหนด id หรือ name ให้ แล้วใช้ Javascript แทรกเนื้อหาขณะทำงานเท่านั้น
โค้ดส่วน Template จะเห็นว่ามีแค่ DIV กับ CSS เท่านั้น
โค้ดส่วน Javascript ที่ใช้สำหรับแทรกเนื้อหาลงใน Template
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