หัดเขียน Jade ตอนที่ 1

หลังจากที่เรารู้จักวิธีการใช้งาน jade จากบทความตอนที่แล้ว ในบทความนี้เราจะมาทำความรู้จักการเขียน jade กันต่อ โดยอันดับแรกต้องเริ่มจากโครงสร้างของเอกสาร HTML โดยปกติจะใช้งาน tag เปิดและ tag ปิด แต่ใน jade จะใช้การย่อหน้าแทนดังนั้นโครงสร้างเริ่มต้นของเอกสารจะเป็นรูปแบบดังนี้

ในส่วนของโครงสร้าง HTML จะเป็นตามรูปแบบด้านบน โดยการสร้าง tag จะเป็นไปตามรูปแบบดังนี้

จะเห็นว่าเราจะเริ่มต้นด้วยชื่อ tag เช่น link(….) จะ generate เป็น parameter ใน function แต่ละตัวจะเป็น attribute ต่างๆ เช่นจากใรตัวอย่าง

จะได้ผลลัพธ์ออกมาเป็น

สิ่งที่อยู่ในวงเล็บของ jade จะถูกแตกออกมาเป็น attribute แต่ละตัวของ tag link ซึ่งในการเขียน jade เราจะใช้ pattern แบบนี้ทั้งหมด
และถ้าเราจะใส่ code javascript จะใส่แบบนี้

ใน jade จะมีการใส่ content ใน 2 รูปแบบคือ

ซึ่งเราจะได้ผลลัพธ์แบบบรรทัดเดียว ดังนี้

และอีกรูปแบบคือ

เราจะได้ผลลัพธ์แบบมีการขึ้นบรรทัดใหม่(ต้องใส่ -P เข้าไปตอนที่ พrun command ด้วย) ซึ่งเราจะได้ผลลัพธ์แบบนี้

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

การใข้งาน Jade Template Engine

จริงๆถ้าพูดถึง Template Engine ที่มีอยู่มากมายนับไม่ถ้วน ทั้งแบบที่มากับ Framework(เช่น Razor, Twig, Blade) และมาแบบไม่สนใจใครแบบ jade จริงๆแล้วถ้าพูดถึงปริมาณการใช้งาน Template Engine ถือว่ายังน้อย แต่ก็ถือว่าเพิ่มจากเมื่อก่อนเยอะมาก ข้อดีของ Jade ก็คงจะเหมือนกับ Template Engine ตัวอื่นๆ ซึ่งหลักๆแล้วจะทำให้ Code ที่เป็น HTML นั้นอ่านง่ายขึ้น(เพราะมันเขียนสั้นลง) โดยเฉพาะ Jade เราจะเขียนแบบใช้ indention(การย่อหน้า)แทนการใช้ Tag เปิดและ Tag ปิด แบบที่เราใช้ใน HTML ซึ่งทำให้ Code ของ Jade นั้นอ่านง่ายกว่ามากๆ ลองดูตัวอย่าง Jade เมื่อ เทียบกีบ HTML แบบปกติ ตามรูป

jade

ยิ่งในปัจจุบันไฟล์ HTML มักจำมีขนาดมากขึ้นเรื่อยๆ ทำให้การ maintain ทำได้ลำบากมาขึ้น Template Engine จะมาช่วยแก้ปัญหานี้

คราวนี้เรามาดูวิธีการติดตั้งและใช้งาน Jade กัน โดยเริ่มจากการติดตั้ง เราจะใช้ node package manager(npm) เป็นตัวติดตั้ง ถ้าใครยังไม่มีก็ไปติดต้ัง nodejs กันก่อน แต่ถ้าติดตั้ง nodejs เรียบร้อย เราก็ทำการติดต้ัง jade โดยใช้คำสั่ง

หลังจากนั้นเราจะสามารถใช้งาน jade ในการ transpile(transform + compile) หรือพูดง่ายๆว่าเป็นการแปลงจาก jade ไปเป็น HTML นั่นแหละ โดยไปยัง folder ที่เราเก็บ jade อยู่ แล้ว run คำสั่ง

เราจะได้ ไฟล์ชื่อ index.html โดยไฟล์นี้จะอ่านไม่ค่อยออกเนื่องจาก ยังไม่ได้ทำการจัด format ให้เรา ถ้าเราอยากจะให้ jade จัด format ให้เรา ต้องใส่พารามิเตอร์ -P เข้าไปด้วย ตามนี้

และถ้าเราต้องการให้ทุกครั้งที่เรา save ไฟล์ index.jade ให้ทำการ transpile(แปลงไฟล์ index.html) ใหม่ทุกครั้ง ให้ใส่ -w เพิ่มเข้าไปด้วย

นอกจากนี้เรายังสามารถกำหนด destination folder หรือ folder ปลายทางสำหรับเก็บ ไฟล์ html ที่ได้จากการ transpile ด้วยคำสั่ง

ผลลัพธ์ที่ได้จะถูกนำไปเก็บไว้ที่ folder html ใน directory ปัจจุบัน และนี่ก็เป็นวิธีการติดตั้งและใช้งาน jade เบื้องต้น ในบทความต่อไปเราจะพูดถึงการเอา gulp เข้ามาช่วยให้การ transpile ง่ายขึ้น

การใช้งาน 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 ได้ปกติ