Template Inheritance ใน jade template

การสืบทอดคุณสมบัติต่างๆ เป็นวิธีการเขียนโปรแกรมแบบบ Object Oriented ซึ่งทำให้สามารถเขียนโปรแกรมได้รวดเร็ว เพราะสร้างโมดูล หรืองานขึ้นมาชิ้นหนึ่งสามารถนำมาเวียนใช้ได้อีกหลายครั้ง และทำให้เกิดรูปแบบมาตรฐานเดียวกัน

ตัวอย่างง่ายๆ ที่ใช้กันในอดีต ก็คือ เว็บเพจจะแบ่งเป็น ส่วนหัว (Header), ส่วนเนื้อหา (Content) และส่วนท้ายหน้า (Footer) ซึ่งเนื้อหาจะเปลี่ยนหรือแสดงผลในส่วน Content แต่ Header และ Footer จะไม่ค่อยเปลี่ยนแปลง (อาจจะมีเปลี่ยนแปลงบ้าง) โดยแต่ละหน้าจะต้องเหมือนกันถึงจะเกิดความสวยงาม

ใน jade ก็เช่นกัน สามารถสืบทอดจากหน้าอื่นมาไว้ในหน้าของงานใดๆ ก็ได้ และมีวิธีการที่ไม่ซับซ้อน สามารถทำความเข้าใจได้ง่ายๆ

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

ตัวอย่างที่จะพูดถึงวันนี้ประกอบด้วย ไฟล์ layout.jade, index.jade และ main.jade

• layout.jade จะเป็นไฟล์โครงสร้างเริ่มต้นของระบบ
• index.jade เป็นหน้าหลักของ / จะเรียกใช้งาน layout.jade ผ่านคำสั่ง extends layout
• maint.jade เป็นอีกหน้าหนึ่ง /main จะเรียกใช้งาน layout.jade ผ่าน index.jade อีกครั้งหนึ่ง โดยจะเรียกด้วยคำสั่ง extends layout และ extends index ตามลำดับ

ภายใน layout จะกำหนดโครงสร้างไว้เป็น block เช่น block header, block script, block content และ block footer การใช้งาน block ในไฟล์ jade อื่นๆ จะมี 3 แบบ คือ Replace, Append และ Prepend

Replace 

การเรียกใช้ Block แบบ Replace จะแทนที่ข้อมูลใน Block เดิมด้วย ข้อมูลในที่เรียกใช้งานล่าสุด เช่น

layout.jade

...

block content

    p Content from layout.jade

...

index.jade

extends layout

block content

    p Content from index.jade

เมื่อสั่งรันเว็บเพจแล้วหน้าจอจะแสดงข้อความ Content from index.jade เพราะเป็นการเรียกแบบ Replace

Append

การเรียกแบบ Append จะไปต่อท้าย Block ที่เรียก เช่น

index.jade

extends layout

block append content

    p Content from index.jade

เมื่อสั่งรันหน้าเว็บแล้วจะมีข้อความสองบรรทัด คือ 

Content from layout.jade 

Content from index.jade

Prepend

การเรียกแบบเพิ่มในบรรทัดแรกของ Block

index.jade

extends layout

block prepend content

    p Content from index.jade

เมื่อสั่งรันเว็บเพจจะได้ข้อความสองบรรทัดกลับกันกับ append คือ

Content from index.jade 

Content from replace.jade

หน้าจอการเรียกใช้ block แบบต่างๆ

หน้าจอที่ได้จาก index.jade (2) โดยเรียก layout.jade (1) ตอนเริ่มต้น

หน้าจอ main.jade (3, 4) เรียกใช้ layout.jade (1) และ index.jade (2) ในตอนแรกของไฟล์

อธิบายเพิ่มเติมการเรียกจากส่วนต่างๆ ตามลำดับตัวเลขในวงเล็บ

รายละเอียดใน View source page ทำให้มองเห็นลำดับได้ง่ายขึ้น

จากข้อมูลและรูปภาพข้างบนจะเห็นได้ว่า jade template นั้นง่ายต่อการใช้งาน และเรียกใช้จากเว็บอื่นๆ ได้ง่ายตามไปด้วย


ตัวอย่าง Source code:

app.js

var express = require('express'); 

var app = express(); 

// Set template path and render engine, not necessary.
app.set('views', __dirname + '/views'); 

app.set('view engine', 'jade'); 

app.locals.pretty = true; 

app.get('/', function(req, res) { 

  res.render('index.jade');}); 

  app.get('/main', function(req, res){ 

  res.render('main.jade'); 

}); 

// Start server 

app.listen(3030);

layout.jade

!!!html 

head 

  block stylesheet 

  block script      

      script <!-- script from layout.jade (1) -->  

body    

  block content 

  h1 Hello from layout.jade (1)

index.jade

extends layout 

block stylesheet 

  <!-- Overwrite to block stylesheet (2) -->  

  link(href='bootstrap.min.css' rel='stylesheet') 

block prepend script  

  script <!-- prepend to [block script](2) --> 

block append content   

  h2 Hello from index.jade (2, append)

main.jade

extends layout 

extends index 

block append content  

  p Append from main.jade (3, append) 

block prepend content 

  p Prepend from main (4, prepend)

--------------------

อ้างอิง:
สามารถเข้าไปดูตัวอย่างได้ที่:
http://runnable.com/Umoh1jpWr_o6ABKm/extends-and-blocks-in-jade-for-node-js

ทำ View Source ให้สวยงามใน Node.js

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

แต่อันที่จริงแล้ว source code ของเว็บเพจ เป็นตัวช่วยให้เราสามารถค้นหาสิ่งผิดปกติ หรือช่วยพัฒนาให้โปรแกรมดีขึ้นได้ ขึ้นอยู่กับว่าจะใช้หรือเปล่า

หน้าจอ View Source ที่ยังไม่ได้จัดเรียงใหม่ ทำให้ดูยาก

หน้าจอ View Source ที่จัดเรียงใหม่แล้ว ทำให้สามารถตรวจสอบได้ง่าย

สำหรับ Node.js เป็น Platform ของ JavaScript ที่ทำให้เป็น Web Application ทำงานผ่าน Chrome JavaScript Runtime โดยมี Express เป็น Web Application Framework ช่วยลดการเขียนโค้ดโปรแกรมได้เป็นอย่างมาก

Node.js 

Express

ที่ขาดไม่ได้ คือ Jade ซึ่งเป็นตัวกลางในการเขียนโค้ด HTML ให้ง่าย กระทัดรัดไม่รกรุงรังเหมือนการเขียน HTML โดยตรง จริงๆ แล้วยังมี ejs อีกตัวหนึ่งที่เป็น html template แต่จะเขียนแบบ html ซึ่งต่างจาก jade โดย jade นั้นจะใช้ Indent เป็นตัวแยกหมวดหมู่ ซึ่งต้องระมัดระวังพอควร แต่อย่างไรก็ตาม jade จะแสดงความผิดพลาดออกทางหน้าจอให้สามารถแก้ไขได้ง่ายๆ

jade-language

EJS, JavaScript Template

การจัดการ Source Code ให้อ่านง่ายๆ นั้นไม่ได้ทำอะไรยุ่งยากเลย เพียงแต่เพิ่มคำสั่งเข้าไปใน Express เพียงบรรทัดเดียวหรือคำสั่งเดียว คือ

app.locals.pretty = true;

โดย app นั้นเป็น object ของ Express

var express = require('express'); 

... 

var app = express(); 

...

app.locals.pretty = true;

ง่ายๆ แค่นี้แหละก็ทำให้การแก้ไขโปรแกรมทำได้ง่ายๆ ไม่ยุ่งยากแล้วครับ...

ข้อความเตือน จาก Jade, Warning: missing space before text

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

jade ถือว่าเป็น indent format การเขียนใช้การเว้นวรรคเป็นตัวกำหนดรูปแบบ ซึ่งถือว่าสำคัญเลยทีเดียว
เพราะ jade ยอมรับการเว้นวรรคทั้ง spacebar หรือ tab แต่จะใช้เพียงอย่างใดอย่างหนึ่งทั้งไฟล์ จะผสมกันไม่ได้

แต่กระนั้นก็ไม่ต้องกังวล เพราะถ้าเผลอใช้เมื่อใด เมื่อรันไฟล์ jade ก็จะมีข้อความบอก และบอกด้วยว่า บรรทัดไหนที่มีปัญหา

จากรูปนี้ผู้เขียนลองเปลี่ยนจาก tab ให้เป็น space ดังในรูปด้านล่าง

ในบรรทัดที่ 34 จะมีทั้ง tab (ขีดยาว) และ space (จุด 4 จุด)

นอกจากนี้ jade ยังรายงานผลการเตือนที่ไม่มีผลกระทบมากต่อระบบไปที่ console ที่รันโปรแกรมครั้งแรก (npm start)

โดยที่ console มีคำเตือน

Warning: missing space before text for line 50 of jade file "/Users/yothinin/ex/views/addcategories.jade"

เมื่อไปดูในบรรทัดที่ 50 จะพบว่ามี tab อยู่หลัง input ด้วย เมื่อลบออกคำเตือนก็หายไป

นี่แหละคือ ข้อควรระวังเวลาเขียนไฟล์ jade ซึ่งต้องเคร่งครัดเรื่องระเบียบการเขียนเป็นอย่างมาก ไม่เหมือน html ที่เขียนวางไว้ตรงไหน เยื้องอย่างไร จะ tab หรือ space จะเพิ่มมากหรือน้อยอย่างไรก็ได้ ทำให้ไฟล์ html ค่อนข้างเละเทะ ไม่เป็นระเบียบ (สำหรับบางคน)

ใช้ pool mysql แล้วหน้าจอค้าง

หลังจากที่พอจะรู้เรื่อง Node.js, Express และ Jade บ้างแล้ว ก็เริ่มลงมือทำอะไรเล่นๆ เพื่อฝึกซ้อมฝีมือ ยิ่งใช้ไปยิ่งหลงรัก jade พอสมควร เพราะช่วยลดขยะ html ลงได้เยอะมาก ดูเรียบร้อยเป็นสัตว์ส่วนแก้ไขก็ง่าย แต่ยังไม่ได้ลอง คือ ใช้งาน jQuery ร่วมกับ jade คงต้องผ่านขั้นตอนของ ลองใช้งานฐานข้อมูลไปก่อน

การติดต่อผ่าน MySQL ทำได้หลายวิธี แต่สำหรับการติดต่อแบบ Multi Used เป็นการติดต่อฐานข้อมูลเพียงครั้งเดียวแล้วสามารถเรียกใช้งานได้หลายครั้งไม่ต้องติดต่อฐานข้อมูลบ่อยๆ

ตัวอย่าง

  var mysql =  require('mysql');                  
  var pool =  mysql.createPool({
 host : “hostName”,
 user : “username”,
 password: “password”
  }); 

การเรียกใช้งาน:

pool.getConnection(function(err, connection){
  connection.query( “select * from table1”,  function(err, rows){
   if(err) {
    throw err;
   }else{
    console.log( rows );
   }
  });
  
  connection.release();
});

ปัญหา:
เมื่อใช้ไปสักพักแล้วเกิดอาการหน้าจอค้าง เหมือนกำลังทำงานอยู่ เมื่อตรวจสอบไปที่ MySQL แล้วพบว่ามี process ค้างอยู่เป็นจำนวนมาก ตามที่ส่งเขาไป

แก้ไขปัญหา:
ปัญหาข้างต้นยังแก้ไม่ได้ แต่ลองเปลี่ยนวิธีการใช้งาน pool ผ่าน mysql-pool

ติดตั้ง:

npm install mysql-pool
npm install mysql@0.9.6 (แก้ไข Error ในเวอร์ชันใหม่)

เรียกใช้งาน:

var MySQLPool = require("mysql-pool").MySQLPool;
var pool = new MySQLPool({
  poolSize: 4,
  user:     'root',
  password: 'root',
  database: 'test'
});

pool.query("SELECT 'Hello, World!' AS hello", function(err, rows, fields) {
  if(err) throw err;
  console.log(rows[0].hello);
});

ตอนนี้ลองใช้งานดูแล้วยังไม่พบปัญหาของหน้าจอค้าง แต่ยังไม่มีเวลาลงลึกว่าเป็นเพราะเหตุใด โดยแบบหลังจะกำหนด poolSize = 4 ซึ่งอาจจะมีส่วนเกี่ยวข้อง เพราะแบบแรกก็มีออฟชันกำหนดตัวหนึ่งคือ

var connection =  mysql.createConnection( { multipleStatements: true } );

อีกสักพักจะได้ลองกลับมาทดสอบอีกครั้งหนึ่ง ตอนนี้ขอเดินหน้าไปก่อนครับ...

ข้อมูล:
https://github.com/Kijewski/node-mysql-pool
http://stackoverflow.com/questions/14070188/getting-error-while-running-node-mysql-tutorial
http://www.thegeekstuff.com/2014/01/mysql-nodejs-intro/