SiamHTML
Published in

SiamHTML

สอนวิธีทำเว็บไซต์ด้วย Express

บทความนี้เราจะมาพูดถึงวิธีการสร้างเว็บไซต์ด้วย Express ซึ่งเป็น framework ตัวหนึ่งที่ใช้ในการเขียน Node.js ครับ เรามาดูกันว่าการเขียนเว็บโดยใช้ Node.js ด้วย Express นั้นมันต้องทำอย่างไรบ้าง ?

Express คืออะไร ?

Express นั้นเป็น framework ของการเขียน application ด้วย Node.js ซึ่งมีความยืดหยุ่นสูงมากครับ เราสามารถเอาไว้สร้างเว็บไซต์ธรรมดาก็ได้ หรือจะใช้ทำ Single Page Application โดยใช้ Express เป็นตัว API Server คอยรับส่งข้อมูลผ่าน RESTFul ก็ได้เช่นกัน

สำหรับการใช้ Express นั้น เราควรจะมีพื้นฐานความรู้เกี่ยวกับ Node.js มาบ้างนะครับ หากใครที่ยังไม่คุ้นเคย ขอแนะนำให้อ่าน 2 บทความด้านล่างนี้ก่อนครับ

วิธีสร้างเว็บไซต์ด้วย Express

Step 1 : เตรียมความพร้อม

เริ่มด้วยการสร้างโฟลเดอร์ myProject ขึ้นมาก่อนครับ จากนั้นก็สร้างไฟล์ package.json ขึ้นมา หรือจะใช้คำสั่ง npm init เพื่อ generate เอาก็ได้ครับ

Step 2 : ติดตั้ง Express

ต่อมาให้เราติดตั้ง Express โดยใช้คำสั่งด้านล่างนี้ครับ

npm install express --save-dev

Step 3 : สร้างไฟล์ app.js

เราจะมาเริ่มสร้างหน้า homepage ให้กับเว็บไซต์ของเราครับ ก่อนอื่นให้เราสร้างไฟล์ app.js ขึ้นมา โดยไฟล์นี้จะถือเป็นไฟล์หลักของเว็บเราเลย มาถึงตรงนี้โฟลเดอร์ของเราจะหน้าตาเป็นแบบนี้ครับ

myProject/
|
|-- app.js
|
|-- node_modules/
|
`-- package.json

ทีนี้ให้เราเพิ่มโค้ดด้านล่างนี้ลงไปในไฟล์ app.js ครับ

var express = require('express');
var app = express();
// ฟังค์ชัน สำหรับรับ request จาก client และส่ง response กลับไปยัง client
// req คือ request และ res คือ response
// res.send('') คือการส่ง response กลับไป
function getHomePage(req, res) {
res.send('<h1>This is homepage.</h1>');
}
// เมื่อ client เข้าถึงหน้า Home Page ของเว็บไซต์ http://localhost:5555/
// app.get(URL, getHomePage)
// URL - คือ PATH ของเว็บไซต์
// getHomePage คือ callback function ที่มี request และ response
app.get('/', getHomePage);
// start server ด้วย port 5555
var server = app.listen(5555, function() {
console.log('Express is running on port 5555.');
});
Step 4 : ลองรันให้เราลองรันเว็บแบบง่ายๆ ที่เขียนโดยใช้ Node.js ด้วย express ด้วยคำสั่งนี้ครับnode app.jsจากนั้นลองเข้าหน้าเว็บไซต์ http://localhost:5555/ ดู เราก็จะเห็นข้อความว่า This is homepage.

Step 5 : สร้างหน้า About ของเว็บไซต์

ต่อมาเราจะทำการเพิ่มหน้า About ให้กับเว็บไซต์ วิธีทำก็ง่ายๆ เลยครับ ให้เราใส่ app.get() เพิ่มได้เลยแบบนี้function getAboutPage(req, res) {
res.send('<h1>This is about page.</h1>');
}
app.get('/about', getAboutPage);

สุดท้ายแล้ว ไฟล์ app.js จะหน้าตาเป็นแบบนี้ครับ
var express = require('express');
var app = express();
// ฟังค์ชัน สำหรับรับ request จาก client และส่ง response กลับไปยัง client
// req คือ request และ res คือ response
// res.send('') คือการส่ง response กลับไป
function getHomePage(req, res) {
res.send('<h1>This is homepage.</h1>');
}
// รับ request จาก client เมื่อ access เข้าหน้า /about และส่ง response กลับ
function getAboutPage(req, res) {
res.send('<h1>This is about page.</h1>');
}
// เมื่อ client เข้าถึงหน้า Home Page ของเว็บไซต์ http://localhost:5555/
// app.get(URL, getHomePage)
// URL - คือ PATH ของเว็บไซต์
// getHomePage คือ callback function ที่มี request และ response
app.get('/', getHomePage);
// call ฟังค์ชัน getAboutPage เมื่อ client เข้าถึงหน้าเว็บ /about
app.get('/about', getAboutPage);
// start server ด้วย port 5555
var server = app.listen(5555, function() {
console.log('Express is running on port 5555.');
});
Step 6 : รันใหม่เมื่อมีการแก้ไขใดๆ อย่าลืมว่าเราจะต้องรัน app.js ใหม่เสมอนะครับ (สามารถหยุดการรันเว็บเดิมด้วยการกด Ctrl + c หรือ control + c)node app.jsจากนั้นลองเข้าหน้าเว็บไซต์ http://localhost:5555/about ดู เราก็จะเห็นข้อความว่า This is about page.

บทสรุป

บทความนี้ก็ถือเป็นพื้นฐานสำหรับการเขียน Node.js ด้วย Express ที่น่าจะพอช่วยให้เห็นภาพกันคร่าวๆ แล้วนะครับ สำหรับ Express นั้น จะเห็นว่าเรายังไม่ได้ลงมือเขียนไฟล์ HTML เลย แต่จะเป็นเพียงแค่การส่ง response เป็น text กลับไปเท่านั้น และยังมีอีกหลายๆ ส่วนที่ยังไม่ได้พูดถึงในบทความนี้ ไม่ว่าจะเป็น Router, Template Engine รวมไปถึง Partials ซึ่งผมจะขอยกไปพูดถึงในบทความต่อๆ ไป รอติดตามอ่านกันได้นะครับ

--

--

--

The collection of articles for front-end developers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Suranart Niamcome

Suranart Niamcome

Lead Engineer @Tencent (Thailand)

More from Medium

Introduction to Koa js

Introduction to Kao js

Complete Tutorial On Redux Using With React JS | Devstringx

Redux Using With React JS |

Upload files to the server using ReactJs+NodeJs with multer package.