หัดเขียน 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 ง่ายขึ้น

รู้จักการใช้งาน Emmet เบื้องต้น

ในปัจจุบันการเขียน Code HTML จำเป็นต้องรู้จักตัวช่วยอย่าง Emmet เพราะ Emmet จะช่วยทำให้เราสามารถเขียน HTML ได้อย่างรวดเร็วมากขึ้น โดยใช้ Systax ของ CSS ที่เรารู้จักกันเป็นอย่างดีอยู่แล้ว ดังนั้นการเรียนรู้การใช้งาน จึงไม่ใช่เรื่องยาก

ก่อนอื่นมาทำความรู้จักกับ Emmet กันก่อน Emmet จะเป็น Plug-in สำหรับ Text Editor สามารถใช้ได้กับ Text Editor เกือบทุกยี่ห้อบนโลกนี้ ไม่ว่าจะเป็น Dreamwaver, Sublime, Atom, Eclipse หรือแม้กระทั้ง Notepad++ เราสามารถเข้าไป Download plug-in มาติดตั้งได้ที่ emmet.io/downlaod แต่ถ้าเราใช้ Editor ที่สามารถติดตั้ง Package ได้อย่างเช่น Sublime หรือ Atom เราสวามารถเข้าไปติดตั้ง Package ได้จาก Package Manager สำหรับแต่ละตัวได้เลย ซึ่งถ้าเป็นบาง Editor เช่น Atom หรือ Visual Studio Code จะทำการติดตั้ง Emmet มาให้เลย ไม่ต้องไป Download ให้เสียเวลา(สงสัยจะเป็น package ที่ขาดไม่ได้จริงๆ)

หลังจากได้ Emmet มาแล้วคราวนี้เราก็มาดูการใช้งานกัน เราสามารถใช้ Systax ในการเขียน CSS มาใช้ได้ดังนี้

ถ้าเราอยากได้

เราสามารถพิมพิ์

div#container (แล้วกด Tab)

สังเกตว่าเราใช้ # แทน id เหมือนใน CSS

และเช่นเดียวกันถ้าเราอยากได้

เราจะพิมพิ์

div.highlight (แล้วกด Tab)

ในทำนองเดียวกันเราสามารถใช้ “[]” ในการระบุ attribute ได้ นอกจากนี้ยังมี Syntax พิเศษสำหรับเพิ่มข้อความเข้าไปใน Element ด้วย เครื่องหมาย “{}”

เช่นถ้าเราต้องการผลลัพธ์เป็น

;

เราจะพิมพิ์

a[href=some-url]{click here} (แล้วกด Tab)

ส่วนถ้าเราต้องการ element ซ้อน element เราจะใช้ เครื่องหมาย “>”

เช่น ถ้าเราอยากได้ผลลัพธ์

เราจะพิมพิ์

header>h1 (แล้วกด Tab)

เราสามารถซ้อนลงไปกี่ขั้นก็ได้

ส่วนถ้าเราต้องการ

เราจะพิมพิ์

div>label+input (แล้วกด Tab)

และจุดเด่นที่สุดของ Emmet คือเราสามารถระบุจำนวนได้ด้วย เครื่องหมาย “*”

เช่นถ้าเราอยากได้

เราจะพิมพิ์

ul#list>(li.list-item*4) (แล้วกด Tab)

เราใช้ “*” เพื่อบอกว่าต้องการ li ที่มี class เป็น list-item ทั้งหมด 4 items

ลองฝึกใช้งานกันดูนะครับ รับรองว่าจะทำให้การเขียน HTML นั้นง่ายขึ้นจริงๆ และเราจะไม่จำเป็นต้องพึ่ง Design View อีกต่อไป

 

การสร้างเว็บไซต์ด้วย WordPress

ณ ยุคสมัยปัจจุบันที่เต็มไปด้วย Opensource ที่มีประสิทธิภาพมากมาย ในกลุ่มของ Content Management System(CMS) มี Opensource หลายตัวที่ช่วยให้เราสร้างเว็บไซต์โดยที่ไม่ต้องเขียนโปรแกรม ซึ่งตัวที่ได้รับความนิยมมากที่สุดก็คงจะเป็น WordPress

ในบทความนี้เราจะเขียนถึงการสร้างเว็บไซต์แบบง่ายๆด้วย WordPress การใช้งาน WordPress นั้นง่ายมากเพียงแต่ไป Download WordPress Version ล่าสุดมา หลังจากเราทำการติดตั้ง ลงใน Folder Web ของ Webserver ที่เราใช้ อาจเป็น www, wwwroot, htdocs หรือ plublic_html

อันดับแรกหลังจากแตกไฟล์แล้ว เราต้องทำการสร้าง database เปล่าๆ ไว้

หลังจากนั้นเข้าไปที่หน้า admin ที่

หลังจากนั้นระบบจะให้เราทำการเลือก database โดยกรอกค่าต่างๆดังนี้

  1. ชื่อ database ที่เราเพิ่งสร้างขึ้นมา
  2. กำหนด host เป็น localhost
  3. กำหนดค่า username
  4. กำหนดค่า password
  5. prefix อาจเปลี่ยนหรือไม่เปลี่ยนก็ได้ (แนะนำว่าไม่ต้องเปลี่ยน)

ในการใช้งาน CMS หรือ เครื่องมือที่ช่วยสร้างเว็บไซต์แบบง่ายๆนั้น สิ่งที่ต้องระมัดระวังคือ เราจะทำการปรับปรุงหรือแก้ไขให้เฉพาะกับงานที่เฉพาะทางมากๆนั้นทำได้ยากกว่า ดังน้ันถ้าเรามีความต้องการที่ซับซ้อนหรือแตกต่างจากปกติที่ชาวบ้านเค้าทำกัน เราก็ไม่ควรเลือกใช้ CMS เข้ามาช่วย ควรจะเลือกสร้างเว็บไซต์แบบเขียนเองทั้งหมด

พื้นฐานการสร้างเว็บไซต์

สำหรับมือใหม่ที่ยังไม่เคยเรียนรู้เกี่ยวกับการสร้างเว็บไซต์มาก่อนอาจงง เมื่อต้องเริ่มต้นเรียนรู้การสร้างเว็บไซต์ เพราะมีหลายวิชาให้เรียนรู้มาก วันนี้เราจะมาดูภาพรวมกันว่าเราจะต้องเลือกเรียนรู้แต่ละทักษะ และเลือกใช้เครื่องมืออย่างไร

เริ่มต้นจากส่วนประกอบของเว็บไซต์ มี 4 ส่วนหลักๆ

  1. HTML เป็นส่วนของ content ของเว็บไซต์เรา
  2. CSS ทำหน้าที่ตกแต่งเว็บไซต์ของเราให้สวยงาม
  3. JavaScript ทำให้เกิดการตอบโต้กับผู้ใช้งาน เช่นการคลิกปุ่ม เป็นต้น
  4. Server-side Script เป็นการเขียนโปรแกรมบนฝั่ง Server จะใช้เมื่อต้องทำงานกับฐานข้อมูล มีหลายภาษาให้เลือก เช่น PHP, JSP หรือ ASP.net

ใน 4 ส่วนประกอบนี้เราจะเริ่มทำการเรียนรู้ไปทีละ Step เริ่มต้นจาก

  1. HTML ในปัจจุบันการเขียน PHP มีเครื่องมือที่ช่วยให้เราไม่ต้องเข้าใจ HMTL มากนัก แต่การเริ่มต้นที่ดีเราควรจะใช้งานเครื่องมือโดยที่มีความเข้าใจเรื่องของ HTML บ้าง เครื่องมือที่ใช้กันส่วนใหญ่ก็จะเป็น Dreamwaver แนะนำให้เริ่มต้นจากการใช้เครื่องมือก่อน
  2. CSS ส่วนของ CSS ส่วนนี้ให้เริ่มจากการเรียนรู้การใช้งานว่า Style Sheet สามารถกำหนดที่ส่วนไหนของเอกสารได้บ้าง แล้วแต่ละส่วนมีลำดับการทำงานอย่างไร แล้วค่อยเริ่มว่าการกำหนดค่าของ property แต่ละตัวนั้นมีความหมายอย่างไรบ้าง อาจเลือกใช้ Dreamwaver มาช่วย Generate Style Sheet ด้วยก็ได้
  3. JavaScript นั้นเป็นส่วนที่เริ่มต้นในการเขียนโปรแกรมเพราะส่วนของ HTML และ CSS นั้นไม่ได้ใช้ทักษะของการเขียนโปรแกรมเท่าไรนัก ดังนั้นการเรียนรู้ JavaScript ที่ง่ายที่สุดคือการเรียนรู้การใช้งาน Framework ต่างๆ โดยตัวที่ได้รับความนิยมและใช้งานได้ง่ายที่สุดคือ jQuery หลังจากนั้นค่อยเรียนรู้การทำงานของ JavaScript ไปเรื่อยๆ
  4. การเขียน Server-side Script นั้นเริ่มจากการเลือกภาษาก่อน โดยถ้าเป็นมือใหม่ที่ไม่เคยเขียนโปรแกรมมาก่อนแนะนำว่าถ้าไม่เริ่มจาก PHP ก็ให้เป็น ASP.net (Web Forms) ต้องมีวงเล็บไว้ด้วยเพราะยังไม่ควรเริ่มต้นกับ MVC วิธีการเลือกก็ง่ายมากถ้าอยากให้สร้างเว็บไซต์ได้ง่ายๆ ใช้เวลาไม่นานเลือก ASP.net แต่ชีวิตเราจะต้องใช้ Host ที่เป็น Windows Server ตลอดกาล ถ้าเราต้องการที่จะ run ได้ทุกๆ Platform หรือทุกๆ OS ให้เลือกเป็น PHP ส่วนเรื่องของการเขียนก็เริ่มจากหนังสือหรือ Web site ทั่วไป

ถ้าเราผ่านการเรียนรู้ทั้ง 4 ส่วนนี้ การสร้างเว็บไซต์ก็จะไม่ใช่เรื่องใหญ่สำหรับเราอีกต่อไป