express

วิธีใช้ Bootstrap กับ Jade บน Express JS

Bootstrap เป็น CSS Framework ที่ยอดนิยมมากๆ ใครๆก็อยากนำไปใช้งานด้วย วันนี้ผมเลย หยิบมาฝากกันกับวิธี ใช้งานร่วมกับ Template Engine เริ่มต้นของ Express JS อย่าง Jade วิธีการใช้งาน ง่ายมากๆ ลองมาดูกันครับ

express bootstrap

express

Bootstrap And Jade Template

ก่อนที่เราจะเริ่มต้นเขียน Express Application ต่างๆ อยากให้คิดไว้ก่อนเลยว่า จะใช้อะไรบ้าง แล้วก็ดึงลงมาซะทีเดียวเลย เพราะตอนที่คุณกำลังใช้งาน Express พัฒนาระบบ นั้นคุณจะเห็นว่ามันไปได้ไว้มากๆ อ้าว… งั้นเริ่มจากง่ายๆก่อน ผมจะใช้ jquery กับ boot และก็เจ้า font awesome ในการทำงานครั้งนี้ มาติดตั้งแบบวิธีพื้นฐานก่อนครับ

Jade Template นั้นเค้าใช้งาน Layout ทำให้เราสามารถ ที่จะนำไฟล์ resource ต่างๆไปไว้ ในส่วนของ File ที่เป็น Layout ได้ แล้วค่อยทำการ Extends ค่าออกมา ดังนั้นเราก็เอา CSS และ Javascript ทั้งหลายไปใส่ไว้ใน Layout ให้หมดได้เลยครับ

แบบใช้งาน CDN

html
head
link(rel='stylesheet', href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css')
link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css')
script(type='text/javascript', src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js')
script(type='text/javascript', src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js')

Code ของ Jade ให้มองที่ Concept เค้าก็คือการตัดเอา เครื่องหมาย < > ออกไป แล้วก็ไม่ต้องปิด มีแค่บรรทัดเดียวจบ แต่ละ attribute ก็แยก หรือคั่นกันด้วย เครื่องหมาย Comma การเรียกผ่าน Net แบบนี้ จะเหมาะกับคนที่บ้าน หรือว่า Office เน็ตดีๆหน่อย หรือจะเป็นแบบทำบน Online ไปเลย แต่ถ้าอยากจะเอาลงมาในเครื่อง ก็ใช้วิธีปรกติแบบ download ลงมาไว้ในเครื่องก่อนครับ

ในตอนที่เรา Create Project ออกมานั้นทาง Express เค้าจัดการสร้าง Folder สำหรับเก็บไฟล์ Javascript และ Style sheet เอาไว้ให้เราแล้ว เราก็นำไฟล์มาวางไว้ได้เลยครับ

public

public

พอวางแล้วจะเป็นแบบนี้ครับ

public after

public after

ด้านในก็จะเป็น ประมาณนี้

in folder

in folder

พอวางเสร็จแล้วเราก็เอา Code ลงมาใส่ได้เลยครับ

html
head
link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')
link(rel='stylesheet', href='/stylesheets/font-awesome.min.css')
script(type='text/javascript', src='/javascripts/jquery-1.11.1.min.js')
script(type='text/javascript', src='/javascripts/bootstrap.min.js')
body

เท่านี้เองครับ เราก็สามารถ ใช้งาน css framework ได้แล้ว จะใช้งานตัวอื่นๆแทนก็ทำวิธีเดียวกันเลยครับ เราลองมาเรียกดูว่าใช้งาน ได้จริงๆรึเปล่าหน่อยนะครับ

ก่อนอื่นก็อย่าลืม Extends ค่าออกมาจากทาง Layout กันก่อนนะครับ

extends layout

แล้วก็เขียน Code กันได้เลย

block content
div.container
h1= title
p Welcome to #{title}
a(class='btn btn-success', href='www.teerapuch.com') Teerapuch
a.btn.btn-warning Teerapuch
Preview

Preview

เรียบร้อยนะครับ สามารถใช้งานได้ ไม่ติดอะไร การทำงานของ Jade เวลาเราจะใส่ Class เราสามารถทำได้โดยการใส่ . (จุด) เข้าไปเพื่อให้รู้ว่าเป็น class แต่ถ้าจะเป็น id ก็น่าจะเดากันออกนะครับ ก็คือเครื่องหมาย # นั้นแหละครับ จะเห็นว่าในตัวอย่าง ผมได้ทำการเรียก class สำหรับสร้าง Button ขึ้นมาด้วย 2 วิธี ปุ่มแรกที่เป็นสีเขียว ผมเรียกขึ้นมา โดยใช้ a(class=’ ‘)  แบบนี้ก็ใช้ได้ครับ ส่วนแบบที่เป็นสีเหลือง เรียกปรกติคือใช้จุด a.btn ครับ

Jade เป็น Template ที่มีการนิยม นำไปใช้งานเยอะมากตัวหนึ่ง แม้จะไม่ได้มีข้อกำหนด หรือความจำเป็น ว่าเราจะใช้ Template Engine ตัวไหน แต่อย่างในกรณีนี้ ผมเลือกใช้เพราะว่า มันมาคู่กัน กับตัวของ Express ทำให้เราไม่ ต้องไปติดตั้ง อะไรขึ้นมาเพิ่มเติม และมันก็จบการทำงานได้เลย ในตัวของมัน

Link: Express Jade Template

แต่นอกจาก Jade แล้วก็ยังมี Template Engine เจ้าอื่นๆอีกมากให้เราเลือกใช้งานนะครับ ถึงผมอาจจะไม่ได้พูดถึง แต่ก็อยากให้เห็น ผ่านๆตากันบ้าง เพราะถ้ามาทางนี้แล้ว ก็คงต้องใช้งานเครื่องมือ เยอะกว่าการเขียนในแบบเดิมๆนั้นละครับ

HoganJS

HoganJS

อันนี้แค่ชื่อก็ การันตรีได้แล้วนะครับ มาจากค่ายของ Twitter เองเลย
Link: HoganJS

Handlebarsjs

Handlebarsjs

ตัวนี้สาวกของ Ember.js คงคุ้นชินเพราะใช้มาตลอด เป็นสไตล์แบบ Minimal แต่ทรงพลังมากมาย เอาอยู่หมด
Link: Handle Bars

mustache

mustache

น้อยคนนักที่เขียน PHP ระดับใช้งาน Framework จะไม่เคยใช้งาน Mustache ตัวหลักเลยใน Symfony เป็น Template Engine ที่ไม่ธรรมดามากๆเพราะว่ารองรับมันหมดอ่ะ เกือบจะทุกภาษา ทำโปรเจ็ค PHP ต้องใช้ไม่พอ ตอนเขียน Ruby ก็มีอีก พอหนีไปหางู Python ก็ยังจะตามมา ล่าสุดแน่นอน ก็ต้องมาโผล่บน Node ละครับ
Link: Mustache

Underscore js

Underscore js

ไม่พูดถึง Underscore ก็คงจะไม่ได้เพราะค่ายใหญ่ มีสาวกเยอะเต็มอัตราอยู่ ความสามารถหลากหลาย ครบถ้วน มีมากกว่า 100 functions มากอย่างที่ javascript อาจจะต้องใช้ แถมยังหยิบไปใช้กับ Meteor JS ได้ด้วย
Link: Underscorejs

ยังมีอีกเยอะแต่พูดไปก็คงไม่หมด เอาเป็นว่าที่เห็นคนใช้เยอะๆก็จะประมาณนี้นะครับ เดี๋ยวใครที่รอว่าจะมีเรื่องของ Express ต่อไหมติดตามกันได้นะครับ จะไปจนสุดทางกันเลยกับการเขียนด้วย Express อาจจะมีคนสงสัยทำไมไม่พูดถึงเรื่อง MEAN ในเมื่อมันก็ใช้ Express เหมือนกัน ผมว่ามันเป็นแค่การรวมตัวนะครับคือเอา  Mongo, Express, Angular กับ Node มารวมกัน งั้นเราไปรู้จักพลังและวิธีใช้ Express ไปเลยจะได้ใช้งานกันคล่องๆ