Node.js : การใช้งาน Express Edge

Node.js : การใช้งาน Express Edge

ในการทำ Web โดยใช้ node.js นั้นเราต้องทำการกำหนดรูปแบบและโครงสร้างของ framework เองและหนึ่งในการพัฒนา web นั้น อีกสิ่งหนึ่งที่เป็นตัวช่วยก็คือ Template Engine ซึ่งในบทความนี้ผมจะใช้ Template Engine อย่างง่ายๆที่มีชื่อว่า Express Edge ซึ่งเรามาดูกันเลยดีกว่าว่ามันใช้งานยังไง

ขั้นแรกหลังจากที่เราสร้าง project แล้วก็ทำการ install express edge โดยใช้คำสั่งปกติคือ

npm install express-edge --save

เมื่อติดตั้ง express edge ใน project เสร็จแล้วต่อไปผมจะทำการสร้าง directory ต่างๆให้มีรูปแบบ web framework ทั่วไปที่มีรูปแบบ MVC นั้นเอง

โดยที่ในบทความนี้จะยังไม่สร้าง directory models เพราะยังไม่ได้ลงรายละเอียดเกี่ยวกับ class ที่เป็น model ซึ่งในตอนนี้ผมได้สร้าง directory หลักๆอยู่ 4 อันคือ

• controllers เพื่อทำการเก็บไฟล์ controller ควบคุมการทำงาน request ต่างๆที่เกิดขึ้นในเว็บ
• views เพื่อเก็บไฟล์ view ต่างๆที่เกี่ยวข้องกับการแสดงผล
• layouts ใน directory views เพื่อเป็นไฟล์ layout โครงสร้างหน้าตาหลักของ web นั้นเอง
• public เพื่อเป็นไฟล์ static ต่างๆเช่น รูปภาพ หรือ css

เมื่อกำหนดโครงสร้างเรียบร้อยแล้วต่อไปผมจะใช้ bootstrap เป็นตัวอย่างของ web ครั้งนี้ ซึ่งผมได้เลือก free template ที่มีชื่อว่า clean blog

สามารถ download ได้จาก url นี้เลยครับ clean-blog

หลังจากที่ download และทำการแตกไฟล์ ก็จะได้ไฟล์ต่างๆของ template นี้ให้ทำการ copy directory ที่เป็น static ไฟล์ไปไว้ที่ directory public ของ project

คือ css, js, img จากนั้นให้ทำการสร้างไฟล์ layout ใน directory layout ที่อยู่ใน view โดยให้ตั้งชื่อไฟล์ว่า main.edge ดังรูปด้านล่าง

หลังจากนั้นทำการสร้างไฟล์ main.edge ใน directory views/layouts เพื่อให้ไฟล์ main.edge เป็นตัว template หลักของ web

โดยให้ทำการ copy code ใน ไฟล์ index.html ที่อยู่ใน directory bootstrap ที่ได้ download มาก่อนหน้านี้

หลังจากนั้นให้ทำการแก้ path อ้างอิง css และ javascript ในไฟล์ main.edge โดยให้เพิ่ม / ไว้ด้านหน้าดังรูป เพื่อให้ node.js สามารถอ้างอิง css ได้

หลังจากในให้มาดูในส่วนของ content ผมจะทำการสร้าง section ขึ้นมาในไฟล์ main.edge โดยเอา div ต่างๆที่เป็นเนื้อหาย้ายไปอยู่อีกไฟล์ ซึ่งการประกาศ section ของ express edge คือ

@!section('content')

โดย ‘content’ จะเป็นชื่อที่เราต้องการ ต่อจากนั้นผมจะสร้างไฟล์ template ขึ้นมาอีก 1 อันไว้จัดการ เนื้อหาที่แสดงมีชื่อว่า index.edge อยู่ใน directory views

มีโค้ดดังนี้

@layout('layouts.main')

@section('content')
<div class="row">
.... เนื้อหาที่ต้องการ.....
 </div>
@endsection

จะทำให้ตอนนี้มีโครงสร้างและไฟล์ดังนี้

หลังจากกำหนดส่วนของ template เสร็จแล้วก็จะเป็นโค้ดในส่วนของ server เพื่อรองรับ request ที่เข้ามาซึ่งอยู่ในไฟล์ index.js

มีโค้ดดังนี้

const express = require('express');
const expressEdge = require('express-edge')

const app = express()

app.use(express.static('public'))
app.use(expressEdge)
app.set('views', `${__dirname}/views`)

app.get('/',(req, res) =>{
    res.render('index')
})

app.listen(8080, ()=>{
    console.log('Start node.js on port 8080')
})

จากโค้ด จะเห็นว่ามีการใช้ express-edge ซึ่งเป็นตัว Template Engine จากนั้นก็มีการกำหนด directory static ที่เก็บ css และรูปภาพคือ public ส่วนการกำหนด directory ไฟล์ view ของ template นั้นก็ set ไว้ที่ directory views ตามโค้ดด้านบนเลยครับ ต่อการนั้นก็กำหนด route ว่าถ้า request เข้ามาที่ root path คือ / ให้ทำการ render ไฟล์ index.edge โดยเราใช้แค่ชื่อไฟล์ก็พอ ไม่ต้องอ้าง path เริ่มต้นเพราะเราได้ทำการ set directory views ไว้แล้ว เพียงแค่ใช้คำสั่ง render เท่านั้น

ก็เป็นอันเสร็จสิ้นในส่วนโค้ด ก่อนจะทำการรันผมจะใช้ nodemon เป็นเพื่อเป็นตัว start โดยให้ทำการ install ก่อนโดยใช้คำสั่ง

npm install nodemon --save

หลังจากทำการ install แล้วให้ทำการแก้ไขไฟล์ package.json มีโค้ดดังนี้

{
  "name": "express_edge",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.4",
    "express-edge": "^1.0.0"
  },
  "devDependencies": {
    "nodemon": "^1.18.7"
  }
}

เลข version อาจจะไม่เหมือนกันแต่ให้สังเกตในส่วนของ

"script":{

"start": "nodemon index.js"
}

ก็เป็นอันจบบทความนี้ครับ

Download Sourcecode