การใช้งาน Twig Template Engine ตอนที่ 10

ในตอนนี้เราจะพูดถึงการใช้ expression ใน {{ … }} ซึ่งใน Twig จะเปิดโอกาสให้เราสามารถที่จะใช้  expression ได้

จากในตัวอย่างจะเป็นการแสดงผล username เป็นตัวอักษรตัวเล็กทั้งหมด

หรือการต่อข้อความ

 

expression ใน Twig จะทำการแบ่งออกเป็นกลุ่มต่างๆ ดังนี้

  • Literals กลุ่มที่เกี่ยวกับ Data Type ใน PHP ทั้งเรื่องของ เลขทศนิยม, Array และอื่นๆ
  • Math กลุ่มที่เกี่ยวข้องกับการคำนวณ ตัวที่เพิ่มเติมขึ้นมาก็คือ **(หมายถึงยกกำลัง) และ // (หมายถึง หารแล้วตัวทศนิยมออก)
  • Logic กลุ่มนี้จะเป็นเรื่องของ Logic ตามชื่อ มี and, or, not แล้วก็ ()
  • Comparisons เป็นกลุ่มของการเปรียบเทียบ เช่น ขึ้นต้นด้วยตัว “A” รึเปล่า รวมทั้งการเปรียบเทียบด้วย Regular Expression ในกลุ่มนี้มี opertor อยู่ 3 ตัวคือ starts, ends และ matches
  • Containment เป็นการใช้ operator “in” และ “not in”
  • Test เป็นการใช้ “is” และ “is not”
  • String Interpolation เป็นการใช้ #{expression} จะเป็น expression ซ้อน expression
  • Other กลุ่มของ expression อื่นๆ ที่ถูกเพิ่มขึ้นมาใน version 1.12.0 ซึ่งไม่สามารถระบุกลุ่มที่อยู่ได้ชัดเจน

ในการใช้งานเราสามารถดูเพิ่มเติมในรายละเอียดจากใน Document ของ Twig

การใช้งาน Twig Template Engine ตอนที่ 9

ในตอนที่ 9 เราจะพูดถึงการใช้ การ encode กันอย่างละเอียด โดยในบทความตอนที่ 5 เราจะพูดถึงการใช้ filter escape โดยการใช้ชื่อตัวแปร แล้วตามด้วยคำว่า escape

ซึ่งเราสวามารถทำการย่อได้โดยใชแค่ตัว e ตัวเดียวเท่านั้น

การ ใช้ escape แบบนี้จะเป็นการใช้ใน context ที่เป็น HTML เท่านั้น เพราะการเขียน เฉพาะคำว่า escape หรือ e หมายถึง

นอกจาก context ที่เป็น HTML เราสามารถใช้ใน context อื่นๆได้อีก

จากในตัวอย่างเราสามารถเลือกได้ว่าเราจะทำการ escape character แล้วนำไปแสดงผลใน context ไหน

แต่ถ้าเราต้องการให้ default เป็น context อื่นที่ไม่ใช่ HTML เราก็สามารถ set ค่า default ใหม่ได้

ในคำสั่ง autoescape ก็เช่นเดียวกันเราสามารถกำหนด strategy หรือ context ที่จะแสดงผลได้

แต่โดยปกติแล้วการ escape จะมี strategy เป็น HTML อยู่แล้ว เนื่องจากส่วนมากเรามักจะแสดงผลใน HTML เป็นหลัก

ถ้าเราต้องการแสดงผลอักขระพิเศษใน {{ … }} ก็ให้ทำการใส่ qoute ครอบอักขระพิเศษนั้นซะ

 

การใช้งาน Twig Template Engine ตอนที่ 8

จากตัวอย่างการสร้าง Master Page ใน ตอนที่แล้ว เราได้สร้างตัว base.html ขึ้นมาเป็น Template ตัวแม่

ในตอนนี้เราจะทำการเรียกใช้ base.html โดยในตัวอย่างจะ base.html จะมีอยู่ด้วยกัน 4 block คือ header, title, contentและ footer เวลาสร้าง Template ที่เป็น client จะเรียกใช้เป็น

ในส่วนของ Template ที่เป็นตัวลูกจะใช้ keyword extend มาจาก Template ตัว Master หรือตัวแม่ หลังจากนั้นในแต่ละ block ก็จะใส่ content ของตัวเองลงไป content ของตัวลูกจะไปทับ content ของตัวแม่ใน block นั้นๆ ถ้าอยากให้ แสดง content ของตัวแม่เราจะใช้ function parent() เหมือนในส่วนของ block header

ส่วนใน block ของ footer จะไม่ได้ใส่ไว้ในตัวลูก เวลา render() Twig ก็จะไปเอา content ใน Template ตัวแม่มาแสดงแทน

การใช้งาน Twig Template Engine ตอนที่ 7

ในตอนที่ 7 นี้เราจะพูดถึงการสร้าง Template หรือ Master Page ด้วย Twig เพราะแน่นอน การสร้าง Web ไม่ได้มีเพียงหน้าเดียวแน่นอน ดังนั้นถ้าเราต้องการจะให้ทุกหน้ามี Header หรือ Footer เหมือนกัน เราก็ต้องสร้าง Template หรือ Master Page ขึ้นมา

การสร้าง Template ใน Twig นั้นเริ่มต้นจากการที่เราต้องสร้างตัว Template ที่เป็นตัว Master(ตัวที่เป็นโครงสร้างของ Template ตัวอื่นๆ) ขึ้นมาก่อน

ใน Template ตัวที่เป็น Master จะทำการระบุ block ไว้ให้ใส่ content ดังนั้นถ้ามี content อะไรใน Template ตัวลูกก็ทำการระบุชื่อ block ได้เลย หลังจากนั้น save file เป็น HTML ได้เลย เช่นในตัวอย่างจะตั้งชื่อเป็น base.html

ใน base.html นี้จะประกอบไปด้วย block ทั้งหมด 4 block คือ

  • header (ใน block นี้จะมี content อยู่ใน block)
  • title (จะซ้อนอยู่ใน header อีกที และไม่มี content อยู่ใน block เลย)
  • content (เป็น block ที่ไม่มี content อยู่เลย)
  • footer (ใน block นี้ก็จะมี content ของตัวเองอยู่เหมือนกัน)

ในตอนต่อไปเราจะทำการสร้าง Template ตัวลูกเรียกใช้ base.html นี้

การใช้งาน Twig Template Engine ตอนที่ 6

การใข้งาน Control Flow จะเป็นส่วนที่สำคัญเป็นอย่างมากในการแสดงผลข้อมูล เพราะเราต้องทำการเลือกการแสดงผลโดยใช้ if-else และ ทำต้องการดึงข้อมูลทั้งหมดออกมาแสดงผลโดยใช้ for

ใน Twig เองก็มี Control Flow อยู่ 2 ตัวคือ if และ for โดยเริ่มจาก if มี syntax ดังนี้

ถ้า ค่าของตัวแปร online มีค่าเท่ากับ false ก็จะแสดงผล ข้อความในตัวอย่าง

สังเกตว่า Syntax จะอ่านง่ายกว่าเขียน php ทั่วไปมาก

อีกตัวนึงจำเป็นการใช้ for โดยมี syntax ตามตัวอย่าง

ในตัวอย่างนี้จะทำการแสดงผลข้อมูลทั้งหมดจากใน ตัวแปร array ที่ชื่อว่า users และในแต่ละรอบจะเก็บค่าไว้ในตัวแปร user สุดท้ายก็จะแสดงผล property ที่อยู่ในตัวแปร user นั้นออกมา

โดยในตัวอย่างด้านบน array users จะถูกส่งเข้ามาเป็นแบบ Array ของ Object User

เราสามารถที่จะใช้ if และ for ผสมกันได้โดยใช้ synatax แบบนี้

จะเห็นว่าการเขียนด้วย Twig นั้นจะอ่านง่ายและใกล้เคียงกับภาษามนุษย์มากว่า PHP มากๆ

การใช้งาน Twig Template Engine ตอนที่ 5

การแสดงผลตัวแปรด้วย {{ … }} นอกจากเราจะได้ความสะดวกสบายในการแสดงผล เนื่องจาก การแสดงผลด้วย {{ … }}ไม่ต้องพิมพิ์ echo แล้วเรายังสามารถตั้งค่าให้มันทำการ escape character โดยอัตโนมัติได้ด้วย

ตัวแปรทุกตัวที่แสดงผลอยู่ภายใน block autoeacape จะทำการ escape อักขระพิเศษ หรือ speacial character  ให้โดยอัตโนมัติ

แต่ถ้าเราไม่ต้องการ escape character เราจะทำการ ใส่ filter raw ไว้ด้านหลังตัวแปร ตามตัวอย่างบรรทัดที่ 3

ในบรรทัดที่ 4 เราจะไม่สามารถใส่ escape อีกครั้งเพื่อให้ Twig ทำ double escape ได้ เพราะ Twig จะมองเห็น autoescape และทำการ escape ให้เพียงครั้งเดียวถ้าเราต้องการทำ double escape เราต้องใส่ strategy  เข้าไปเป็น parameter ของ filter escape

 

 

การใช้งาน Twig Template Engine ตอนที่ 4

จริงๆแล้ว PHP เป็นภาษาที่เขียนง่ายและได้รับความนิยมเป็นอันดับ 1 ในการพัฒนา Web Application เนื่องจากความง่ายในการเขียนอยู่แล้ว ดังนั้นยิ่งถ้าเราใช้ Template Engine มาช่วยเพิ่มประสิทธิภาพก็จะยิ่งช่วยให้การเขียน PHP เป็นระเบียบและง่ายมากขึ้นในตอนที่ 4 เราจะเริ่มจากการเอา data มาแสดงผลใน Template

อันดับแรกต้องย้อนไปย้ำกันอีกครั้งในเรื่องของคำว่า Template ซึ่งเป็นส่วนของการแสดงผล เราจะเปลี่ยนเฉพาะ data หรือ parameter เท่านั้น โดยตัว Template นั้นจะเป็นไฟล์ HTML, XML, CSV หรือไฟล์อะไรก็ได้ เพราะ Twig ไม่ได้กำหนด มนี่คือสิ่งที่แตกต่างจาก Smarty เนื่องจาก Smarty จะทำการกำหนดให้ Template มีนามสกุลเป็น .tpl หรือ .php แต่ใน Twig เราสามารถใส่นามสกุลอะไรก็ได้ เวลาเราอ้างถึงชื่อ Template เราถึงต้องใส่นามสกุลเข้าไปด้วย

ส่วนของ Template เราจะสร้าง file หน้าตาแบบในตัวอย่างและทำการ Save file เป็น index.html

เป็น Template ที่จะรับข้อมูลมาผ่านทางตัวแปร name

โดยการแสดงผลตัวแปรเราจะใช้สัญลักษณ์ {{ …  }} ครอบชื่อของตัวแปรไว้ เวลาเราเรียก render() เราจะส่งตัวแปรเข้าไปผ่านทาง Array

ในตอนต่อไปจะเป็นรายละเอียดของ การแสดงผลตัวแปรด้วย  {{ … }}

 

การใช้งาน Twig Template Engine ตอนที่ 3

ในการใช้งาน Twig Template Engine ตอนที่ 2 เราสามารถ load Template จาก

หลังจากที่เราทำการ load library มาเรียบร้อยแล้ว สิ่งที่เราต้องทำต่อไปคือการ load template ขึ้นมาใช้งาน

เริ่มจาก การใช้ Twig_Loader_Array จะทำการ load template ขึ้นมา โดยใน template ที่ชื่อว่า index มี content เป็น Hello แล้วตามด้วยตัวแปร name

หลังจากนั้นเราจะใช้ Twig_Environment ในการกำหนดค่า Configuration โดยเราจะส่งตัว Twig_Loader_Array ที่ได้ทำการ new Object ขึ้นมาเข้าไปเป็น parameter ของ constructor

ขั้นตอนสุดท้ายจะเป็นการใช้ render แสดงผลลัพธ์ออกไปที่หน้าจอ เราจะใช้ method นี้ในการส่งตัวแปรหรือ parameter เข้าไปใน template ในตัวอย่างจะเป็นการส่งค่า name เข้าไปใน template ที่ชื่อว่า index

ผลลัพธ์ที่ได้จากตัวอย่างนี้คือ Hello Irobust

นอกจากการ Load Template โดยที่ใช้ Array เหมือนกับตัวอย่างที่แล้วเราสามารถที่จะ load โดยอ้างถึง File ได้

เราจะ load file template เข้ามาโดยการใช้ Class Twig_Loader_Filesystem เมื่อเราทำการ newTwig_Loader_Filesystem ขึ้น แล้ว เราสามารถอ้างถึงชื่อของ template ได้ปกติ

 

การใช้งาน Twig Template Engine ตอนที่ 2

ในบทความนี้เราจะเริ่มต้นทำการติดตั้ง Twig โดยการติดตั้ง เราต้องมี PHP 5.2.4 ขึ้นไป  เราสามารถทำการติดตั้งได้ง่ายๆโดยใช้ composer โดยใช้คำสั่ง

การที่เราใช้ composer ติดตั้งจะง่ายมากในการใช้งานโดยเราแค่ require autoload.php ใน folder ที่ชื่อว่า vendor เพียงแค่นี้เราก็สามารถมี Twig ไว้ใชงานกันแล้ว

แต่ถ้าไม่ใช้งาน composer เราก็สามารถที่จะไป Clone Project จากใน Git ได้

หรือเราจะเลือกการติดตั้งโดยใช้ PEAR Package โดยพิมพิ์ command ดังนี้

ดังนั้นโดยสรุปเราจะมีวิธีในการติดตั้ง ดังนี้

  • Composer (Recommend)
  • Clone หรือ Download Project จาก Git
  • กาติดตั้งผ่าน PEAR Package

หลังจากนั้นเราก็ต้องไป require file ที่ชื่อว่า Autoload.php ใน folder Twig-1.16.2/lib/Twig และสุดท้ายเราจำเป็นต้อง เรียก method register ของ class Twig_Autoloader

ก่อนที่เราจะจบบทความนี้ไปเรามีคำนิยามที่ต้องทำความเข้าใจอยู่ 1 คำคือคำว่า Template โดยในการใข้งาน Template Engine ไม่ว่าจะเป็น Smarty หรือ Twig ก็ตามเราจะทำการสร้างไฟล์ Template ขึ้นมาก่อนหลังจากนั้นเราถึงจะทำการส่ง data หรือ parameter เข้าไปใน Template นั้น โดยการใช้ method render()

ในบทความต่อไปเราจะเรียก Template ขึ้นมาใช้งานใน ตอนที่ 3

การใช้งาน Twig Template Engine ตอนที่ 1

เริ่มต้นจากการทำความรู้จักกับ Template Engine ก่อน จริงๆแล้ว Template Engine มีอยู่ 2 ตัวที่ได้รับความนิยม คือ

  • Smarty
  • Twig

ตัวที่ได้รับความนิยมเป็นตัวแรกๆคือ Smarty แต่หลังจากที่มีการใช้ Twig ใน Symfony 2 เนื่องจากเป็นทีมพัฒนาเดียวกัน เลยทำให้ Twig ได้รับความนิยมสูงขึ้นเรื่อยๆจนกระทั่งมีปรมาณคนใช้ Template Engine ทั้ง 2 ตัวพอๆกัน

มาพูดถึงข้อดีของการใช้ Template Engine กันบ้าง ทำไมเราถึงต้องใช้ Template Engine? มักจะเป็นคำถามที่หลายคนที่เริ่มต้นเรียนรู้ Twig หรือ Smarty มักจะถามเสมอ เพราะเหมือนถูกบังคับให้เรียนรู้ Syntax ใหม่ๆ ทั้งๆที่เราสามารถเขียน PHP ลงในหน้า Page HTML ได้อยู่แล้ว ดังนั้นข้อดีของการมี Template Engine คือ

  • เราสามารถแยก Code ส่วนของ Display หรือ View ออกมาอย่างชัดเจน
  • เราสามารถที่จะแยกคนทำ HTML และ JavaScript กับ คนทำ PHP ออกจากกัน การที่เราสามารถแบ่งงานกันทำได้ทำให้เราสามารถมี Specialist หรือผู้เชี่ยวชาญในแต่ละด้านได้
  • คนที่ทำงานที่ฝั่งของ Display จะไม่ต้องรู้ว่าฐานข้อมูล หรือ Business Logic มีรายละเอียดอะไรบ้าง

เพราะฉะนั้นในยุคที่ต้องการ Application ที่สวยงาม ใช้งานง่าย(ต้องใช้ UI Designer ที่เก่ง) และ Businees Logic ที่ซับซ้อนมากขึ้นเรื่อยๆ(ต้องการคนเขียน PHP ที่เก่ง) ทำให้เราต้องการผู้เชี่ยวชาญทั้ง 2 ด้าน ใน 1 Application ในบทความตอนต่อไปเราจะไปทำความรู้จักการใช้งาน Twig กัน